@burdenoff/microfe-coolandlovely 2026.624.1 → 2026.625.2

package/dist/coolandlovely/pages/common/HelpSupportPage.js

@@ -1,10 +1,12 @@
 import { useCoolAndLovely as e } from "../../context/CoolAndLovelyContext.js";
 import { cn as t } from "../../utils/cn.js";
 import { PageLayout as n } from "../../components/PageLayout.js";
-import { formatDate as r } from "../../utils/formatters.js";
-import { useMemo as i, useState as a } from "react";
-import { AlertCircle as ee, AlertTriangle as o, BookOpen as s, CheckCircle2 as c, ChevronDown as l, ChevronUp as te, Circle as u, CircleDot as d, Clock as f, CreditCard as p, ExternalLink as ne, FileText as re, HelpCircle as ie, Info as m, Lightbulb as ae, Mail as h, MessageCircle as g, MessageSquare as _, Phone as v, PhoneCall as y, Search as b, Send as oe, Shield as x, ShoppingBag as S, Tag as se, ThumbsUp as C, Ticket as w, TrendingUp as T, Truck as E, User as D, Wrench as O, X as k, XCircle as A } from "lucide-react";
+import { EmptyState as r } from "../../components/EmptyState.js";
+import { formatDate as i } from "../../utils/formatters.js";
+import { useMemo as a, useState as o } from "react";
+import { AlertCircle as ee, AlertTriangle as s, BookOpen as te, CheckCircle2 as c, ChevronDown as ne, ChevronUp as re, Circle as l, CircleDot as u, Clock as d, CreditCard as f, ExternalLink as ie, FileText as p, HelpCircle as m, Info as ae, Lightbulb as oe, Mail as h, MessageCircle as g, MessageSquare as _, Phone as v, PhoneCall as y, Search as se, Send as ce, Shield as b, ShoppingBag as x, Tag as S, ThumbsUp as C, Ticket as w, TrendingUp as T, Truck as E, User as D, Wrench as O, X as k, XCircle as A } from "lucide-react";
 import { Fragment as j, jsx as M, jsxs as N } from "react/jsx-runtime";
+import { GlassCard as le, PagePurpose as ue } from "@burdenoff/fe-libs/ui";
 //#region src/coolandlovely/pages/common/HelpSupportPage.tsx
 var P = [
 	"Account & Profile",
@@ -15,62 +17,62 @@ var P = [
 	"Technical Issues",
 	"Billing & Refunds",
 	"Privacy & Security"
-], F = [
+], de = [
 	{
 		label: "Getting Started",
-		icon: s,
+		icon: te,
 		description: "New to CoolAndLovely? Start here",
-		color: "bg-blue-500/10 text-blue-600 dark:text-blue-400"
+		color: "bg-accent-blue-subtle/10 text-accent-blue"
 	},
 	{
 		label: "Orders & Delivery",
-		icon: S,
+		icon: x,
 		description: "Placing, tracking, and cancelling orders",
-		color: "bg-green-500/10 text-green-600 dark:text-green-400"
+		color: "bg-status-success-bg-subtle/10 text-status-success-text"
 	},
 	{
 		label: "Payments & Billing",
-		icon: p,
+		icon: f,
 		description: "Payment methods, refunds, and invoices",
-		color: "bg-purple-500/10 text-purple-600 dark:text-purple-400"
+		color: "bg-accent-purple-subtle/10 text-accent-purple"
 	},
 	{
 		label: "Account & Profile",
 		icon: D,
 		description: "Manage your account and settings",
-		color: "bg-orange-500/10 text-orange-600 dark:text-orange-400"
+		color: "bg-accent-orange-subtle/10 text-accent-orange"
 	},
 	{
 		label: "Cart Owners",
 		icon: O,
 		description: "Running your cart business",
-		color: "bg-teal-500/10 text-teal-600 dark:text-teal-400"
+		color: "bg-accent-teal-subtle/10 text-accent-teal"
 	},
 	{
 		label: "Workers & Delivery",
 		icon: E,
 		description: "Delivery partner information",
-		color: "bg-indigo-500/10 text-indigo-600 dark:text-indigo-400"
+		color: "bg-accent-indigo-subtle/10 text-accent-indigo"
 	},
 	{
 		label: "Investments",
 		icon: T,
 		description: "Investment opportunities and returns",
-		color: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
+		color: "bg-status-success-bg-subtle/10 text-status-success-text"
 	},
 	{
 		label: "Security & Privacy",
-		icon: x,
+		icon: b,
 		description: "Data protection and safety",
-		color: "bg-red-500/10 text-red-600 dark:text-red-400"
+		color: "bg-status-error-bg-subtle/10 text-status-error-text"
 	},
 	{
 		label: "Technical Issues",
-		icon: o,
+		icon: s,
 		description: "App issues and troubleshooting",
-		color: "bg-amber-500/10 text-amber-600 dark:text-amber-400"
+		color: "bg-status-warning-bg-subtle/10 text-status-warning-text"
 	}
-], I = [
+], F = [
 	{
 		type: "email",
 		label: "Email Support",
@@ -103,12 +105,12 @@ var P = [
 		responseTime: "2-4 hours",
 		icon: _
 	}
-], ce = [
+], fe = [
 	{
 		id: "faq-001",
 		category: "Account & Profile",
 		question: "How do I create an account on CoolAndLovely?",
-		answer: "You can create an account by clicking the \"Sign Up\" button on the homepage. You'll need to provide your name, email address, phone number, and choose your role (Customer, Cart Owner, Worker, or Investor). After verification via OTP, your account will be activated immediately.",
+		answer: "You can create an account by clicking the\"Sign Up\" button on the homepage. You'll need to provide your name, email address, phone number, and choose your role (Customer, Cart Owner, Worker, or Investor). After verification via OTP, your account will be activated immediately.",
 		helpful: 142,
 		tags: [
 			"account",
@@ -196,7 +198,7 @@ var P = [
 		id: "faq-008",
 		category: "Cart Owners",
 		question: "What commission does CoolAndLovely charge?",
-		answer: "CoolAndLovely charges a commission of 15-20% on each order, depending on your cart category and monthly order volume. Higher volume cart owners get reduced rates. This includes payment processing, marketing support, customer acquisition, and platform maintenance. You can view the detailed commission structure in your dashboard under \"Finances\".",
+		answer: "CoolAndLovely charges a commission of 15-20% on each order, depending on your cart category and monthly order volume. Higher volume cart owners get reduced rates. This includes payment processing, marketing support, customer acquisition, and platform maintenance. You can view the detailed commission structure in your dashboard under\"Finances\".",
 		helpful: 94,
 		tags: [
 			"commission",
@@ -222,7 +224,7 @@ var P = [
 		id: "faq-010",
 		category: "Delivery & Workers",
 		question: "How do I become a delivery worker?",
-		answer: "Apply through the \"Join as Worker\" section on the app. You'll need a valid driving license, vehicle registration (bike/scooter), Aadhaar card, PAN card, and a smartphone with GPS. After document verification and background check (3-5 days), you'll receive online training and can start accepting delivery requests.",
+		answer: "Apply through the\"Join as Worker\" section on the app. You'll need a valid driving license, vehicle registration (bike/scooter), Aadhaar card, PAN card, and a smartphone with GPS. After document verification and background check (3-5 days), you'll receive online training and can start accepting delivery requests.",
 		helpful: 78,
 		tags: [
 			"worker",
@@ -299,7 +301,7 @@ var P = [
 		id: "faq-016",
 		category: "Billing & Refunds",
 		question: "How do I request a refund?",
-		answer: "Refunds can be requested within 24 hours of order placement if the order hasn't been prepared. Go to \"My Orders\" > Select the order > \"Request Refund\". You'll need to select a reason. Refunds for quality issues can be raised within 2 hours of delivery. Refunds are processed within 3-5 business days to your original payment method.",
+		answer: "Refunds can be requested within 24 hours of order placement if the order hasn't been prepared. Go to\"My Orders\" > Select the order > \"Request Refund\". You'll need to select a reason. Refunds for quality issues can be raised within 2 hours of delivery. Refunds are processed within 3-5 business days to your original payment method.",
 		helpful: 167,
 		tags: [
 			"refund",
@@ -360,7 +362,7 @@ var P = [
 			"data"
 		]
 	}
-], le = [
+], I = [
 	{
 		id: "ticket-001",
 		subject: "Payment failed but amount deducted",
@@ -472,55 +474,55 @@ var P = [
 		views: 4321
 	}
 ];
-function ue(e) {
+function R(e) {
 	switch (e) {
-		case "open": return u;
-		case "in-progress": return d;
+		case "open": return l;
+		case "in-progress": return u;
 		case "resolved": return c;
 		case "closed": return A;
 	}
 }
-function R(e) {
+function z(e) {
 	switch (e) {
-		case "open": return "bg-blue-500/10 text-blue-600 dark:text-blue-400";
-		case "in-progress": return "bg-amber-500/10 text-amber-600 dark:text-amber-400";
-		case "resolved": return "bg-green-500/10 text-green-600 dark:text-green-400";
+		case "open": return "bg-accent-blue-subtle/10 text-accent-blue";
+		case "in-progress": return "bg-status-warning-bg-subtle/10 text-status-warning-text";
+		case "resolved": return "bg-status-success-bg-subtle/10 text-status-success-text";
 		case "closed": return "bg-bg-sunken text-text-secondary";
 	}
 }
-function z(e) {
+function B(e) {
 	switch (e) {
-		case "urgent": return "bg-red-500/10 text-red-600 dark:text-red-400";
-		case "high": return "bg-orange-500/10 text-orange-600 dark:text-orange-400";
-		case "medium": return "bg-blue-500/10 text-blue-600 dark:text-blue-400";
+		case "urgent": return "bg-status-error-bg-subtle/10 text-status-error-text";
+		case "high": return "bg-accent-orange-subtle/10 text-accent-orange";
+		case "medium": return "bg-accent-blue-subtle/10 text-accent-blue";
 		case "low": return "bg-bg-sunken text-text-secondary";
 	}
 }
-function B(e) {
+function pe(e) {
 	return e.replace("-", " ").replace(/\b\w/g, (e) => e.toUpperCase());
 }
 function V() {
-	let { currentUser: s } = e(), [u, d] = a("faq"), [p, g] = a(""), [y, x] = a(""), [S, T] = a(null), [E, D] = a(ce), [O, A] = a(le), [V, H] = a(!1), [U, W] = a(!1), [G, K] = a(""), [q, J] = a(""), [Y, X] = a({
+	let { currentUser: te } = e(), [l, u] = o("faq"), [f, g] = o(""), [y, b] = o(""), [x, T] = o(null), [E, D] = o(fe), [O, A] = o(I), [V, H] = o(!1), [U, W] = o(!1), [G, K] = o(""), [q, J] = o(""), [Y, X] = o({
 		subject: "",
 		category: "",
 		priority: "medium",
 		description: ""
-	}), Z = i(() => E.filter((e) => {
-		let t = !p || e.question.toLowerCase().includes(p.toLowerCase()) || e.answer.toLowerCase().includes(p.toLowerCase()) || e.tags.some((e) => e.toLowerCase().includes(p.toLowerCase())), n = !y || e.category === y;
+	}), Z = a(() => E.filter((e) => {
+		let t = !f || e.question.toLowerCase().includes(f.toLowerCase()) || e.answer.toLowerCase().includes(f.toLowerCase()) || e.tags.some((e) => e.toLowerCase().includes(f.toLowerCase())), n = !y || e.category === y;
 		return t && n;
 	}), [
 		E,
-		p,
+		f,
 		y
-	]), Q = i(() => ({
+	]), Q = a(() => ({
 		open: O.filter((e) => e.status === "open").length,
 		inProgress: O.filter((e) => e.status === "in-progress").length,
 		resolved: O.filter((e) => e.status === "resolved").length,
 		closed: O.filter((e) => e.status === "closed").length,
 		total: O.length
-	}), [O]), de = (e) => {
+	}), [O]), me = (e) => {
 		T((t) => t === e ? null : e);
-	}, fe = (e) => {
+	}, he = (e) => {
 		D((t) => t.map((t) => t.id === e ? {
 			...t,
 			helpful: t.helpful + 1
@@ -540,7 +542,7 @@ function V() {
 				alert("Live chat will be available soon!");
 				break;
 		}
-	}, pe = () => {
+	}, ge = () => {
 		if (J(""), K(""), !Y.subject.trim()) {
 			J("Please enter a subject for your ticket.");
 			return;
@@ -570,13 +572,13 @@ function V() {
 				category: "",
 				priority: "medium",
 				description: ""
-			}), W(!1), H(!1), K("Support ticket created successfully! Our team will respond within 24 hours."), d("tickets"), setTimeout(() => K(""), 5e3);
+			}), W(!1), H(!1), K("Support ticket created successfully! Our team will respond within 24 hours."), u("tickets"), setTimeout(() => K(""), 5e3);
 		}, 1e3);
-	}, me = [
+	}, _e = [
 		{
 			id: "faq",
 			label: "FAQ",
-			icon: ie
+			icon: m
 		},
 		{
 			id: "contact",
@@ -594,7 +596,7 @@ function V() {
 		description: "Find answers, contact support, or track your requests",
 		children: [
 			G && /* @__PURE__ */ N("div", {
-				className: "mb-4 flex items-center gap-2 rounded-lg border border-green-500/30 bg-green-500/10 px-4 py-3 text-sm text-green-700 dark:text-green-300",
+				className: "mb-4 flex items-center gap-2 rounded-lg border border-status-success-border/30 bg-status-success-bg-subtle/10 px-4 py-3 text-sm text-status-success-text",
 				children: [
 					/* @__PURE__ */ M(c, { className: "h-4 w-4 shrink-0" }),
 					G,
@@ -606,22 +608,29 @@ function V() {
 					})
 				]
 			}),
-			/* @__PURE__ */ M("section", {
+			/* @__PURE__ */ M(ue, {
 				className: "mb-6",
+				icon: /* @__PURE__ */ M(m, { className: "h-4 w-4" }),
+				children: "Stuck or have a question? Start by searching our FAQs and help topics for an instant answer. If you still need a hand, contact support or raise a ticket right here and track its progress — help is always one step away."
+			}),
+			/* @__PURE__ */ M(le, {
+				treatment: "glass",
+				glow: !0,
+				className: "mb-6 p-4",
 				children: /* @__PURE__ */ N("div", {
 					className: "relative",
 					children: [
-						/* @__PURE__ */ M(b, { className: "absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-text-secondary" }),
+						/* @__PURE__ */ M(se, { className: "absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-text-secondary" }),
 						/* @__PURE__ */ M("input", {
 							type: "text",
-							value: p,
+							value: f,
 							onChange: (e) => {
-								g(e.target.value), u !== "faq" && d("faq");
+								g(e.target.value), l !== "faq" && u("faq");
 							},
 							placeholder: "Search help articles, FAQs, and more...",
 							className: "w-full rounded-lg border border-border-subtle bg-bg-surface py-3 pl-10 pr-10 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 						}),
-						p && /* @__PURE__ */ M("button", {
+						f && /* @__PURE__ */ M("button", {
 							type: "button",
 							onClick: () => g(""),
 							className: "absolute right-3 top-1/2 -translate-y-1/2 text-text-secondary hover:text-text-primary",
@@ -637,12 +646,12 @@ function V() {
 					children: "Browse Help Topics"
 				}), /* @__PURE__ */ M("div", {
 					className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3",
-					children: F.map((e) => {
+					children: de.map((e) => {
 						let n = e.icon;
 						return /* @__PURE__ */ N("button", {
 							type: "button",
 							onClick: () => {
-								x(e.label === y ? "" : e.label), d("faq");
+								b(e.label === y ? "" : e.label), u("faq");
 							},
 							className: t("flex items-start gap-3 rounded-lg border bg-bg-surface p-4 text-left transition-all hover:shadow-sm", y === e.label ? "border-primary ring-1 ring-primary" : "border-border-subtle"),
 							children: [/* @__PURE__ */ M("div", {
@@ -663,12 +672,12 @@ function V() {
 				className: "mb-6",
 				children: /* @__PURE__ */ M("div", {
 					className: "flex space-x-1 bg-bg-sunken p-1 rounded-lg w-full sm:w-fit",
-					children: me.map((e) => {
+					children: _e.map((e) => {
 						let n = e.icon;
 						return /* @__PURE__ */ N("button", {
 							type: "button",
-							onClick: () => d(e.id),
-							className: t("flex flex-1 sm:flex-none items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors", u === e.id ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-secondary hover:text-text-primary"),
+							onClick: () => u(e.id),
+							className: t("flex flex-1 sm:flex-none items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors", l === e.id ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-secondary hover:text-text-primary"),
 							children: [
 								/* @__PURE__ */ M(n, { className: "h-4 w-4" }),
 								/* @__PURE__ */ M("span", { children: e.label }),
@@ -681,7 +690,7 @@ function V() {
 					})
 				})
 			}),
-			u === "faq" && /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ N("div", {
+			l === "faq" && /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ N("div", {
 				className: "mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
 				children: [/* @__PURE__ */ N("p", {
 					className: "text-sm text-text-secondary",
@@ -699,7 +708,7 @@ function V() {
 							}),
 							/* @__PURE__ */ M("button", {
 								type: "button",
-								onClick: () => x(""),
+								onClick: () => b(""),
 								className: "ml-1 text-primary hover:underline",
 								children: "(clear)"
 							})
@@ -707,7 +716,7 @@ function V() {
 					]
 				}), /* @__PURE__ */ N("select", {
 					value: y,
-					onChange: (e) => x(e.target.value),
+					onChange: (e) => b(e.target.value),
 					className: "rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
 					children: [/* @__PURE__ */ M("option", {
 						value: "",
@@ -720,12 +729,12 @@ function V() {
 			}), Z.length > 0 ? /* @__PURE__ */ M("div", {
 				className: "space-y-3",
 				children: Z.map((e) => {
-					let n = S === e.id;
+					let n = x === e.id;
 					return /* @__PURE__ */ N("div", {
 						className: "rounded-lg border border-border-subtle bg-bg-surface overflow-hidden",
 						children: [/* @__PURE__ */ N("button", {
 							type: "button",
-							onClick: () => de(e.id),
+							onClick: () => me(e.id),
 							className: "flex w-full items-start justify-between gap-3 px-4 py-4 text-left hover:bg-accent/50 transition-colors",
 							children: [/* @__PURE__ */ N("div", {
 								className: "flex-1 min-w-0",
@@ -742,7 +751,7 @@ function V() {
 									className: t("text-sm", n ? "font-semibold text-text-primary" : "font-medium text-text-primary"),
 									children: e.question
 								})]
-							}), M(n ? te : l, { className: "h-4 w-4 text-text-secondary shrink-0 mt-1" })]
+							}), M(n ? re : ne, { className: "h-4 w-4 text-text-secondary shrink-0 mt-1" })]
 						}), n && /* @__PURE__ */ N("div", {
 							className: "border-t border-border-subtle px-4 pb-4 pt-3",
 							children: [/* @__PURE__ */ M("p", {
@@ -754,12 +763,12 @@ function V() {
 									className: "flex flex-wrap gap-1.5",
 									children: e.tags.map((e) => /* @__PURE__ */ N("span", {
 										className: "inline-flex items-center gap-1 rounded-full bg-bg-sunken px-2 py-0.5 text-xs text-text-secondary",
-										children: [/* @__PURE__ */ M(se, { className: "h-2.5 w-2.5" }), e]
+										children: [/* @__PURE__ */ M(S, { className: "h-2.5 w-2.5" }), e]
 									}, e))
 								}), /* @__PURE__ */ N("button", {
 									type: "button",
 									onClick: (t) => {
-										t.stopPropagation(), fe(e.id);
+										t.stopPropagation(), he(e.id);
 									},
 									className: "flex items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-text-secondary hover:bg-accent hover:text-text-primary transition-colors",
 									children: [
@@ -773,29 +782,20 @@ function V() {
 						})]
 					}, e.id);
 				})
-			}) : /* @__PURE__ */ N("div", {
-				className: "flex flex-col items-center justify-center rounded-lg border border-border-subtle bg-bg-surface py-12",
-				children: [
-					/* @__PURE__ */ M(b, { className: "h-12 w-12 text-text-secondary/50 mb-3" }),
-					/* @__PURE__ */ M("h3", {
-						className: "text-base font-semibold text-text-primary mb-1",
-						children: "No FAQs found"
-					}),
-					/* @__PURE__ */ M("p", {
-						className: "text-sm text-text-secondary mb-3",
-						children: "Try adjusting your search or browse different categories"
-					}),
-					/* @__PURE__ */ M("button", {
-						type: "button",
-						onClick: () => {
-							g(""), x("");
-						},
-						className: "text-sm font-medium text-primary hover:underline",
-						children: "Clear all filters"
-					})
-				]
+			}) : /* @__PURE__ */ M(r, {
+				illustration: "empty-search",
+				title: "No FAQs found",
+				description: "Try adjusting your search or browse different categories.",
+				action: /* @__PURE__ */ M("button", {
+					type: "button",
+					onClick: () => {
+						g(""), b("");
+					},
+					className: "text-sm font-medium text-primary hover:underline",
+					children: "Clear all filters"
+				})
 			})] }),
-			u === "contact" && /* @__PURE__ */ N("div", {
+			l === "contact" && /* @__PURE__ */ N("div", {
 				className: "space-y-6",
 				children: [
 					/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("h2", {
@@ -803,10 +803,10 @@ function V() {
 						children: "Get in Touch"
 					}), /* @__PURE__ */ M("div", {
 						className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
-						children: I.map((e) => {
+						children: F.map((e) => {
 							let n = e.icon;
 							return /* @__PURE__ */ M("div", {
-								className: "rounded-lg border border-border-subtle bg-bg-surface p-5",
+								className: "rounded-lg border border-border-seam bg-bg-surface p-5 bg-gloss-card shadow-pop",
 								children: /* @__PURE__ */ N("div", {
 									className: "flex items-start gap-4",
 									children: [/* @__PURE__ */ M("div", {
@@ -825,14 +825,14 @@ function V() {
 											}),
 											/* @__PURE__ */ N("div", {
 												className: "flex items-center gap-1 mt-1 text-xs text-text-secondary",
-												children: [/* @__PURE__ */ M(f, { className: "h-3 w-3" }), e.responseTime]
+												children: [/* @__PURE__ */ M(d, { className: "h-3 w-3" }), e.responseTime]
 											}),
 											/* @__PURE__ */ N("button", {
 												type: "button",
 												onClick: () => $(e),
 												disabled: !e.available,
 												className: t("mt-3 flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm font-medium transition-colors", e.available ? "bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg/90" : "bg-bg-sunken text-text-secondary cursor-not-allowed"),
-												children: [e.type === "chat" ? "Start Chat" : e.type === "email" ? "Send Email" : "Contact", /* @__PURE__ */ M(ne, { className: "h-3.5 w-3.5" })]
+												children: [e.type === "chat" ? "Start Chat" : e.type === "email" ? "Send Email" : "Contact", /* @__PURE__ */ M(ie, { className: "h-3.5 w-3.5" })]
 											})
 										]
 									})]
@@ -860,13 +860,13 @@ function V() {
 							className: "p-5 space-y-4",
 							children: [
 								q && /* @__PURE__ */ N("div", {
-									className: "flex items-center gap-2 rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-sm text-red-700 dark:text-red-300",
+									className: "flex items-center gap-2 rounded-lg border border-status-error-border/30 bg-status-error-bg-subtle/10 px-3 py-2 text-sm text-status-error-text",
 									children: [/* @__PURE__ */ M(ee, { className: "h-4 w-4 shrink-0" }), q]
 								}),
 								/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ N("label", {
 									className: "block text-sm font-medium text-text-primary mb-1.5",
 									children: ["Subject ", /* @__PURE__ */ M("span", {
-										className: "text-red-500",
+										className: "text-status-error-text",
 										children: "*"
 									})]
 								}), /* @__PURE__ */ M("input", {
@@ -884,7 +884,7 @@ function V() {
 									children: [/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ N("label", {
 										className: "block text-sm font-medium text-text-primary mb-1.5",
 										children: ["Category ", /* @__PURE__ */ M("span", {
-											className: "text-red-500",
+											className: "text-status-error-text",
 											children: "*"
 										})]
 									}), /* @__PURE__ */ N("select", {
@@ -934,7 +934,7 @@ function V() {
 								/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ N("label", {
 									className: "block text-sm font-medium text-text-primary mb-1.5",
 									children: ["Description ", /* @__PURE__ */ M("span", {
-										className: "text-red-500",
+										className: "text-status-error-text",
 										children: "*"
 									})]
 								}), /* @__PURE__ */ M("textarea", {
@@ -948,15 +948,15 @@ function V() {
 									className: "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] resize-none"
 								})] }),
 								/* @__PURE__ */ N("div", {
-									className: "rounded-lg bg-blue-500/5 border border-blue-500/20 p-4",
+									className: "rounded-lg bg-accent-blue-subtle/5 border border-accent-blue-subtle/20 p-4",
 									children: [/* @__PURE__ */ N("div", {
 										className: "flex items-center gap-2 mb-2",
-										children: [/* @__PURE__ */ M(ae, { className: "h-4 w-4 text-blue-600 dark:text-blue-400" }), /* @__PURE__ */ M("h4", {
-											className: "text-sm font-medium text-blue-700 dark:text-blue-300",
+										children: [/* @__PURE__ */ M(oe, { className: "h-4 w-4 text-accent-blue" }), /* @__PURE__ */ M("h4", {
+											className: "text-sm font-medium text-accent-blue",
 											children: "Tips for faster resolution"
 										})]
 									}), /* @__PURE__ */ N("ul", {
-										className: "text-xs text-blue-600 dark:text-blue-400 space-y-1 ml-6 list-disc",
+										className: "text-xs text-accent-blue space-y-1 ml-6 list-disc",
 										children: [
 											/* @__PURE__ */ M("li", { children: "Be specific about the issue and include steps to reproduce it" }),
 											/* @__PURE__ */ M("li", { children: "Include relevant order IDs, transaction IDs, or error messages" }),
@@ -969,10 +969,10 @@ function V() {
 									className: "flex items-center gap-3 pt-1",
 									children: [/* @__PURE__ */ M("button", {
 										type: "button",
-										onClick: pe,
+										onClick: ge,
 										disabled: U,
 										className: t("flex items-center gap-2 rounded-lg px-5 py-2.5 text-sm font-medium text-action-primary-text transition-colors", U ? "bg-action-primary-bg/70 cursor-not-allowed" : "bg-action-primary-bg hover:bg-action-primary-bg/90"),
-										children: U ? /* @__PURE__ */ N(j, { children: [/* @__PURE__ */ M("span", { className: "h-4 w-4 animate-spin rounded-full border-2 border-primary-foreground/30 border-t-primary-foreground" }), "Submitting..."] }) : /* @__PURE__ */ N(j, { children: [/* @__PURE__ */ M(oe, { className: "h-4 w-4" }), "Submit Ticket"] })
+										children: U ? /* @__PURE__ */ N(j, { children: [/* @__PURE__ */ M("span", { className: "h-4 w-4 animate-spin rounded-full border-2 border-primary-foreground/30 border-t-primary-foreground" }), "Submitting..."] }) : /* @__PURE__ */ N(j, { children: [/* @__PURE__ */ M(ce, { className: "h-4 w-4" }), "Submit Ticket"] })
 									}), /* @__PURE__ */ M("button", {
 										type: "button",
 										onClick: () => {
@@ -988,10 +988,10 @@ function V() {
 					/* @__PURE__ */ N("div", {
 						className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
 						children: [/* @__PURE__ */ N("div", {
-							className: "rounded-lg border border-border-subtle bg-bg-surface p-5",
+							className: "rounded-lg border border-border-seam bg-bg-surface p-5 bg-gloss-card shadow-pop",
 							children: [/* @__PURE__ */ N("div", {
 								className: "flex items-center gap-2 mb-3",
-								children: [/* @__PURE__ */ M(f, { className: "h-5 w-5 text-text-secondary" }), /* @__PURE__ */ M("h3", {
+								children: [/* @__PURE__ */ M(d, { className: "h-5 w-5 text-text-secondary" }), /* @__PURE__ */ M("h3", {
 									className: "text-sm font-semibold text-text-primary",
 									children: "Support Hours"
 								})]
@@ -1041,17 +1041,17 @@ function V() {
 								]
 							})]
 						}), /* @__PURE__ */ N("div", {
-							className: "rounded-lg border border-red-500/20 bg-red-500/5 p-5",
+							className: "rounded-lg border border-status-error-border/20 bg-status-error-bg-subtle/5 p-5",
 							children: [
 								/* @__PURE__ */ N("div", {
 									className: "flex items-center gap-2 mb-3",
-									children: [/* @__PURE__ */ M(o, { className: "h-5 w-5 text-red-600 dark:text-red-400" }), /* @__PURE__ */ M("h3", {
-										className: "text-sm font-semibold text-red-700 dark:text-red-300",
+									children: [/* @__PURE__ */ M(s, { className: "h-5 w-5 text-status-error-text" }), /* @__PURE__ */ M("h3", {
+										className: "text-sm font-semibold text-status-error-text",
 										children: "Emergency Contact"
 									})]
 								}),
 								/* @__PURE__ */ M("p", {
-									className: "text-sm text-red-600 dark:text-red-400 mb-3",
+									className: "text-sm text-status-error-text mb-3",
 									children: "For urgent issues like safety concerns, fraud, or account compromise:"
 								}),
 								/* @__PURE__ */ N("div", {
@@ -1059,20 +1059,20 @@ function V() {
 									children: [/* @__PURE__ */ N("div", {
 										className: "flex items-center gap-2 text-sm",
 										children: [
-											/* @__PURE__ */ M(v, { className: "h-4 w-4 text-red-600 dark:text-red-400" }),
+											/* @__PURE__ */ M(v, { className: "h-4 w-4 text-status-error-text" }),
 											/* @__PURE__ */ M("span", {
-												className: "font-medium text-red-700 dark:text-red-300",
+												className: "font-medium text-status-error-text",
 												children: "+91 80-4012-9999"
 											}),
 											/* @__PURE__ */ M("span", {
-												className: "text-xs text-red-500",
+												className: "text-xs text-status-error-text",
 												children: "(24/7)"
 											})
 										]
 									}), /* @__PURE__ */ N("div", {
 										className: "flex items-center gap-2 text-sm",
-										children: [/* @__PURE__ */ M(h, { className: "h-4 w-4 text-red-600 dark:text-red-400" }), /* @__PURE__ */ M("span", {
-											className: "font-medium text-red-700 dark:text-red-300",
+										children: [/* @__PURE__ */ M(h, { className: "h-4 w-4 text-status-error-text" }), /* @__PURE__ */ M("span", {
+											className: "font-medium text-status-error-text",
 											children: "emergency@coolandlovely.com"
 										})]
 									})]
@@ -1087,8 +1087,8 @@ function V() {
 						className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3",
 						children: L.map((e) => /* @__PURE__ */ N("button", {
 							type: "button",
-							className: "flex items-start gap-3 rounded-lg border border-border-subtle bg-bg-surface p-4 text-left hover:bg-accent/50 transition-colors",
-							children: [/* @__PURE__ */ M(re, { className: "h-5 w-5 text-text-secondary shrink-0 mt-0.5" }), /* @__PURE__ */ N("div", {
+							className: "flex items-start gap-3 rounded-lg border border-border-seam bg-bg-surface p-4 text-left hover:bg-accent/50 transition-colors bg-gloss-card shadow-pop",
+							children: [/* @__PURE__ */ M(p, { className: "h-5 w-5 text-text-secondary shrink-0 mt-0.5" }), /* @__PURE__ */ N("div", {
 								className: "min-w-0",
 								children: [/* @__PURE__ */ M("p", {
 									className: "text-sm font-medium text-text-primary truncate",
@@ -1108,7 +1108,7 @@ function V() {
 					})] })
 				]
 			}),
-			u === "tickets" && /* @__PURE__ */ N("div", {
+			l === "tickets" && /* @__PURE__ */ N("div", {
 				className: "space-y-4",
 				children: [
 					/* @__PURE__ */ N("div", {
@@ -1127,7 +1127,7 @@ function V() {
 							/* @__PURE__ */ N("div", {
 								className: "rounded-lg border border-border-subtle bg-bg-surface p-3 text-center",
 								children: [/* @__PURE__ */ M("p", {
-									className: "text-2xl font-bold text-blue-600 dark:text-blue-400",
+									className: "text-2xl font-bold text-accent-blue",
 									children: Q.open
 								}), /* @__PURE__ */ M("p", {
 									className: "text-xs text-text-secondary",
@@ -1137,7 +1137,7 @@ function V() {
 							/* @__PURE__ */ N("div", {
 								className: "rounded-lg border border-border-subtle bg-bg-surface p-3 text-center",
 								children: [/* @__PURE__ */ M("p", {
-									className: "text-2xl font-bold text-amber-600 dark:text-amber-400",
+									className: "text-2xl font-bold text-status-warning-text",
 									children: Q.inProgress
 								}), /* @__PURE__ */ M("p", {
 									className: "text-xs text-text-secondary",
@@ -1147,7 +1147,7 @@ function V() {
 							/* @__PURE__ */ N("div", {
 								className: "rounded-lg border border-border-subtle bg-bg-surface p-3 text-center",
 								children: [/* @__PURE__ */ M("p", {
-									className: "text-2xl font-bold text-green-600 dark:text-green-400",
+									className: "text-2xl font-bold text-status-success-text",
 									children: Q.resolved
 								}), /* @__PURE__ */ M("p", {
 									className: "text-xs text-text-secondary",
@@ -1168,7 +1168,7 @@ function V() {
 						}), /* @__PURE__ */ N("button", {
 							type: "button",
 							onClick: () => {
-								H(!0), d("contact");
+								H(!0), u("contact");
 							},
 							className: "flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 transition-colors",
 							children: [/* @__PURE__ */ M(w, { className: "h-4 w-4" }), "New Ticket"]
@@ -1189,7 +1189,7 @@ function V() {
 							/* @__PURE__ */ M("button", {
 								type: "button",
 								onClick: () => {
-									H(!0), d("contact");
+									H(!0), u("contact");
 								},
 								className: "flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 transition-colors",
 								children: "Create Your First Ticket"
@@ -1198,7 +1198,7 @@ function V() {
 					}) : /* @__PURE__ */ M("div", {
 						className: "space-y-4",
 						children: O.map((e) => {
-							let n = ue(e.status), i = e.responses.length > 0 ? e.responses[e.responses.length - 1] : null;
+							let n = R(e.status), r = e.responses.length > 0 ? e.responses[e.responses.length - 1] : null;
 							return /* @__PURE__ */ N("div", {
 								className: "rounded-lg border border-border-subtle bg-bg-surface overflow-hidden",
 								children: [/* @__PURE__ */ N("div", {
@@ -1210,7 +1210,7 @@ function V() {
 												className: "flex-1 min-w-0",
 												children: [/* @__PURE__ */ N("div", {
 													className: "flex items-center gap-2 mb-1",
-													children: [/* @__PURE__ */ M(n, { className: t("h-4 w-4", R(e.status).split(" ").slice(1).join(" ")) }), /* @__PURE__ */ M("h3", {
+													children: [/* @__PURE__ */ M(n, { className: t("h-4 w-4", z(e.status).split(" ").slice(1).join(" ")) }), /* @__PURE__ */ M("h3", {
 														className: "text-sm font-semibold text-text-primary truncate",
 														children: e.subject
 													})]
@@ -1225,11 +1225,11 @@ function V() {
 											}), /* @__PURE__ */ N("div", {
 												className: "flex flex-wrap gap-2",
 												children: [/* @__PURE__ */ M("span", {
-													className: t("inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium", z(e.priority)),
+													className: t("inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium", B(e.priority)),
 													children: e.priority.toUpperCase()
 												}), /* @__PURE__ */ M("span", {
-													className: t("inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium", R(e.status)),
-													children: B(e.status)
+													className: t("inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium", z(e.status)),
+													children: pe(e.status)
 												})]
 											})]
 										}),
@@ -1237,7 +1237,7 @@ function V() {
 											className: "text-sm text-text-secondary mt-2 leading-relaxed",
 											children: e.description
 										}),
-										i && /* @__PURE__ */ N("div", {
+										r && /* @__PURE__ */ N("div", {
 											className: "mt-3 rounded-lg bg-bg-sunken/50 border border-border-subtle p-3",
 											children: [/* @__PURE__ */ N("div", {
 												className: "flex items-center gap-1.5 mb-1",
@@ -1245,28 +1245,28 @@ function V() {
 													/* @__PURE__ */ M(_, { className: "h-3.5 w-3.5 text-text-secondary" }),
 													/* @__PURE__ */ M("span", {
 														className: "text-xs font-medium text-text-primary",
-														children: i.sender === "support" ? "Support Team" : "You"
+														children: r.sender === "support" ? "Support Team" : "You"
 													}),
 													/* @__PURE__ */ N("span", {
 														className: "text-xs text-text-secondary",
-														children: ["· ", r(i.timestamp)]
+														children: ["· ", i(r.timestamp)]
 													})
 												]
 											}), /* @__PURE__ */ M("p", {
 												className: "text-sm text-text-secondary",
-												children: i.message
+												children: r.message
 											})]
 										}),
 										e.responses.length === 0 && e.status === "open" && /* @__PURE__ */ N("div", {
 											className: "mt-3 flex items-center gap-2 text-xs text-text-secondary",
-											children: [/* @__PURE__ */ M(m, { className: "h-3.5 w-3.5" }), "Awaiting response from support team"]
+											children: [/* @__PURE__ */ M(ae, { className: "h-3.5 w-3.5" }), "Awaiting response from support team"]
 										})
 									]
 								}), /* @__PURE__ */ N("div", {
 									className: "flex flex-col gap-1 border-t border-border-subtle bg-bg-sunken/30 px-4 py-2.5 sm:flex-row sm:items-center sm:justify-between text-xs text-text-secondary",
 									children: [
-										/* @__PURE__ */ N("span", { children: ["Created: ", r(e.createdAt)] }),
-										/* @__PURE__ */ N("span", { children: ["Updated: ", r(e.updatedAt)] }),
+										/* @__PURE__ */ N("span", { children: ["Created: ", i(e.createdAt)] }),
+										/* @__PURE__ */ N("span", { children: ["Updated: ", i(e.updatedAt)] }),
 										/* @__PURE__ */ N("span", { children: [
 											e.responses.length,
 											" response",
@@ -1294,20 +1294,20 @@ function V() {
 						children: [
 							/* @__PURE__ */ N("button", {
 								type: "button",
-								onClick: () => $(I[0]),
+								onClick: () => $(F[0]),
 								className: "flex items-center gap-1.5 rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-xs font-medium text-text-primary hover:bg-accent transition-colors",
 								children: [/* @__PURE__ */ M(h, { className: "h-3.5 w-3.5" }), "Email Us"]
 							}),
 							/* @__PURE__ */ N("button", {
 								type: "button",
-								onClick: () => $(I[1]),
+								onClick: () => $(F[1]),
 								className: "flex items-center gap-1.5 rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-xs font-medium text-text-primary hover:bg-accent transition-colors",
 								children: [/* @__PURE__ */ M(v, { className: "h-3.5 w-3.5" }), "Call Us"]
 							}),
 							/* @__PURE__ */ N("button", {
 								type: "button",
 								onClick: () => {
-									H(!0), d("contact");
+									H(!0), u("contact");
 								},
 								className: "flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-3 py-2 text-xs font-medium text-action-primary-text hover:bg-action-primary-bg/90 transition-colors",
 								children: [/* @__PURE__ */ M(w, { className: "h-3.5 w-3.5" }), "Submit Ticket"]