/* ============================================================ RACK & BOX — App shell: routing, global state, tweaks ============================================================ */ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "light", "palette": ["#3a2028", "#c18a70", "#f8efec"], "btnStyle": "pill", "heroLayout": "collage", "headerStyle": "classic", "headlineFont": "'Cormorant Garamond', Georgia, serif", "heroHeadline": "Dressed to be unforgettable.", "heroSub": "Bespoke bridal couture, asoebi and red-carpet gowns — handcrafted in Nigeria and delivered worldwide, for the woman who was born to stand out." }/*EDITMODE-END*/; const PALETTE_MAP = { "#191419": "noir", "#3a2028": "blush", "#2a0f16": "burgundy", }; const PALETTE_OPTS = [ ["#191419", "#c9a86a", "#f6f1ea"], ["#3a2028", "#c18a70", "#f8efec"], ["#2a0f16", "#cba15f", "#f5ece3"], ]; const FONT_OPTS = [ { value: "'Cormorant Garamond', Georgia, serif", label: "Cormorant (elegant)" }, { value: "'Playfair Display', Georgia, serif", label: "Playfair (editorial)" }, { value: "'Marcellus', Georgia, serif", label: "Marcellus (roman)" }, { value: "'Bodoni Moda', Georgia, serif", label: "Bodoni (high-fashion)" }, { value: "'Jost', sans-serif", label: "Jost (modern sans)" }, ]; const store = { get(k, d) { try { const v = localStorage.getItem("rb_" + k); return v ? JSON.parse(v) : d; } catch { return d; } }, set(k, v) { try { localStorage.setItem("rb_" + k, JSON.stringify(v)); } catch {} }, }; function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [route, setRoute] = useState({ name: "home", params: {} }); const [currency, setCurrencyState] = useState(() => store.get("currency", "NGN")); const [cart, setCart] = useState(() => store.get("cart", [])); const [wishlist, setWishlist] = useState(() => store.get("wishlist", [])); const [cartOpen, setCartOpen] = useState(false); const [searchOpen, setSearchOpen] = useState(false); /* apply tweaks to document root */ useEffect(() => { const r = document.documentElement; r.setAttribute("data-theme", t.theme || "light"); const pal = PALETTE_MAP[(t.palette && t.palette[0]) || "#0e1c15"] || "emerald"; r.setAttribute("data-palette", pal); r.setAttribute("data-btn", t.btnStyle || "solid"); r.style.setProperty("--font-display", t.headlineFont || "'Cormorant Garamond', serif"); }, [t.theme, t.palette, t.btnStyle, t.headlineFont]); /* persist */ useEffect(() => store.set("currency", currency), [currency]); useEffect(() => store.set("cart", cart), [cart]); useEffect(() => store.set("wishlist", wishlist), [wishlist]); /* lock scroll when overlays open */ useEffect(() => { document.body.classList.toggle("no-scroll", cartOpen || searchOpen); }, [cartOpen, searchOpen]); const onNav = (name, params = {}) => { setRoute({ name, params }); setCartOpen(false); setSearchOpen(false); window.scrollTo({ top: 0, behavior: "auto" }); }; const setCurrency = (c) => setCurrencyState(c); const addToCart = (p, opts = {}) => { const size = opts.size || p.sizes[0]; const color = opts.color || p.colors[0].name; const qty = opts.qty || 1; const key = p.id + "|" + size + "|" + color; setCart((prev) => { const ex = prev.find((x) => x.key === key); if (ex) return prev.map((x) => x.key === key ? { ...x, qty: x.qty + qty } : x); return [...prev, { key, id: p.id, name: p.name, price: p.price, label: p.label, size, color, qty }]; }); }; const updateQty = (key, d) => setCart((prev) => prev.map((x) => x.key === key ? { ...x, qty: Math.max(1, x.qty + d) } : x)); const removeFromCart = (key) => setCart((prev) => prev.filter((x) => x.key !== key)); const clearCart = () => setCart([]); const toggleWish = (id) => setWishlist((prev) => prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]); const cartCount = cart.reduce((s, x) => s + x.qty, 0); const cartTotal = cart.reduce((s, x) => s + x.price * x.qty, 0); const ctx = { currency, setCurrency, cart, addToCart, updateQty, removeFromCart, clearCart, cartCount, cartTotal, wishlist, toggleWish, wishCount: wishlist.length, cartOpen, openCart: () => setCartOpen(true), closeCart: () => setCartOpen(false), searchOpen, openSearch: () => setSearchOpen(true), closeSearch: () => setSearchOpen(false), onNav, }; const PAGES = { home: HomePage, shop: ShopPage, product: ProductPage, cart: CartPage, checkout: CheckoutPage, about: AboutPage, contact: ContactPage, account: AccountPage, wishlist: WishlistPage, bespoke: BespokePage, custom: CustomOrderPage, packages: PackagesPage, booking: BookingPage, invoice: InvoicePage, academy: AcademyPage, }; const Page = PAGES[route.name] || HomePage; const hideChrome = route.name === "checkout"; return ( {!hideChrome &&
}
{!hideChrome &&