@burdenoff/microfe-coolandlovely 2026.614.1

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

@@ -0,0 +1,1325 @@
+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 { Fragment as j, jsx as M, jsxs as N } from "react/jsx-runtime";
+//#region src/coolandlovely/pages/common/HelpSupportPage.tsx
+var P = [
+	"Account & Profile",
+	"Orders & Payments",
+	"Cart Owners",
+	"Delivery & Workers",
+	"Investors",
+	"Technical Issues",
+	"Billing & Refunds",
+	"Privacy & Security"
+], F = [
+	{
+		label: "Getting Started",
+		icon: s,
+		description: "New to CoolAndLovely? Start here",
+		color: "bg-blue-500/10 text-blue-600 dark:text-blue-400"
+	},
+	{
+		label: "Orders & Delivery",
+		icon: S,
+		description: "Placing, tracking, and cancelling orders",
+		color: "bg-green-500/10 text-green-600 dark:text-green-400"
+	},
+	{
+		label: "Payments & Billing",
+		icon: p,
+		description: "Payment methods, refunds, and invoices",
+		color: "bg-purple-500/10 text-purple-600 dark:text-purple-400"
+	},
+	{
+		label: "Account & Profile",
+		icon: D,
+		description: "Manage your account and settings",
+		color: "bg-orange-500/10 text-orange-600 dark:text-orange-400"
+	},
+	{
+		label: "Cart Owners",
+		icon: O,
+		description: "Running your cart business",
+		color: "bg-teal-500/10 text-teal-600 dark:text-teal-400"
+	},
+	{
+		label: "Workers & Delivery",
+		icon: E,
+		description: "Delivery partner information",
+		color: "bg-indigo-500/10 text-indigo-600 dark:text-indigo-400"
+	},
+	{
+		label: "Investments",
+		icon: T,
+		description: "Investment opportunities and returns",
+		color: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
+	},
+	{
+		label: "Security & Privacy",
+		icon: x,
+		description: "Data protection and safety",
+		color: "bg-red-500/10 text-red-600 dark:text-red-400"
+	},
+	{
+		label: "Technical Issues",
+		icon: o,
+		description: "App issues and troubleshooting",
+		color: "bg-amber-500/10 text-amber-600 dark:text-amber-400"
+	}
+], I = [
+	{
+		type: "email",
+		label: "Email Support",
+		value: "support@coolandlovely.com",
+		available: !0,
+		responseTime: "Within 24 hours",
+		icon: h
+	},
+	{
+		type: "phone",
+		label: "Phone Support",
+		value: "+91 80-4012-3456",
+		available: !0,
+		responseTime: "9 AM - 9 PM IST",
+		icon: y
+	},
+	{
+		type: "chat",
+		label: "Live Chat",
+		value: "Start a conversation",
+		available: !0,
+		responseTime: "Instant response",
+		icon: g
+	},
+	{
+		type: "whatsapp",
+		label: "WhatsApp",
+		value: "+91 98765-43210",
+		available: !0,
+		responseTime: "2-4 hours",
+		icon: _
+	}
+], ce = [
+	{
+		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.",
+		helpful: 142,
+		tags: [
+			"account",
+			"signup",
+			"registration"
+		]
+	},
+	{
+		id: "faq-002",
+		category: "Account & Profile",
+		question: "How can I change my password?",
+		answer: "Go to Settings > Security > Change Password. You'll need to enter your current password and then your new password twice to confirm. Make sure your new password is at least 8 characters long and includes a mix of letters, numbers, and symbols for better security.",
+		helpful: 89,
+		tags: [
+			"password",
+			"security",
+			"account"
+		]
+	},
+	{
+		id: "faq-003",
+		category: "Account & Profile",
+		question: "Can I switch my account role?",
+		answer: "Yes, you can request a role change from Settings > Profile > Account Role. Switching from Customer to Cart Owner or Worker requires additional verification. The process typically takes 2-3 business days. You can hold multiple roles simultaneously.",
+		helpful: 56,
+		tags: [
+			"role",
+			"account",
+			"switch"
+		]
+	},
+	{
+		id: "faq-004",
+		category: "Orders & Payments",
+		question: "What payment methods are accepted?",
+		answer: "We accept various payment methods including UPI (Google Pay, PhonePe, Paytm), credit/debit cards (Visa, Mastercard, RuPay), net banking from all major banks, and digital wallets. Some cart owners also accept cash on delivery for orders under a certain amount.",
+		helpful: 203,
+		tags: [
+			"payment",
+			"upi",
+			"cards",
+			"wallet"
+		]
+	},
+	{
+		id: "faq-005",
+		category: "Orders & Payments",
+		question: "How can I track my order in real-time?",
+		answer: "After placing an order, you'll receive a tracking link via SMS and email. You can also track your order in real-time through the app under \"My Orders\" section. The live map shows your delivery partner's location. You'll get push notifications at each stage: confirmed, preparing, picked up, and delivered.",
+		helpful: 156,
+		tags: [
+			"tracking",
+			"orders",
+			"delivery",
+			"real-time"
+		]
+	},
+	{
+		id: "faq-006",
+		category: "Orders & Payments",
+		question: "How do I cancel or modify an order?",
+		answer: "You can cancel your order from the Order Details page if it hasn't been picked up yet. Go to My Orders > Select Order > Cancel Order. For modifications, contact the cart owner directly through the chat feature. Cancellation before preparation gets a full refund; after preparation, a partial refund may apply.",
+		helpful: 178,
+		tags: [
+			"cancel",
+			"modify",
+			"refund",
+			"orders"
+		]
+	},
+	{
+		id: "faq-007",
+		category: "Cart Owners",
+		question: "How do I register my cart on CoolAndLovely?",
+		answer: "To register your cart, sign up as a Cart Owner and complete the verification process. You'll need to provide business details, license documents (FSSAI for food carts, GST if applicable), photos of your cart, and your preferred operating location. Our team will review and approve your application within 2-3 business days.",
+		helpful: 67,
+		tags: [
+			"cart",
+			"registration",
+			"business",
+			"verification"
+		]
+	},
+	{
+		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\".",
+		helpful: 94,
+		tags: [
+			"commission",
+			"fees",
+			"business",
+			"pricing"
+		]
+	},
+	{
+		id: "faq-009",
+		category: "Cart Owners",
+		question: "How do I manage my menu and pricing?",
+		answer: "Go to your Cart Dashboard > Menu Management to add, edit, or remove items. You can set prices, mark items as available/unavailable, add photos and descriptions, create categories, and set up combo offers. Changes are reflected instantly on the platform.",
+		helpful: 72,
+		tags: [
+			"menu",
+			"pricing",
+			"cart",
+			"management"
+		]
+	},
+	{
+		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.",
+		helpful: 78,
+		tags: [
+			"worker",
+			"delivery",
+			"application",
+			"requirements"
+		]
+	},
+	{
+		id: "faq-011",
+		category: "Delivery & Workers",
+		question: "How is delivery worker pay calculated?",
+		answer: "Delivery pay includes a base fee per delivery (varies by distance), surge pricing during peak hours, and tips from customers. You also earn bonuses for completing a certain number of deliveries per day/week. Payments are settled daily to your registered bank account.",
+		helpful: 115,
+		tags: [
+			"pay",
+			"earnings",
+			"delivery",
+			"worker"
+		]
+	},
+	{
+		id: "faq-012",
+		category: "Investors",
+		question: "What are the minimum investment requirements?",
+		answer: "The minimum investment amount varies by cart and investment type, typically starting from ₹50,000. You can invest in individual carts or diversified portfolios. Expected annual returns range from 12-18%, depending on the cart's performance. All investments are subject to market risk.",
+		helpful: 112,
+		tags: [
+			"investment",
+			"minimum",
+			"returns",
+			"portfolio"
+		]
+	},
+	{
+		id: "faq-013",
+		category: "Investors",
+		question: "How are returns distributed?",
+		answer: "Returns are distributed monthly based on the cart's revenue performance. You can view detailed performance reports, revenue breakdowns, and ROI analytics in your Investor Dashboard. Funds can be withdrawn to your bank account with a 3-day processing time.",
+		helpful: 98,
+		tags: [
+			"returns",
+			"distribution",
+			"revenue",
+			"investor"
+		]
+	},
+	{
+		id: "faq-014",
+		category: "Technical Issues",
+		question: "The app is not working properly. What should I do?",
+		answer: "Try these steps: 1) Close and restart the app, 2) Check your internet connection (try switching between WiFi and mobile data), 3) Update to the latest app version from the app store, 4) Clear app cache from your phone settings, 5) Restart your device. If the issue persists, create a support ticket with details about the problem, your device model, and app version.",
+		helpful: 134,
+		tags: [
+			"technical",
+			"app",
+			"troubleshooting",
+			"bug"
+		]
+	},
+	{
+		id: "faq-015",
+		category: "Technical Issues",
+		question: "Why am I not receiving notifications?",
+		answer: "Ensure notifications are enabled in both your phone settings and the app settings. Go to Phone Settings > Apps > CoolAndLovely > Notifications and enable all categories. Also check the app: Settings > Preferences > Notification Settings. If using battery optimization, add CoolAndLovely to the exception list.",
+		helpful: 87,
+		tags: [
+			"notifications",
+			"technical",
+			"settings"
+		]
+	},
+	{
+		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.",
+		helpful: 167,
+		tags: [
+			"refund",
+			"cancellation",
+			"billing",
+			"money"
+		]
+	},
+	{
+		id: "faq-017",
+		category: "Billing & Refunds",
+		question: "Where can I find my payment receipts?",
+		answer: "All payment receipts are available under My Orders > Select Order > View Receipt. You can also find consolidated billing statements under Settings > Billing > Invoice History. Receipts can be downloaded as PDF or emailed to your registered address.",
+		helpful: 65,
+		tags: [
+			"receipt",
+			"invoice",
+			"billing",
+			"download"
+		]
+	},
+	{
+		id: "faq-018",
+		category: "Privacy & Security",
+		question: "How is my personal data protected?",
+		answer: "We follow industry-standard encryption (AES-256) for all personal data at rest and TLS 1.3 for data in transit. We are compliant with India's DPDP Act. You can control your data sharing preferences in Settings > Privacy. We never sell your personal information to third parties.",
+		helpful: 109,
+		tags: [
+			"privacy",
+			"data",
+			"encryption",
+			"security"
+		]
+	},
+	{
+		id: "faq-019",
+		category: "Privacy & Security",
+		question: "How do I enable two-factor authentication?",
+		answer: "Go to Settings > Security > Two-Factor Authentication and toggle it on. You can choose between SMS OTP or an authenticator app (Google Authenticator, Authy). We strongly recommend enabling 2FA for enhanced account security, especially for Cart Owners and Investors.",
+		helpful: 76,
+		tags: [
+			"2fa",
+			"authentication",
+			"security",
+			"account"
+		]
+	},
+	{
+		id: "faq-020",
+		category: "Privacy & Security",
+		question: "How can I delete my account?",
+		answer: "You can request account deletion from Settings > Privacy > Delete Account. Please note: this action is irreversible. All your data, order history, and wallet balance will be permanently removed after a 30-day cooling period. Pending orders or investments must be settled before deletion.",
+		helpful: 43,
+		tags: [
+			"delete",
+			"account",
+			"privacy",
+			"data"
+		]
+	}
+], le = [
+	{
+		id: "ticket-001",
+		subject: "Payment failed but amount deducted",
+		category: "Billing & Refunds",
+		priority: "high",
+		status: "in-progress",
+		description: "I placed an order for ₹285 but the payment failed. However, the amount was deducted from my SBI account. Transaction ID: TXN123456789.",
+		createdAt: "2024-06-23T14:30:00Z",
+		updatedAt: "2024-06-24T09:15:00Z",
+		responses: [
+			{
+				id: "resp-001",
+				message: "Thank you for contacting us. We're investigating the payment issue. Could you please confirm the exact amount and your account details?",
+				sender: "support",
+				timestamp: "2024-06-23T16:45:00Z"
+			},
+			{
+				id: "resp-002",
+				message: "Transaction ID: TXN123456789. Amount: ₹285. Deducted from my SBI savings account ending in 4521.",
+				sender: "user",
+				timestamp: "2024-06-23T17:20:00Z"
+			},
+			{
+				id: "resp-003",
+				message: "We've verified the transaction. The refund of ₹285 has been initiated and will reflect in your account within 3-5 business days. Reference: REF-2024-06-24-001.",
+				sender: "support",
+				timestamp: "2024-06-24T09:15:00Z"
+			}
+		]
+	},
+	{
+		id: "ticket-002",
+		subject: "Unable to update cart location",
+		category: "Technical Issues",
+		priority: "medium",
+		status: "resolved",
+		description: "I'm unable to update my cart location in the app. The save button is not responding when I tap it. Tried clearing cache and reinstalling.",
+		createdAt: "2024-06-22T11:20:00Z",
+		updatedAt: "2024-06-22T18:30:00Z",
+		responses: [{
+			id: "resp-004",
+			message: "This was a known bug affecting Cart Owners on Android devices. It has been fixed in the latest app update (v2.1.3). Please update your app from the Play Store and try again.",
+			sender: "support",
+			timestamp: "2024-06-22T18:30:00Z"
+		}]
+	},
+	{
+		id: "ticket-003",
+		subject: "Wrong items delivered in order #ORD-4521",
+		category: "Orders & Payments",
+		priority: "high",
+		status: "open",
+		description: "Received completely different items from what I ordered. Order #ORD-4521 was for 2 Masala Dosas and 1 Filter Coffee, but received Idli and Sambar instead.",
+		createdAt: "2024-06-25T08:45:00Z",
+		updatedAt: "2024-06-25T08:45:00Z",
+		responses: []
+	},
+	{
+		id: "ticket-004",
+		subject: "Investment returns not credited for May",
+		category: "Investors",
+		priority: "medium",
+		status: "closed",
+		description: "My investment returns for the month of May 2024 have not been credited to my wallet. Portfolio: Diversified South Indian Carts.",
+		createdAt: "2024-06-10T09:00:00Z",
+		updatedAt: "2024-06-12T14:20:00Z",
+		responses: [{
+			id: "resp-005",
+			message: "We apologize for the delay. May returns have been processed and credited to your wallet. The delay was due to a system migration. You should see ₹4,250 credited.",
+			sender: "support",
+			timestamp: "2024-06-12T14:20:00Z"
+		}]
+	}
+], L = [
+	{
+		id: "art-1",
+		title: "Getting Started with CoolAndLovely",
+		category: "Getting Started",
+		views: 12450
+	},
+	{
+		id: "art-2",
+		title: "How to Place Your First Order",
+		category: "Orders",
+		views: 9823
+	},
+	{
+		id: "art-3",
+		title: "Understanding Investment Returns",
+		category: "Investors",
+		views: 7654
+	},
+	{
+		id: "art-4",
+		title: "Setting Up Your Cart Business",
+		category: "Cart Owners",
+		views: 6543
+	},
+	{
+		id: "art-5",
+		title: "Payment Troubleshooting Guide",
+		category: "Payments",
+		views: 5890
+	},
+	{
+		id: "art-6",
+		title: "Delivery Partner Onboarding Guide",
+		category: "Workers",
+		views: 4321
+	}
+];
+function ue(e) {
+	switch (e) {
+		case "open": return u;
+		case "in-progress": return d;
+		case "resolved": return c;
+		case "closed": return A;
+	}
+}
+function R(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 "closed": return "bg-muted text-muted-foreground";
+	}
+}
+function z(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 "low": return "bg-muted text-muted-foreground";
+	}
+}
+function B(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({
+		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;
+		return t && n;
+	}), [
+		E,
+		p,
+		y
+	]), Q = i(() => ({
+		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) => {
+		T((t) => t === e ? null : e);
+	}, fe = (e) => {
+		D((t) => t.map((t) => t.id === e ? {
+			...t,
+			helpful: t.helpful + 1
+		} : t));
+	}, $ = (e) => {
+		switch (e.type) {
+			case "email":
+				window.location.href = `mailto:${e.value}`;
+				break;
+			case "phone":
+				window.location.href = `tel:${e.value.replace(/[^0-9+]/g, "")}`;
+				break;
+			case "whatsapp":
+				window.open(`https://wa.me/${e.value.replace(/[^0-9]/g, "")}`, "_blank");
+				break;
+			case "chat":
+				alert("Live chat will be available soon!");
+				break;
+		}
+	}, pe = () => {
+		if (J(""), K(""), !Y.subject.trim()) {
+			J("Please enter a subject for your ticket.");
+			return;
+		}
+		if (!Y.description.trim()) {
+			J("Please describe your issue in the description field.");
+			return;
+		}
+		if (!Y.category) {
+			J("Please select a category.");
+			return;
+		}
+		W(!0), setTimeout(() => {
+			let e = {
+				id: `ticket-${Date.now()}`,
+				subject: Y.subject,
+				category: Y.category,
+				priority: Y.priority,
+				status: "open",
+				description: Y.description,
+				createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+				updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+				responses: []
+			};
+			A((t) => [e, ...t]), X({
+				subject: "",
+				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);
+		}, 1e3);
+	}, me = [
+		{
+			id: "faq",
+			label: "FAQ",
+			icon: ie
+		},
+		{
+			id: "contact",
+			label: "Contact Us",
+			icon: v
+		},
+		{
+			id: "tickets",
+			label: "My Tickets",
+			icon: w
+		}
+	];
+	return /* @__PURE__ */ N(n, {
+		title: "Help & Support",
+		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",
+				children: [
+					/* @__PURE__ */ M(c, { className: "h-4 w-4 shrink-0" }),
+					G,
+					/* @__PURE__ */ M("button", {
+						type: "button",
+						onClick: () => K(""),
+						className: "ml-auto",
+						children: /* @__PURE__ */ M(k, { className: "h-4 w-4" })
+					})
+				]
+			}),
+			/* @__PURE__ */ M("section", {
+				className: "mb-6",
+				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-muted-foreground" }),
+						/* @__PURE__ */ M("input", {
+							type: "text",
+							value: p,
+							onChange: (e) => {
+								g(e.target.value), u !== "faq" && d("faq");
+							},
+							placeholder: "Search help articles, FAQs, and more...",
+							className: "w-full rounded-lg border border-border bg-card py-3 pl-10 pr-10 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+						}),
+						p && /* @__PURE__ */ M("button", {
+							type: "button",
+							onClick: () => g(""),
+							className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+							children: /* @__PURE__ */ M(k, { className: "h-4 w-4" })
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ N("section", {
+				className: "mb-6",
+				children: [/* @__PURE__ */ M("h2", {
+					className: "text-lg font-semibold text-foreground mb-3",
+					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) => {
+						let n = e.icon;
+						return /* @__PURE__ */ N("button", {
+							type: "button",
+							onClick: () => {
+								x(e.label === y ? "" : e.label), d("faq");
+							},
+							className: t("flex items-start gap-3 rounded-lg border bg-card p-4 text-left transition-all hover:shadow-sm", y === e.label ? "border-primary ring-1 ring-primary" : "border-border"),
+							children: [/* @__PURE__ */ M("div", {
+								className: t("flex h-10 w-10 shrink-0 items-center justify-center rounded-lg", e.color),
+								children: /* @__PURE__ */ M(n, { className: "h-5 w-5" })
+							}), /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+								className: "text-sm font-semibold text-foreground",
+								children: e.label
+							}), /* @__PURE__ */ M("p", {
+								className: "text-xs text-muted-foreground",
+								children: e.description
+							})] })]
+						}, e.label);
+					})
+				})]
+			}),
+			/* @__PURE__ */ M("section", {
+				className: "mb-6",
+				children: /* @__PURE__ */ M("div", {
+					className: "flex space-x-1 bg-muted p-1 rounded-lg w-full sm:w-fit",
+					children: me.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-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"),
+							children: [
+								/* @__PURE__ */ M(n, { className: "h-4 w-4" }),
+								/* @__PURE__ */ M("span", { children: e.label }),
+								e.id === "tickets" && Q.open > 0 && /* @__PURE__ */ M("span", {
+									className: "flex h-5 min-w-[20px] items-center justify-center rounded-full bg-primary px-1.5 text-xs font-medium text-primary-foreground",
+									children: Q.open
+								})
+							]
+						}, e.id);
+					})
+				})
+			}),
+			u === "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-muted-foreground",
+					children: [
+						Z.length,
+						" question",
+						Z.length === 1 ? "" : "s",
+						" found",
+						y && /* @__PURE__ */ N("span", { children: [
+							" ",
+							"in ",
+							/* @__PURE__ */ M("span", {
+								className: "font-medium text-foreground",
+								children: y
+							}),
+							/* @__PURE__ */ M("button", {
+								type: "button",
+								onClick: () => x(""),
+								className: "ml-1 text-primary hover:underline",
+								children: "(clear)"
+							})
+						] })
+					]
+				}), /* @__PURE__ */ N("select", {
+					value: y,
+					onChange: (e) => x(e.target.value),
+					className: "rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring",
+					children: [/* @__PURE__ */ M("option", {
+						value: "",
+						children: "All Categories"
+					}), P.map((e) => /* @__PURE__ */ M("option", {
+						value: e,
+						children: e
+					}, e))]
+				})]
+			}), Z.length > 0 ? /* @__PURE__ */ M("div", {
+				className: "space-y-3",
+				children: Z.map((e) => {
+					let n = S === e.id;
+					return /* @__PURE__ */ N("div", {
+						className: "rounded-lg border border-border bg-card overflow-hidden",
+						children: [/* @__PURE__ */ N("button", {
+							type: "button",
+							onClick: () => de(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",
+								children: [/* @__PURE__ */ N("div", {
+									className: "flex flex-wrap items-center gap-2 mb-1",
+									children: [/* @__PURE__ */ M("span", {
+										className: "inline-flex items-center rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground",
+										children: e.category
+									}), /* @__PURE__ */ N("span", {
+										className: "inline-flex items-center gap-1 text-xs text-muted-foreground",
+										children: [/* @__PURE__ */ M(C, { className: "h-3 w-3" }), e.helpful]
+									})]
+								}), /* @__PURE__ */ M("span", {
+									className: t("text-sm", n ? "font-semibold text-foreground" : "font-medium text-foreground"),
+									children: e.question
+								})]
+							}), M(n ? te : l, { className: "h-4 w-4 text-muted-foreground shrink-0 mt-1" })]
+						}), n && /* @__PURE__ */ N("div", {
+							className: "border-t border-border px-4 pb-4 pt-3",
+							children: [/* @__PURE__ */ M("p", {
+								className: "text-sm text-muted-foreground leading-relaxed mb-3",
+								children: e.answer
+							}), /* @__PURE__ */ N("div", {
+								className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
+								children: [/* @__PURE__ */ M("div", {
+									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-muted px-2 py-0.5 text-xs text-muted-foreground",
+										children: [/* @__PURE__ */ M(se, { className: "h-2.5 w-2.5" }), e]
+									}, e))
+								}), /* @__PURE__ */ N("button", {
+									type: "button",
+									onClick: (t) => {
+										t.stopPropagation(), fe(e.id);
+									},
+									className: "flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors",
+									children: [
+										/* @__PURE__ */ M(C, { className: "h-3.5 w-3.5" }),
+										"Helpful (",
+										e.helpful,
+										")"
+									]
+								})]
+							})]
+						})]
+					}, e.id);
+				})
+			}) : /* @__PURE__ */ N("div", {
+				className: "flex flex-col items-center justify-center rounded-lg border border-border bg-card py-12",
+				children: [
+					/* @__PURE__ */ M(b, { className: "h-12 w-12 text-muted-foreground/50 mb-3" }),
+					/* @__PURE__ */ M("h3", {
+						className: "text-base font-semibold text-foreground mb-1",
+						children: "No FAQs found"
+					}),
+					/* @__PURE__ */ M("p", {
+						className: "text-sm text-muted-foreground 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"
+					})
+				]
+			})] }),
+			u === "contact" && /* @__PURE__ */ N("div", {
+				className: "space-y-6",
+				children: [
+					/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("h2", {
+						className: "text-base font-semibold text-foreground mb-3",
+						children: "Get in Touch"
+					}), /* @__PURE__ */ M("div", {
+						className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
+						children: I.map((e) => {
+							let n = e.icon;
+							return /* @__PURE__ */ M("div", {
+								className: "rounded-lg border border-border bg-card p-5",
+								children: /* @__PURE__ */ N("div", {
+									className: "flex items-start gap-4",
+									children: [/* @__PURE__ */ M("div", {
+										className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-muted",
+										children: /* @__PURE__ */ M(n, { className: "h-6 w-6 text-muted-foreground" })
+									}), /* @__PURE__ */ N("div", {
+										className: "flex-1 min-w-0",
+										children: [
+											/* @__PURE__ */ M("h3", {
+												className: "text-sm font-semibold text-foreground",
+												children: e.label
+											}),
+											/* @__PURE__ */ M("p", {
+												className: "text-sm text-foreground mt-0.5 break-words",
+												children: e.value
+											}),
+											/* @__PURE__ */ N("div", {
+												className: "flex items-center gap-1 mt-1 text-xs text-muted-foreground",
+												children: [/* @__PURE__ */ M(f, { 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-primary text-primary-foreground hover:bg-primary/90" : "bg-muted text-muted-foreground 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" })]
+											})
+										]
+									})]
+								})
+							}, e.type);
+						})
+					})] }),
+					/* @__PURE__ */ N("div", {
+						className: "rounded-lg border border-border bg-card",
+						children: [/* @__PURE__ */ N("div", {
+							className: "flex items-center justify-between border-b border-border px-5 py-4",
+							children: [/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("h2", {
+								className: "text-base font-semibold text-foreground",
+								children: "Submit a Support Ticket"
+							}), /* @__PURE__ */ M("p", {
+								className: "text-xs text-muted-foreground mt-0.5",
+								children: "Can't find your answer? Create a ticket and our team will help."
+							})] }), /* @__PURE__ */ N("button", {
+								type: "button",
+								onClick: () => H(!V),
+								className: "flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors",
+								children: [/* @__PURE__ */ M(w, { className: "h-4 w-4" }), V ? "Close" : "New Ticket"]
+							})]
+						}), V && /* @__PURE__ */ N("div", {
+							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",
+									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-foreground mb-1.5",
+									children: ["Subject ", /* @__PURE__ */ M("span", {
+										className: "text-red-500",
+										children: "*"
+									})]
+								}), /* @__PURE__ */ M("input", {
+									type: "text",
+									value: Y.subject,
+									onChange: (e) => X((t) => ({
+										...t,
+										subject: e.target.value
+									})),
+									placeholder: "Brief description of your issue",
+									className: "w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+								})] }),
+								/* @__PURE__ */ N("div", {
+									className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
+									children: [/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ N("label", {
+										className: "block text-sm font-medium text-foreground mb-1.5",
+										children: ["Category ", /* @__PURE__ */ M("span", {
+											className: "text-red-500",
+											children: "*"
+										})]
+									}), /* @__PURE__ */ N("select", {
+										value: Y.category,
+										onChange: (e) => X((t) => ({
+											...t,
+											category: e.target.value
+										})),
+										className: "w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring",
+										children: [/* @__PURE__ */ M("option", {
+											value: "",
+											children: "Select category"
+										}), P.map((e) => /* @__PURE__ */ M("option", {
+											value: e,
+											children: e
+										}, e))]
+									})] }), /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("label", {
+										className: "block text-sm font-medium text-foreground mb-1.5",
+										children: "Priority"
+									}), /* @__PURE__ */ N("select", {
+										value: Y.priority,
+										onChange: (e) => X((t) => ({
+											...t,
+											priority: e.target.value
+										})),
+										className: "w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring",
+										children: [
+											/* @__PURE__ */ M("option", {
+												value: "low",
+												children: "Low"
+											}),
+											/* @__PURE__ */ M("option", {
+												value: "medium",
+												children: "Medium"
+											}),
+											/* @__PURE__ */ M("option", {
+												value: "high",
+												children: "High"
+											}),
+											/* @__PURE__ */ M("option", {
+												value: "urgent",
+												children: "Urgent"
+											})
+										]
+									})] })]
+								}),
+								/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ N("label", {
+									className: "block text-sm font-medium text-foreground mb-1.5",
+									children: ["Description ", /* @__PURE__ */ M("span", {
+										className: "text-red-500",
+										children: "*"
+									})]
+								}), /* @__PURE__ */ M("textarea", {
+									rows: 5,
+									value: Y.description,
+									onChange: (e) => X((t) => ({
+										...t,
+										description: e.target.value
+									})),
+									placeholder: "Please describe your issue in detail...",
+									className: "w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring resize-none"
+								})] }),
+								/* @__PURE__ */ N("div", {
+									className: "rounded-lg bg-blue-500/5 border border-blue-500/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: "Tips for faster resolution"
+										})]
+									}), /* @__PURE__ */ N("ul", {
+										className: "text-xs text-blue-600 dark:text-blue-400 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" }),
+											/* @__PURE__ */ M("li", { children: "Mention your device type and app version for technical issues" }),
+											/* @__PURE__ */ M("li", { children: "Attach screenshots if they help illustrate the problem" })
+										]
+									})]
+								}),
+								/* @__PURE__ */ N("div", {
+									className: "flex items-center gap-3 pt-1",
+									children: [/* @__PURE__ */ M("button", {
+										type: "button",
+										onClick: pe,
+										disabled: U,
+										className: t("flex items-center gap-2 rounded-lg px-5 py-2.5 text-sm font-medium text-primary-foreground transition-colors", U ? "bg-primary/70 cursor-not-allowed" : "bg-primary hover:bg-primary/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"] })
+									}), /* @__PURE__ */ M("button", {
+										type: "button",
+										onClick: () => {
+											H(!1), J("");
+										},
+										className: "rounded-lg border border-border px-4 py-2.5 text-sm font-medium text-foreground hover:bg-accent transition-colors",
+										children: "Cancel"
+									})]
+								})
+							]
+						})]
+					}),
+					/* @__PURE__ */ N("div", {
+						className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
+						children: [/* @__PURE__ */ N("div", {
+							className: "rounded-lg border border-border bg-card p-5",
+							children: [/* @__PURE__ */ N("div", {
+								className: "flex items-center gap-2 mb-3",
+								children: [/* @__PURE__ */ M(f, { className: "h-5 w-5 text-muted-foreground" }), /* @__PURE__ */ M("h3", {
+									className: "text-sm font-semibold text-foreground",
+									children: "Support Hours"
+								})]
+							}), /* @__PURE__ */ N("div", {
+								className: "space-y-2 text-sm",
+								children: [
+									/* @__PURE__ */ N("div", {
+										className: "flex justify-between",
+										children: [/* @__PURE__ */ M("span", {
+											className: "text-muted-foreground",
+											children: "Monday - Friday"
+										}), /* @__PURE__ */ M("span", {
+											className: "font-medium text-foreground",
+											children: "9:00 AM - 9:00 PM IST"
+										})]
+									}),
+									/* @__PURE__ */ N("div", {
+										className: "flex justify-between",
+										children: [/* @__PURE__ */ M("span", {
+											className: "text-muted-foreground",
+											children: "Saturday"
+										}), /* @__PURE__ */ M("span", {
+											className: "font-medium text-foreground",
+											children: "10:00 AM - 6:00 PM IST"
+										})]
+									}),
+									/* @__PURE__ */ N("div", {
+										className: "flex justify-between",
+										children: [/* @__PURE__ */ M("span", {
+											className: "text-muted-foreground",
+											children: "Sunday"
+										}), /* @__PURE__ */ M("span", {
+											className: "font-medium text-foreground",
+											children: "Closed"
+										})]
+									}),
+									/* @__PURE__ */ N("div", {
+										className: "flex justify-between pt-2 border-t border-border",
+										children: [/* @__PURE__ */ M("span", {
+											className: "text-muted-foreground",
+											children: "Email Support"
+										}), /* @__PURE__ */ M("span", {
+											className: "font-medium text-foreground",
+											children: "24/7"
+										})]
+									})
+								]
+							})]
+						}), /* @__PURE__ */ N("div", {
+							className: "rounded-lg border border-red-500/20 bg-red-500/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: "Emergency Contact"
+									})]
+								}),
+								/* @__PURE__ */ M("p", {
+									className: "text-sm text-red-600 dark:text-red-400 mb-3",
+									children: "For urgent issues like safety concerns, fraud, or account compromise:"
+								}),
+								/* @__PURE__ */ N("div", {
+									className: "space-y-2",
+									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("span", {
+												className: "font-medium text-red-700 dark:text-red-300",
+												children: "+91 80-4012-9999"
+											}),
+											/* @__PURE__ */ M("span", {
+												className: "text-xs text-red-500",
+												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: "emergency@coolandlovely.com"
+										})]
+									})]
+								})
+							]
+						})]
+					}),
+					/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("h2", {
+						className: "text-base font-semibold text-foreground mb-3",
+						children: "Popular Articles"
+					}), /* @__PURE__ */ M("div", {
+						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 bg-card p-4 text-left hover:bg-accent/50 transition-colors",
+							children: [/* @__PURE__ */ M(re, { className: "h-5 w-5 text-muted-foreground shrink-0 mt-0.5" }), /* @__PURE__ */ N("div", {
+								className: "min-w-0",
+								children: [/* @__PURE__ */ M("p", {
+									className: "text-sm font-medium text-foreground truncate",
+									children: e.title
+								}), /* @__PURE__ */ N("div", {
+									className: "flex items-center gap-2 mt-1",
+									children: [/* @__PURE__ */ M("span", {
+										className: "text-xs text-muted-foreground",
+										children: e.category
+									}), /* @__PURE__ */ N("span", {
+										className: "text-xs text-muted-foreground",
+										children: [e.views.toLocaleString("en-IN"), " views"]
+									})]
+								})]
+							})]
+						}, e.id))
+					})] })
+				]
+			}),
+			u === "tickets" && /* @__PURE__ */ N("div", {
+				className: "space-y-4",
+				children: [
+					/* @__PURE__ */ N("div", {
+						className: "grid grid-cols-2 gap-3 sm:grid-cols-4",
+						children: [
+							/* @__PURE__ */ N("div", {
+								className: "rounded-lg border border-border bg-card p-3 text-center",
+								children: [/* @__PURE__ */ M("p", {
+									className: "text-2xl font-bold text-foreground",
+									children: Q.total
+								}), /* @__PURE__ */ M("p", {
+									className: "text-xs text-muted-foreground",
+									children: "Total"
+								})]
+							}),
+							/* @__PURE__ */ N("div", {
+								className: "rounded-lg border border-border bg-card p-3 text-center",
+								children: [/* @__PURE__ */ M("p", {
+									className: "text-2xl font-bold text-blue-600 dark:text-blue-400",
+									children: Q.open
+								}), /* @__PURE__ */ M("p", {
+									className: "text-xs text-muted-foreground",
+									children: "Open"
+								})]
+							}),
+							/* @__PURE__ */ N("div", {
+								className: "rounded-lg border border-border bg-card p-3 text-center",
+								children: [/* @__PURE__ */ M("p", {
+									className: "text-2xl font-bold text-amber-600 dark:text-amber-400",
+									children: Q.inProgress
+								}), /* @__PURE__ */ M("p", {
+									className: "text-xs text-muted-foreground",
+									children: "In Progress"
+								})]
+							}),
+							/* @__PURE__ */ N("div", {
+								className: "rounded-lg border border-border bg-card p-3 text-center",
+								children: [/* @__PURE__ */ M("p", {
+									className: "text-2xl font-bold text-green-600 dark:text-green-400",
+									children: Q.resolved
+								}), /* @__PURE__ */ M("p", {
+									className: "text-xs text-muted-foreground",
+									children: "Resolved"
+								})]
+							})
+						]
+					}),
+					/* @__PURE__ */ N("div", {
+						className: "flex items-center justify-between",
+						children: [/* @__PURE__ */ N("p", {
+							className: "text-sm text-muted-foreground",
+							children: [
+								O.length,
+								" ticket",
+								O.length === 1 ? "" : "s"
+							]
+						}), /* @__PURE__ */ N("button", {
+							type: "button",
+							onClick: () => {
+								H(!0), d("contact");
+							},
+							className: "flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors",
+							children: [/* @__PURE__ */ M(w, { className: "h-4 w-4" }), "New Ticket"]
+						})]
+					}),
+					O.length === 0 ? /* @__PURE__ */ N("div", {
+						className: "flex flex-col items-center justify-center rounded-lg border border-border bg-card py-12",
+						children: [
+							/* @__PURE__ */ M(w, { className: "h-12 w-12 text-muted-foreground/50 mb-3" }),
+							/* @__PURE__ */ M("h3", {
+								className: "text-base font-semibold text-foreground mb-1",
+								children: "No support tickets"
+							}),
+							/* @__PURE__ */ M("p", {
+								className: "text-sm text-muted-foreground mb-3",
+								children: "You haven't created any support tickets yet"
+							}),
+							/* @__PURE__ */ M("button", {
+								type: "button",
+								onClick: () => {
+									H(!0), d("contact");
+								},
+								className: "flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors",
+								children: "Create Your First Ticket"
+							})
+						]
+					}) : /* @__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;
+							return /* @__PURE__ */ N("div", {
+								className: "rounded-lg border border-border bg-card overflow-hidden",
+								children: [/* @__PURE__ */ N("div", {
+									className: "p-4 sm:p-5",
+									children: [
+										/* @__PURE__ */ N("div", {
+											className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between",
+											children: [/* @__PURE__ */ N("div", {
+												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", {
+														className: "text-sm font-semibold text-foreground truncate",
+														children: e.subject
+													})]
+												}), /* @__PURE__ */ N("p", {
+													className: "text-xs text-muted-foreground",
+													children: [
+														e.category,
+														" · ",
+														e.id
+													]
+												})]
+											}), /* @__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)),
+													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)
+												})]
+											})]
+										}),
+										/* @__PURE__ */ M("p", {
+											className: "text-sm text-muted-foreground mt-2 leading-relaxed",
+											children: e.description
+										}),
+										i && /* @__PURE__ */ N("div", {
+											className: "mt-3 rounded-lg bg-muted/50 border border-border p-3",
+											children: [/* @__PURE__ */ N("div", {
+												className: "flex items-center gap-1.5 mb-1",
+												children: [
+													/* @__PURE__ */ M(_, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+													/* @__PURE__ */ M("span", {
+														className: "text-xs font-medium text-foreground",
+														children: i.sender === "support" ? "Support Team" : "You"
+													}),
+													/* @__PURE__ */ N("span", {
+														className: "text-xs text-muted-foreground",
+														children: ["· ", r(i.timestamp)]
+													})
+												]
+											}), /* @__PURE__ */ M("p", {
+												className: "text-sm text-muted-foreground",
+												children: i.message
+											})]
+										}),
+										e.responses.length === 0 && e.status === "open" && /* @__PURE__ */ N("div", {
+											className: "mt-3 flex items-center gap-2 text-xs text-muted-foreground",
+											children: [/* @__PURE__ */ M(m, { 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 bg-muted/30 px-4 py-2.5 sm:flex-row sm:items-center sm:justify-between text-xs text-muted-foreground",
+									children: [
+										/* @__PURE__ */ N("span", { children: ["Created: ", r(e.createdAt)] }),
+										/* @__PURE__ */ N("span", { children: ["Updated: ", r(e.updatedAt)] }),
+										/* @__PURE__ */ N("span", { children: [
+											e.responses.length,
+											" response",
+											e.responses.length === 1 ? "" : "s"
+										] })
+									]
+								})]
+							}, e.id);
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ M("section", {
+				className: "mt-8 rounded-lg border border-border bg-muted/30 p-5",
+				children: /* @__PURE__ */ N("div", {
+					className: "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between",
+					children: [/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("h3", {
+						className: "text-sm font-semibold text-foreground mb-1",
+						children: "Still need help?"
+					}), /* @__PURE__ */ M("p", {
+						className: "text-xs text-muted-foreground",
+						children: "Our support team is available Monday to Saturday. Average response time is under 4 hours."
+					})] }), /* @__PURE__ */ N("div", {
+						className: "flex flex-wrap gap-2",
+						children: [
+							/* @__PURE__ */ N("button", {
+								type: "button",
+								onClick: () => $(I[0]),
+								className: "flex items-center gap-1.5 rounded-lg border border-border bg-card px-3 py-2 text-xs font-medium text-foreground 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]),
+								className: "flex items-center gap-1.5 rounded-lg border border-border bg-card px-3 py-2 text-xs font-medium text-foreground 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");
+								},
+								className: "flex items-center gap-1.5 rounded-lg bg-primary px-3 py-2 text-xs font-medium text-primary-foreground hover:bg-primary/90 transition-colors",
+								children: [/* @__PURE__ */ M(w, { className: "h-3.5 w-3.5" }), "Submit Ticket"]
+							})
+						]
+					})]
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { V as HelpSupportPage };
+
+//# sourceMappingURL=HelpSupportPage.js.map