// Shared components: Nav, Footer, ProductCard, LotusMark, etc. const { useState, useEffect, useRef } = React; const WA_LINK = "https://wa.me/971527452161?text=Hi%20Marushika%2C%20I%27d%20like%20to%20book%20a%20showroom%20appointment"; const BOOK_LINK = "https://booking.marushikaofficial.com/"; const EMAIL = "gallery@marushikaofficial.com"; // ---------- Lotus Mark (drawn, matches logo silhouette) ---------- function LotusMark({ size = 32, color = "currentColor", className = "" }) { return ( ); } // ---------- Wordmark ---------- function Wordmark({ color = "currentColor", scale = 1 }) { // Use the real logo file for fidelity return ( Marushika ); } // ---------- Nav ---------- function Nav({ route, go }) { const [scrolled, setScrolled] = useState(false); const [mega, setMega] = useState(false); const [mobile, setMobile] = useState(false); useEffect(() => { const on = () => setScrolled(window.scrollY > 40); on(); window.addEventListener("scroll", on, { passive: true }); return () => window.removeEventListener("scroll", on); }, []); const transparent = route.name === "home" && !scrolled; const navClass = "nav" + (!transparent ? " solid" : ""); const linkColor = transparent ? "var(--ivory)" : "var(--ink)"; const linkClass = (key) => "nav-link" + (route.name === key || (key === "collections" && route.name === "collection") ? " active" : ""); return (
setMega(false)}>
{ e.preventDefault(); go({ name: "home" }); setMega(false); }} className="nav-logo" style={{ display: "flex", alignItems: "center", gap: 12, color: linkColor }}> Marushika
Book a Showroom →
{/* Mega menu */}
setMega(true)}>
Art Series
Six narratives,
one atelier.

Each series is a self-contained study — folklore, geometry, and the discipline of a textile studio.

{e.preventDefault(); go({name:"collections"}); setMega(false);}} className="underline-link" style={{ marginTop: 20, display: "inline-block" }}> All Collections →
{COLLECTIONS.map(c => ( {e.preventDefault(); go({name:"collection", slug:c.slug}); setMega(false);}} style={{ display: "block" }}>
{c.name}
{c.eyebrow}
{c.name}
{c.tagline}
 ))}
); } // ---------- Footer ---------- function Footer({ go }) { return ( ); } function FooterCol({ title, children }) { return (
{title}
{children}
); } // ---------- Product Card ---------- function ProductCard({ p, go, ratio = "3/4", compact = false }) { return ( {e.preventDefault(); go({name:"product", id:p.id});}} style={{ display:"block" }}>
{p.name} {p.tag && ( {p.tag} )}
{p.collection}
{p.name}
{fmtAED(p.price)}
 ); } // ---------- Lotus separator ---------- function LotusSep() { return (
); } // ---------- WhatsApp FAB ---------- function WhatsAppFab() { return ( ); } // ---------- Page header (small hero) ---------- function PageMast({ eyebrow, title, sub, accent }) { return (
{eyebrow}

{title}

{sub &&

{sub}

}
); } Object.assign(window, { Nav, Footer, ProductCard, LotusMark, Wordmark, LotusSep, WhatsAppFab, PageMast, WA_LINK, BOOK_LINK, EMAIL });