/* ============================================================
   DIOTBRAND — Header, MegaMenu, Footer, Search
   ============================================================ */

function CurrencyToggle() {
  const { currency, setCurrency } = useContext(RBCtx);
  const CUR = (window.BRAND && window.BRAND.currency) || { base: "USD", symbol: "$", altCode: "NGN", altSymbol: "₦" };
  const opts = [{ code: CUR.base, sym: CUR.symbol }, { code: CUR.altCode, sym: CUR.altSymbol }];
  return (
    <div className="cur-toggle" role="group" aria-label="Currency">
      {opts.map(({ code, sym }) =>
        <button key={code} className={"cur-btn" + (currency === code ? " on" : "")} onClick={() => setCurrency(code)}>
          {sym} {code}
        </button>
      )}
    </div>
  );
}

function MegaMenu({ onNav }) {
  return (
    <div className="mega">
      <div className="mega-inner wrap-wide">
        <div className="mega-col">
          <span className="mega-h">By Category</span>
          {RB.CATEGORIES.map((cat) =>
            <button key={cat} className="mega-link" onClick={() => onNav("shop", { cat })}>{cat}</button>
          )}
          <button className="mega-link accent" onClick={() => onNav("shop", {})}>View all pieces →</button>
        </div>
        <div className="mega-col">
          <span className="mega-h">Bespoke</span>
          <button className="mega-link" onClick={() => onNav("custom", {})}>Custom Commissions</button>
          <button className="mega-link" onClick={() => onNav("about", {})}>The Studio</button>
          <button className="mega-link" onClick={() => onNav("contact", {})}>Enquire</button>
        </div>
        <button className="mega-feature zoomable" onClick={() => onNav("custom", {})}>
          <Ph label="FEATURED · CUSTOM COMMISSIONS" ratio="portrait" />
          <div className="mega-feature-cap">
            <span className="eyebrow">Featured</span>
            <span className="serif" style={{ fontSize: 26 }}>Custom Commissions</span>
            <span className="link-arrow">Explore</span>
          </div>
        </button>
      </div>
    </div>
  );
}

function Header({ route, onNav }) {
  const { openSearch } = useContext(RBCtx);
  const [scrolled, setScrolled] = useState(false);
  const [mobOpen, setMobOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useEffect(() => { setMobOpen(false); }, [route]);

  const links = [
    { label: "Shop", to: "shop", mega: true },
    { label: "Bespoke", to: "custom" },
    { label: "Our Story", to: "about" },
    { label: "Contact", to: "contact" },
  ];

  const solid = scrolled || route.name !== "home";

  return (
    <header className={"hdr" + (solid ? " solid" : "")}>
      <div className="announce">
        <Marquee items={["MADE TO MEASURE · LAGOS STUDIO", "CUSTOM BRIDAL & EVENINGWEAR", "CORSETRY BUILT IN-HOUSE"]} />
      </div>
      <div className="hdr-bar">
        <nav className="hdr-left" style={{ gap: "20px" }}>
          {links.map((l) =>
            <div key={l.to} className={"navitem" + (l.mega ? " has-mega" : "")}>
              <button className={"navlink" + (route.name === l.to ? " active" : "")} onClick={() => onNav(l.to, {})}>{l.label}</button>
              {l.mega && <MegaMenu onNav={onNav} />}
            </div>
          )}
        </nav>
        <button className="hdr-burger" onClick={() => setMobOpen(true)} aria-label="Menu"><Icon name="menu" /></button>
        <div className="hdr-logo"><Logo size={26} onClick={() => onNav("home", {})} /></div>
        <div className="hdr-right">
          <CurrencyToggle />
          <button className="ic-btn" onClick={openSearch} aria-label="Search"><Icon name="search" size={19} /></button>
        </div>
      </div>
      {mobOpen &&
        <div className="mob-menu">
          <div className="mob-head spread">
            <Logo size={22} onClick={() => onNav("home", {})} />
            <button className="ic-btn" onClick={() => setMobOpen(false)}><Icon name="close" /></button>
          </div>
          <div className="mob-links">
            {[["Shop", "shop"], ["Bespoke", "custom"], ["Our Story", "about"], ["Contact", "contact"]].map(([l, t]) =>
              <button key={t} className="mob-link" onClick={() => onNav(t, {})}>{l}<Icon name="chevron" size={18} /></button>
            )}
          </div>
          <div style={{ marginTop: "auto", paddingTop: 24 }}>
            <CurrencyToggle />
            <Btn block style={{ marginTop: 16 }} onClick={() => onNav("custom", {})}>Start a Custom Order</Btn>
          </div>
        </div>
      }
    </header>
  );
}

/* ---------- Search overlay ---------- */
function SearchOverlay() {
  const { searchOpen, closeSearch, onNav } = useContext(RBCtx);
  const [q, setQ] = useState("");
  const inputRef = useRef(null);
  useEffect(() => { if (searchOpen && inputRef.current) setTimeout(() => inputRef.current.focus(), 80); }, [searchOpen]);
  useEffect(() => { if (!searchOpen) setQ(""); }, [searchOpen]);
  const results = q.trim() ? RB.PRODUCTS.filter((p) => (p.name + p.cat).toLowerCase().includes(q.toLowerCase())).slice(0, 5) : [];
  const popular = RB.CATEGORIES;
  if (!searchOpen) return null;
  return (
    <div className="search-overlay fade-page">
      <div className="search-top wrap">
        <Icon name="search" size={22} />
        <input ref={inputRef} className="search-input" placeholder="Search pieces…" value={q} onChange={(e) => setQ(e.target.value)} />
        <button className="ic-btn" onClick={closeSearch}><Icon name="close" size={22} /></button>
      </div>
      <div className="search-body wrap">
        {!q &&
          <div>
            <span className="eyebrow muted">Categories</span>
            <div className="row" style={{ gap: 10, flexWrap: "wrap", marginTop: 16 }}>
              {popular.map((p) => <button key={p} className="chip" onClick={() => setQ(p)}>{p}</button>)}
            </div>
          </div>
        }
        {q && results.length === 0 && <p style={{ color: "var(--ink-soft)" }}>No pieces match "{q}".</p>}
        {results.length > 0 &&
          <div className="search-results">
            {results.map((p) =>
              <button key={p.id} className="search-res" onClick={() => { closeSearch(); onNav("product", { id: p.id }); }}>
                <Ph label={p.label} ratio="square" style={{ width: 64, height: 64 }} />
                <div>
                  <div className="serif" style={{ fontSize: 19 }}>{p.name}</div>
                  <div className="mono" style={{ fontSize: 11, color: "var(--ink-faint)" }}>{p.cat}</div>
                </div>
              </button>
            )}
          </div>
        }
      </div>
    </div>
  );
}

/* ---------- Footer ---------- */
function Footer({ onNav }) {
  const [email, setEmail] = useState("");
  const [done, setDone] = useState(false);
  const ig = (window.BRAND && window.BRAND.igUrl) || "https://instagram.com/diotbrand";
  return (
    <footer className="footer">
      <div className="footer-news wrap">
        <div className="reveal in">
          <Eyebrow>{"The " + (window.BRAND ? window.BRAND.name : "Diotbrand") + " List"}</Eyebrow>
          <h2 className="serif" style={{ fontSize: "clamp(32px,4vw,52px)", fontWeight: 500, margin: "16px 0", maxWidth: "14ch", lineHeight: 1.04 }}>
            Be first to see new commissions.
          </h2>
        </div>
        <form className="news-form" onSubmit={(e) => { e.preventDefault(); if (email) setDone(true); }}>
          {done ?
            <p className="news-done"><Icon name="check" size={18} /> You're on the list. Welcome to the studio.</p> :
            <>
              <input className="news-input" type="email" required placeholder="Your email address" value={email} onChange={(e) => setEmail(e.target.value)} />
              <button className="news-sub" type="submit">Subscribe <Icon name="arrow" size={16} /></button>
            </>
          }
        </form>
      </div>
      <div className="footer-grid wrap">
        <div className="footer-brand">
          <Logo size={30} onClick={() => onNav("home", {})} />
          <p style={{ color: "color-mix(in oklab, var(--footer-ink) 66%, transparent)", marginTop: 18, maxWidth: "32ch", fontSize: 14.5 }}>
            {(window.BRAND && window.BRAND.tagline) || "Bridal & eveningwear, made to measure."}
          </p>
          <div className="footer-social">
            <a className="fsoc" href={ig} target="_blank" rel="noopener" aria-label="Instagram"><Icon name="ig" size={18} /></a>
          </div>
        </div>
        <div className="footer-col">
          <span className="footer-h">Shop</span>
          <button onClick={() => onNav("shop", {})}>All pieces</button>
          <button onClick={() => onNav("shop", { cat: "Bridal Gowns" })}>Bridal Gowns</button>
          <button onClick={() => onNav("shop", { cat: "Custom/Eveningwear" })}>Custom/Eveningwear</button>
          <button onClick={() => onNav("shop", { cat: "Corsetry" })}>Corsetry</button>
        </div>
        <div className="footer-col">
          <span className="footer-h">Studio</span>
          <button onClick={() => onNav("custom", {})}>Custom commissions</button>
          <button onClick={() => onNav("about", {})}>Our story</button>
        </div>
        <div className="footer-col">
          <span className="footer-h">Support</span>
          <button onClick={() => onNav("contact", {})}>Enquire</button>
        </div>
        <div className="footer-col">
          <span className="footer-h">Visit</span>
          <p className="footer-addr">{(window.BRAND?.addresses.hq.label) || "Lagos Studio"} — {(window.BRAND?.addresses.hq.line) || "Lagos, Nigeria, by appointment"}</p>
        </div>
      </div>
      <div className="footer-bottom wrap">
        <span>© 2026 {(window.BRAND && window.BRAND.name) || "Diotbrand"}. All rights reserved.</span>
        <span><a href={ig} target="_blank" rel="noopener" style={{ color: "var(--accent)" }}>{(window.BRAND?.igHandle) || "@diotbrand"}</a></span>
        <span>{(window.BRAND && window.BRAND.regionLine) || "Lagos, Nigeria"}</span>
      </div>
      <div className="footer-powered" style={{ textAlign: "center", padding: "18px var(--gut)", borderTop: "1px solid color-mix(in oklab, var(--footer-ink) 12%, transparent)", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "color-mix(in oklab, var(--footer-ink) 52%, transparent)", fontFamily: "var(--font-mono, monospace)" }}>
        Powered by <a href="https://thecollectivesynergy.com" target="_blank" rel="noopener" style={{ color: "var(--accent)" }}>The Collective Synergy</a>
      </div>
    </footer>
  );
}

Object.assign(window, { Header, Footer, SearchOverlay, CurrencyToggle });