// ============== Header ==============
function Header({ route, params, navigate }) {
  const [openMenu, setOpenMenu] = React.useState(null); // 'pashmina' | 'squared' | null
  const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false);
  const closeMenu = () => setOpenMenu(null);

  // close menus on Esc
  React.useEffect(() => {
    const onKey = (e) => {if (e.key === "Escape") {closeMenu();setMobileMenuOpen(false);}};
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  // close the mobile menu whenever the route changes
  React.useEffect(() => {
    setMobileMenuOpen(false);
  }, [route, params]);

  const activeCat =
  route === "product" && params && SUBCATEGORIES[params] ?
  SUBCATEGORIES[params].category :
  null;

  const goMobile = (r, p) => {
    setMobileMenuOpen(false);
    navigate(r, p);
  };

  return (
    <header className="header" data-screen-label="Header" onMouseLeave={closeMenu}>
      <div className="container">
        <div className="header-inner">
          <nav className="nav-side left" aria-label="primary">
            <button
              className="menu-toggle"
              onClick={() => setMobileMenuOpen((v) => !v)}
              aria-label={mobileMenuOpen ? "Close menu" : "Open menu"}
              aria-expanded={mobileMenuOpen}>
              {mobileMenuOpen ? <CloseIcon size={20} /> : <MenuIcon size={20} />}
            </button>
            {CATEGORIES.map((cat) =>
            <div className="nav-item" key={cat.id} onMouseEnter={() => setOpenMenu(cat.id)}>
                <button
                className={"nav-link" + (activeCat === cat.id ? " active" : "")}
                onClick={() => navigate("product", cat.subs[0])}>
                  {cat.title}
                </button>
              </div>
            )}
          </nav>

          <button
            className="wordmark-btn"
            onClick={() => navigate("home")}
            aria-label="DAMA — home"
            style={{ textAlign: "center" }}>
            DAMA
          </button>

          <nav className="nav-side right" aria-label="secondary">
            <button className={"nav-link" + (route === "about" ? " active" : "")} onClick={() => navigate("about")}>About us</button>
            <button className="nav-link" onClick={() => navigate("home", "stockists")}>CONTACT US</button>
          </nav>
        </div>

        {/* mega-menu: lists 3 subcategories of the hovered category (desktop) */}
        {openMenu &&
        <div className="mega-menu" onMouseEnter={() => setOpenMenu(openMenu)}>
            <div className="mega-menu-inner">
              <div className="mega-eyebrow">
                {CATEGORIES.find((c) => c.id === openMenu).title} ·
                {" "}sub-categories
              </div>
              <div className="mega-row">
                {CATEGORIES.find((c) => c.id === openMenu).subs.map((sKey) => {
                const s = SUBCATEGORIES[sKey];
                return (
                  <button
                    key={sKey}
                    className="mega-card"
                    onClick={() => {navigate("product", sKey);closeMenu();}}>
                      <span className="mega-swatch" style={{ background: s.palette[2] }} />
                      <span className="mega-card-text">
                        <span className="mega-card-title">{s.title}</span>
                        <span className="mega-card-meta">6 looks · daylight 11:00</span>
                      </span>
                      <ArrowRight size={14} />
                    </button>);

              })}
              </div>
            </div>
          </div>
        }

        {/* mobile menu: all nav items stacked, triggered by the hamburger */}
        {mobileMenuOpen &&
        <div className="mobile-menu" data-screen-label="Mobile menu">
            <nav className="mobile-menu-list" aria-label="Mobile primary">
              {CATEGORIES.map((cat) =>
              <button
                key={cat.id}
                className={"mobile-menu-link" + (activeCat === cat.id ? " active" : "")}
                onClick={() => goMobile("product", cat.subs[0])}>
                  {cat.title}
                </button>
              )}
              <button className={"mobile-menu-link" + (route === "about" ? " active" : "")} onClick={() => goMobile("about")}>About us</button>
              <button className="mobile-menu-link" onClick={() => goMobile("home", "stockists")}>Contact us</button>
            </nav>
          </div>
        }
      </div>
    </header>);

}

// ============== Placeholder image block ==============
function Placeholder({ color, label, caption, style, className }) {
  return (
    <div className={"ph " + (className || "")} style={{ "--ph-color": color, ...style }}>
      {label && <span className="ph-label">{label}</span>}
      {caption && <span className="ph-caption">{caption}</span>}
    </div>);

}

// ============== Newsletter ==============
function Newsletter() {
  const [email, setEmail] = React.useState("");
  const [sent, setSent] = React.useState(false);
  return (
    <section className="newsletter" id="newsletter" data-screen-label="Newsletter">
      <div className="container">
        <h3>Stay in the <em>fold</em>.</h3>
        <p>Quiet notes — new editions, swatch updates, atelier dates. Be informed regarding our exclusive and limited releases.</p>
        <form
          className="newsletter-form"
          onSubmit={(e) => {e.preventDefault();if (email) setSent(true);}}>
          <input
            type="email"
            value={sent ? "Welcome." : email}
            disabled={sent}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="Your email address"
            aria-label="Email address" />
          <button type="submit" disabled={sent}>{sent ? "Subscribed" : "Subscribe"}</button>
        </form>
      </div>
    </section>);

}

// ============== Footer ==============
function Footer({ navigate }) {
  return (
    <footer className="footer" data-screen-label="Footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <div className="wm">DAMA</div>
            <p>Modest fashion, honestly photographed. Pashmina and squared hijab made in Jakarta — the colour you see is the colour that arrives.</p>
          </div>

          <div className="footer-col">
            <h6>Pashmina</h6>
            <ul>
              <li><a href="#" onClick={(e) => {e.preventDefault();navigate('product', 'pashmina-voal');}}>Plain voal</a></li>
              <li><a href="#" onClick={(e) => {e.preventDefault();navigate('product', 'pashmina-crinkle');}}>Crinkle</a></li>
              <li><a href="#" onClick={(e) => {e.preventDefault();navigate('product', 'pashmina-satin');}}>Satin silk</a></li>
            </ul>
          </div>

          <div className="footer-col">
            <h6>Squared Hijab</h6>
            <ul>
              <li><a href="#" onClick={(e) => {e.preventDefault();navigate('product', 'squared-voal');}}>Plain voal</a></li>
              <li><a href="#" onClick={(e) => {e.preventDefault();navigate('product', 'squared-printed');}}>Printed</a></li>
              <li><a href="#" onClick={(e) => {e.preventDefault();navigate('product', 'squared-satin');}}>Satin silk</a></li>
            </ul>
          </div>

          <div className="footer-col">
            <h6>Studio</h6>
            <ul>
              <li><a href="#" onClick={(e) => {e.preventDefault();navigate('home', 'atelier');}}>About DAMA</a></li>
              <li><a href="#" onClick={(e) => {e.preventDefault();navigate('lookbook');}}>Lookbook</a></li>
              <li><a href="#" onClick={(e) => {e.preventDefault();navigate('home', 'stockists');}}>Stockists</a></li>
              <li><a href="#">Care &amp; folding</a></li>
              <li><a href="#">Journal</a></li>
            </ul>
          </div>
        </div>

        <div className="footer-bottom">
          <span>© 2026 DAMA · Studio Kemang, Jakarta Selatan</span>
          <span>Free shipping nationwide on orders over Rp 250,000</span>
        </div>
      </div>
    </footer>);

}

// ============== Fixed affordances ==============
function FixedAffordances() {
  return (
    <button className="chat-bubble" aria-label="Chat on WhatsApp">
      <MessageCircle size={22} />
    </button>);

}

// ============== Look carousel (3 slides per look, Instagram-style) ==============
function LookCarousel({ look }) {
  const [idx, setIdx] = React.useState(0);
  const dragX = React.useRef(null);
  const frames = look.images && look.images.length
    ? look.images.map((src, i) => ({ src, tag: i === 0 ? "Front" : i === 1 ? "Detail" : "Styled" }))
    : [
        { tint: "white 6%", tag: "Front" },
        { tint: "black 10%", tag: "Detail" },
        { tint: "black 22%", tag: "Styled" },
      ];

  const go = (dir) => setIdx((i) => (i + dir + frames.length) % frames.length);

  const onTap = (e) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const x = e.clientX - rect.left;
    go(x < rect.width / 2 ? -1 : 1);
  };

  const onPointerDown = (e) => { dragX.current = e.clientX; };
  const onPointerUp = (e) => {
    if (dragX.current == null) return;
    const dx = e.clientX - dragX.current;
    if (Math.abs(dx) > 32) go(dx < 0 ? 1 : -1);
    else onTap(e);
    dragX.current = null;
  };

  return (
    <div
      className="look-carousel"
      onPointerDown={onPointerDown}
      onPointerUp={onPointerUp}>
      <div className="carousel-progress">
        {frames.map((_, i) => (
          <span key={i} className={"seg" + (i === idx ? " active" : i < idx ? " done" : "")} />
        ))}
      </div>
      <div className="look-carousel-track" style={{ transform: `translateX(-${idx * 100}%)` }}>
        {frames.map((f, i) => (
          <div className="look-carousel-slide" key={i}>
            {f.src ? (
              <img className="look-carousel-photo" src={f.src} alt={`${look.fabric} — ${f.tag}`} />
            ) : (
              <Placeholder
                color={`color-mix(in srgb, ${look.color} 100%, ${f.tint})`}
                label={`Look ${look.n}`}
                caption={`${look.fabric} · ${f.tag}`} />
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Header, Placeholder, Newsletter, Footer, FixedAffordances, LookCarousel });