// 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 (
    <svg viewBox="0 0 100 100" width={size} height={size} fill="none" stroke={color} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" className={className} aria-hidden="true">
      {/* center upper petal */}
      <path d="M50 16 C 42 30, 42 48, 50 60 C 58 48, 58 30, 50 16 Z" />
      {/* left petal */}
      <path d="M26 32 C 25 46, 33 58, 50 62 C 44 52, 36 42, 26 32 Z" />
      {/* right petal */}
      <path d="M74 32 C 75 46, 67 58, 50 62 C 56 52, 64 42, 74 32 Z" />
      {/* base ring */}
      <path d="M38 62 C 42 68, 58 68, 62 62" />
      {/* dot + drop */}
      <circle cx="50" cy="73" r="2.2" fill={color} />
      <line x1="50" y1="78" x2="50" y2="90" />
    </svg>
  );
}

// ---------- Wordmark ----------
function Wordmark({ color = "currentColor", scale = 1 }) {
  // Use the real logo file for fidelity
  return (
    <img
      src="media/logo-main-hd.webp"
      alt="Marushika"
      style={{
        height: 26 * scale,
        width: "auto",
        filter: color === "var(--ivory)" || color === "#FAF5EF" ? "brightness(0) invert(1)" : "none",
        opacity: 0.95,
      }}
    />
  );
}

// ---------- 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 (
    <header className={navClass} onMouseLeave={() => setMega(false)}>
      <div className="wrap" style={{ display: "flex", alignItems: "center", height: 78, gap: 32 }}>
        <a href="#/" onClick={(e) => { e.preventDefault(); go({ name: "home" }); setMega(false); }} className="nav-logo" style={{ display: "flex", alignItems: "center", gap: 12, color: linkColor }}>
          <LotusMark size={28} color={transparent ? "#E2C896" : "var(--gold)"} />
          <span style={{ fontFamily: "var(--serif)", fontSize: 24, letterSpacing: "0.04em", fontWeight: 400 }}>Marushika</span>
        </a>

        <nav style={{ display: "flex", alignItems: "center", gap: 22, marginLeft: 12 }} className="hide-mobile">
          <a href="#/" onClick={(e)=>{e.preventDefault(); go({name:"home"});}} className={linkClass("home")} style={{color: linkColor}}>Maison</a>
          <div
            onMouseEnter={() => setMega(true)}
            style={{ position: "static" }}
          >
            <a href="#/collections" onClick={(e)=>{e.preventDefault(); go({name:"collections"}); setMega(false);}} className={linkClass("collections")} style={{color: linkColor}}>Collections</a>
          </div>
          <a href="#/the-artist" onClick={(e)=>{e.preventDefault(); go({name:"artist"});}} className={"nav-link" + (route.name==="artist"?" active":"")} style={{color: linkColor}}>The Artist</a>
          <a href="#/the-craft" onClick={(e)=>{e.preventDefault(); go({name:"craft"});}} className={"nav-link" + (route.name==="craft"?" active":"")} style={{color: linkColor}}>The Craft</a>
          <a href="#/showroom" onClick={(e)=>{e.preventDefault(); go({name:"showroom"});}} className={"nav-link" + (route.name==="showroom"?" active":"")} style={{color: linkColor}}>Showroom</a>
          <a href="#/contact" onClick={(e)=>{e.preventDefault(); go({name:"contact"});}} className={"nav-link" + (route.name==="contact"?" active":"")} style={{color: linkColor}}>Contact</a>
        </nav>

        <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 16 }}>
          <a href={BOOK_LINK} target="_blank" rel="noreferrer" className="btn btn-sm" style={{ color: transparent ? "var(--ivory)" : "var(--ink)", borderColor: transparent ? "rgba(255,255,255,.6)" : "var(--ink)" }}>
            Book a Showroom <span className="arr">→</span>
          </a>
        </div>
      </div>

      {/* Mega menu */}
      <div className={"mega" + (mega ? " open" : "")} onMouseEnter={()=>setMega(true)}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "200px 1fr", gap: 56 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Art Series</div>
            <div className="display-i" style={{ fontSize: 36, color: "var(--ink)" }}>Six narratives,<br/>one atelier.</div>
            <p style={{ marginTop: 16, color: "var(--ink-soft)", fontSize: 13.5, maxWidth: 180 }}>
              Each series is a self-contained study — folklore, geometry, and the discipline of a textile studio.
            </p>
            <a href="#/collections" onClick={(e)=>{e.preventDefault(); go({name:"collections"}); setMega(false);}} className="underline-link" style={{ marginTop: 20, display: "inline-block" }}>
              All Collections →
            </a>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 18 }}>
            {COLLECTIONS.map(c => (
              <a key={c.slug} href={`#/collection/${c.slug}`} onClick={(e)=>{e.preventDefault(); go({name:"collection", slug:c.slug}); setMega(false);}} style={{ display: "block" }}>
                <div className="img-tile img-zoom" style={{ aspectRatio: "3/4", marginBottom: 12 }}>
                  <img src={c.hero} alt={c.name} loading="lazy" />
                </div>
                <div className="eyebrow" style={{ color: "var(--ink-soft)", fontSize: 9.5, marginBottom: 4 }}>{c.eyebrow}</div>
                <div className="display" style={{ fontSize: 22, marginBottom: 4 }}>{c.name}</div>
                <div style={{ fontSize: 12, color: "var(--ink-soft)" }}>{c.tagline}</div>
              </a>
            ))}
          </div>
        </div>
      </div>
    </header>
  );
}

// ---------- Footer ----------
function Footer({ go }) {
  return (
    <footer style={{ background: "var(--noir)", color: "var(--ivory)", padding: "80px 0 40px", marginTop: 80 }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr 1fr", gap: 48 }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
              <LotusMark size={32} color="#E2C896" />
              <span style={{ fontFamily: "var(--serif)", fontSize: 28, letterSpacing: "0.04em" }}>Marushika</span>
            </div>
            <p style={{ color: "rgba(250,245,239,.7)", maxWidth: 320, lineHeight: 1.6, fontSize: 13.5 }}>
              An art-inspired luxury house. Madhubani folk art reimagined as contemporary couture — by Manisha Verma, crafted in Dubai.
            </p>
            <div style={{ marginTop: 26, display: "flex", gap: 14 }}>
              {[
                { n: "Instagram", h: "https://instagram.com/marushikaofficial" },
                { n: "Facebook", h: "https://facebook.com/marushikaofficial" },
                { n: "LinkedIn", h: "https://linkedin.com/company/marushikaofficial" },
                { n: "YouTube", h: "https://youtube.com/@marushikaofficial" },
              ].map(s => (
                <a key={s.n} href={s.h} target="_blank" rel="noreferrer" style={{ color: "rgba(250,245,239,.7)", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase" }}>
                  {s.n}
                </a>
              ))}
            </div>
          </div>

          <FooterCol title="Collections">
            {COLLECTIONS.map(c => (
              <a key={c.slug} href={`#/collection/${c.slug}`} onClick={(e)=>{e.preventDefault(); go({name:"collection", slug:c.slug});}}>{c.name}</a>
            ))}
          </FooterCol>

          <FooterCol title="The House">
            <a href="#/the-artist" onClick={(e)=>{e.preventDefault(); go({name:"artist"});}}>The Artist</a>
            <a href="#/the-craft" onClick={(e)=>{e.preventDefault(); go({name:"craft"});}}>The Craft</a>
            <a href="#/showroom" onClick={(e)=>{e.preventDefault(); go({name:"showroom"});}}>Showrooms</a>
            <a href="#/contact" onClick={(e)=>{e.preventDefault(); go({name:"contact"});}}>Contact</a>
          </FooterCol>

          <FooterCol title="Visit">
            <span style={{opacity:.75}}>Al Wasl Boutique</span>
            <span style={{opacity:.55, fontSize: 12}}>Villa 15, Al Wasl Rd<br/>Jumeirah, Dubai</span>
            <span style={{opacity:.55, fontSize: 12}}>10:00 — 22:00 daily</span>
            <span style={{opacity:.75, marginTop: 8}}>d3 Styling Showroom</span>
            <span style={{opacity:.55, fontSize: 12}}>Bldg 5, Unit A104, d3<br/>By appointment</span>
          </FooterCol>

          <FooterCol title="Direct">
            <a href={WA_LINK} target="_blank" rel="noreferrer">WhatsApp →</a>
            <a href="tel:+971527452161">+971 52 745 2161</a>
            <a href={`mailto:${EMAIL}`}>{EMAIL}</a>
            <a href={BOOK_LINK} target="_blank" rel="noreferrer">Book appointment →</a>
          </FooterCol>
        </div>

        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", borderTop: "1px solid rgba(250,245,239,.12)", marginTop: 64, paddingTop: 24, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(250,245,239,.55)" }}>
          <span>© Marushika {new Date().getFullYear()} · Wearable Art</span>
          <span>Designed in Dubai · Crafted with Madhubani artisans</span>
          <span>Shipping · Privacy · Terms</span>
        </div>
      </div>
    </footer>
  );
}
function FooterCol({ title, children }) {
  return (
    <div>
      <div className="label" style={{ color: "var(--gold)", marginBottom: 18 }}>{title}</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 10, fontSize: 13.5, color: "rgba(250,245,239,.78)" }}>
        {children}
      </div>
    </div>
  );
}

// ---------- Product Card ----------
function ProductCard({ p, go, ratio = "3/4", compact = false }) {
  return (
    <a href={`#/product/${p.id}`} onClick={(e)=>{e.preventDefault(); go({name:"product", id:p.id});}} style={{ display:"block" }}>
      <div className="img-tile img-zoom" style={{ aspectRatio: ratio, marginBottom: 16 }}>
        <img src={p.img} alt={p.name} loading="lazy" />
        {p.tag && (
          <span style={{ position: "absolute", top: 14, left: 14, background: "rgba(250,245,239,.92)", color: "var(--ink)", padding: "5px 10px", fontSize: 9.5, letterSpacing: "0.22em", textTransform: "uppercase", fontWeight: 500 }}>
            {p.tag}
          </span>
        )}
      </div>
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"baseline", gap: 12 }}>
        <div>
          <div className="eyebrow" style={{ fontSize: 9.5, color: "var(--ink-soft)", marginBottom: 4 }}>{p.collection}</div>
          <div style={{ fontFamily: "var(--serif)", fontSize: compact ? 18 : 21, lineHeight: 1.15, marginBottom: compact ? 0 : 2 }}>{p.name}</div>
        </div>
        <div style={{ fontFamily: "var(--sans)", fontSize: 13, letterSpacing: "0.04em", whiteSpace: "nowrap" }} className="num">{fmtAED(p.price)}</div>
      </div>
    </a>
  );
}

// ---------- Lotus separator ----------
function LotusSep() {
  return (
    <div className="lotus-sep" style={{ margin: "24px 0" }}>
      <LotusMark size={18} color="var(--gold)" />
    </div>
  );
}

// ---------- WhatsApp FAB ----------
function WhatsAppFab() {
  return (
    <a href={WA_LINK} target="_blank" rel="noreferrer" className="fab" aria-label="Enquire on WhatsApp">
      <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M20.52 3.48A11.86 11.86 0 0 0 12.06 0C5.5 0 .15 5.34.15 11.91c0 2.1.55 4.15 1.6 5.96L0 24l6.31-1.65a11.9 11.9 0 0 0 5.75 1.46h.01c6.56 0 11.91-5.34 11.91-11.91 0-3.18-1.24-6.17-3.46-8.42zM12.07 21.8h-.01a9.9 9.9 0 0 1-5.04-1.38l-.36-.21-3.74.98 1-3.65-.24-.37a9.86 9.86 0 0 1-1.51-5.27c0-5.46 4.44-9.9 9.9-9.9 2.64 0 5.13 1.03 7 2.9a9.85 9.85 0 0 1 2.9 7c0 5.46-4.44 9.9-9.9 9.9zm5.43-7.42c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.95 1.17-.17.2-.35.22-.65.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.6-.92-2.2-.24-.58-.49-.5-.67-.51l-.57-.01c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.49 0 1.47 1.07 2.88 1.22 3.08.15.2 2.1 3.2 5.08 4.49.71.31 1.26.49 1.69.62.71.23 1.36.2 1.87.12.57-.08 1.76-.72 2-1.41.25-.7.25-1.29.17-1.42-.07-.13-.27-.2-.57-.35z"/>
      </svg>
    </a>
  );
}

// ---------- Page header (small hero) ----------
function PageMast({ eyebrow, title, sub, accent }) {
  return (
    <section style={{ paddingTop: 160, paddingBottom: 64, borderBottom: "1px solid var(--line)" }}>
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr auto", alignItems: "end", gap: 40 }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 24, color: accent || "var(--gold-deep)" }}>{eyebrow}</div>
          <h1 className="display" style={{ fontSize: "clamp(48px, 7vw, 96px)", margin: 0 }}>{title}</h1>
        </div>
        {sub && <p className="lede" style={{ maxWidth: 460, color: "var(--ink-soft)", margin: 0 }}>{sub}</p>}
      </div>
    </section>
  );
}

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