// Shared components const { useState, useEffect, useRef, useMemo, createContext, useContext } = React; const StoreCtx = createContext(null); window.useStore = () => useContext(StoreCtx); // ===== Store Provider ===== function MaskaStore({ children }) { const [lang, setLang] = useState(() => localStorage.getItem("maska_lang") || "en"); const [currency, setCurrency] = useState(() => localStorage.getItem("maska_ccy") || "AED"); const [cart, setCart] = useState(() => { try { return JSON.parse(localStorage.getItem("maska_cart") || "[]"); } catch { return []; } }); const [cartOpen, setCartOpen] = useState(false); const [toast, setToast] = useState(null); const [giftMsg, setGiftMsg] = useState(() => localStorage.getItem("maska_giftmsg") || ""); useEffect(() => { localStorage.setItem("maska_lang", lang); document.documentElement.lang = lang; document.documentElement.dir = lang === "ar" ? "rtl" : "ltr"; }, [lang]); useEffect(() => { localStorage.setItem("maska_ccy", currency); }, [currency]); useEffect(() => { localStorage.setItem("maska_cart", JSON.stringify(cart)); }, [cart]); useEffect(() => { localStorage.setItem("maska_giftmsg", giftMsg); }, [giftMsg]); function t(key) { const dict = MASKA_CONTENT.i18n[lang] || MASKA_CONTENT.i18n.en; return dict[key] || MASKA_CONTENT.i18n.en[key] || key; } function addToCart(product, variantTitle = null, qty = 1) { const key = product.handle + (variantTitle ? "::" + variantTitle : ""); setCart(prev => { const ex = prev.find(i => i.key === key); if (ex) return prev.map(i => i.key === key ? { ...i, qty: i.qty + qty } : i); return [...prev, { key, handle: product.handle, title: product.title, price: product.price, image: product.images[0], variantTitle, qty }]; }); setToast({ msg: t("added_to_bag"), title: product.title }); setTimeout(() => setToast(null), 2200); } function removeFromCart(key) { setCart(prev => prev.filter(i => i.key !== key)); } function updateQty(key, qty) { if (qty < 1) return removeFromCart(key); setCart(prev => prev.map(i => i.key === key ? { ...i, qty } : i)); } const subtotal = cart.reduce((s, i) => s + parseFloat(i.price) * i.qty, 0); const cartCount = cart.reduce((s, i) => s + i.qty, 0); // Currency conversion (illustrative — AED is base) const rates = { AED: 1, USD: 0.272, EUR: 0.251, GBP: 0.215, SAR: 1.02 }; function formatPrice(aedPrice, opts = {}) { const num = parseFloat(aedPrice); if (isNaN(num)) return ""; const rate = rates[currency] || 1; const v = num * rate; const sym = { AED: "AED", USD: "USD", EUR: "EUR", GBP: "GBP", SAR: "SAR" }[currency] || currency; return { ccy: sym, num: v.toFixed(2) }; } const value = { lang, setLang, t, currency, setCurrency, formatPrice, cart, addToCart, removeFromCart, updateQty, cartOpen, setCartOpen, subtotal, cartCount, toast, giftMsg, setGiftMsg, }; return React.createElement(StoreCtx.Provider, { value }, children); } window.MaskaStore = MaskaStore; // ===== Router (hash-based) ===== function useRoute() { const [hash, setHash] = useState(() => window.location.hash.slice(1) || "/"); useEffect(() => { const onHash = () => { setHash(window.location.hash.slice(1) || "/"); window.scrollTo(0, 0); }; window.addEventListener("hashchange", onHash); return () => window.removeEventListener("hashchange", onHash); }, []); return hash; } window.useRoute = useRoute; function navigate(to) { window.location.hash = to; } window.navigate = navigate; // ===== Icons ===== const Icon = { search: (p={}) => , bag: (p={}) => , user: (p={}) => , arrow: (p={}) => , close: (p={}) => , plus: (p={}) => , minus: (p={}) => , whatsapp: (p={}) => , globe: (p={}) => , chevron: (p={}) => , pin: (p={}) => , }; window.Icon = Icon; // ===== Brand Mark (uses logo) ===== function BrandMark({ inverse = false }) { return ( MASKA { e.target.style.display = "none"; }}/> MASKA ); } window.BrandMark = BrandMark; // ===== Topbar (ticker + lang/currency) ===== function Topbar() { const { lang, setLang, currency, setCurrency, t } = window.useStore(); const items = lang === "ar" ? [ "موطن الفوروشيكي في دبي", "توصيل مجاني داخل الدولة عند الشراء فوق 250 درهم", "خدمة من الباب إلى الباب في دبي", "هدايا مصممة يدوياً منذ 2013", "قابل لإعادة الاستخدام بالتصميم", ] : [ "Dubai's home of Furoshiki", "Complimentary UAE shipping over AED 250", "Door-to-door wrapping across Dubai", "Handmade in our d3 studio since 2013", "Reusable by design", ]; return (
{[...items, ...items].map((s, i) => {s})}
); } window.Topbar = Topbar; // ===== Navbar ===== function Navbar({ heroMode = false }) { const { t, setCartOpen, cartCount, lang } = window.useStore(); const route = useRoute(); const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 50); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); const isHero = heroMode && !scrolled; return ( ); } window.Navbar = Navbar; // ===== Cart Drawer ===== function CartDrawer() { const { cart, cartOpen, setCartOpen, removeFromCart, updateQty, subtotal, formatPrice, t, giftMsg, setGiftMsg } = window.useStore(); return ( <>
setCartOpen(false)}/>