/* ============================================================
   RACK & BOX — Header, MegaMenu, Footer, Cart drawer, Search
   ============================================================ */

function CurrencyToggle() {
  const { currency, setCurrency } = useContext(RBCtx);
  return (
    <div className="cur-toggle" role="group" aria-label="Currency">
      {["NGN", "USD"].map((cur) =>
      <button key={cur} className={"cur-btn" + (currency === cur ? " on" : "")} onClick={() => setCurrency(cur)}>
          {cur === "NGN" ? "₦" : "$"} {cur}
        </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>
          )}
        </div>
        <div className="mega-col">
          <span className="mega-h">By Occasion</span>
          {RB.OCCASIONS.map((o) =>
          <button key={o} className="mega-link" onClick={() => onNav("shop", { occasion: o })}>{o}</button>
          )}
          <button className="mega-link accent" onClick={() => onNav("shop", {})}>View all products →</button>
        </div>
        <div className="mega-col">
          <span className="mega-h">The Edit</span>
          <button className="mega-link" onClick={() => onNav("shop", { cat: "Bridal" })}>Bridal</button>
          <button className="mega-link" onClick={() => onNav("shop", { cat: "Ready-to-Wear" })}>Ready-to-Wear</button>
          <button className="mega-link" onClick={() => onNav("about", {})}>The Atelier</button>
          <span className="mega-h" style={{ marginTop: 22 }}>Bespoke Services</span>
          <button className="mega-link" onClick={() => onNav("custom", {})}>Custom Orders</button>
          <button className="mega-link" onClick={() => onNav("packages", {})}>Bridal Packages</button>
          <button className="mega-link" onClick={() => onNav("booking", {})}>Book a Fitting</button>
          <button className="mega-link" onClick={() => onNav("academy", {})}>Fashion Academy</button>
        </div>
        <button className="mega-feature zoomable" onClick={() => onNav("shop", { cat: "Bridal" })}>
          <Ph label="FEATURED · THE BRIDAL ATELIER" ratio="portrait" />
          <div className="mega-feature-cap">
            <span className="eyebrow">Featured</span>
            <span className="serif" style={{ fontSize: 26 }}>The Bridal Atelier</span>
            <span className="link-arrow">Explore</span>
          </div>
        </button>
      </div>
    </div>);

}

function Header({ route, onNav, heroLayout, headerStyle = "classic" }) {
  const { cartCount, openCart, openSearch, wishCount } = useContext(RBCtx);
  const [scrolled, setScrolled] = useState(false);
  const [mobOpen, setMobOpen] = useState(false);
  const overHero = route.name === "home" && heroLayout === "centered";
  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: "Academy", to: "academy" },
  { label: "Our Story", to: "about" }];

  const boutique = headerStyle === "boutique";

  return (
    <header className={"hdr" + (scrolled || !overHero ? " solid" : "") + (overHero ? " on-hero" : "")}>
      <div className="announce">
        <Marquee items={["We deliver worldwide", "Now booking couture bridal consultations", "Complimentary Port Harcourt & Lagos delivery", "Custom orders open for 2026", "Where every bride becomes unforgettable"]} />
      </div>
      {boutique ?
      <>
          <div className="hdr-boutique-top">
            <button className="hdr-burger" onClick={() => setMobOpen(true)} aria-label="Menu"><Icon name="menu" /></button>
            <div className="hdr-boutique-logo"><Logo size={30} onClick={() => onNav("home", {})} /></div>
            <div className="hdr-boutique-icons">
              <CurrencyToggle />
              <button className="ic-btn" onClick={openSearch} aria-label="Search"><Icon name="search" size={19} /></button>
              <button className="ic-btn show-md" onClick={() => onNav("account", {})} aria-label="Account"><Icon name="user" size={19} /></button>
              <button className="ic-btn show-md" onClick={() => onNav("wishlist", {})} aria-label="Wishlist">
                <Icon name="heart" size={19} />
                {wishCount > 0 && <span className="ic-badge">{wishCount}</span>}
              </button>
              <button className="ic-btn" onClick={openCart} aria-label="Cart">
                <Icon name="cart" size={20} />
                {cartCount > 0 && <span className="ic-badge">{cartCount}</span>}
              </button>
            </div>
          </div>
          <nav className="hdr-boutique-nav">
            {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>
        </> :

      <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>
            <button className="ic-btn show-md" onClick={() => onNav("account", {})} aria-label="Account"><Icon name="user" size={19} /></button>
            <button className="ic-btn show-md" onClick={() => onNav("wishlist", {})} aria-label="Wishlist">
              <Icon name="heart" size={19} />
              {wishCount > 0 && <span className="ic-badge">{wishCount}</span>}
            </button>
            <button className="ic-btn" onClick={openCart} aria-label="Cart">
              <Icon name="cart" size={20} />
              {cartCount > 0 && <span className="ic-badge">{cartCount}</span>}
            </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", "bespoke"], ["Academy", "academy"], ["Our Story", "about"], ["Account", "account"], ["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("bespoke", {})}>Book a Fitting</Btn>
          </div>
        </div>
      }
    </header>);

}

/* ---------- Cart drawer ---------- */
function CartDrawer() {
  const { cartOpen, closeCart, cart, updateQty, removeFromCart, cartTotal, onNav, currency } = useContext(RBCtx);
  const FREE = 600000;
  const remaining = Math.max(0, FREE - cartTotal);
  const pct = Math.min(100, cartTotal / FREE * 100);
  return (
    <>
      <div className={"scrim" + (cartOpen ? " show" : "")} onClick={closeCart} />
      <aside className={"drawer" + (cartOpen ? " open" : "")} aria-hidden={!cartOpen}>
        <div className="drawer-head spread">
          <span className="serif" style={{ fontSize: 24 }}>Your Bag <span style={{ color: "var(--ink-faint)", fontSize: 16 }}>({cart.length})</span></span>
          <button className="ic-btn" onClick={closeCart}><Icon name="close" /></button>
        </div>
        {cart.length === 0 ?
        <div className="drawer-empty">
            <Icon name="cart" size={42} stroke={1} />
            <p className="serif" style={{ fontSize: 26 }}>Your bag is empty</p>
            <p style={{ color: "var(--ink-soft)", fontSize: 14 }}>Discover the pieces made to be worn and remembered.</p>
            <Btn onClick={() => {closeCart();onNav("shop", {});}}>Start Shopping</Btn>
          </div> :

        <>
            <div className="ship-meter">
              <div className="ship-meter-txt">
                {remaining > 0 ?
              <>You're <strong>{RB.format(remaining, currency)}</strong> away from complimentary worldwide shipping</> :
              <><Icon name="check" size={15} /> You've unlocked complimentary worldwide shipping</>}
              </div>
              <div className="ship-bar"><span style={{ width: pct + "%" }} /></div>
            </div>
            <div className="drawer-items">
              {cart.map((it) =>
            <div className="ditem" key={it.key}>
                  <button className="ditem-media zoomable" onClick={() => {closeCart();onNav("product", { id: it.id });}}>
                    <Ph label={it.label} ratio="portrait" />
                  </button>
                  <div className="ditem-body">
                    <div className="spread" style={{ alignItems: "flex-start" }}>
                      <div>
                        <div className="serif" style={{ fontSize: 18, lineHeight: 1.1 }}>{it.name}</div>
                        <div className="mono" style={{ fontSize: 11, color: "var(--ink-faint)", marginTop: 4 }}>{it.size} · {it.color}</div>
                      </div>
                      <button className="ditem-x" onClick={() => removeFromCart(it.key)}><Icon name="close" size={15} /></button>
                    </div>
                    <div className="spread" style={{ marginTop: 12 }}>
                      <div className="qty sm">
                        <button onClick={() => updateQty(it.key, -1)}><Icon name="minus" size={14} /></button>
                        <span>{it.qty}</span>
                        <button onClick={() => updateQty(it.key, 1)}><Icon name="plus" size={14} /></button>
                      </div>
                      <Price ngn={it.price * it.qty} style={{ fontSize: 15 }} />
                    </div>
                  </div>
                </div>
            )}
            </div>
            <div className="drawer-foot">
              <div className="spread" style={{ marginBottom: 4 }}>
                <span style={{ color: "var(--ink-soft)" }}>Subtotal</span>
                <Price ngn={cartTotal} style={{ fontFamily: "var(--font-display)", fontSize: 26 }} />
              </div>
              <p style={{ fontSize: 12, color: "var(--ink-faint)", marginBottom: 14 }}>Taxes & duties calculated at checkout.</p>
              <Btn block onClick={() => {closeCart();onNav("checkout", {});}}>Checkout</Btn>
              <button className="drawer-cont" onClick={() => {closeCart();onNav("shop", {});}}>Continue shopping</button>
            </div>
          </>
        }
      </aside>
    </>);

}

/* ---------- 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 + p.occasion.join(" ")).toLowerCase().includes(q.toLowerCase())).slice(0, 5) :
  [];
  const popular = ["Bridal", "Asoebi", "Red Carpet", "Reception", "Prom"];
  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, collections, occasions…" 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">Popular searches</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>
                <Price ngn={p.price} style={{ marginLeft: "auto" }} />
              </button>
          )}
          </div>
        }
      </div>
    </div>);

}

/* ---------- Footer ---------- */
function Footer({ onNav }) {
  const [email, setEmail] = useState("");
  const [done, setDone] = useState(false);
  return (
    <footer className="footer">
      <div className="footer-news wrap">
        <div className="reveal in">
          <Eyebrow>The Winns Couture List</Eyebrow>
          <h2 className="serif" style={{ fontSize: "clamp(32px,4vw,52px)", fontWeight: 500, margin: "16px 0", maxWidth: "14ch", lineHeight: 1.04 }}>
            Be first to new drops &amp; private fittings.
          </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 atelier.</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 }}>
            Luxury bridal couture, handcrafted in Nigeria &amp; delivered worldwide. Where every bride becomes unforgettable.
          </p>
          <div className="footer-social">
            <a className="fsoc" href="https://instagram.com/winns_couture" target="_blank" rel="noreferrer" aria-label="Instagram @winns_couture"><Icon name="ig" size={18} /></a>
            <a className="fsoc" href="#" aria-label="WhatsApp"><Icon name="whatsapp" size={18} /></a>
            <a className="fsoc" href="#" aria-label="X"><Icon name="x" size={16} /></a>
          </div>
        </div>
        <div className="footer-col">
          <span className="footer-h">Shop</span>
          {RB.CATEGORIES.map((c) => <button key={c} onClick={() => onNav("shop", { cat: c })}>{c}</button>)}
        </div>
        <div className="footer-col">
          <span className="footer-h">Atelier</span>
          <button onClick={() => onNav("about", {})}>Our Story</button>
          <button onClick={() => onNav("custom", {})}>Custom Orders</button>
          <button onClick={() => onNav("packages", {})}>Packages</button>
          <button onClick={() => onNav("academy", {})}>Fashion Academy</button>
          <button onClick={() => onNav("booking", {})}>Book a Fitting</button>
          <button onClick={() => onNav("shop", {})}>Size &amp; Fit Finder</button>
        </div>
        <div className="footer-col">
          <span className="footer-h">HELP & POLICIES</span>
          <button onClick={() => onNav("contact", {})}>Contact</button>
          <button onClick={() => onNav("contact", {})}>Shipping</button>
          <button onClick={() => onNav("contact", {})}>Returns &amp; Exchange</button>
          <button onClick={() => onNav("contact", {})}>Garment Care</button>
        </div>
        <div className="footer-col">
          <span className="footer-h">Visit</span>
          <p className="footer-addr">Winns Couture Studio<br />Port Harcourt, Nigeria</p>
          <p className="footer-addr">Lagos — by appointment<br />@winns_couture</p>
        </div>
      </div>
      <div className="footer-bottom wrap">
        <span>© 2026 Winns Couture. All rights reserved.</span>
        <div className="pay-row">
          {[
          { name: "Paystack", logo: '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 6h16c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V8c0-1.1.9-2 2-2z" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M6 12h3v3H6z" fill="currentColor" opacity="0.8"/><path d="M10.5 12h3v3h-3z" fill="currentColor" opacity="0.6"/><path d="M15 12h3v3h-3z" fill="currentColor" opacity="0.4"/></svg>' },
          { name: "Visa", logo: '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="6" width="20" height="12" rx="2" fill="none" stroke="currentColor" stroke-width="1.5"/><text x="12" y="14" text-anchor="middle" font-size="8" font-weight="bold" fill="currentColor">VISA</text></svg>' },
          { name: "Mastercard", logo: '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="9" cy="12" r="6" fill="none" stroke="currentColor" stroke-width="1.5"/><circle cx="15" cy="12" r="6" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>' },
          { name: "Amex", logo: '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="6" width="20" height="12" rx="2" fill="none" stroke="currentColor" stroke-width="1.5"/><text x="12" y="14" text-anchor="middle" font-size="7" font-weight="bold" fill="currentColor">AMEX</text></svg>' }].
          map(({ name, logo }) =>
          <span key={name} className="pay-chip" title={name}>
              <svg className="pay-logo-svg" dangerouslySetInnerHTML={{ __html: logo }} viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" />
              <span className="pay-text">{name}</span>
            </span>
          )}
        </div>
        <span>Port Harcourt · Lagos · Worldwide</span>
      </div>
    </footer>);

}

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