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 { f as useStore, n as CATEGORIES, s as fmt, t as Button, u as slugify } from "./categories-MJJjwt1u.mjs";
import { h as Link } from "../_libs/@tanstack/react-router+[...].mjs";
import { E as Package, T as Phone, X as ChevronLeft, Y as ChevronRight, d as Store, h as Sparkles, rt as BadgeCheck } from "../_libs/lucide-react.mjs";
import { l as Header, n as CheckoutFlow, t as CartDrawer, u as SignInModal } from "./Modals-PUPoXlMv.mjs";
import { t as Footer } from "./Footer-VqEE5AJo.mjs";
//#region node_modules/.nitro/vite/services/ssr/assets/routes-DES7Uyz-.js
var import_react = /* @__PURE__ */ __toESM(require_react());
var import_jsx_runtime = require_jsx_runtime();
var gridCats = [
	"Phones & Tablets",
	"Appliances",
	"Kids, Baby And More",
	"Fashion Deals",
	"Beauty Must Have",
	"Sneakers Deals",
	"New Arrival",
	"Home & Office deals",
	"Beverages deals",
	"Mobile Accessories deals",
	"Computing deals",
	"Buy now, Pay Small Small"
];
function Home() {
	const [signInOpen, setSignInOpen] = (0, import_react.useState)(false);
	const [cartOpen, setCartOpen] = (0, import_react.useState)(false);
	const [checkoutOpen, setCheckoutOpen] = (0, import_react.useState)(false);
	const [activeBanner, setActiveBanner] = (0, import_react.useState)(0);
	const { addToCart, getAllProducts, topBanners, heroBanners, vendorProducts } = useStore();
	(0, import_react.useEffect)(() => {
		if (!heroBanners || heroBanners.length === 0) return;
		const timer = setInterval(() => {
			setActiveBanner((prev) => (prev + 1) % heroBanners.length);
		}, 5e3);
		return () => clearInterval(timer);
	}, [heroBanners]);
	const all = getAllProducts();
	const featuredProds = all.filter((p) => p.is_featured);
	let flash = all.filter((p) => p.is_flash);
	if (flash.length === 0) flash = all.slice(0, 6);
	let top = all.filter((p) => p.is_top);
	if (top.length === 0) top = all.slice(6, 12);
	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
		className: "min-h-screen",
		style: { backgroundColor: "#f0f2f5" },
		children: [
			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SignInModal, {
				open: signInOpen,
				onOpenChange: setSignInOpen
			}),
			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CartDrawer, {
				open: cartOpen,
				onOpenChange: setCartOpen,
				onCheckout: () => {
					setCartOpen(false);
					setCheckoutOpen(true);
				}
			}),
			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckoutFlow, {
				open: checkoutOpen,
				onOpenChange: setCheckoutOpen
			}),
			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Header, {
				onOpenCart: () => setCartOpen(true),
				onOpenSignIn: () => setSignInOpen(true)
			}),
			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("main", {
				className: "max-w-[1200px] mx-auto px-4 py-4 space-y-4",
				children: [
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
						className: "flex flex-col lg:grid lg:grid-cols-12 gap-3 lg:h-[384px]",
						children: [
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("aside", {
								className: "hidden lg:block col-span-3 bg-white rounded-md py-2 text-sm overflow-y-auto no-scrollbar",
								children: CATEGORIES.map((c) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, {
									to: "/category/$slug",
									params: { slug: slugify(c) },
									className: "block px-4 py-1.5 hover:bg-orange-50 hover:text-orange-600 cursor-pointer",
									children: c
								}, c))
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
								className: "lg:col-span-6 rounded-md overflow-hidden bg-neutral-200 relative group h-[200px] sm:h-[280px] lg:h-full",
								children: [heroBanners && heroBanners.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
									href: heroBanners[activeBanner]?.link || "#",
									className: "block w-full h-full",
									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
										src: heroBanners[activeBanner]?.image,
										alt: "Featured deals banner",
										className: "w-full h-full object-cover transition-opacity duration-500"
									})
								}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
									className: "w-full h-full min-h-[280px] flex items-center justify-center text-sm text-neutral-500",
									children: "No banners"
								}), heroBanners && heroBanners.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
									className: "absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-1.5 z-10",
									children: heroBanners.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
										onClick: (e) => {
											e.preventDefault();
											setActiveBanner(i);
										},
										className: `h-1.5 rounded-full transition-all ${i === activeBanner ? "w-4 bg-white" : "w-1.5 bg-white/50 hover:bg-white/80"}`,
										"aria-label": `Go to slide ${i + 1}`
									}, i))
								})]
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
								className: "lg:col-span-3 flex lg:flex-col gap-3 overflow-x-auto no-scrollbar pb-1 lg:pb-0",
								children: [
									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Promo, {
										icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Phone, { className: "w-5 h-5" }),
										title: "CALL TO ORDER",
										sub: "081 0265 8259"
									}),
									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, {
										to: "/vendor",
										className: "block shrink-0",
										children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Promo, {
											icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Store, { className: "w-5 h-5" }),
											title: "Sell on SulejaMarket"
										})
									}),
									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Promo, {
										icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Package, { className: "w-5 h-5" }),
										title: "Send your Package"
									})
								]
							})
						]
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", {
						className: "bg-white rounded-md p-3",
						children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
							className: "flex items-center gap-2",
							children: [
								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
									className: "w-7 h-7 rounded-full bg-neutral-100 flex items-center justify-center shrink-0",
									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronLeft, { className: "w-4 h-4" })
								}),
								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
									className: "flex-1 overflow-x-auto no-scrollbar",
									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
										className: "flex gap-4 min-w-max px-2 py-1",
										children: topBanners.map((b) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
											className: "flex flex-col items-center gap-1 w-[100px]",
											children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
												className: "w-[100px] h-[100px] rounded-full overflow-hidden bg-neutral-100 shrink-0",
												children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
													src: b.image,
													alt: b.title,
													className: "w-full h-full object-cover"
												})
											}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
												className: "text-[11px] text-center text-neutral-700 leading-tight",
												children: b.title
											})]
										}, b.id))
									})
								}),
								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
									className: "w-7 h-7 rounded-full bg-neutral-100 flex items-center justify-center shrink-0",
									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronRight, { className: "w-4 h-4" })
								})
							]
						})
					}),
					featuredProds.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
						className: "bg-white rounded-md overflow-hidden border-2 border-amber-400 shadow-sm",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
							className: "bg-gradient-to-r from-amber-500 via-orange-500 to-amber-600 text-white px-4 py-2.5 flex items-center justify-between font-bold",
							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
								className: "flex items-center gap-2 text-base",
								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Sparkles, { className: "w-5 h-5 text-amber-200 fill-amber-300 animate-pulse" }), " Featured Vendor Products"]
							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
								className: "text-xs text-amber-100 font-normal",
								children: "Promoted by Sellers with Loyalty Coins"
							})]
						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
							className: "grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-6",
							children: featuredProds.map((p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProductCard, {
								p,
								onAdd: () => addToCart(p)
							}, p.id))
						})]
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
						className: "bg-white rounded-md overflow-hidden",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
							className: "bg-[#c8103e] text-white px-4 py-2.5 flex items-center justify-between",
							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
								className: "flex items-center gap-4 font-semibold",
								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "⚡ Flash Sales" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
									className: "text-sm font-normal opacity-90",
									children: ["Time Left: ", /* @__PURE__ */ (0, import_jsx_runtime.jsx)("b", { children: "12h : 02m : 26s" })]
								})]
							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
								className: "text-sm cursor-pointer hover:underline",
								children: "See all"
							})]
						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
							className: "grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-6",
							children: flash.map((p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProductCard, {
								p,
								onAdd: () => addToCart(p),
								sold: 20
							}, p.id))
						})]
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", {
						className: "grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-6 gap-3",
						children: gridCats.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Link, {
							to: "/category/$slug",
							params: { slug: slugify(c) },
							className: "bg-white rounded-md p-3 flex flex-col items-center gap-2 hover:shadow-md transition",
							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
								src: `https://picsum.photos/seed/gc${i}/200/200`,
								alt: c,
								className: "w-full aspect-square object-cover rounded"
							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
								className: "text-xs text-neutral-700 text-center hover:text-orange-500",
								children: c
							})]
						}, i))
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
						className: "bg-white rounded-md overflow-hidden",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
							className: "bg-orange-400 text-white px-4 py-2.5 flex items-center justify-between font-semibold",
							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Top Sellers" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
								className: "text-sm cursor-pointer hover:underline",
								children: "See all"
							})]
						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
							className: "grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-6",
							children: top.map((p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProductCard, {
								p,
								onAdd: () => addToCart(p)
							}, p.id))
						})]
					}),
					vendorProducts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
						className: "bg-white rounded-md overflow-hidden",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
							className: "bg-emerald-500 text-white px-4 py-2.5 flex items-center justify-between font-semibold",
							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "🌟 Fresh from our Vendors" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, {
								to: "/vendor",
								className: "text-sm hover:underline",
								children: "Manage listings"
							})]
						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
							className: "grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-6",
							children: vendorProducts.map((p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProductCard, {
								p,
								onAdd: () => addToCart(p)
							}, p.id))
						})]
					})
				]
			}),
			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Footer, {})
		]
	});
}
function Promo({ icon, title, sub }) {
	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
		className: "bg-white rounded-md px-3 py-2.5 flex items-center gap-3 text-sm shrink-0 min-w-[220px] lg:min-w-0 lg:w-full",
		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
			className: "text-orange-500",
			children: icon
		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
			className: "font-medium text-neutral-800",
			children: title
		}), sub && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
			className: "text-xs text-neutral-500",
			children: sub
		})] })]
	});
}
function ProductCard({ p, onAdd, sold }) {
	const { vendors } = useStore();
	const isVerified = vendors.find((v) => v.contactEmail === p.vendorEmail)?.is_verified;
	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
		id: p.id,
		className: "border-r border-b last:border-r-0 p-3 relative bg-white hover:shadow-md transition group",
		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Link, {
			to: "/product/$id",
			params: { id: p.id },
			className: "block",
			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
				className: "relative",
				children: [
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
						src: p.images?.[0] || `https://picsum.photos/seed/${p.seed}/240/240`,
						alt: p.name,
						className: "w-full aspect-square object-cover rounded"
					}),
					p.is_featured && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
						className: "absolute top-1 left-1 bg-gradient-to-r from-amber-500 to-orange-500 text-white text-[10px] font-extrabold px-2 py-0.5 rounded-full shadow-md flex items-center gap-1 z-10",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Sparkles, { className: "w-3 h-3 text-amber-200 fill-amber-100" }), " Featured"]
					}),
					p.disc && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
						className: "absolute top-1 right-1 bg-orange-100 text-orange-700 text-[11px] font-bold px-1.5 py-0.5 rounded",
						children: p.disc
					})
				]
			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
				className: "mt-2 space-y-0.5",
				children: [
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "text-xs text-neutral-700 line-clamp-1 flex items-center gap-1",
						children: [p.name, isVerified && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
							className: "inline-flex",
							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BadgeCheck, { className: "w-3.5 h-3.5 text-sky-500" })
						})]
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "text-sm font-bold text-neutral-900",
						children: ["₦ ", fmt(p.price)]
					}),
					p.old && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "text-[11px] text-neutral-400 line-through",
						children: ["₦ ", fmt(p.old)]
					}),
					sold !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "mt-1",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
							className: "h-1.5 rounded-full bg-orange-100 overflow-hidden",
							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
								className: "h-full bg-orange-500",
								style: { width: `${Math.min(100, sold * 3)}%` }
							})
						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
							className: "text-[10px] text-neutral-500 mt-0.5",
							children: [sold, " items sold"]
						})]
					})
				]
			})]
		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
			onClick: onAdd,
			size: "sm",
			className: "w-full mt-2 h-8 bg-orange-500 hover:bg-orange-600 text-white text-xs",
			children: "Add to cart"
		})]
	});
}
//#endregion
export { Home as component };
