@burdenoff/microfe-subscriberbot 2026.624.1 → 2026.625.1

package/dist/subscriberbot/pages/customer/DirectServiceBookingPage.js

@@ -48,6 +48,7 @@ function k() {
 	if (!j) return /* @__PURE__ */ w(n, {
 		title: "Cart Not Found",
 		children: /* @__PURE__ */ w(r, {
+			illustration: "empty-generic",
 			icon: /* @__PURE__ */ w(h, { className: "h-12 w-12" }),
 			title: "Service not available",
 			description: "Direct service is not available for this cart.",
@@ -107,13 +108,13 @@ function k() {
 					children: [/* @__PURE__ */ T("div", {
 						className: "flex flex-col items-center",
 						children: [/* @__PURE__ */ w("div", {
-							className: t("flex h-8 w-8 items-center justify-center rounded-full text-xs font-medium", r ? "bg-green-500/20 text-green-600 dark:text-green-400" : i ? "bg-foreground text-background" : "bg-bg-sunken text-text-secondary"),
+							className: t("flex h-8 w-8 items-center justify-center rounded-full text-xs font-medium", r ? "bg-status-success-bg/20 text-status-success-text" : i ? "bg-foreground text-background" : "bg-bg-sunken text-text-secondary"),
 							children: r ? /* @__PURE__ */ w(f, { className: "h-4 w-4" }) : n + 1
 						}), /* @__PURE__ */ w("span", {
 							className: t("mt-1 text-[10px]", i ? "font-medium text-text-primary" : "text-text-secondary"),
 							children: D[e]
 						})]
-					}), n < E.length - 1 && /* @__PURE__ */ w("div", { className: t("mx-2 h-0.5 w-8 sm:w-16", r ? "bg-green-500/30" : "bg-border") })]
+					}), n < E.length - 1 && /* @__PURE__ */ w("div", { className: t("mx-2 h-0.5 w-8 sm:w-16", r ? "bg-status-success-bg/30" : "bg-border") })]
 				}, e);
 			})
 		}), /* @__PURE__ */ T("div", {
@@ -122,7 +123,7 @@ function k() {
 				className: "lg:col-span-2",
 				children: [
 					M === "location" && /* @__PURE__ */ T("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",
 						children: [
 							/* @__PURE__ */ T("h2", {
 								className: "text-base font-semibold text-text-primary mb-1 flex items-center gap-2",
@@ -138,7 +139,7 @@ function k() {
 									/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ T("label", {
 										className: "block text-sm font-medium text-text-primary mb-1.5",
 										children: ["Your Address ", /* @__PURE__ */ w("span", {
-											className: "text-red-500",
+											className: "text-status-error-text",
 											children: "*"
 										})]
 									}), /* @__PURE__ */ T("div", {
@@ -151,11 +152,11 @@ function k() {
 												...t,
 												address: e.target.value
 											})),
-											className: "flex-1 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)]"
+											className: "flex-1 rounded-lg border border-border-seam 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)]"
 										}), /* @__PURE__ */ T("button", {
 											type: "button",
 											onClick: K,
-											className: "flex items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-2 text-xs font-medium text-text-primary hover:bg-accent transition-colors whitespace-nowrap",
+											className: "flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-xs font-medium text-text-primary hover:bg-accent transition-colors whitespace-nowrap",
 											children: [/* @__PURE__ */ w(v, { className: "h-3.5 w-3.5" }), "Use Current Location"]
 										})]
 									})] }),
@@ -170,7 +171,7 @@ function k() {
 											...t,
 											landmark: e.target.value
 										})),
-										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)]"
+										className: "w-full rounded-lg border border-border-seam 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)]"
 									})] }),
 									/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("label", {
 										className: "block text-sm font-medium text-text-primary mb-1.5",
@@ -183,12 +184,12 @@ function k() {
 											...t,
 											instructions: e.target.value
 										})),
-										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"
+										className: "w-full rounded-lg border border-border-seam 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__ */ T("div", { children: [/* @__PURE__ */ T("label", {
 										className: "block text-sm font-medium text-text-primary mb-1.5",
 										children: ["Phone Number ", /* @__PURE__ */ w("span", {
-											className: "text-red-500",
+											className: "text-status-error-text",
 											children: "*"
 										})]
 									}), /* @__PURE__ */ T("div", {
@@ -201,7 +202,7 @@ function k() {
 												...t,
 												phoneNumber: e.target.value
 											})),
-											className: "w-full rounded-lg border border-border-subtle bg-bg-surface py-2 pl-9 pr-3 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
+											className: "w-full rounded-lg border border-border-seam bg-bg-surface py-2 pl-9 pr-3 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 										})]
 									})] })
 								]
@@ -209,7 +210,7 @@ function k() {
 						]
 					}),
 					M === "details" && /* @__PURE__ */ T("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",
 						children: [
 							/* @__PURE__ */ T("h2", {
 								className: "text-base font-semibold text-text-primary mb-1 flex items-center gap-2",
@@ -225,7 +226,7 @@ function k() {
 									/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ T("label", {
 										className: "block text-sm font-medium text-text-primary mb-1.5",
 										children: ["Preferred Time Slot ", /* @__PURE__ */ w("span", {
-											className: "text-red-500",
+											className: "text-status-error-text",
 											children: "*"
 										})]
 									}), /* @__PURE__ */ w("div", {
@@ -236,7 +237,7 @@ function k() {
 												...t,
 												preferredTime: e.value
 											})),
-											className: t("rounded-lg border py-2 px-2 text-xs font-medium transition-colors", R.preferredTime === e.value ? "border-foreground bg-accent text-text-primary" : "border-border-subtle text-text-secondary hover:bg-accent hover:text-text-primary"),
+											className: t("rounded-lg border py-2 px-2 text-xs font-medium transition-colors", R.preferredTime === e.value ? "border-foreground bg-accent text-text-primary" : "border-border-seam text-text-secondary hover:bg-accent hover:text-text-primary"),
 											children: e.label
 										}, e.value))
 									})] }),
@@ -251,7 +252,7 @@ function k() {
 											...t,
 											specialInstructions: e.target.value
 										})),
-										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"
+										className: "w-full rounded-lg border border-border-seam 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__ */ T("label", {
 										className: "flex items-center gap-2 cursor-pointer",
@@ -262,7 +263,7 @@ function k() {
 												...t,
 												isUrgent: e.target.checked
 											})),
-											className: "h-4 w-4 rounded border-border-subtle"
+											className: "h-4 w-4 rounded border-border-seam"
 										}), /* @__PURE__ */ w("span", {
 											className: "text-sm text-text-secondary",
 											children: "This is urgent (additional charges may apply)"
@@ -273,7 +274,7 @@ function k() {
 						]
 					}),
 					M === "payment" && /* @__PURE__ */ T("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",
 						children: [
 							/* @__PURE__ */ T("h2", {
 								className: "text-base font-semibold text-text-primary mb-1 flex items-center gap-2",
@@ -287,9 +288,9 @@ function k() {
 								className: "space-y-4",
 								children: [
 									/* @__PURE__ */ T("div", {
-										className: "flex items-start gap-2 rounded-lg border border-blue-500/20 bg-blue-500/5 p-3",
-										children: [/* @__PURE__ */ w(c, { className: "h-4 w-4 text-blue-600 dark:text-blue-400 shrink-0 mt-0.5" }), /* @__PURE__ */ T("p", {
-											className: "text-xs text-blue-700 dark:text-blue-300",
+										className: "flex items-start gap-2 rounded-lg border border-status-info-border/20 bg-status-info-bg/5 p-3",
+										children: [/* @__PURE__ */ w(c, { className: "h-4 w-4 text-status-info-text shrink-0 mt-0.5" }), /* @__PURE__ */ T("p", {
+											className: "text-xs text-status-info-text",
 											children: [
 												"You need to pay ",
 												i(100, { minimumFractionDigits: 0 }),
@@ -322,7 +323,7 @@ function k() {
 										].map(({ value: e, label: n, sub: r, Icon: i }) => /* @__PURE__ */ T("button", {
 											type: "button",
 											onClick: () => V(e),
-											className: t("rounded-lg border p-3 text-center transition-colors", B === e ? "border-foreground bg-accent" : "border-border-subtle hover:bg-accent"),
+											className: t("rounded-lg border p-3 text-center transition-colors", B === e ? "border-foreground bg-accent" : "border-border-seam hover:bg-accent"),
 											children: [
 												/* @__PURE__ */ w(i, { className: "mx-auto h-5 w-5 text-text-secondary mb-1" }),
 												/* @__PURE__ */ w("p", {
@@ -369,7 +370,7 @@ function k() {
 													children: [/* @__PURE__ */ w("span", { children: "Balance Payment (at arrival):" }), /* @__PURE__ */ w("span", { children: i(50, { minimumFractionDigits: 0 }) })]
 												}),
 												/* @__PURE__ */ T("div", {
-													className: "flex justify-between border-t border-border-subtle pt-2 font-semibold",
+													className: "flex justify-between border-t border-border-seam pt-2 font-semibold",
 													children: [/* @__PURE__ */ w("span", {
 														className: "text-text-primary",
 														children: "Total Amount:"
@@ -386,14 +387,14 @@ function k() {
 						]
 					}),
 					M === "confirmation" && H && /* @__PURE__ */ T("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",
 						children: [
 							/* @__PURE__ */ T("div", {
 								className: "text-center mb-6",
 								children: [
 									/* @__PURE__ */ w("div", {
-										className: "mx-auto mb-3 flex h-14 w-14 items-center justify-center rounded-full bg-green-500/10",
-										children: /* @__PURE__ */ w(f, { className: "h-7 w-7 text-green-600 dark:text-green-400" })
+										className: "mx-auto mb-3 flex h-14 w-14 items-center justify-center rounded-full bg-status-success-bg/10",
+										children: /* @__PURE__ */ w(f, { className: "h-7 w-7 text-status-success-text" })
 									}),
 									/* @__PURE__ */ w("h2", {
 										className: "text-lg font-semibold text-text-primary mb-1",
@@ -448,9 +449,9 @@ function k() {
 								})]
 							}),
 							/* @__PURE__ */ T("div", {
-								className: "rounded-lg border border-green-500/20 bg-green-500/5 p-4 mb-4",
+								className: "rounded-lg border border-status-success-border/20 bg-status-success-bg/5 p-4 mb-4",
 								children: [/* @__PURE__ */ T("h3", {
-									className: "text-sm font-medium text-green-600 dark:text-green-400 mb-2 flex items-center gap-2",
+									className: "text-sm font-medium text-status-success-text mb-2 flex items-center gap-2",
 									children: [/* @__PURE__ */ w(f, { className: "h-4 w-4" }), "Payment Processed"]
 								}), /* @__PURE__ */ T("div", {
 									className: "grid grid-cols-2 gap-3 text-sm",
@@ -480,23 +481,23 @@ function k() {
 											className: "text-xs text-text-secondary",
 											children: "Status"
 										}), /* @__PURE__ */ w("p", {
-											className: "font-medium text-green-600 dark:text-green-400",
+											className: "font-medium text-status-success-text",
 											children: "Paid"
 										})] })
 									]
 								})]
 							}),
 							/* @__PURE__ */ T("div", {
-								className: "rounded-lg border border-blue-500/20 bg-blue-500/5 p-4 mb-6",
+								className: "rounded-lg border border-status-info-border/20 bg-status-info-bg/5 p-4 mb-6",
 								children: [/* @__PURE__ */ w("h3", {
-									className: "text-sm font-medium text-blue-600 dark:text-blue-400 mb-2",
+									className: "text-sm font-medium text-status-info-text mb-2",
 									children: "Next Steps"
 								}), /* @__PURE__ */ T("div", {
-									className: "space-y-2 text-xs text-blue-700 dark:text-blue-300",
+									className: "space-y-2 text-xs text-status-info-text",
 									children: [
 										/* @__PURE__ */ T("div", {
 											className: "flex items-start gap-2",
-											children: [/* @__PURE__ */ w(f, { className: "h-3.5 w-3.5 text-green-600 mt-0.5 shrink-0" }), /* @__PURE__ */ T("span", { children: [
+											children: [/* @__PURE__ */ w(f, { className: "h-3.5 w-3.5 text-status-success-text mt-0.5 shrink-0" }), /* @__PURE__ */ T("span", { children: [
 												"Payment confirmed -",
 												" ",
 												i(100, { minimumFractionDigits: 0 }),
@@ -536,7 +537,7 @@ function k() {
 								}), /* @__PURE__ */ w("button", {
 									type: "button",
 									onClick: () => A("/customer/carts"),
-									className: "flex-1 rounded-lg border border-border-subtle px-4 py-2.5 text-sm font-medium text-text-primary hover:bg-accent transition-colors",
+									className: "flex-1 rounded-lg border border-border-seam px-4 py-2.5 text-sm font-medium text-text-primary hover:bg-accent transition-colors",
 									children: "Browse More"
 								})]
 							})
@@ -548,7 +549,7 @@ function k() {
 							type: "button",
 							onClick: X,
 							disabled: M === "location",
-							className: t("flex items-center gap-2 rounded-lg border border-border-subtle px-4 py-2.5 text-sm font-medium text-text-primary transition-colors", M === "location" ? "opacity-40 cursor-not-allowed" : "hover:bg-accent"),
+							className: t("flex items-center gap-2 rounded-lg border border-border-seam px-4 py-2.5 text-sm font-medium text-text-primary transition-colors", M === "location" ? "opacity-40 cursor-not-allowed" : "hover:bg-accent"),
 							children: [/* @__PURE__ */ w(l, { className: "h-4 w-4" }), "Previous"]
 						}), /* @__PURE__ */ w("button", {
 							type: "button",
@@ -562,7 +563,7 @@ function k() {
 			}), /* @__PURE__ */ w("div", {
 				className: "lg:col-span-1",
 				children: /* @__PURE__ */ T("div", {
-					className: "sticky top-6 rounded-lg border border-border-subtle bg-bg-surface p-5",
+					className: "sticky top-6 rounded-lg border border-border-seam bg-bg-surface p-5",
 					children: [
 						/* @__PURE__ */ w("h3", {
 							className: "text-base font-semibold text-text-primary mb-4",
@@ -583,7 +584,7 @@ function k() {
 							})] })]
 						}),
 						/* @__PURE__ */ T("div", {
-							className: "space-y-2 text-sm border-t border-border-subtle pt-3",
+							className: "space-y-2 text-sm border-t border-border-seam pt-3",
 							children: [/* @__PURE__ */ T("div", {
 								className: "flex justify-between",
 								children: [/* @__PURE__ */ w("span", {
@@ -605,7 +606,7 @@ function k() {
 							})]
 						}),
 						/* @__PURE__ */ T("div", {
-							className: "flex items-center gap-2 mt-3 pt-3 border-t border-border-subtle text-green-600 dark:text-green-400",
+							className: "flex items-center gap-2 mt-3 pt-3 border-t border-border-seam text-status-success-text",
 							children: [/* @__PURE__ */ w(f, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ w("span", {
 								className: "text-xs",
 								children: "Pay remaining amount at cart"

package/dist/subscriberbot/pages/customer/DirectServiceBookingPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"DirectServiceBookingPage.js","names":[],"sources":["../../../../src/subscriberbot/pages/customer/DirectServiceBookingPage.tsx"],"sourcesContent":["/**\n * Direct Service Booking Page\n * @module subscriberbot/pages/customer\n *\n * 4-step wizard: Location > Details > Payment > Confirmation.\n * Progress indicator, step validation, geolocation button,\n * address fields, preferred time slot selector (30-min slots),\n * urgent booking checkbox, payment method selection,\n * payment summary, confirmation step with checkmark/IDs/next steps.\n */\n\nimport { useState, useMemo } from 'react';\nimport { useParams } from 'react-router-dom';\nimport {\n  ArrowLeft,\n  ArrowRight,\n  MapPin,\n  Calendar,\n  Clock,\n  CreditCard,\n  Smartphone,\n  Wallet,\n  CheckCircle2,\n  AlertCircle,\n  Navigation,\n  Phone,\n  Home,\n  Loader2,\n} from 'lucide-react';\nimport { PageLayout } from '../../components/PageLayout';\nimport { EmptyState } from '../../components/EmptyState';\nimport { useSubscriberBot } from '../../context/SubscriberBotContext';\nimport { getCartById } from '../../mocks/data';\nimport { cn } from '../../utils/cn';\nimport { formatCurrency } from '../../utils/formatters';\n\n// ============================================================================\n// Types\n// ============================================================================\n\ntype Step = 'location' | 'details' | 'payment' | 'confirmation';\nconst STEPS: Step[] = ['location', 'details', 'payment', 'confirmation'];\nconst STEP_LABELS: Record<Step, string> = {\n  location: 'Location',\n  details: 'Details',\n  payment: 'Payment',\n  confirmation: 'Confirmation',\n};\n\ninterface ServiceLocation {\n  address: string;\n  landmark: string;\n  instructions: string;\n  phoneNumber: string;\n}\n\ninterface BookingDetails {\n  preferredTime: string;\n  specialInstructions: string;\n  isUrgent: boolean;\n}\n\ninterface ConfirmationData {\n  bookingId: string;\n  transactionId: string;\n  estimatedArrival: string;\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction generateTimeSlots(): { value: string; label: string }[] {\n  const slots: { value: string; label: string }[] = [];\n  const now = new Date();\n  const start = new Date(now.getTime() + 30 * 60000); // 30 min from now\n\n  for (let i = 0; i < 8; i++) {\n    const time = new Date(start.getTime() + i * 30 * 60000);\n    const val = time.toTimeString().slice(0, 5);\n    const lbl = time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n    slots.push({ value: val, label: lbl });\n  }\n\n  return slots;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport function DirectServiceBookingPage() {\n  const { cartId } = useParams<{ cartId: string }>();\n  const { navigateTo } = useSubscriberBot();\n\n  const cart = useMemo(() => (cartId ? getCartById(cartId) : undefined), [cartId]);\n\n  const [step, setStep] = useState<Step>('location');\n  const [submitting, setSubmitting] = useState(false);\n\n  // Location step\n  const [location, setLocation] = useState<ServiceLocation>({\n    address: '',\n    landmark: '',\n    instructions: '',\n    phoneNumber: '',\n  });\n\n  // Details step\n  const [details, setDetails] = useState<BookingDetails>({\n    preferredTime: '',\n    specialInstructions: '',\n    isUrgent: false,\n  });\n\n  // Payment step\n  const [paymentMethod, setPaymentMethod] = useState<'upi' | 'card' | 'wallet'>('upi');\n\n  // Confirmation data\n  const [confirmation, setConfirmation] = useState<ConfirmationData | null>(null);\n\n  // Mock pricing\n  const advancePayment = 100;\n  const serviceFee = 50;\n  const balancePayment = serviceFee;\n  const totalAmount = advancePayment + serviceFee;\n\n  // --- Not found ---\n  if (!cart) {\n    return (\n      <PageLayout title=\"Cart Not Found\">\n        <EmptyState\n          icon={<Home className=\"h-12 w-12\" />}\n          title=\"Service not available\"\n          description=\"Direct service is not available for this cart.\"\n          action={\n            <button\n              type=\"button\"\n              onClick={() => navigateTo('/customer/carts')}\n              className=\"rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition-opacity\"\n            >\n              Browse Carts\n            </button>\n          }\n        />\n      </PageLayout>\n    );\n  }\n\n  const timeSlots = generateTimeSlots();\n  const stepIndex = STEPS.indexOf(step);\n\n  // --- Geolocation ---\n  const handleGetLocation = () => {\n    if (!navigator.geolocation) {\n      alert('Geolocation is not supported by this browser.');\n      return;\n    }\n    navigator.geolocation.getCurrentPosition(\n      () => {\n        setLocation((p) => ({ ...p, address: p.address || 'Current location detected' }));\n        alert('Location detected successfully!');\n      },\n      () => {\n        alert('Failed to get your location. Please enter address manually.');\n      }\n    );\n  };\n\n  // --- Validation ---\n  const validateLocation = (): boolean => {\n    if (!location.address.trim()) {\n      alert('Please enter your address.');\n      return false;\n    }\n    if (!location.phoneNumber.trim()) {\n      alert('Please enter your phone number.');\n      return false;\n    }\n    return true;\n  };\n\n  const validateDetails = (): boolean => {\n    if (!details.preferredTime) {\n      alert('Please select a preferred time slot.');\n      return false;\n    }\n    return true;\n  };\n\n  // --- Navigation ---\n  const nextStep = () => {\n    if (step === 'location' && validateLocation()) setStep('details');\n    else if (step === 'details' && validateDetails()) setStep('payment');\n    else if (step === 'payment') handleBookingSubmit();\n  };\n\n  const prevStep = () => {\n    if (step === 'details') setStep('location');\n    else if (step === 'payment') setStep('details');\n  };\n\n  // --- Submit ---\n  const handleBookingSubmit = () => {\n    setSubmitting(true);\n    setTimeout(() => {\n      const bookingId = `BK-${Date.now()}`;\n      const transactionId = `TXN-${Date.now()}`;\n      const estimatedArrival = new Date(Date.now() + 30 * 60000).toISOString();\n      setConfirmation({ bookingId, transactionId, estimatedArrival });\n      setStep('confirmation');\n      setSubmitting(false);\n    }, 1500);\n  };\n\n  return (\n    <PageLayout\n      title={\n        <div className=\"flex items-center gap-3\">\n          <button\n            type=\"button\"\n            onClick={() => navigateTo(`/customer/carts/${cart.id}`)}\n            className=\"rounded-md p-1 text-text-secondary hover:bg-accent hover:text-text-primary transition-colors\"\n          >\n            <ArrowLeft className=\"h-5 w-5\" />\n          </button>\n          <div>\n            <span>Book Direct Service</span>\n            <p className=\"text-xs font-normal text-text-secondary\">{cart.name}</p>\n          </div>\n        </div>\n      }\n    >\n      {/* Progress Indicator */}\n      <div className=\"flex items-center justify-between mb-6 px-2\">\n        {STEPS.map((s, i) => {\n          const isCompleted = i < stepIndex;\n          const isCurrent = s === step;\n          return (\n            <div key={s} className=\"flex items-center\">\n              <div className=\"flex flex-col items-center\">\n                <div\n                  className={cn(\n                    'flex h-8 w-8 items-center justify-center rounded-full text-xs font-medium',\n                    isCompleted\n                      ? 'bg-green-500/20 text-green-600 dark:text-green-400'\n                      : isCurrent\n                        ? 'bg-foreground text-background'\n                        : 'bg-bg-sunken text-text-secondary'\n                  )}\n                >\n                  {isCompleted ? <CheckCircle2 className=\"h-4 w-4\" /> : i + 1}\n                </div>\n                <span\n                  className={cn(\n                    'mt-1 text-[10px]',\n                    isCurrent ? 'font-medium text-text-primary' : 'text-text-secondary'\n                  )}\n                >\n                  {STEP_LABELS[s]}\n                </span>\n              </div>\n              {i < STEPS.length - 1 && (\n                <div\n                  className={cn(\n                    'mx-2 h-0.5 w-8 sm:w-16',\n                    isCompleted ? 'bg-green-500/30' : 'bg-border'\n                  )}\n                />\n              )}\n            </div>\n          );\n        })}\n      </div>\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n        {/* Main Content */}\n        <div className=\"lg:col-span-2\">\n          {/* Step 1: Location */}\n          {step === 'location' && (\n            <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-5\">\n              <h2 className=\"text-base font-semibold text-text-primary mb-1 flex items-center gap-2\">\n                <MapPin className=\"h-4 w-4\" />\n                Service Location\n              </h2>\n              <p className=\"text-xs text-text-secondary mb-5\">Where should the cart come?</p>\n\n              <div className=\"space-y-4\">\n                <div>\n                  <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n                    Your Address <span className=\"text-red-500\">*</span>\n                  </label>\n                  <div className=\"flex gap-2\">\n                    <input\n                      type=\"text\"\n                      placeholder=\"Enter your full address\"\n                      value={location.address}\n                      onChange={(e) => setLocation((p) => ({ ...p, address: e.target.value }))}\n                      className=\"flex-1 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)]\"\n                    />\n                    <button\n                      type=\"button\"\n                      onClick={handleGetLocation}\n                      className=\"flex items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-2 text-xs font-medium text-text-primary hover:bg-accent transition-colors whitespace-nowrap\"\n                    >\n                      <Navigation className=\"h-3.5 w-3.5\" />\n                      Use Current Location\n                    </button>\n                  </div>\n                </div>\n\n                <div>\n                  <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n                    Nearby Landmark\n                  </label>\n                  <input\n                    type=\"text\"\n                    placeholder=\"e.g., Near Metro Station, Opposite Mall\"\n                    value={location.landmark}\n                    onChange={(e) => setLocation((p) => ({ ...p, landmark: e.target.value }))}\n                    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)]\"\n                  />\n                </div>\n\n                <div>\n                  <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n                    Instructions for Cart Owner\n                  </label>\n                  <textarea\n                    rows={3}\n                    placeholder=\"Any specific instructions to help us find you...\"\n                    value={location.instructions}\n                    onChange={(e) => setLocation((p) => ({ ...p, instructions: e.target.value }))}\n                    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\"\n                  />\n                </div>\n\n                <div>\n                  <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n                    Phone Number <span className=\"text-red-500\">*</span>\n                  </label>\n                  <div className=\"relative\">\n                    <Phone className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary\" />\n                    <input\n                      type=\"tel\"\n                      placeholder=\"Enter your phone number\"\n                      value={location.phoneNumber}\n                      onChange={(e) => setLocation((p) => ({ ...p, phoneNumber: e.target.value }))}\n                      className=\"w-full rounded-lg border border-border-subtle bg-bg-surface py-2 pl-9 pr-3 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n                    />\n                  </div>\n                </div>\n              </div>\n            </div>\n          )}\n\n          {/* Step 2: Details */}\n          {step === 'details' && (\n            <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-5\">\n              <h2 className=\"text-base font-semibold text-text-primary mb-1 flex items-center gap-2\">\n                <Calendar className=\"h-4 w-4\" />\n                Booking Details\n              </h2>\n              <p className=\"text-xs text-text-secondary mb-5\">Choose your preferred timing</p>\n\n              <div className=\"space-y-4\">\n                <div>\n                  <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n                    Preferred Time Slot <span className=\"text-red-500\">*</span>\n                  </label>\n                  <div className=\"grid grid-cols-4 gap-2\">\n                    {timeSlots.map((slot) => (\n                      <button\n                        key={slot.value}\n                        type=\"button\"\n                        onClick={() => setDetails((p) => ({ ...p, preferredTime: slot.value }))}\n                        className={cn(\n                          'rounded-lg border py-2 px-2 text-xs font-medium transition-colors',\n                          details.preferredTime === slot.value\n                            ? 'border-foreground bg-accent text-text-primary'\n                            : 'border-border-subtle text-text-secondary hover:bg-accent hover:text-text-primary'\n                        )}\n                      >\n                        {slot.label}\n                      </button>\n                    ))}\n                  </div>\n                </div>\n\n                <div>\n                  <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n                    Special Instructions\n                  </label>\n                  <textarea\n                    rows={3}\n                    placeholder=\"Any special requests or dietary preferences...\"\n                    value={details.specialInstructions}\n                    onChange={(e) =>\n                      setDetails((p) => ({ ...p, specialInstructions: e.target.value }))\n                    }\n                    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\"\n                  />\n                </div>\n\n                <label className=\"flex items-center gap-2 cursor-pointer\">\n                  <input\n                    type=\"checkbox\"\n                    checked={details.isUrgent}\n                    onChange={(e) => setDetails((p) => ({ ...p, isUrgent: e.target.checked }))}\n                    className=\"h-4 w-4 rounded border-border-subtle\"\n                  />\n                  <span className=\"text-sm text-text-secondary\">\n                    This is urgent (additional charges may apply)\n                  </span>\n                </label>\n              </div>\n            </div>\n          )}\n\n          {/* Step 3: Payment */}\n          {step === 'payment' && (\n            <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-5\">\n              <h2 className=\"text-base font-semibold text-text-primary mb-1 flex items-center gap-2\">\n                <CreditCard className=\"h-4 w-4\" />\n                Advance Payment\n              </h2>\n              <p className=\"text-xs text-text-secondary mb-5\">Select your payment method</p>\n\n              <div className=\"space-y-4\">\n                {/* Info callout */}\n                <div className=\"flex items-start gap-2 rounded-lg border border-blue-500/20 bg-blue-500/5 p-3\">\n                  <AlertCircle className=\"h-4 w-4 text-blue-600 dark:text-blue-400 shrink-0 mt-0.5\" />\n                  <p className=\"text-xs text-blue-700 dark:text-blue-300\">\n                    You need to pay {formatCurrency(advancePayment, { minimumFractionDigits: 0 })}{' '}\n                    in advance to confirm your booking. Pay the remaining when the cart arrives.\n                  </p>\n                </div>\n\n                {/* Payment methods */}\n                <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-3\">\n                  {[\n                    {\n                      value: 'upi' as const,\n                      label: 'UPI',\n                      sub: 'Instant payment',\n                      Icon: Smartphone,\n                    },\n                    {\n                      value: 'card' as const,\n                      label: 'Card',\n                      sub: 'Secure payment',\n                      Icon: CreditCard,\n                    },\n                    {\n                      value: 'wallet' as const,\n                      label: 'Wallet',\n                      sub: 'Quick payment',\n                      Icon: Wallet,\n                    },\n                  ].map(({ value, label, sub, Icon }) => (\n                    <button\n                      key={value}\n                      type=\"button\"\n                      onClick={() => setPaymentMethod(value)}\n                      className={cn(\n                        'rounded-lg border p-3 text-center transition-colors',\n                        paymentMethod === value\n                          ? 'border-foreground bg-accent'\n                          : 'border-border-subtle hover:bg-accent'\n                      )}\n                    >\n                      <Icon className=\"mx-auto h-5 w-5 text-text-secondary mb-1\" />\n                      <p className=\"text-sm font-medium text-text-primary\">{label}</p>\n                      <p className=\"text-[10px] text-text-secondary\">{sub}</p>\n                    </button>\n                  ))}\n                </div>\n\n                {/* Payment Summary */}\n                <div className=\"rounded-lg bg-bg-sunken p-4\">\n                  <h3 className=\"text-sm font-medium text-text-primary mb-2\">Payment Summary</h3>\n                  <div className=\"space-y-2 text-sm\">\n                    <div className=\"flex justify-between\">\n                      <span className=\"text-text-secondary\">Advance Payment:</span>\n                      <span className=\"text-text-primary\">\n                        {formatCurrency(advancePayment, { minimumFractionDigits: 0 })}\n                      </span>\n                    </div>\n                    <div className=\"flex justify-between\">\n                      <span className=\"text-text-secondary\">Service Fee:</span>\n                      <span className=\"text-text-primary\">\n                        {formatCurrency(serviceFee, { minimumFractionDigits: 0 })}\n                      </span>\n                    </div>\n                    <div className=\"flex justify-between text-text-secondary\">\n                      <span>Balance Payment (at arrival):</span>\n                      <span>{formatCurrency(balancePayment, { minimumFractionDigits: 0 })}</span>\n                    </div>\n                    <div className=\"flex justify-between border-t border-border-subtle pt-2 font-semibold\">\n                      <span className=\"text-text-primary\">Total Amount:</span>\n                      <span className=\"text-text-primary\">\n                        {formatCurrency(totalAmount, { minimumFractionDigits: 0 })}\n                      </span>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          )}\n\n          {/* Step 4: Confirmation */}\n          {step === 'confirmation' && confirmation && (\n            <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-5\">\n              {/* Success header */}\n              <div className=\"text-center mb-6\">\n                <div className=\"mx-auto mb-3 flex h-14 w-14 items-center justify-center rounded-full bg-green-500/10\">\n                  <CheckCircle2 className=\"h-7 w-7 text-green-600 dark:text-green-400\" />\n                </div>\n                <h2 className=\"text-lg font-semibold text-text-primary mb-1\">Booking Confirmed!</h2>\n                <p className=\"text-sm text-text-secondary\">\n                  Your direct service booking has been confirmed and payment processed.\n                </p>\n              </div>\n\n              {/* Booking details */}\n              <div className=\"rounded-lg bg-bg-sunken p-4 mb-4\">\n                <h3 className=\"text-sm font-medium text-text-primary mb-3\">Booking Details</h3>\n                <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm\">\n                  <div>\n                    <span className=\"text-xs text-text-secondary\">Booking ID</span>\n                    <p className=\"font-mono text-xs text-text-primary\">{confirmation.bookingId}</p>\n                  </div>\n                  <div>\n                    <span className=\"text-xs text-text-secondary\">Est. Arrival</span>\n                    <p className=\"text-text-primary\">\n                      {new Date(confirmation.estimatedArrival).toLocaleTimeString([], {\n                        hour: '2-digit',\n                        minute: '2-digit',\n                      })}\n                    </p>\n                  </div>\n                  <div>\n                    <span className=\"text-xs text-text-secondary\">Location</span>\n                    <p className=\"text-text-primary truncate\">{location.address}</p>\n                  </div>\n                  <div>\n                    <span className=\"text-xs text-text-secondary\">Phone</span>\n                    <p className=\"text-text-primary\">{location.phoneNumber}</p>\n                  </div>\n                </div>\n              </div>\n\n              {/* Payment details */}\n              <div className=\"rounded-lg border border-green-500/20 bg-green-500/5 p-4 mb-4\">\n                <h3 className=\"text-sm font-medium text-green-600 dark:text-green-400 mb-2 flex items-center gap-2\">\n                  <CheckCircle2 className=\"h-4 w-4\" />\n                  Payment Processed\n                </h3>\n                <div className=\"grid grid-cols-2 gap-3 text-sm\">\n                  <div>\n                    <span className=\"text-xs text-text-secondary\">Transaction ID</span>\n                    <p className=\"font-mono text-xs text-text-primary\">\n                      {confirmation.transactionId}\n                    </p>\n                  </div>\n                  <div>\n                    <span className=\"text-xs text-text-secondary\">Advance Paid</span>\n                    <p className=\"font-medium text-text-primary\">\n                      {formatCurrency(advancePayment, { minimumFractionDigits: 0 })}\n                    </p>\n                  </div>\n                  <div>\n                    <span className=\"text-xs text-text-secondary\">Method</span>\n                    <p className=\"capitalize text-text-primary\">{paymentMethod}</p>\n                  </div>\n                  <div>\n                    <span className=\"text-xs text-text-secondary\">Status</span>\n                    <p className=\"font-medium text-green-600 dark:text-green-400\">Paid</p>\n                  </div>\n                </div>\n              </div>\n\n              {/* Next Steps */}\n              <div className=\"rounded-lg border border-blue-500/20 bg-blue-500/5 p-4 mb-6\">\n                <h3 className=\"text-sm font-medium text-blue-600 dark:text-blue-400 mb-2\">\n                  Next Steps\n                </h3>\n                <div className=\"space-y-2 text-xs text-blue-700 dark:text-blue-300\">\n                  <div className=\"flex items-start gap-2\">\n                    <CheckCircle2 className=\"h-3.5 w-3.5 text-green-600 mt-0.5 shrink-0\" />\n                    <span>\n                      Payment confirmed -{' '}\n                      {formatCurrency(advancePayment, { minimumFractionDigits: 0 })} paid\n                    </span>\n                  </div>\n                  <div className=\"flex items-start gap-2\">\n                    <Clock className=\"h-3.5 w-3.5 mt-0.5 shrink-0\" />\n                    <span>\n                      Cart will arrive around{' '}\n                      {new Date(confirmation.estimatedArrival).toLocaleTimeString([], {\n                        hour: '2-digit',\n                        minute: '2-digit',\n                      })}\n                    </span>\n                  </div>\n                  <div className=\"flex items-start gap-2\">\n                    <CreditCard className=\"h-3.5 w-3.5 mt-0.5 shrink-0\" />\n                    <span>\n                      Pay remaining {formatCurrency(balancePayment, { minimumFractionDigits: 0 })}{' '}\n                      when cart arrives\n                    </span>\n                  </div>\n                </div>\n              </div>\n\n              {/* Action buttons */}\n              <div className=\"flex gap-3\">\n                <button\n                  type=\"button\"\n                  onClick={() => navigateTo(`/customer/bookings/${confirmation.bookingId}`)}\n                  className=\"flex-1 rounded-lg bg-foreground px-4 py-2.5 text-sm font-medium text-background hover:opacity-90 transition-opacity\"\n                >\n                  View Booking\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => navigateTo('/customer/carts')}\n                  className=\"flex-1 rounded-lg border border-border-subtle px-4 py-2.5 text-sm font-medium text-text-primary hover:bg-accent transition-colors\"\n                >\n                  Browse More\n                </button>\n              </div>\n            </div>\n          )}\n\n          {/* Navigation Buttons */}\n          {step !== 'confirmation' && (\n            <div className=\"flex justify-between mt-5\">\n              <button\n                type=\"button\"\n                onClick={prevStep}\n                disabled={step === 'location'}\n                className={cn(\n                  'flex items-center gap-2 rounded-lg border border-border-subtle px-4 py-2.5 text-sm font-medium text-text-primary transition-colors',\n                  step === 'location' ? 'opacity-40 cursor-not-allowed' : 'hover:bg-accent'\n                )}\n              >\n                <ArrowLeft className=\"h-4 w-4\" />\n                Previous\n              </button>\n              <button\n                type=\"button\"\n                onClick={nextStep}\n                disabled={submitting}\n                className={cn(\n                  'flex items-center gap-2 rounded-lg bg-foreground px-4 py-2.5 text-sm font-medium text-background transition-opacity',\n                  submitting ? 'opacity-60 cursor-not-allowed' : 'hover:opacity-90'\n                )}\n              >\n                {submitting ? (\n                  <>\n                    <Loader2 className=\"h-4 w-4 animate-spin\" />\n                    {step === 'payment' ? 'Processing Payment...' : 'Processing...'}\n                  </>\n                ) : (\n                  <>\n                    {step === 'payment' ? 'Confirm & Pay' : 'Next'}\n                    <ArrowRight className=\"h-4 w-4\" />\n                  </>\n                )}\n              </button>\n            </div>\n          )}\n        </div>\n\n        {/* Sidebar: Service Summary */}\n        <div className=\"lg:col-span-1\">\n          <div className=\"sticky top-6 rounded-lg border border-border-subtle bg-bg-surface p-5\">\n            <h3 className=\"text-base font-semibold text-text-primary mb-4\">Service Summary</h3>\n\n            <div className=\"flex items-center gap-3 mb-4\">\n              <img src={cart.image} alt={cart.name} className=\"h-12 w-12 rounded-lg object-cover\" />\n              <div>\n                <p className=\"text-sm font-medium text-text-primary\">{cart.name}</p>\n                <p className=\"text-xs text-text-secondary\">{cart.category}</p>\n              </div>\n            </div>\n\n            <div className=\"space-y-2 text-sm border-t border-border-subtle pt-3\">\n              <div className=\"flex justify-between\">\n                <span className=\"text-text-secondary\">Service Fee:</span>\n                <span className=\"text-text-primary\">\n                  {formatCurrency(serviceFee, { minimumFractionDigits: 0 })}\n                </span>\n              </div>\n              <div className=\"flex justify-between\">\n                <span className=\"text-text-secondary\">Advance Payment:</span>\n                <span className=\"font-medium text-text-primary\">\n                  {formatCurrency(advancePayment, { minimumFractionDigits: 0 })}\n                </span>\n              </div>\n            </div>\n\n            <div className=\"flex items-center gap-2 mt-3 pt-3 border-t border-border-subtle text-green-600 dark:text-green-400\">\n              <CheckCircle2 className=\"h-3.5 w-3.5\" />\n              <span className=\"text-xs\">Pay remaining amount at cart</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAyCA,IAAM,IAAgB;CAAC;CAAY;CAAW;CAAW;CAAe,EAClE,IAAoC;CACxC,UAAU;CACV,SAAS;CACT,SAAS;CACT,cAAc;CACf;AAyBD,SAAS,IAAwD;CAC/D,IAAM,IAA4C,EAAE,EAE9C,IAAQ,IAAI,sBADN,IAAI,MAAM,EACK,SAAS,GAAG,KAAK,IAAM;AAElD,MAAK,IAAI,IAAI,GAAG,IAAI,GAAG,KAAK;EAC1B,IAAM,IAAO,IAAI,KAAK,EAAM,SAAS,GAAG,IAAI,KAAK,IAAM,EACjD,IAAM,EAAK,cAAc,CAAC,MAAM,GAAG,EAAE,EACrC,IAAM,EAAK,mBAAmB,EAAE,EAAE;GAAE,MAAM;GAAW,QAAQ;GAAW,CAAC;AAC/E,IAAM,KAAK;GAAE,OAAO;GAAK,OAAO;GAAK,CAAC;;AAGxC,QAAO;;AAOT,SAAgB,IAA2B;CACzC,IAAM,EAAE,cAAW,GAA+B,EAC5C,EAAE,kBAAe,GAAkB,EAEnC,IAAO,QAAe,IAAS,EAAY,EAAO,GAAG,KAAA,GAAY,CAAC,EAAO,CAAC,EAE1E,CAAC,GAAM,KAAW,EAAe,WAAW,EAC5C,CAAC,GAAY,KAAiB,EAAS,GAAM,EAG7C,CAAC,GAAU,KAAe,EAA0B;EACxD,SAAS;EACT,UAAU;EACV,cAAc;EACd,aAAa;EACd,CAAC,EAGI,CAAC,GAAS,KAAc,EAAyB;EACrD,eAAe;EACf,qBAAqB;EACrB,UAAU;EACX,CAAC,EAGI,CAAC,GAAe,KAAoB,EAAoC,MAAM,EAG9E,CAAC,GAAc,KAAmB,EAAkC,KAAK;AAS/E,KAAI,CAAC,EACH,QACE,kBAAC,GAAD;EAAY,OAAM;YAChB,kBAAC,GAAD;GACE,MAAM,kBAAC,GAAD,EAAM,WAAU,aAAc,CAAA;GACpC,OAAM;GACN,aAAY;GACZ,QACE,kBAAC,UAAD;IACE,MAAK;IACL,eAAe,EAAW,kBAAkB;IAC5C,WAAU;cACX;IAEQ,CAAA;GAEX,CAAA;EACS,CAAA;CAIjB,IAAM,IAAY,GAAmB,EAC/B,IAAY,EAAM,QAAQ,EAAK,EAG/B,UAA0B;AAC9B,MAAI,CAAC,UAAU,aAAa;AAC1B,SAAM,gDAAgD;AACtD;;AAEF,YAAU,YAAY,yBACd;AAEJ,GADA,GAAa,OAAO;IAAE,GAAG;IAAG,SAAS,EAAE,WAAW;IAA6B,EAAE,EACjF,MAAM,kCAAkC;WAEpC;AACJ,SAAM,8DAA8D;IAEvE;IAIG,UACC,EAAS,QAAQ,MAAM,GAIvB,EAAS,YAAY,MAAM,GAIzB,MAHL,MAAM,kCAAkC,EACjC,OALP,MAAM,6BAA6B,EAC5B,KASL,UACC,EAAQ,gBAIN,MAHL,MAAM,uCAAuC,EACtC,KAML,UAAiB;AACrB,EAAI,MAAS,cAAc,GAAkB,GAAE,EAAQ,UAAU,GACxD,MAAS,aAAa,GAAiB,GAAE,EAAQ,UAAU,GAC3D,MAAS,aAAW,GAAqB;IAG9C,UAAiB;AACrB,EAAI,MAAS,YAAW,EAAQ,WAAW,GAClC,MAAS,aAAW,EAAQ,UAAU;IAI3C,UAA4B;AAEhC,EADA,EAAc,GAAK,EACnB,iBAAiB;AAMf,GAFA,EAAgB;IAAE,WAHA,MAAM,KAAK,KAAK;IAGL,eAFP,OAAO,KAAK,KAAK;IAEK,kBADnB,IAAI,KAAK,KAAK,KAAK,GAAG,KAAK,IAAM,CAAC,aAAa;IACV,CAAC,EAC/D,EAAQ,eAAe,EACvB,EAAc,GAAM;KACnB,KAAK;;AAGV,QACE,kBAAC,GAAD;EACE,OACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,UAAD;IACE,MAAK;IACL,eAAe,EAAW,mBAAmB,EAAK,KAAK;IACvD,WAAU;cAEV,kBAAC,GAAD,EAAW,WAAU,WAAY,CAAA;IAC1B,CAAA,EACT,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD,EAAA,UAAM,uBAA0B,CAAA,EAChC,kBAAC,KAAD;IAAG,WAAU;cAA2C,EAAK;IAAS,CAAA,CAClE,EAAA,CAAA,CACF;;YAdV,CAkBE,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAM,KAAK,GAAG,MAAM;IACnB,IAAM,IAAc,IAAI,GAClB,IAAY,MAAM;AACxB,WACE,kBAAC,OAAD;KAAa,WAAU;eAAvB,CACE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OACE,WAAW,EACT,6EACA,IACI,uDACA,IACE,kCACA,mCACP;iBAEA,IAAc,kBAAC,GAAD,EAAc,WAAU,WAAY,CAAA,GAAG,IAAI;OACtD,CAAA,EACN,kBAAC,QAAD;OACE,WAAW,EACT,oBACA,IAAY,kCAAkC,sBAC/C;iBAEA,EAAY;OACR,CAAA,CACH;SACL,IAAI,EAAM,SAAS,KAClB,kBAAC,OAAD,EACE,WAAW,EACT,0BACA,IAAc,oBAAoB,YACnC,EACD,CAAA,CAEA;OA/BI,EA+BJ;KAER;GACE,CAAA,EAEN,kBAAC,OAAD;GAAK,WAAU;aAAf,CAEE,kBAAC,OAAD;IAAK,WAAU;cAAf;KAEG,MAAS,cACR,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,MAAD;QAAI,WAAU;kBAAd,CACE,kBAAC,GAAD,EAAQ,WAAU,WAAY,CAAA,EAAA,mBAE3B;;OACL,kBAAC,KAAD;QAAG,WAAU;kBAAmC;QAA+B,CAAA;OAE/E,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;UAAO,WAAU;oBAAjB,CAAsE,iBACvD,kBAAC,QAAD;WAAM,WAAU;qBAAe;WAAQ,CAAA,CAC9C;aACR,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,SAAD;WACE,MAAK;WACL,aAAY;WACZ,OAAO,EAAS;WAChB,WAAW,MAAM,GAAa,OAAO;YAAE,GAAG;YAAG,SAAS,EAAE,OAAO;YAAO,EAAE;WACxE,WAAU;WACV,CAAA,EACF,kBAAC,UAAD;WACE,MAAK;WACL,SAAS;WACT,WAAU;qBAHZ,CAKE,kBAAC,GAAD,EAAY,WAAU,eAAgB,CAAA,EAAA,uBAE/B;aACL;YACF,EAAA,CAAA;SAEN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;UAAO,WAAU;oBAAqD;UAE9D,CAAA,EACR,kBAAC,SAAD;UACE,MAAK;UACL,aAAY;UACZ,OAAO,EAAS;UAChB,WAAW,MAAM,GAAa,OAAO;WAAE,GAAG;WAAG,UAAU,EAAE,OAAO;WAAO,EAAE;UACzE,WAAU;UACV,CAAA,CACE,EAAA,CAAA;SAEN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;UAAO,WAAU;oBAAqD;UAE9D,CAAA,EACR,kBAAC,YAAD;UACE,MAAM;UACN,aAAY;UACZ,OAAO,EAAS;UAChB,WAAW,MAAM,GAAa,OAAO;WAAE,GAAG;WAAG,cAAc,EAAE,OAAO;WAAO,EAAE;UAC7E,WAAU;UACV,CAAA,CACE,EAAA,CAAA;SAEN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;UAAO,WAAU;oBAAjB,CAAsE,iBACvD,kBAAC,QAAD;WAAM,WAAU;qBAAe;WAAQ,CAAA,CAC9C;aACR,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,GAAD,EAAO,WAAU,wEAAyE,CAAA,EAC1F,kBAAC,SAAD;WACE,MAAK;WACL,aAAY;WACZ,OAAO,EAAS;WAChB,WAAW,MAAM,GAAa,OAAO;YAAE,GAAG;YAAG,aAAa,EAAE,OAAO;YAAO,EAAE;WAC5E,WAAU;WACV,CAAA,CACE;YACF,EAAA,CAAA;SACF;;OACF;;KAIP,MAAS,aACR,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,MAAD;QAAI,WAAU;kBAAd,CACE,kBAAC,GAAD,EAAU,WAAU,WAAY,CAAA,EAAA,kBAE7B;;OACL,kBAAC,KAAD;QAAG,WAAU;kBAAmC;QAAgC,CAAA;OAEhF,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;UAAO,WAAU;oBAAjB,CAAsE,wBAChD,kBAAC,QAAD;WAAM,WAAU;qBAAe;WAAQ,CAAA,CACrD;aACR,kBAAC,OAAD;UAAK,WAAU;oBACZ,EAAU,KAAK,MACd,kBAAC,UAAD;WAEE,MAAK;WACL,eAAe,GAAY,OAAO;YAAE,GAAG;YAAG,eAAe,EAAK;YAAO,EAAE;WACvE,WAAW,EACT,qEACA,EAAQ,kBAAkB,EAAK,QAC3B,kDACA,mFACL;qBAEA,EAAK;WACC,EAXF,EAAK,MAWH,CACT;UACE,CAAA,CACF,EAAA,CAAA;SAEN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;UAAO,WAAU;oBAAqD;UAE9D,CAAA,EACR,kBAAC,YAAD;UACE,MAAM;UACN,aAAY;UACZ,OAAO,EAAQ;UACf,WAAW,MACT,GAAY,OAAO;WAAE,GAAG;WAAG,qBAAqB,EAAE,OAAO;WAAO,EAAE;UAEpE,WAAU;UACV,CAAA,CACE,EAAA,CAAA;SAEN,kBAAC,SAAD;UAAO,WAAU;oBAAjB,CACE,kBAAC,SAAD;WACE,MAAK;WACL,SAAS,EAAQ;WACjB,WAAW,MAAM,GAAY,OAAO;YAAE,GAAG;YAAG,UAAU,EAAE,OAAO;YAAS,EAAE;WAC1E,WAAU;WACV,CAAA,EACF,kBAAC,QAAD;WAAM,WAAU;qBAA8B;WAEvC,CAAA,CACD;;SACJ;;OACF;;KAIP,MAAS,aACR,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,MAAD;QAAI,WAAU;kBAAd,CACE,kBAAC,GAAD,EAAY,WAAU,WAAY,CAAA,EAAA,kBAE/B;;OACL,kBAAC,KAAD;QAAG,WAAU;kBAAmC;QAA8B,CAAA;OAE9E,kBAAC,OAAD;QAAK,WAAU;kBAAf;SAEE,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,GAAD,EAAa,WAAU,4DAA6D,CAAA,EACpF,kBAAC,KAAD;WAAG,WAAU;qBAAb;YAAwD;YACrC,EAAe,KAAgB,EAAE,uBAAuB,GAAG,CAAC;YAAE;YAAI;YAEjF;aACA;;SAGN,kBAAC,OAAD;UAAK,WAAU;oBACZ;WACC;YACE,OAAO;YACP,OAAO;YACP,KAAK;YACL,MAAM;YACP;WACD;YACE,OAAO;YACP,OAAO;YACP,KAAK;YACL,MAAM;YACP;WACD;YACE,OAAO;YACP,OAAO;YACP,KAAK;YACL,MAAM;YACP;WACF,CAAC,KAAK,EAAE,UAAO,UAAO,QAAK,cAC1B,kBAAC,UAAD;WAEE,MAAK;WACL,eAAe,EAAiB,EAAM;WACtC,WAAW,EACT,uDACA,MAAkB,IACd,gCACA,uCACL;qBATH;YAWE,kBAAC,GAAD,EAAM,WAAU,4CAA6C,CAAA;YAC7D,kBAAC,KAAD;aAAG,WAAU;uBAAyC;aAAU,CAAA;YAChE,kBAAC,KAAD;aAAG,WAAU;uBAAmC;aAAQ,CAAA;YACjD;aAbF,EAaE,CACT;UACE,CAAA;SAGN,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,MAAD;WAAI,WAAU;qBAA6C;WAAoB,CAAA,EAC/E,kBAAC,OAAD;WAAK,WAAU;qBAAf;YACE,kBAAC,OAAD;aAAK,WAAU;uBAAf,CACE,kBAAC,QAAD;cAAM,WAAU;wBAAsB;cAAuB,CAAA,EAC7D,kBAAC,QAAD;cAAM,WAAU;wBACb,EAAe,KAAgB,EAAE,uBAAuB,GAAG,CAAC;cACxD,CAAA,CACH;;YACN,kBAAC,OAAD;aAAK,WAAU;uBAAf,CACE,kBAAC,QAAD;cAAM,WAAU;wBAAsB;cAAmB,CAAA,EACzD,kBAAC,QAAD;cAAM,WAAU;wBACb,EAAe,IAAY,EAAE,uBAAuB,GAAG,CAAC;cACpD,CAAA,CACH;;YACN,kBAAC,OAAD;aAAK,WAAU;uBAAf,CACE,kBAAC,QAAD,EAAA,UAAM,iCAAoC,CAAA,EAC1C,kBAAC,QAAD,EAAA,UAAO,EAAe,IAAgB,EAAE,uBAAuB,GAAG,CAAC,EAAQ,CAAA,CACvE;;YACN,kBAAC,OAAD;aAAK,WAAU;uBAAf,CACE,kBAAC,QAAD;cAAM,WAAU;wBAAoB;cAAoB,CAAA,EACxD,kBAAC,QAAD;cAAM,WAAU;wBACb,EAAe,KAAa,EAAE,uBAAuB,GAAG,CAAC;cACrD,CAAA,CACH;;YACF;aACF;;SACF;;OACF;;KAIP,MAAS,kBAAkB,KAC1B,kBAAC,OAAD;MAAK,WAAU;gBAAf;OAEE,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,kBAAC,OAAD;UAAK,WAAU;oBACb,kBAAC,GAAD,EAAc,WAAU,8CAA+C,CAAA;UACnE,CAAA;SACN,kBAAC,MAAD;UAAI,WAAU;oBAA+C;UAAuB,CAAA;SACpF,kBAAC,KAAD;UAAG,WAAU;oBAA8B;UAEvC,CAAA;SACA;;OAGN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,MAAD;SAAI,WAAU;mBAA6C;SAAoB,CAAA,EAC/E,kBAAC,OAAD;SAAK,WAAU;mBAAf;UACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD;WAAM,WAAU;qBAA8B;WAAiB,CAAA,EAC/D,kBAAC,KAAD;WAAG,WAAU;qBAAuC,EAAa;WAAc,CAAA,CAC3E,EAAA,CAAA;UACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD;WAAM,WAAU;qBAA8B;WAAmB,CAAA,EACjE,kBAAC,KAAD;WAAG,WAAU;qBACV,IAAI,KAAK,EAAa,iBAAiB,CAAC,mBAAmB,EAAE,EAAE;YAC9D,MAAM;YACN,QAAQ;YACT,CAAC;WACA,CAAA,CACA,EAAA,CAAA;UACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD;WAAM,WAAU;qBAA8B;WAAe,CAAA,EAC7D,kBAAC,KAAD;WAAG,WAAU;qBAA8B,EAAS;WAAY,CAAA,CAC5D,EAAA,CAAA;UACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD;WAAM,WAAU;qBAA8B;WAAY,CAAA,EAC1D,kBAAC,KAAD;WAAG,WAAU;qBAAqB,EAAS;WAAgB,CAAA,CACvD,EAAA,CAAA;UACF;WACF;;OAGN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,MAAD;SAAI,WAAU;mBAAd,CACE,kBAAC,GAAD,EAAc,WAAU,WAAY,CAAA,EAAA,oBAEjC;YACL,kBAAC,OAAD;SAAK,WAAU;mBAAf;UACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD;WAAM,WAAU;qBAA8B;WAAqB,CAAA,EACnE,kBAAC,KAAD;WAAG,WAAU;qBACV,EAAa;WACZ,CAAA,CACA,EAAA,CAAA;UACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD;WAAM,WAAU;qBAA8B;WAAmB,CAAA,EACjE,kBAAC,KAAD;WAAG,WAAU;qBACV,EAAe,KAAgB,EAAE,uBAAuB,GAAG,CAAC;WAC3D,CAAA,CACA,EAAA,CAAA;UACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD;WAAM,WAAU;qBAA8B;WAAa,CAAA,EAC3D,kBAAC,KAAD;WAAG,WAAU;qBAAgC;WAAkB,CAAA,CAC3D,EAAA,CAAA;UACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD;WAAM,WAAU;qBAA8B;WAAa,CAAA,EAC3D,kBAAC,KAAD;WAAG,WAAU;qBAAiD;WAAQ,CAAA,CAClE,EAAA,CAAA;UACF;WACF;;OAGN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,MAAD;SAAI,WAAU;mBAA4D;SAErE,CAAA,EACL,kBAAC,OAAD;SAAK,WAAU;mBAAf;UACE,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,GAAD,EAAc,WAAU,8CAA+C,CAAA,EACvE,kBAAC,QAAD,EAAA,UAAA;YAAM;YACgB;YACnB,EAAe,KAAgB,EAAE,uBAAuB,GAAG,CAAC;YAAC;YACzD,EAAA,CAAA,CACH;;UACN,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,GAAD,EAAO,WAAU,+BAAgC,CAAA,EACjD,kBAAC,QAAD,EAAA,UAAA;YAAM;YACoB;YACvB,IAAI,KAAK,EAAa,iBAAiB,CAAC,mBAAmB,EAAE,EAAE;aAC9D,MAAM;aACN,QAAQ;aACT,CAAC;YACG,EAAA,CAAA,CACH;;UACN,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,GAAD,EAAY,WAAU,+BAAgC,CAAA,EACtD,kBAAC,QAAD,EAAA,UAAA;YAAM;YACW,EAAe,IAAgB,EAAE,uBAAuB,GAAG,CAAC;YAAE;YAAI;YAE5E,EAAA,CAAA,CACH;;UACF;WACF;;OAGN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,UAAD;SACE,MAAK;SACL,eAAe,EAAW,sBAAsB,EAAa,YAAY;SACzE,WAAU;mBACX;SAEQ,CAAA,EACT,kBAAC,UAAD;SACE,MAAK;SACL,eAAe,EAAW,kBAAkB;SAC5C,WAAU;mBACX;SAEQ,CAAA,CACL;;OACF;;KAIP,MAAS,kBACR,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,UAAD;OACE,MAAK;OACL,SAAS;OACT,UAAU,MAAS;OACnB,WAAW,EACT,sIACA,MAAS,aAAa,kCAAkC,kBACzD;iBAPH,CASE,kBAAC,GAAD,EAAW,WAAU,WAAY,CAAA,EAAA,WAE1B;UACT,kBAAC,UAAD;OACE,MAAK;OACL,SAAS;OACT,UAAU;OACV,WAAW,EACT,uHACA,IAAa,kCAAkC,mBAChD;iBAEA,IACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAS,WAAU,wBAAyB,CAAA,EAC3C,MAAS,YAAY,0BAA0B,gBAC/C,EAAA,CAAA,GAEH,kBAAA,GAAA,EAAA,UAAA,CACG,MAAS,YAAY,kBAAkB,QACxC,kBAAC,GAAD,EAAY,WAAU,WAAY,CAAA,CACjC,EAAA,CAAA;OAEE,CAAA,CACL;;KAEJ;OAGN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,MAAD;OAAI,WAAU;iBAAiD;OAAoB,CAAA;MAEnF,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,KAAK,EAAK;QAAO,KAAK,EAAK;QAAM,WAAU;QAAsC,CAAA,EACtF,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;QAAG,WAAU;kBAAyC,EAAK;QAAS,CAAA,EACpE,kBAAC,KAAD;QAAG,WAAU;kBAA+B,EAAK;QAAa,CAAA,CAC1D,EAAA,CAAA,CACF;;MAEN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,QAAD;SAAM,WAAU;mBAAsB;SAAmB,CAAA,EACzD,kBAAC,QAAD;SAAM,WAAU;mBACb,EAAe,IAAY,EAAE,uBAAuB,GAAG,CAAC;SACpD,CAAA,CACH;WACN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,QAAD;SAAM,WAAU;mBAAsB;SAAuB,CAAA,EAC7D,kBAAC,QAAD;SAAM,WAAU;mBACb,EAAe,KAAgB,EAAE,uBAAuB,GAAG,CAAC;SACxD,CAAA,CACH;UACF;;MAEN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,GAAD,EAAc,WAAU,eAAgB,CAAA,EACxC,kBAAC,QAAD;QAAM,WAAU;kBAAU;QAAmC,CAAA,CACzD;;MACF;;IACF,CAAA,CACF;KACK"}
+{"version":3,"file":"DirectServiceBookingPage.js","names":[],"sources":["../../../../src/subscriberbot/pages/customer/DirectServiceBookingPage.tsx"],"sourcesContent":["/**\n * Direct Service Booking Page\n * @module subscriberbot/pages/customer\n *\n * 4-step wizard: Location > Details > Payment > Confirmation.\n * Progress indicator, step validation, geolocation button,\n * address fields, preferred time slot selector (30-min slots),\n * urgent booking checkbox, payment method selection,\n * payment summary, confirmation step with checkmark/IDs/next steps.\n */\n\nimport { useState, useMemo } from 'react';\nimport { useParams } from 'react-router-dom';\nimport {\n  ArrowLeft,\n  ArrowRight,\n  MapPin,\n  Calendar,\n  Clock,\n  CreditCard,\n  Smartphone,\n  Wallet,\n  CheckCircle2,\n  AlertCircle,\n  Navigation,\n  Phone,\n  Home,\n  Loader2,\n} from 'lucide-react';\nimport { PageLayout } from '../../components/PageLayout';\nimport { EmptyState } from '../../components/EmptyState';\nimport { useSubscriberBot } from '../../context/SubscriberBotContext';\nimport { getCartById } from '../../mocks/data';\nimport { cn } from '../../utils/cn';\nimport { formatCurrency } from '../../utils/formatters';\n\n// ============================================================================\n// Types\n// ============================================================================\n\ntype Step = 'location' | 'details' | 'payment' | 'confirmation';\nconst STEPS: Step[] = ['location', 'details', 'payment', 'confirmation'];\nconst STEP_LABELS: Record<Step, string> = {\n  location: 'Location',\n  details: 'Details',\n  payment: 'Payment',\n  confirmation: 'Confirmation',\n};\n\ninterface ServiceLocation {\n  address: string;\n  landmark: string;\n  instructions: string;\n  phoneNumber: string;\n}\n\ninterface BookingDetails {\n  preferredTime: string;\n  specialInstructions: string;\n  isUrgent: boolean;\n}\n\ninterface ConfirmationData {\n  bookingId: string;\n  transactionId: string;\n  estimatedArrival: string;\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction generateTimeSlots(): { value: string; label: string }[] {\n  const slots: { value: string; label: string }[] = [];\n  const now = new Date();\n  const start = new Date(now.getTime() + 30 * 60000); // 30 min from now\n\n  for (let i = 0; i < 8; i++) {\n    const time = new Date(start.getTime() + i * 30 * 60000);\n    const val = time.toTimeString().slice(0, 5);\n    const lbl = time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n    slots.push({ value: val, label: lbl });\n  }\n\n  return slots;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport function DirectServiceBookingPage() {\n  const { cartId } = useParams<{ cartId: string }>();\n  const { navigateTo } = useSubscriberBot();\n\n  const cart = useMemo(() => (cartId ? getCartById(cartId) : undefined), [cartId]);\n\n  const [step, setStep] = useState<Step>('location');\n  const [submitting, setSubmitting] = useState(false);\n\n  // Location step\n  const [location, setLocation] = useState<ServiceLocation>({\n    address: '',\n    landmark: '',\n    instructions: '',\n    phoneNumber: '',\n  });\n\n  // Details step\n  const [details, setDetails] = useState<BookingDetails>({\n    preferredTime: '',\n    specialInstructions: '',\n    isUrgent: false,\n  });\n\n  // Payment step\n  const [paymentMethod, setPaymentMethod] = useState<'upi' | 'card' | 'wallet'>('upi');\n\n  // Confirmation data\n  const [confirmation, setConfirmation] = useState<ConfirmationData | null>(null);\n\n  // Mock pricing\n  const advancePayment = 100;\n  const serviceFee = 50;\n  const balancePayment = serviceFee;\n  const totalAmount = advancePayment + serviceFee;\n\n  // --- Not found ---\n  if (!cart) {\n    return (\n      <PageLayout title=\"Cart Not Found\">\n        <EmptyState\n          illustration=\"empty-generic\"\n          icon={<Home className=\"h-12 w-12\" />}\n          title=\"Service not available\"\n          description=\"Direct service is not available for this cart.\"\n          action={\n            <button\n              type=\"button\"\n              onClick={() => navigateTo('/customer/carts')}\n              className=\"rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition-opacity\"\n            >\n              Browse Carts\n            </button>\n          }\n        />\n      </PageLayout>\n    );\n  }\n\n  const timeSlots = generateTimeSlots();\n  const stepIndex = STEPS.indexOf(step);\n\n  // --- Geolocation ---\n  const handleGetLocation = () => {\n    if (!navigator.geolocation) {\n      alert('Geolocation is not supported by this browser.');\n      return;\n    }\n    navigator.geolocation.getCurrentPosition(\n      () => {\n        setLocation((p) => ({ ...p, address: p.address || 'Current location detected' }));\n        alert('Location detected successfully!');\n      },\n      () => {\n        alert('Failed to get your location. Please enter address manually.');\n      }\n    );\n  };\n\n  // --- Validation ---\n  const validateLocation = (): boolean => {\n    if (!location.address.trim()) {\n      alert('Please enter your address.');\n      return false;\n    }\n    if (!location.phoneNumber.trim()) {\n      alert('Please enter your phone number.');\n      return false;\n    }\n    return true;\n  };\n\n  const validateDetails = (): boolean => {\n    if (!details.preferredTime) {\n      alert('Please select a preferred time slot.');\n      return false;\n    }\n    return true;\n  };\n\n  // --- Navigation ---\n  const nextStep = () => {\n    if (step === 'location' && validateLocation()) setStep('details');\n    else if (step === 'details' && validateDetails()) setStep('payment');\n    else if (step === 'payment') handleBookingSubmit();\n  };\n\n  const prevStep = () => {\n    if (step === 'details') setStep('location');\n    else if (step === 'payment') setStep('details');\n  };\n\n  // --- Submit ---\n  const handleBookingSubmit = () => {\n    setSubmitting(true);\n    setTimeout(() => {\n      const bookingId = `BK-${Date.now()}`;\n      const transactionId = `TXN-${Date.now()}`;\n      const estimatedArrival = new Date(Date.now() + 30 * 60000).toISOString();\n      setConfirmation({ bookingId, transactionId, estimatedArrival });\n      setStep('confirmation');\n      setSubmitting(false);\n    }, 1500);\n  };\n\n  return (\n    <PageLayout\n      title={\n        <div className=\"flex items-center gap-3\">\n          <button\n            type=\"button\"\n            onClick={() => navigateTo(`/customer/carts/${cart.id}`)}\n            className=\"rounded-md p-1 text-text-secondary hover:bg-accent hover:text-text-primary transition-colors\"\n          >\n            <ArrowLeft className=\"h-5 w-5\" />\n          </button>\n          <div>\n            <span>Book Direct Service</span>\n            <p className=\"text-xs font-normal text-text-secondary\">{cart.name}</p>\n          </div>\n        </div>\n      }\n    >\n      {/* Progress Indicator */}\n      <div className=\"flex items-center justify-between mb-6 px-2\">\n        {STEPS.map((s, i) => {\n          const isCompleted = i < stepIndex;\n          const isCurrent = s === step;\n          return (\n            <div key={s} className=\"flex items-center\">\n              <div className=\"flex flex-col items-center\">\n                <div\n                  className={cn(\n                    'flex h-8 w-8 items-center justify-center rounded-full text-xs font-medium',\n                    isCompleted\n                      ? 'bg-status-success-bg/20 text-status-success-text'\n                      : isCurrent\n                        ? 'bg-foreground text-background'\n                        : 'bg-bg-sunken text-text-secondary'\n                  )}\n                >\n                  {isCompleted ? <CheckCircle2 className=\"h-4 w-4\" /> : i + 1}\n                </div>\n                <span\n                  className={cn(\n                    'mt-1 text-[10px]',\n                    isCurrent ? 'font-medium text-text-primary' : 'text-text-secondary'\n                  )}\n                >\n                  {STEP_LABELS[s]}\n                </span>\n              </div>\n              {i < STEPS.length - 1 && (\n                <div\n                  className={cn(\n                    'mx-2 h-0.5 w-8 sm:w-16',\n                    isCompleted ? 'bg-status-success-bg/30' : 'bg-border'\n                  )}\n                />\n              )}\n            </div>\n          );\n        })}\n      </div>\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n        {/* Main Content */}\n        <div className=\"lg:col-span-2\">\n          {/* Step 1: Location */}\n          {step === 'location' && (\n            <div className=\"rounded-lg border border-border-seam bg-bg-surface p-5\">\n              <h2 className=\"text-base font-semibold text-text-primary mb-1 flex items-center gap-2\">\n                <MapPin className=\"h-4 w-4\" />\n                Service Location\n              </h2>\n              <p className=\"text-xs text-text-secondary mb-5\">Where should the cart come?</p>\n\n              <div className=\"space-y-4\">\n                <div>\n                  <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n                    Your Address <span className=\"text-status-error-text\">*</span>\n                  </label>\n                  <div className=\"flex gap-2\">\n                    <input\n                      type=\"text\"\n                      placeholder=\"Enter your full address\"\n                      value={location.address}\n                      onChange={(e) => setLocation((p) => ({ ...p, address: e.target.value }))}\n                      className=\"flex-1 rounded-lg border border-border-seam 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)]\"\n                    />\n                    <button\n                      type=\"button\"\n                      onClick={handleGetLocation}\n                      className=\"flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-xs font-medium text-text-primary hover:bg-accent transition-colors whitespace-nowrap\"\n                    >\n                      <Navigation className=\"h-3.5 w-3.5\" />\n                      Use Current Location\n                    </button>\n                  </div>\n                </div>\n\n                <div>\n                  <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n                    Nearby Landmark\n                  </label>\n                  <input\n                    type=\"text\"\n                    placeholder=\"e.g., Near Metro Station, Opposite Mall\"\n                    value={location.landmark}\n                    onChange={(e) => setLocation((p) => ({ ...p, landmark: e.target.value }))}\n                    className=\"w-full rounded-lg border border-border-seam 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)]\"\n                  />\n                </div>\n\n                <div>\n                  <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n                    Instructions for Cart Owner\n                  </label>\n                  <textarea\n                    rows={3}\n                    placeholder=\"Any specific instructions to help us find you...\"\n                    value={location.instructions}\n                    onChange={(e) => setLocation((p) => ({ ...p, instructions: e.target.value }))}\n                    className=\"w-full rounded-lg border border-border-seam 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\"\n                  />\n                </div>\n\n                <div>\n                  <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n                    Phone Number <span className=\"text-status-error-text\">*</span>\n                  </label>\n                  <div className=\"relative\">\n                    <Phone className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary\" />\n                    <input\n                      type=\"tel\"\n                      placeholder=\"Enter your phone number\"\n                      value={location.phoneNumber}\n                      onChange={(e) => setLocation((p) => ({ ...p, phoneNumber: e.target.value }))}\n                      className=\"w-full rounded-lg border border-border-seam bg-bg-surface py-2 pl-9 pr-3 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n                    />\n                  </div>\n                </div>\n              </div>\n            </div>\n          )}\n\n          {/* Step 2: Details */}\n          {step === 'details' && (\n            <div className=\"rounded-lg border border-border-seam bg-bg-surface p-5\">\n              <h2 className=\"text-base font-semibold text-text-primary mb-1 flex items-center gap-2\">\n                <Calendar className=\"h-4 w-4\" />\n                Booking Details\n              </h2>\n              <p className=\"text-xs text-text-secondary mb-5\">Choose your preferred timing</p>\n\n              <div className=\"space-y-4\">\n                <div>\n                  <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n                    Preferred Time Slot <span className=\"text-status-error-text\">*</span>\n                  </label>\n                  <div className=\"grid grid-cols-4 gap-2\">\n                    {timeSlots.map((slot) => (\n                      <button\n                        key={slot.value}\n                        type=\"button\"\n                        onClick={() => setDetails((p) => ({ ...p, preferredTime: slot.value }))}\n                        className={cn(\n                          'rounded-lg border py-2 px-2 text-xs font-medium transition-colors',\n                          details.preferredTime === slot.value\n                            ? 'border-foreground bg-accent text-text-primary'\n                            : 'border-border-seam text-text-secondary hover:bg-accent hover:text-text-primary'\n                        )}\n                      >\n                        {slot.label}\n                      </button>\n                    ))}\n                  </div>\n                </div>\n\n                <div>\n                  <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n                    Special Instructions\n                  </label>\n                  <textarea\n                    rows={3}\n                    placeholder=\"Any special requests or dietary preferences...\"\n                    value={details.specialInstructions}\n                    onChange={(e) =>\n                      setDetails((p) => ({ ...p, specialInstructions: e.target.value }))\n                    }\n                    className=\"w-full rounded-lg border border-border-seam 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\"\n                  />\n                </div>\n\n                <label className=\"flex items-center gap-2 cursor-pointer\">\n                  <input\n                    type=\"checkbox\"\n                    checked={details.isUrgent}\n                    onChange={(e) => setDetails((p) => ({ ...p, isUrgent: e.target.checked }))}\n                    className=\"h-4 w-4 rounded border-border-seam\"\n                  />\n                  <span className=\"text-sm text-text-secondary\">\n                    This is urgent (additional charges may apply)\n                  </span>\n                </label>\n              </div>\n            </div>\n          )}\n\n          {/* Step 3: Payment */}\n          {step === 'payment' && (\n            <div className=\"rounded-lg border border-border-seam bg-bg-surface p-5\">\n              <h2 className=\"text-base font-semibold text-text-primary mb-1 flex items-center gap-2\">\n                <CreditCard className=\"h-4 w-4\" />\n                Advance Payment\n              </h2>\n              <p className=\"text-xs text-text-secondary mb-5\">Select your payment method</p>\n\n              <div className=\"space-y-4\">\n                {/* Info callout */}\n                <div className=\"flex items-start gap-2 rounded-lg border border-status-info-border/20 bg-status-info-bg/5 p-3\">\n                  <AlertCircle className=\"h-4 w-4 text-status-info-text shrink-0 mt-0.5\" />\n                  <p className=\"text-xs text-status-info-text\">\n                    You need to pay {formatCurrency(advancePayment, { minimumFractionDigits: 0 })}{' '}\n                    in advance to confirm your booking. Pay the remaining when the cart arrives.\n                  </p>\n                </div>\n\n                {/* Payment methods */}\n                <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-3\">\n                  {[\n                    {\n                      value: 'upi' as const,\n                      label: 'UPI',\n                      sub: 'Instant payment',\n                      Icon: Smartphone,\n                    },\n                    {\n                      value: 'card' as const,\n                      label: 'Card',\n                      sub: 'Secure payment',\n                      Icon: CreditCard,\n                    },\n                    {\n                      value: 'wallet' as const,\n                      label: 'Wallet',\n                      sub: 'Quick payment',\n                      Icon: Wallet,\n                    },\n                  ].map(({ value, label, sub, Icon }) => (\n                    <button\n                      key={value}\n                      type=\"button\"\n                      onClick={() => setPaymentMethod(value)}\n                      className={cn(\n                        'rounded-lg border p-3 text-center transition-colors',\n                        paymentMethod === value\n                          ? 'border-foreground bg-accent'\n                          : 'border-border-seam hover:bg-accent'\n                      )}\n                    >\n                      <Icon className=\"mx-auto h-5 w-5 text-text-secondary mb-1\" />\n                      <p className=\"text-sm font-medium text-text-primary\">{label}</p>\n                      <p className=\"text-[10px] text-text-secondary\">{sub}</p>\n                    </button>\n                  ))}\n                </div>\n\n                {/* Payment Summary */}\n                <div className=\"rounded-lg bg-bg-sunken p-4\">\n                  <h3 className=\"text-sm font-medium text-text-primary mb-2\">Payment Summary</h3>\n                  <div className=\"space-y-2 text-sm\">\n                    <div className=\"flex justify-between\">\n                      <span className=\"text-text-secondary\">Advance Payment:</span>\n                      <span className=\"text-text-primary\">\n                        {formatCurrency(advancePayment, { minimumFractionDigits: 0 })}\n                      </span>\n                    </div>\n                    <div className=\"flex justify-between\">\n                      <span className=\"text-text-secondary\">Service Fee:</span>\n                      <span className=\"text-text-primary\">\n                        {formatCurrency(serviceFee, { minimumFractionDigits: 0 })}\n                      </span>\n                    </div>\n                    <div className=\"flex justify-between text-text-secondary\">\n                      <span>Balance Payment (at arrival):</span>\n                      <span>{formatCurrency(balancePayment, { minimumFractionDigits: 0 })}</span>\n                    </div>\n                    <div className=\"flex justify-between border-t border-border-seam pt-2 font-semibold\">\n                      <span className=\"text-text-primary\">Total Amount:</span>\n                      <span className=\"text-text-primary\">\n                        {formatCurrency(totalAmount, { minimumFractionDigits: 0 })}\n                      </span>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          )}\n\n          {/* Step 4: Confirmation */}\n          {step === 'confirmation' && confirmation && (\n            <div className=\"rounded-lg border border-border-seam bg-bg-surface p-5\">\n              {/* Success header */}\n              <div className=\"text-center mb-6\">\n                <div className=\"mx-auto mb-3 flex h-14 w-14 items-center justify-center rounded-full bg-status-success-bg/10\">\n                  <CheckCircle2 className=\"h-7 w-7 text-status-success-text\" />\n                </div>\n                <h2 className=\"text-lg font-semibold text-text-primary mb-1\">Booking Confirmed!</h2>\n                <p className=\"text-sm text-text-secondary\">\n                  Your direct service booking has been confirmed and payment processed.\n                </p>\n              </div>\n\n              {/* Booking details */}\n              <div className=\"rounded-lg bg-bg-sunken p-4 mb-4\">\n                <h3 className=\"text-sm font-medium text-text-primary mb-3\">Booking Details</h3>\n                <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm\">\n                  <div>\n                    <span className=\"text-xs text-text-secondary\">Booking ID</span>\n                    <p className=\"font-mono text-xs text-text-primary\">{confirmation.bookingId}</p>\n                  </div>\n                  <div>\n                    <span className=\"text-xs text-text-secondary\">Est. Arrival</span>\n                    <p className=\"text-text-primary\">\n                      {new Date(confirmation.estimatedArrival).toLocaleTimeString([], {\n                        hour: '2-digit',\n                        minute: '2-digit',\n                      })}\n                    </p>\n                  </div>\n                  <div>\n                    <span className=\"text-xs text-text-secondary\">Location</span>\n                    <p className=\"text-text-primary truncate\">{location.address}</p>\n                  </div>\n                  <div>\n                    <span className=\"text-xs text-text-secondary\">Phone</span>\n                    <p className=\"text-text-primary\">{location.phoneNumber}</p>\n                  </div>\n                </div>\n              </div>\n\n              {/* Payment details */}\n              <div className=\"rounded-lg border border-status-success-border/20 bg-status-success-bg/5 p-4 mb-4\">\n                <h3 className=\"text-sm font-medium text-status-success-text mb-2 flex items-center gap-2\">\n                  <CheckCircle2 className=\"h-4 w-4\" />\n                  Payment Processed\n                </h3>\n                <div className=\"grid grid-cols-2 gap-3 text-sm\">\n                  <div>\n                    <span className=\"text-xs text-text-secondary\">Transaction ID</span>\n                    <p className=\"font-mono text-xs text-text-primary\">\n                      {confirmation.transactionId}\n                    </p>\n                  </div>\n                  <div>\n                    <span className=\"text-xs text-text-secondary\">Advance Paid</span>\n                    <p className=\"font-medium text-text-primary\">\n                      {formatCurrency(advancePayment, { minimumFractionDigits: 0 })}\n                    </p>\n                  </div>\n                  <div>\n                    <span className=\"text-xs text-text-secondary\">Method</span>\n                    <p className=\"capitalize text-text-primary\">{paymentMethod}</p>\n                  </div>\n                  <div>\n                    <span className=\"text-xs text-text-secondary\">Status</span>\n                    <p className=\"font-medium text-status-success-text\">Paid</p>\n                  </div>\n                </div>\n              </div>\n\n              {/* Next Steps */}\n              <div className=\"rounded-lg border border-status-info-border/20 bg-status-info-bg/5 p-4 mb-6\">\n                <h3 className=\"text-sm font-medium text-status-info-text mb-2\">Next Steps</h3>\n                <div className=\"space-y-2 text-xs text-status-info-text\">\n                  <div className=\"flex items-start gap-2\">\n                    <CheckCircle2 className=\"h-3.5 w-3.5 text-status-success-text mt-0.5 shrink-0\" />\n                    <span>\n                      Payment confirmed -{' '}\n                      {formatCurrency(advancePayment, { minimumFractionDigits: 0 })} paid\n                    </span>\n                  </div>\n                  <div className=\"flex items-start gap-2\">\n                    <Clock className=\"h-3.5 w-3.5 mt-0.5 shrink-0\" />\n                    <span>\n                      Cart will arrive around{' '}\n                      {new Date(confirmation.estimatedArrival).toLocaleTimeString([], {\n                        hour: '2-digit',\n                        minute: '2-digit',\n                      })}\n                    </span>\n                  </div>\n                  <div className=\"flex items-start gap-2\">\n                    <CreditCard className=\"h-3.5 w-3.5 mt-0.5 shrink-0\" />\n                    <span>\n                      Pay remaining {formatCurrency(balancePayment, { minimumFractionDigits: 0 })}{' '}\n                      when cart arrives\n                    </span>\n                  </div>\n                </div>\n              </div>\n\n              {/* Action buttons */}\n              <div className=\"flex gap-3\">\n                <button\n                  type=\"button\"\n                  onClick={() => navigateTo(`/customer/bookings/${confirmation.bookingId}`)}\n                  className=\"flex-1 rounded-lg bg-foreground px-4 py-2.5 text-sm font-medium text-background hover:opacity-90 transition-opacity\"\n                >\n                  View Booking\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => navigateTo('/customer/carts')}\n                  className=\"flex-1 rounded-lg border border-border-seam px-4 py-2.5 text-sm font-medium text-text-primary hover:bg-accent transition-colors\"\n                >\n                  Browse More\n                </button>\n              </div>\n            </div>\n          )}\n\n          {/* Navigation Buttons */}\n          {step !== 'confirmation' && (\n            <div className=\"flex justify-between mt-5\">\n              <button\n                type=\"button\"\n                onClick={prevStep}\n                disabled={step === 'location'}\n                className={cn(\n                  'flex items-center gap-2 rounded-lg border border-border-seam px-4 py-2.5 text-sm font-medium text-text-primary transition-colors',\n                  step === 'location' ? 'opacity-40 cursor-not-allowed' : 'hover:bg-accent'\n                )}\n              >\n                <ArrowLeft className=\"h-4 w-4\" />\n                Previous\n              </button>\n              <button\n                type=\"button\"\n                onClick={nextStep}\n                disabled={submitting}\n                className={cn(\n                  'flex items-center gap-2 rounded-lg bg-foreground px-4 py-2.5 text-sm font-medium text-background transition-opacity',\n                  submitting ? 'opacity-60 cursor-not-allowed' : 'hover:opacity-90'\n                )}\n              >\n                {submitting ? (\n                  <>\n                    <Loader2 className=\"h-4 w-4 animate-spin\" />\n                    {step === 'payment' ? 'Processing Payment...' : 'Processing...'}\n                  </>\n                ) : (\n                  <>\n                    {step === 'payment' ? 'Confirm & Pay' : 'Next'}\n                    <ArrowRight className=\"h-4 w-4\" />\n                  </>\n                )}\n              </button>\n            </div>\n          )}\n        </div>\n\n        {/* Sidebar: Service Summary */}\n        <div className=\"lg:col-span-1\">\n          <div className=\"sticky top-6 rounded-lg border border-border-seam bg-bg-surface p-5\">\n            <h3 className=\"text-base font-semibold text-text-primary mb-4\">Service Summary</h3>\n\n            <div className=\"flex items-center gap-3 mb-4\">\n              <img src={cart.image} alt={cart.name} className=\"h-12 w-12 rounded-lg object-cover\" />\n              <div>\n                <p className=\"text-sm font-medium text-text-primary\">{cart.name}</p>\n                <p className=\"text-xs text-text-secondary\">{cart.category}</p>\n              </div>\n            </div>\n\n            <div className=\"space-y-2 text-sm border-t border-border-seam pt-3\">\n              <div className=\"flex justify-between\">\n                <span className=\"text-text-secondary\">Service Fee:</span>\n                <span className=\"text-text-primary\">\n                  {formatCurrency(serviceFee, { minimumFractionDigits: 0 })}\n                </span>\n              </div>\n              <div className=\"flex justify-between\">\n                <span className=\"text-text-secondary\">Advance Payment:</span>\n                <span className=\"font-medium text-text-primary\">\n                  {formatCurrency(advancePayment, { minimumFractionDigits: 0 })}\n                </span>\n              </div>\n            </div>\n\n            <div className=\"flex items-center gap-2 mt-3 pt-3 border-t border-border-seam text-status-success-text\">\n              <CheckCircle2 className=\"h-3.5 w-3.5\" />\n              <span className=\"text-xs\">Pay remaining amount at cart</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAyCA,IAAM,IAAgB;CAAC;CAAY;CAAW;CAAW;CAAe,EAClE,IAAoC;CACxC,UAAU;CACV,SAAS;CACT,SAAS;CACT,cAAc;CACf;AAyBD,SAAS,IAAwD;CAC/D,IAAM,IAA4C,EAAE,EAE9C,IAAQ,IAAI,sBADN,IAAI,MAAM,EACK,SAAS,GAAG,KAAK,IAAM;AAElD,MAAK,IAAI,IAAI,GAAG,IAAI,GAAG,KAAK;EAC1B,IAAM,IAAO,IAAI,KAAK,EAAM,SAAS,GAAG,IAAI,KAAK,IAAM,EACjD,IAAM,EAAK,cAAc,CAAC,MAAM,GAAG,EAAE,EACrC,IAAM,EAAK,mBAAmB,EAAE,EAAE;GAAE,MAAM;GAAW,QAAQ;GAAW,CAAC;AAC/E,IAAM,KAAK;GAAE,OAAO;GAAK,OAAO;GAAK,CAAC;;AAGxC,QAAO;;AAOT,SAAgB,IAA2B;CACzC,IAAM,EAAE,cAAW,GAA+B,EAC5C,EAAE,kBAAe,GAAkB,EAEnC,IAAO,QAAe,IAAS,EAAY,EAAO,GAAG,KAAA,GAAY,CAAC,EAAO,CAAC,EAE1E,CAAC,GAAM,KAAW,EAAe,WAAW,EAC5C,CAAC,GAAY,KAAiB,EAAS,GAAM,EAG7C,CAAC,GAAU,KAAe,EAA0B;EACxD,SAAS;EACT,UAAU;EACV,cAAc;EACd,aAAa;EACd,CAAC,EAGI,CAAC,GAAS,KAAc,EAAyB;EACrD,eAAe;EACf,qBAAqB;EACrB,UAAU;EACX,CAAC,EAGI,CAAC,GAAe,KAAoB,EAAoC,MAAM,EAG9E,CAAC,GAAc,KAAmB,EAAkC,KAAK;AAS/E,KAAI,CAAC,EACH,QACE,kBAAC,GAAD;EAAY,OAAM;YAChB,kBAAC,GAAD;GACE,cAAa;GACb,MAAM,kBAAC,GAAD,EAAM,WAAU,aAAc,CAAA;GACpC,OAAM;GACN,aAAY;GACZ,QACE,kBAAC,UAAD;IACE,MAAK;IACL,eAAe,EAAW,kBAAkB;IAC5C,WAAU;cACX;IAEQ,CAAA;GAEX,CAAA;EACS,CAAA;CAIjB,IAAM,IAAY,GAAmB,EAC/B,IAAY,EAAM,QAAQ,EAAK,EAG/B,UAA0B;AAC9B,MAAI,CAAC,UAAU,aAAa;AAC1B,SAAM,gDAAgD;AACtD;;AAEF,YAAU,YAAY,yBACd;AAEJ,GADA,GAAa,OAAO;IAAE,GAAG;IAAG,SAAS,EAAE,WAAW;IAA6B,EAAE,EACjF,MAAM,kCAAkC;WAEpC;AACJ,SAAM,8DAA8D;IAEvE;IAIG,UACC,EAAS,QAAQ,MAAM,GAIvB,EAAS,YAAY,MAAM,GAIzB,MAHL,MAAM,kCAAkC,EACjC,OALP,MAAM,6BAA6B,EAC5B,KASL,UACC,EAAQ,gBAIN,MAHL,MAAM,uCAAuC,EACtC,KAML,UAAiB;AACrB,EAAI,MAAS,cAAc,GAAkB,GAAE,EAAQ,UAAU,GACxD,MAAS,aAAa,GAAiB,GAAE,EAAQ,UAAU,GAC3D,MAAS,aAAW,GAAqB;IAG9C,UAAiB;AACrB,EAAI,MAAS,YAAW,EAAQ,WAAW,GAClC,MAAS,aAAW,EAAQ,UAAU;IAI3C,UAA4B;AAEhC,EADA,EAAc,GAAK,EACnB,iBAAiB;AAMf,GAFA,EAAgB;IAAE,WAHA,MAAM,KAAK,KAAK;IAGL,eAFP,OAAO,KAAK,KAAK;IAEK,kBADnB,IAAI,KAAK,KAAK,KAAK,GAAG,KAAK,IAAM,CAAC,aAAa;IACV,CAAC,EAC/D,EAAQ,eAAe,EACvB,EAAc,GAAM;KACnB,KAAK;;AAGV,QACE,kBAAC,GAAD;EACE,OACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,UAAD;IACE,MAAK;IACL,eAAe,EAAW,mBAAmB,EAAK,KAAK;IACvD,WAAU;cAEV,kBAAC,GAAD,EAAW,WAAU,WAAY,CAAA;IAC1B,CAAA,EACT,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD,EAAA,UAAM,uBAA0B,CAAA,EAChC,kBAAC,KAAD;IAAG,WAAU;cAA2C,EAAK;IAAS,CAAA,CAClE,EAAA,CAAA,CACF;;YAdV,CAkBE,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAM,KAAK,GAAG,MAAM;IACnB,IAAM,IAAc,IAAI,GAClB,IAAY,MAAM;AACxB,WACE,kBAAC,OAAD;KAAa,WAAU;eAAvB,CACE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OACE,WAAW,EACT,6EACA,IACI,qDACA,IACE,kCACA,mCACP;iBAEA,IAAc,kBAAC,GAAD,EAAc,WAAU,WAAY,CAAA,GAAG,IAAI;OACtD,CAAA,EACN,kBAAC,QAAD;OACE,WAAW,EACT,oBACA,IAAY,kCAAkC,sBAC/C;iBAEA,EAAY;OACR,CAAA,CACH;SACL,IAAI,EAAM,SAAS,KAClB,kBAAC,OAAD,EACE,WAAW,EACT,0BACA,IAAc,4BAA4B,YAC3C,EACD,CAAA,CAEA;OA/BI,EA+BJ;KAER;GACE,CAAA,EAEN,kBAAC,OAAD;GAAK,WAAU;aAAf,CAEE,kBAAC,OAAD;IAAK,WAAU;cAAf;KAEG,MAAS,cACR,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,MAAD;QAAI,WAAU;kBAAd,CACE,kBAAC,GAAD,EAAQ,WAAU,WAAY,CAAA,EAAA,mBAE3B;;OACL,kBAAC,KAAD;QAAG,WAAU;kBAAmC;QAA+B,CAAA;OAE/E,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;UAAO,WAAU;oBAAjB,CAAsE,iBACvD,kBAAC,QAAD;WAAM,WAAU;qBAAyB;WAAQ,CAAA,CACxD;aACR,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,SAAD;WACE,MAAK;WACL,aAAY;WACZ,OAAO,EAAS;WAChB,WAAW,MAAM,GAAa,OAAO;YAAE,GAAG;YAAG,SAAS,EAAE,OAAO;YAAO,EAAE;WACxE,WAAU;WACV,CAAA,EACF,kBAAC,UAAD;WACE,MAAK;WACL,SAAS;WACT,WAAU;qBAHZ,CAKE,kBAAC,GAAD,EAAY,WAAU,eAAgB,CAAA,EAAA,uBAE/B;aACL;YACF,EAAA,CAAA;SAEN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;UAAO,WAAU;oBAAqD;UAE9D,CAAA,EACR,kBAAC,SAAD;UACE,MAAK;UACL,aAAY;UACZ,OAAO,EAAS;UAChB,WAAW,MAAM,GAAa,OAAO;WAAE,GAAG;WAAG,UAAU,EAAE,OAAO;WAAO,EAAE;UACzE,WAAU;UACV,CAAA,CACE,EAAA,CAAA;SAEN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;UAAO,WAAU;oBAAqD;UAE9D,CAAA,EACR,kBAAC,YAAD;UACE,MAAM;UACN,aAAY;UACZ,OAAO,EAAS;UAChB,WAAW,MAAM,GAAa,OAAO;WAAE,GAAG;WAAG,cAAc,EAAE,OAAO;WAAO,EAAE;UAC7E,WAAU;UACV,CAAA,CACE,EAAA,CAAA;SAEN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;UAAO,WAAU;oBAAjB,CAAsE,iBACvD,kBAAC,QAAD;WAAM,WAAU;qBAAyB;WAAQ,CAAA,CACxD;aACR,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,GAAD,EAAO,WAAU,wEAAyE,CAAA,EAC1F,kBAAC,SAAD;WACE,MAAK;WACL,aAAY;WACZ,OAAO,EAAS;WAChB,WAAW,MAAM,GAAa,OAAO;YAAE,GAAG;YAAG,aAAa,EAAE,OAAO;YAAO,EAAE;WAC5E,WAAU;WACV,CAAA,CACE;YACF,EAAA,CAAA;SACF;;OACF;;KAIP,MAAS,aACR,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,MAAD;QAAI,WAAU;kBAAd,CACE,kBAAC,GAAD,EAAU,WAAU,WAAY,CAAA,EAAA,kBAE7B;;OACL,kBAAC,KAAD;QAAG,WAAU;kBAAmC;QAAgC,CAAA;OAEhF,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;UAAO,WAAU;oBAAjB,CAAsE,wBAChD,kBAAC,QAAD;WAAM,WAAU;qBAAyB;WAAQ,CAAA,CAC/D;aACR,kBAAC,OAAD;UAAK,WAAU;oBACZ,EAAU,KAAK,MACd,kBAAC,UAAD;WAEE,MAAK;WACL,eAAe,GAAY,OAAO;YAAE,GAAG;YAAG,eAAe,EAAK;YAAO,EAAE;WACvE,WAAW,EACT,qEACA,EAAQ,kBAAkB,EAAK,QAC3B,kDACA,iFACL;qBAEA,EAAK;WACC,EAXF,EAAK,MAWH,CACT;UACE,CAAA,CACF,EAAA,CAAA;SAEN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;UAAO,WAAU;oBAAqD;UAE9D,CAAA,EACR,kBAAC,YAAD;UACE,MAAM;UACN,aAAY;UACZ,OAAO,EAAQ;UACf,WAAW,MACT,GAAY,OAAO;WAAE,GAAG;WAAG,qBAAqB,EAAE,OAAO;WAAO,EAAE;UAEpE,WAAU;UACV,CAAA,CACE,EAAA,CAAA;SAEN,kBAAC,SAAD;UAAO,WAAU;oBAAjB,CACE,kBAAC,SAAD;WACE,MAAK;WACL,SAAS,EAAQ;WACjB,WAAW,MAAM,GAAY,OAAO;YAAE,GAAG;YAAG,UAAU,EAAE,OAAO;YAAS,EAAE;WAC1E,WAAU;WACV,CAAA,EACF,kBAAC,QAAD;WAAM,WAAU;qBAA8B;WAEvC,CAAA,CACD;;SACJ;;OACF;;KAIP,MAAS,aACR,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,MAAD;QAAI,WAAU;kBAAd,CACE,kBAAC,GAAD,EAAY,WAAU,WAAY,CAAA,EAAA,kBAE/B;;OACL,kBAAC,KAAD;QAAG,WAAU;kBAAmC;QAA8B,CAAA;OAE9E,kBAAC,OAAD;QAAK,WAAU;kBAAf;SAEE,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,GAAD,EAAa,WAAU,iDAAkD,CAAA,EACzE,kBAAC,KAAD;WAAG,WAAU;qBAAb;YAA6C;YAC1B,EAAe,KAAgB,EAAE,uBAAuB,GAAG,CAAC;YAAE;YAAI;YAEjF;aACA;;SAGN,kBAAC,OAAD;UAAK,WAAU;oBACZ;WACC;YACE,OAAO;YACP,OAAO;YACP,KAAK;YACL,MAAM;YACP;WACD;YACE,OAAO;YACP,OAAO;YACP,KAAK;YACL,MAAM;YACP;WACD;YACE,OAAO;YACP,OAAO;YACP,KAAK;YACL,MAAM;YACP;WACF,CAAC,KAAK,EAAE,UAAO,UAAO,QAAK,cAC1B,kBAAC,UAAD;WAEE,MAAK;WACL,eAAe,EAAiB,EAAM;WACtC,WAAW,EACT,uDACA,MAAkB,IACd,gCACA,qCACL;qBATH;YAWE,kBAAC,GAAD,EAAM,WAAU,4CAA6C,CAAA;YAC7D,kBAAC,KAAD;aAAG,WAAU;uBAAyC;aAAU,CAAA;YAChE,kBAAC,KAAD;aAAG,WAAU;uBAAmC;aAAQ,CAAA;YACjD;aAbF,EAaE,CACT;UACE,CAAA;SAGN,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,MAAD;WAAI,WAAU;qBAA6C;WAAoB,CAAA,EAC/E,kBAAC,OAAD;WAAK,WAAU;qBAAf;YACE,kBAAC,OAAD;aAAK,WAAU;uBAAf,CACE,kBAAC,QAAD;cAAM,WAAU;wBAAsB;cAAuB,CAAA,EAC7D,kBAAC,QAAD;cAAM,WAAU;wBACb,EAAe,KAAgB,EAAE,uBAAuB,GAAG,CAAC;cACxD,CAAA,CACH;;YACN,kBAAC,OAAD;aAAK,WAAU;uBAAf,CACE,kBAAC,QAAD;cAAM,WAAU;wBAAsB;cAAmB,CAAA,EACzD,kBAAC,QAAD;cAAM,WAAU;wBACb,EAAe,IAAY,EAAE,uBAAuB,GAAG,CAAC;cACpD,CAAA,CACH;;YACN,kBAAC,OAAD;aAAK,WAAU;uBAAf,CACE,kBAAC,QAAD,EAAA,UAAM,iCAAoC,CAAA,EAC1C,kBAAC,QAAD,EAAA,UAAO,EAAe,IAAgB,EAAE,uBAAuB,GAAG,CAAC,EAAQ,CAAA,CACvE;;YACN,kBAAC,OAAD;aAAK,WAAU;uBAAf,CACE,kBAAC,QAAD;cAAM,WAAU;wBAAoB;cAAoB,CAAA,EACxD,kBAAC,QAAD;cAAM,WAAU;wBACb,EAAe,KAAa,EAAE,uBAAuB,GAAG,CAAC;cACrD,CAAA,CACH;;YACF;aACF;;SACF;;OACF;;KAIP,MAAS,kBAAkB,KAC1B,kBAAC,OAAD;MAAK,WAAU;gBAAf;OAEE,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,kBAAC,OAAD;UAAK,WAAU;oBACb,kBAAC,GAAD,EAAc,WAAU,oCAAqC,CAAA;UACzD,CAAA;SACN,kBAAC,MAAD;UAAI,WAAU;oBAA+C;UAAuB,CAAA;SACpF,kBAAC,KAAD;UAAG,WAAU;oBAA8B;UAEvC,CAAA;SACA;;OAGN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,MAAD;SAAI,WAAU;mBAA6C;SAAoB,CAAA,EAC/E,kBAAC,OAAD;SAAK,WAAU;mBAAf;UACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD;WAAM,WAAU;qBAA8B;WAAiB,CAAA,EAC/D,kBAAC,KAAD;WAAG,WAAU;qBAAuC,EAAa;WAAc,CAAA,CAC3E,EAAA,CAAA;UACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD;WAAM,WAAU;qBAA8B;WAAmB,CAAA,EACjE,kBAAC,KAAD;WAAG,WAAU;qBACV,IAAI,KAAK,EAAa,iBAAiB,CAAC,mBAAmB,EAAE,EAAE;YAC9D,MAAM;YACN,QAAQ;YACT,CAAC;WACA,CAAA,CACA,EAAA,CAAA;UACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD;WAAM,WAAU;qBAA8B;WAAe,CAAA,EAC7D,kBAAC,KAAD;WAAG,WAAU;qBAA8B,EAAS;WAAY,CAAA,CAC5D,EAAA,CAAA;UACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD;WAAM,WAAU;qBAA8B;WAAY,CAAA,EAC1D,kBAAC,KAAD;WAAG,WAAU;qBAAqB,EAAS;WAAgB,CAAA,CACvD,EAAA,CAAA;UACF;WACF;;OAGN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,MAAD;SAAI,WAAU;mBAAd,CACE,kBAAC,GAAD,EAAc,WAAU,WAAY,CAAA,EAAA,oBAEjC;YACL,kBAAC,OAAD;SAAK,WAAU;mBAAf;UACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD;WAAM,WAAU;qBAA8B;WAAqB,CAAA,EACnE,kBAAC,KAAD;WAAG,WAAU;qBACV,EAAa;WACZ,CAAA,CACA,EAAA,CAAA;UACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD;WAAM,WAAU;qBAA8B;WAAmB,CAAA,EACjE,kBAAC,KAAD;WAAG,WAAU;qBACV,EAAe,KAAgB,EAAE,uBAAuB,GAAG,CAAC;WAC3D,CAAA,CACA,EAAA,CAAA;UACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD;WAAM,WAAU;qBAA8B;WAAa,CAAA,EAC3D,kBAAC,KAAD;WAAG,WAAU;qBAAgC;WAAkB,CAAA,CAC3D,EAAA,CAAA;UACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD;WAAM,WAAU;qBAA8B;WAAa,CAAA,EAC3D,kBAAC,KAAD;WAAG,WAAU;qBAAuC;WAAQ,CAAA,CACxD,EAAA,CAAA;UACF;WACF;;OAGN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,MAAD;SAAI,WAAU;mBAAiD;SAAe,CAAA,EAC9E,kBAAC,OAAD;SAAK,WAAU;mBAAf;UACE,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,GAAD,EAAc,WAAU,wDAAyD,CAAA,EACjF,kBAAC,QAAD,EAAA,UAAA;YAAM;YACgB;YACnB,EAAe,KAAgB,EAAE,uBAAuB,GAAG,CAAC;YAAC;YACzD,EAAA,CAAA,CACH;;UACN,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,GAAD,EAAO,WAAU,+BAAgC,CAAA,EACjD,kBAAC,QAAD,EAAA,UAAA;YAAM;YACoB;YACvB,IAAI,KAAK,EAAa,iBAAiB,CAAC,mBAAmB,EAAE,EAAE;aAC9D,MAAM;aACN,QAAQ;aACT,CAAC;YACG,EAAA,CAAA,CACH;;UACN,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,GAAD,EAAY,WAAU,+BAAgC,CAAA,EACtD,kBAAC,QAAD,EAAA,UAAA;YAAM;YACW,EAAe,IAAgB,EAAE,uBAAuB,GAAG,CAAC;YAAE;YAAI;YAE5E,EAAA,CAAA,CACH;;UACF;WACF;;OAGN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,UAAD;SACE,MAAK;SACL,eAAe,EAAW,sBAAsB,EAAa,YAAY;SACzE,WAAU;mBACX;SAEQ,CAAA,EACT,kBAAC,UAAD;SACE,MAAK;SACL,eAAe,EAAW,kBAAkB;SAC5C,WAAU;mBACX;SAEQ,CAAA,CACL;;OACF;;KAIP,MAAS,kBACR,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,UAAD;OACE,MAAK;OACL,SAAS;OACT,UAAU,MAAS;OACnB,WAAW,EACT,oIACA,MAAS,aAAa,kCAAkC,kBACzD;iBAPH,CASE,kBAAC,GAAD,EAAW,WAAU,WAAY,CAAA,EAAA,WAE1B;UACT,kBAAC,UAAD;OACE,MAAK;OACL,SAAS;OACT,UAAU;OACV,WAAW,EACT,uHACA,IAAa,kCAAkC,mBAChD;iBAEA,IACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAS,WAAU,wBAAyB,CAAA,EAC3C,MAAS,YAAY,0BAA0B,gBAC/C,EAAA,CAAA,GAEH,kBAAA,GAAA,EAAA,UAAA,CACG,MAAS,YAAY,kBAAkB,QACxC,kBAAC,GAAD,EAAY,WAAU,WAAY,CAAA,CACjC,EAAA,CAAA;OAEE,CAAA,CACL;;KAEJ;OAGN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,MAAD;OAAI,WAAU;iBAAiD;OAAoB,CAAA;MAEnF,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,KAAK,EAAK;QAAO,KAAK,EAAK;QAAM,WAAU;QAAsC,CAAA,EACtF,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;QAAG,WAAU;kBAAyC,EAAK;QAAS,CAAA,EACpE,kBAAC,KAAD;QAAG,WAAU;kBAA+B,EAAK;QAAa,CAAA,CAC1D,EAAA,CAAA,CACF;;MAEN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,QAAD;SAAM,WAAU;mBAAsB;SAAmB,CAAA,EACzD,kBAAC,QAAD;SAAM,WAAU;mBACb,EAAe,IAAY,EAAE,uBAAuB,GAAG,CAAC;SACpD,CAAA,CACH;WACN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,QAAD;SAAM,WAAU;mBAAsB;SAAuB,CAAA,EAC7D,kBAAC,QAAD;SAAM,WAAU;mBACb,EAAe,KAAgB,EAAE,uBAAuB,GAAG,CAAC;SACxD,CAAA,CACH;UACF;;MAEN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,GAAD,EAAc,WAAU,eAAgB,CAAA,EACxC,kBAAC,QAAD;QAAM,WAAU;kBAAU;QAAmC,CAAA,CACzD;;MACF;;IACF,CAAA,CACF;KACK"}