import { n as __toESM } from "../_runtime.mjs";
import { u as require_react } from "../_libs/@floating-ui/react-dom+[...].mjs";
import { p as require_jsx_runtime } from "../_libs/@radix-ui/react-checkbox+[...].mjs";
import { t as cva } from "../_libs/class-variance-authority+clsx.mjs";
import { a as cn, f as useStore, n as CATEGORIES, r as Input, s as fmt, t as Button, u as slugify } from "./categories-MJJjwt1u.mjs";
import { g as useNavigate, h as Link } from "../_libs/@tanstack/react-router+[...].mjs";
import { n as toast } from "../_libs/sonner.mjs";
import { $ as CheckCheck, D as Minus, G as Circle, I as Flame, Q as Check, W as Clock, Y as ChevronRight, _ as ShoppingBag, a as User, d as Store, f as Star, g as ShoppingCart, h as Sparkles, k as Menu, l as Truck, n as X, nt as Bell, u as Trash2, w as Plus, x as Search } from "../_libs/lucide-react.mjs";
import { a as DialogOverlay$1, i as DialogDescription$1, n as DialogClose, o as DialogPortal$1, r as DialogContent$1, s as DialogTitle$1, t as Dialog$1 } from "../_libs/@radix-ui/react-dialog+[...].mjs";
import { a as DropdownMenuItemIndicator, c as DropdownMenuRadioItem$1, d as DropdownMenuSubTrigger$1, f as DropdownMenuTrigger$1, i as DropdownMenuItem$1, l as DropdownMenuSeparator$1, n as DropdownMenuCheckboxItem$1, o as DropdownMenuLabel$1, r as DropdownMenuContent$1, s as DropdownMenuPortal, t as DropdownMenu$1, u as DropdownMenuSubContent$1 } from "../_libs/@radix-ui/react-dropdown-menu+[...].mjs";
import { t as formatDistanceToNow } from "../_libs/date-fns.mjs";
import { t as usePaystackPayment } from "../_libs/react-paystack.mjs";
//#region node_modules/.nitro/vite/services/ssr/assets/Modals-PUPoXlMv.js
var import_react = /* @__PURE__ */ __toESM(require_react());
var import_jsx_runtime = require_jsx_runtime();
var DropdownMenu = DropdownMenu$1;
var DropdownMenuTrigger = DropdownMenuTrigger$1;
var DropdownMenuSubTrigger = import_react.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DropdownMenuSubTrigger$1, {
	ref,
	className: cn("flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", inset && "pl-8", className),
	...props,
	children: [children, /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronRight, { className: "ml-auto" })]
}));
DropdownMenuSubTrigger.displayName = DropdownMenuSubTrigger$1.displayName;
var DropdownMenuSubContent = import_react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownMenuSubContent$1, {
	ref,
	className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-dropdown-menu-content-transform-origin)", className),
	...props
}));
DropdownMenuSubContent.displayName = DropdownMenuSubContent$1.displayName;
var DropdownMenuContent = import_react.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownMenuContent$1, {
	ref,
	sideOffset,
	className: cn("z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-dropdown-menu-content-transform-origin)", className),
	...props
}) }));
DropdownMenuContent.displayName = DropdownMenuContent$1.displayName;
var DropdownMenuItem = import_react.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownMenuItem$1, {
	ref,
	className: cn("relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0", inset && "pl-8", className),
	...props
}));
DropdownMenuItem.displayName = DropdownMenuItem$1.displayName;
var DropdownMenuCheckboxItem = import_react.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DropdownMenuCheckboxItem$1, {
	ref,
	className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
	checked,
	...props,
	children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
		className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownMenuItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Check, { className: "h-4 w-4" }) })
	}), children]
}));
DropdownMenuCheckboxItem.displayName = DropdownMenuCheckboxItem$1.displayName;
var DropdownMenuRadioItem = import_react.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DropdownMenuRadioItem$1, {
	ref,
	className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
	...props,
	children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
		className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownMenuItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Circle, { className: "h-2 w-2 fill-current" }) })
	}), children]
}));
DropdownMenuRadioItem.displayName = DropdownMenuRadioItem$1.displayName;
var DropdownMenuLabel = import_react.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownMenuLabel$1, {
	ref,
	className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className),
	...props
}));
DropdownMenuLabel.displayName = DropdownMenuLabel$1.displayName;
var DropdownMenuSeparator = import_react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownMenuSeparator$1, {
	ref,
	className: cn("-mx-1 my-1 h-px bg-muted", className),
	...props
}));
DropdownMenuSeparator.displayName = DropdownMenuSeparator$1.displayName;
var DropdownMenuShortcut = ({ className, ...props }) => {
	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
		className: cn("ml-auto text-xs tracking-widest opacity-60", className),
		...props
	});
};
DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
function NotificationDrawer({ open, onOpenChange }) {
	const { notifications, user, fetchNotifications, markNotificationRead, markAllNotificationsRead } = useStore();
	const navigate = useNavigate();
	(0, import_react.useEffect)(() => {
		if (open) fetchNotifications();
	}, [open, fetchNotifications]);
	if (!open) return null;
	const unreadCount = notifications.filter((n) => !n.is_read).length;
	const getIcon = (type) => {
		switch (type) {
			case "loyalty_earned": return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Sparkles, { className: "w-5 h-5 text-amber-500" });
			case "order_placed": return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShoppingBag, { className: "w-5 h-5 text-orange-500" });
			case "order_status": return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Truck, { className: "w-5 h-5 text-sky-500" });
			case "product_featured": return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Flame, { className: "w-5 h-5 text-purple-500" });
			default: return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Bell, { className: "w-5 h-5 text-neutral-500" });
		}
	};
	const handleNotificationClick = (n) => {
		if (!n.is_read) markNotificationRead(n.id);
		onOpenChange(false);
		if (n.link) navigate({ to: n.link });
	};
	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
		className: "fixed inset-0 z-50 flex justify-end bg-black/40 backdrop-blur-xs animate-in fade-in duration-200",
		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
			className: "fixed inset-0",
			onClick: () => onOpenChange(false)
		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
			className: "relative w-full max-w-md bg-white h-full shadow-2xl flex flex-col z-10 animate-in slide-in-from-right duration-200 border-l",
			children: [
				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
					className: "p-4 border-b flex items-center justify-between bg-neutral-900 text-white",
					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "flex items-center gap-2",
						children: [
							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
								className: "relative",
								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Bell, { className: "w-5 h-5 text-orange-400" }), unreadCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "absolute -top-1 -right-1 w-2.5 h-2.5 bg-orange-500 rounded-full animate-ping" })]
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
								className: "font-bold text-lg",
								children: "In-App Notifications"
							}),
							unreadCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
								className: "bg-orange-500 text-white text-xs font-bold px-2 py-0.5 rounded-full",
								children: [unreadCount, " new"]
							})
						]
					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
						onClick: () => onOpenChange(false),
						className: "text-neutral-400 hover:text-white p-1 rounded-lg hover:bg-neutral-800 transition",
						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(X, { className: "w-5 h-5" })
					})]
				}),
				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
					className: "px-4 py-2 bg-neutral-50 border-b flex items-center justify-between text-xs text-neutral-500",
					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [notifications.length, " total notifications"] }), unreadCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
						onClick: () => user?.email && markAllNotificationsRead(user.email),
						className: "text-orange-600 font-semibold hover:underline flex items-center gap-1",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckCheck, { className: "w-3.5 h-3.5" }), " Mark all as read"]
					})]
				}),
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
					className: "flex-1 overflow-y-auto divide-y divide-neutral-100",
					children: notifications.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "p-12 text-center text-neutral-400 space-y-3",
						children: [
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Bell, { className: "w-12 h-12 mx-auto text-neutral-300 stroke-1" }),
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
								className: "font-medium text-sm text-neutral-600",
								children: "No notifications yet"
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
								className: "text-xs text-neutral-400",
								children: "Buying, selling, and loyalty coin updates will appear here in real-time."
							})
						]
					}) : notifications.map((n) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						onClick: () => handleNotificationClick(n),
						className: `p-4 transition cursor-pointer hover:bg-orange-50/60 flex items-start gap-3 relative ${!n.is_read ? "bg-amber-50/40 border-l-4 border-l-orange-500" : ""}`,
						children: [
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
								className: "p-2.5 rounded-xl bg-white border shadow-xs shrink-0 mt-0.5",
								children: getIcon(n.type)
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
								className: "flex-1 min-w-0",
								children: [
									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
										className: "flex items-center justify-between gap-2 mb-1",
										children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", {
											className: `text-xs font-bold text-neutral-900 truncate ${!n.is_read ? "text-orange-950 font-extrabold" : ""}`,
											children: n.title
										}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
											className: "text-[10px] text-neutral-400 shrink-0 flex items-center gap-1",
											children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Clock, { className: "w-3 h-3 text-neutral-400" }), formatDistanceToNow(n.createdAt * 1e3, { addSuffix: true })]
										})]
									}),
									/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
										className: "text-xs text-neutral-600 leading-relaxed line-clamp-2",
										children: n.message
									}),
									n.link && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
										className: "inline-flex items-center gap-1 text-[11px] font-semibold text-orange-600 mt-2 hover:underline",
										children: "View details →"
									})
								]
							}),
							!n.is_read && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
								className: "w-2 h-2 rounded-full bg-orange-500 shrink-0 mt-2",
								title: "Unread"
							})
						]
					}, n.id))
				}),
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
					className: "p-3 bg-neutral-50 border-t text-center text-xs text-neutral-400",
					children: "SulejaMarket Live Notifications System"
				})
			]
		})]
	});
}
function Header({ onOpenCart, onOpenSignIn }) {
	const { cart, user, getAllProducts, notifications, fetchNotifications } = useStore();
	const [q, setQ] = (0, import_react.useState)("");
	const [open, setOpen] = (0, import_react.useState)(false);
	const [notifOpen, setNotifOpen] = (0, import_react.useState)(false);
	const wrap = (0, import_react.useRef)(null);
	const navigate = useNavigate();
	const cartCount = cart.reduce((s, x) => s + x.qty, 0);
	const unreadNotifs = notifications.filter((n) => !n.is_read).length;
	const results = (0, import_react.useMemo)(() => {
		const t = q.trim().toLowerCase();
		if (!t) return [];
		return getAllProducts().filter((p) => p.name.toLowerCase().includes(t) || (p.category ?? "").toLowerCase().includes(t)).slice(0, 8);
	}, [q, getAllProducts]);
	(0, import_react.useEffect)(() => {
		fetchNotifications();
		const interval = setInterval(() => {
			fetchNotifications();
		}, 12e3);
		return () => clearInterval(interval);
	}, [user?.email, fetchNotifications]);
	(0, import_react.useEffect)(() => {
		const onDoc = (e) => {
			if (!wrap.current?.contains(e.target)) setOpen(false);
		};
		document.addEventListener("mousedown", onDoc);
		return () => document.removeEventListener("mousedown", onDoc);
	}, []);
	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(NotificationDrawer, {
			open: notifOpen,
			onOpenChange: setNotifOpen
		}),
		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
			className: "bg-neutral-800 text-white text-xs",
			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
				className: "max-w-[1200px] mx-auto px-4 py-1.5 flex gap-4",
				children: [
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, {
						to: "/vendor",
						className: "hover:text-orange-400",
						children: "Sell on SulejaMarket"
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, {
						to: "/admin",
						className: "hover:text-orange-400 ml-auto",
						children: "Admin"
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, {
						to: "/profile",
						className: "hover:text-orange-400",
						children: "My Account"
					})
				]
			})
		}),
		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("header", {
			className: "bg-white border-b sticky top-0 z-30",
			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
				className: "max-w-[1200px] mx-auto px-4 py-3 flex flex-wrap items-center justify-between gap-3 md:gap-6",
				children: [
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Link, {
						to: "/",
						className: "text-2xl font-extrabold text-orange-500 tracking-tight shrink-0",
						children: [
							"SULEJA",
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
								className: "text-neutral-800",
								children: "MARKETS"
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "inline-block w-2 h-2 rounded-full bg-orange-500 ml-0.5" })
						]
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "w-full order-3 md:order-2 md:flex-1 flex gap-2",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DropdownMenu, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownMenuTrigger, {
							asChild: true,
							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
								variant: "outline",
								size: "icon",
								className: "h-10 w-10 shrink-0 rounded-full lg:hidden text-neutral-600 bg-neutral-100 border-neutral-200",
								children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Menu, { className: "w-5 h-5" })
							})
						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DropdownMenuContent, {
							align: "start",
							className: "w-56 max-h-[70vh] overflow-y-auto",
							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
								className: "px-2 py-1.5 text-sm font-bold text-neutral-500",
								children: "Categories"
							}), CATEGORIES.map((c) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownMenuItem, {
								asChild: true,
								children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, {
									to: "/category/$slug",
									params: { slug: slugify(c) },
									className: "cursor-pointer",
									children: c
								})
							}, c))]
						})] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
							ref: wrap,
							className: "flex-1 relative",
							children: [
								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Search, { className: "w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400" }),
								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
									value: q,
									onChange: (e) => {
										setQ(e.target.value);
										setOpen(true);
									},
									onFocus: () => setOpen(true),
									placeholder: "Search products, brands and categories",
									className: "pl-9 pr-24 h-10 rounded-full bg-neutral-100 border-neutral-200 w-full"
								}),
								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
									className: "absolute right-1 top-1/2 -translate-y-1/2 h-8 rounded-full bg-orange-500 hover:bg-orange-600 px-6 text-white",
									children: "Search"
								}),
								open && q && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
									className: "absolute left-0 right-0 top-12 bg-white border rounded-md shadow-lg z-40 max-h-[420px] overflow-y-auto",
									children: results.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
										className: "p-4 text-sm text-neutral-500",
										children: [
											"No products match \"",
											q,
											"\""
										]
									}) : results.map((p) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
										onClick: () => {
											setOpen(false);
											setQ("");
											navigate({
												to: "/",
												hash: p.id
											});
										},
										className: "w-full flex items-center gap-3 p-2.5 hover:bg-orange-50 text-left border-b last:border-0",
										children: [
											/* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
												src: p.images?.[0] || `https://picsum.photos/seed/${p.seed}/60/60`,
												alt: p.name,
												className: "w-11 h-11 rounded object-cover flex-shrink-0"
											}),
											/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
												className: "flex-1 min-w-0",
												children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
													className: "text-sm text-neutral-800 line-clamp-1",
													children: p.name
												}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
													className: "text-xs text-neutral-500",
													children: p.category || "Product"
												})]
											}),
											/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
												className: "text-sm font-bold text-orange-600",
												children: ["₦ ", fmt(p.price)]
											})
										]
									}, p.id))
								})
							]
						})]
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("nav", {
						className: "flex items-center gap-3 sm:gap-5 text-sm order-2 md:order-3 shrink-0",
						children: [
							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
								onClick: () => setNotifOpen(true),
								className: "relative p-1.5 text-neutral-700 hover:text-orange-500 transition rounded-full hover:bg-orange-50",
								title: "In-App Notifications",
								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Bell, { className: "w-5 h-5" }), unreadNotifs > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
									className: "absolute -top-1 -right-1 bg-orange-500 text-white text-[10px] font-extrabold rounded-full min-w-4 h-4 px-1 flex items-center justify-center animate-bounce shadow-xs",
									children: unreadNotifs
								})]
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
								onClick: onOpenSignIn,
								className: "flex items-center gap-1.5 hover:text-orange-500",
								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(User, { className: "w-4 h-4" }), user ? user.name : "Account"]
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Link, {
								to: "/vendor",
								className: "flex items-center gap-1.5 hover:text-orange-500",
								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Store, { className: "w-4 h-4" }), " Vendor"]
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
								onClick: onOpenCart,
								className: "relative flex items-center gap-1 hover:text-orange-500",
								children: [
									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShoppingCart, { className: "w-5 h-5" }),
									/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Cart" }),
									cartCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
										className: "absolute -top-2 -right-3 bg-orange-500 text-white text-[10px] font-bold rounded-full w-5 h-5 flex items-center justify-center",
										children: cartCount
									})
								]
							})
						]
					})
				]
			})
		})
	] });
}
var Dialog = Dialog$1;
var DialogPortal = DialogPortal$1;
var DialogOverlay = import_react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogOverlay$1, {
	ref,
	className: cn("fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className),
	...props
}));
DialogOverlay.displayName = DialogOverlay$1.displayName;
var DialogContent = import_react.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogPortal, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogOverlay, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogContent$1, {
	ref,
	className: cn("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg", className),
	...props,
	children: [children, /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogClose, {
		className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background cursor-pointer transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(X, { className: "h-4 w-4" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
			className: "sr-only",
			children: "Close"
		})]
	})]
})] }));
DialogContent.displayName = DialogContent$1.displayName;
var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
	className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className),
	...props
});
DialogHeader.displayName = "DialogHeader";
var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
	className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
	...props
});
DialogFooter.displayName = "DialogFooter";
var DialogTitle = import_react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTitle$1, {
	ref,
	className: cn("text-lg font-semibold leading-none tracking-tight", className),
	...props
}));
DialogTitle.displayName = DialogTitle$1.displayName;
var DialogDescription = import_react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogDescription$1, {
	ref,
	className: cn("text-sm text-muted-foreground", className),
	...props
}));
DialogDescription.displayName = DialogDescription$1.displayName;
var Sheet = Dialog$1;
var SheetPortal = DialogPortal$1;
var SheetOverlay = import_react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogOverlay$1, {
	className: cn("fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className),
	...props,
	ref
}));
SheetOverlay.displayName = DialogOverlay$1.displayName;
var sheetVariants = cva("fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out", {
	variants: { side: {
		top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
		bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
		left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
		right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
	} },
	defaultVariants: { side: "right" }
});
var SheetContent = import_react.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SheetPortal, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SheetOverlay, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogContent$1, {
	ref,
	className: cn(sheetVariants({ side }), className),
	...props,
	children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogClose, {
		className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background cursor-pointer transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary",
		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(X, { className: "h-4 w-4" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
			className: "sr-only",
			children: "Close"
		})]
	}), children]
})] }));
SheetContent.displayName = DialogContent$1.displayName;
var SheetHeader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
	className: cn("flex flex-col space-y-2 text-center sm:text-left", className),
	...props
});
SheetHeader.displayName = "SheetHeader";
var SheetFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
	className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
	...props
});
SheetFooter.displayName = "SheetFooter";
var SheetTitle = import_react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTitle$1, {
	ref,
	className: cn("text-lg font-semibold text-foreground", className),
	...props
}));
SheetTitle.displayName = DialogTitle$1.displayName;
var SheetDescription = import_react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogDescription$1, {
	ref,
	className: cn("text-sm text-muted-foreground", className),
	...props
}));
SheetDescription.displayName = DialogDescription$1.displayName;
function SignInModal({ open, onOpenChange }) {
	const { user, signIn, signOut } = useStore();
	const [email, setEmail] = (0, import_react.useState)("");
	const [name, setName] = (0, import_react.useState)("");
	if (user) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog, {
		open,
		onOpenChange,
		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogContent, {
			className: "sm:max-w-[420px]",
			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogHeader, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogTitle, { children: ["Signed in as ", user.name] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogDescription, { children: [
				user.email,
				" · Role: ",
				user.role
			] })] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
				className: "flex gap-2 pt-2",
				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
					variant: "outline",
					onClick: () => onOpenChange(false),
					className: "flex-1",
					children: "Close"
				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
					onClick: () => {
						signOut();
						onOpenChange(false);
						toast("Signed out");
					},
					className: "flex-1 bg-orange-500 hover:bg-orange-600",
					children: "Sign out"
				})]
			})]
		})
	});
	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog, {
		open,
		onOpenChange,
		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogContent, {
			className: "sm:max-w-[420px]",
			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogHeader, { children: [
				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
					className: "flex items-center gap-2 mb-2",
					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Star, { className: "w-6 h-6 text-orange-500 fill-orange-500" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
						className: "text-xl font-extrabold",
						children: ["SULEJA", /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
							className: "text-neutral-800",
							children: "MARKET"
						})]
					})]
				}),
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTitle, {
					className: "text-2xl",
					children: "Welcome back"
				}),
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogDescription, { children: "Sign in to see personalized deals and track your orders." })
			] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", {
				className: "space-y-3 pt-2",
				onSubmit: (e) => {
					e.preventDefault();
					signIn(email, name || void 0);
					onOpenChange(false);
					toast.success(`Welcome, ${name || email.split("@")[0]}`);
				},
				children: [
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "space-y-1.5",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
							className: "text-sm font-medium",
							children: "Full name"
						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
							value: name,
							onChange: (e) => setName(e.target.value),
							placeholder: "Jane Doe"
						})]
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "space-y-1.5",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
							className: "text-sm font-medium",
							children: "Email"
						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
							value: email,
							onChange: (e) => setEmail(e.target.value),
							type: "email",
							placeholder: "you@example.com",
							required: true
						})]
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "space-y-1.5",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
							className: "text-sm font-medium",
							children: "Password"
						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
							type: "password",
							placeholder: "••••••••",
							required: true
						})]
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
						type: "submit",
						className: "w-full bg-orange-500 hover:bg-orange-600 h-11",
						children: "Sign in"
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
						type: "button",
						onClick: () => onOpenChange(false),
						className: "w-full text-sm text-neutral-500 hover:text-neutral-800",
						children: "Continue as guest"
					})
				]
			})]
		})
	});
}
function CartDrawer({ open, onOpenChange, onCheckout }) {
	const { cart, updateQty, removeItem } = useStore();
	const subtotal = cart.reduce((s, x) => s + x.price * x.qty, 0);
	const shipping = cart.length === 0 ? 0 : subtotal > 1e5 ? 0 : 1500;
	const vat = cart.length === 0 ? 0 : subtotal * .01;
	const total = subtotal + shipping + vat;
	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Sheet, {
		open,
		onOpenChange,
		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SheetContent, {
			className: "w-full sm:max-w-md flex flex-col p-0",
			children: [
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SheetHeader, {
					className: "px-5 py-4 border-b",
					children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SheetTitle, {
						className: "flex items-center gap-2",
						children: [
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShoppingCart, { className: "w-5 h-5 text-orange-500" }),
							"Your Cart (",
							cart.reduce((s, x) => s + x.qty, 0),
							")"
						]
					})
				}),
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
					className: "flex-1 overflow-y-auto px-5 py-4 space-y-4",
					children: cart.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "text-center text-neutral-500 py-16",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShoppingCart, { className: "w-12 h-12 mx-auto mb-3 text-neutral-300" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
							className: "text-sm",
							children: "Your cart is empty"
						})]
					}) : cart.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "flex gap-3 pb-4 border-b last:border-0",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
							src: item.images?.[0] || `https://picsum.photos/seed/${item.seed}/120/120`,
							alt: item.name,
							className: "w-20 h-20 object-cover rounded"
						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
							className: "flex-1 min-w-0",
							children: [
								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
									className: "text-sm text-neutral-800 line-clamp-2",
									children: item.name
								}),
								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
									className: "text-sm font-bold mt-1",
									children: ["₦ ", fmt(item.price)]
								}),
								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
									className: "flex items-center justify-between mt-2",
									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
										className: "flex items-center border rounded",
										children: [
											/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
												onClick: () => updateQty(item.id, -1),
												className: "w-7 h-7 flex items-center justify-center hover:bg-neutral-100",
												children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Minus, { className: "w-3 h-3" })
											}),
											/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
												className: "w-8 text-center text-sm",
												children: item.qty
											}),
											/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
												onClick: () => updateQty(item.id, 1),
												className: "w-7 h-7 flex items-center justify-center hover:bg-neutral-100",
												children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Plus, { className: "w-3 h-3" })
											})
										]
									}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
										onClick: () => removeItem(item.id),
										className: "text-neutral-400 hover:text-red-500",
										children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Trash2, { className: "w-4 h-4" })
									})]
								})
							]
						})]
					}, item.id))
				}),
				cart.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SheetFooter, {
					className: "border-t px-5 py-4 flex-col gap-3 sm:flex-col",
					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "w-full space-y-1.5 text-sm",
						children: [
							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
								className: "flex justify-between text-neutral-600",
								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Subtotal" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: ["₦ ", fmt(subtotal)] })]
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
								className: "flex justify-between text-neutral-600",
								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Shipping" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: shipping === 0 ? "Free" : `₦ ${fmt(shipping)}` })]
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
								className: "flex justify-between text-neutral-600",
								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "VAT (1%)" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: ["₦ ", fmt(vat)] })]
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
								className: "flex justify-between font-bold text-base pt-2 border-t",
								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Total" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: ["₦ ", fmt(total)] })]
							})
						]
					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
						onClick: onCheckout,
						className: "w-full h-11 bg-orange-500 hover:bg-orange-600",
						children: "Checkout"
					})]
				})
			]
		})
	});
}
function CheckoutFlow({ open, onOpenChange }) {
	const { cart, addresses, addAddress, placeOrder, clearCart, user, paystackKey } = useStore();
	const [step, setStep] = (0, import_react.useState)("address");
	const [selectedAddrId, setSelectedAddrId] = (0, import_react.useState)("");
	const [newAddr, setNewAddr] = (0, import_react.useState)({
		name: "",
		phone: "",
		street: "",
		city: "",
		state: ""
	});
	const [method, setMethod] = (0, import_react.useState)("paystack");
	const navigate = useNavigate();
	const subtotal = cart.reduce((s, x) => s + x.price * x.qty, 0);
	const shipping = cart.length === 0 ? 0 : subtotal > 1e5 ? 0 : 1500;
	const vat = cart.length === 0 ? 0 : subtotal * .01;
	const total = subtotal + shipping + vat;
	const close = (o) => {
		onOpenChange(o);
		if (!o) setStep("address");
	};
	const submitAddress = (e) => {
		e.preventDefault();
		if (!selectedAddrId && (!newAddr.name || !newAddr.phone || !newAddr.street || !newAddr.city)) return;
		setStep("payment");
	};
	const normalizedCity = (selectedAddrId ? addresses.find((a) => a.id === selectedAddrId)?.city : newAddr.city)?.toLowerCase().trim() || "";
	[
		"suleja",
		"zuba",
		"madella",
		"madalla",
		"deidei",
		"kubwa"
	].includes(normalizedCity);
	const handlePlaceOrder = (paymentMethod, paymentRef) => {
		let addr = addresses.find((a) => a.id === selectedAddrId);
		if (!addr) addr = addAddress(newAddr);
		const order = placeOrder({
			items: cart,
			subtotal,
			shipping,
			total,
			address: addr,
			paymentMethod,
			paymentRef
		});
		clearCart();
		close(false);
		toast.success("Order placed successfully", { description: `Ref ${order.paymentRef}` });
		navigate({
			to: "/orders/$id",
			params: { id: order.id }
		});
	};
	const initializePayment = usePaystackPayment({
		reference: `PSK_${Math.random().toString(36).slice(2, 10).toUpperCase()}`,
		email: user?.email || "guest@example.com",
		amount: total * 100,
		publicKey: paystackKey
	});
	const onSuccess = (reference) => {
		handlePlaceOrder("Paystack", reference.reference);
	};
	const onClose = () => {};
	const pay = () => {
		if (method === "paystack") {
			if (!paystackKey) {
				toast.error("Paystack API Key is not configured. Please contact the administrator.");
				return;
			}
			initializePayment({
				onSuccess,
				onClose
			});
		} else handlePlaceOrder("Pay on Delivery", `POD_${Math.random().toString(36).slice(2, 10).toUpperCase()}`);
	};
	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog, {
		open,
		onOpenChange: close,
		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogContent, {
			className: "sm:max-w-[520px]",
			children: [step === "address" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogHeader, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTitle, { children: "Shipping address" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogDescription, { children: ["Total: ", /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("b", {
				className: "text-neutral-900",
				children: ["₦ ", fmt(total)]
			})] })] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", {
				onSubmit: submitAddress,
				className: "space-y-3",
				children: [
					addresses.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "space-y-2",
						children: [
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
								className: "text-xs font-medium text-neutral-600",
								children: "Saved addresses"
							}),
							addresses.map((a) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", {
								className: "flex items-start gap-2 border rounded-md p-2.5 cursor-pointer hover:border-orange-400",
								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
									type: "radio",
									name: "addr",
									checked: selectedAddrId === a.id,
									onChange: () => setSelectedAddrId(a.id),
									className: "mt-1 accent-orange-500"
								}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
									className: "text-sm",
									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
										className: "font-medium",
										children: [
											a.name,
											" · ",
											a.phone
										]
									}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
										className: "text-neutral-500 text-xs",
										children: [
											a.street,
											", ",
											a.city,
											", ",
											a.state
										]
									})]
								})]
							}, a.id)),
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
								className: "text-xs text-neutral-500 pt-1",
								children: "Or add a new address below."
							})
						]
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "grid grid-cols-2 gap-2",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
							placeholder: "Full name",
							value: newAddr.name,
							onChange: (e) => setNewAddr({
								...newAddr,
								name: e.target.value
							})
						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
							placeholder: "Phone",
							value: newAddr.phone,
							onChange: (e) => setNewAddr({
								...newAddr,
								phone: e.target.value
							})
						})]
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
						placeholder: "Street address",
						value: newAddr.street,
						onChange: (e) => setNewAddr({
							...newAddr,
							street: e.target.value
						})
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "grid grid-cols-2 gap-2",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
							placeholder: "City",
							value: newAddr.city,
							onChange: (e) => setNewAddr({
								...newAddr,
								city: e.target.value
							}),
							required: !selectedAddrId
						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
							placeholder: "State",
							value: newAddr.state,
							onChange: (e) => setNewAddr({
								...newAddr,
								state: e.target.value
							}),
							required: !selectedAddrId
						})]
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogFooter, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
						type: "submit",
						className: "bg-orange-500 hover:bg-orange-600",
						children: "Continue to payment"
					}) })
				]
			})] }), step === "payment" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogHeader, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTitle, { children: "Payment method" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogDescription, { children: ["Total: ", /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("b", {
					className: "text-neutral-900",
					children: ["₦ ", fmt(total)]
				})] })] }),
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
					className: "grid grid-cols-1 gap-2",
					children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
						type: "button",
						onClick: () => setMethod("paystack"),
						className: "flex flex-col items-center gap-2 border border-[#0ba4db] bg-sky-50 text-[#0ba4db] rounded-md py-4 text-sm font-medium",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
							className: "w-8 h-8 rounded bg-[#0ba4db] flex items-center justify-center text-white font-black text-sm",
							children: "P"
						}), "Paystack"]
					})
				}),
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
					className: "space-y-2 pt-2",
					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
						className: "text-sm text-neutral-500 text-center py-2",
						children: "To complete your payment securely."
					})
				}),
				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogFooter, {
					className: "gap-2 pt-2 mt-4",
					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
						variant: "outline",
						onClick: () => setStep("address"),
						children: "Back"
					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
						onClick: pay,
						className: "bg-[#0ba4db] hover:bg-[#0993c4]",
						children: ["Pay ₦ ", fmt(total)]
					})]
				})
			] })]
		})
	});
}
//#endregion
export { DialogDescription as a, DialogTitle as c, DialogContent as i, Header as l, CheckoutFlow as n, DialogFooter as o, Dialog as r, DialogHeader as s, CartDrawer as t, SignInModal as u };
