// Header — top navigation for The Little Scoop website.
const { Logo, Button } = window.TheLittleScoopDesignSystem_cee583;

function NavLink({ id, label, current, onNav, onDark }) {
  const active = current === id;
  const color = onDark ? (active ? "#fff" : "rgba(255,255,255,.88)") : (active ? "var(--brand-primary)" : "var(--text-strong)");
  return (
    <button
      onClick={() => onNav(id)}
      style={{
        border: "none",
        background: "transparent",
        cursor: "pointer",
        fontFamily: "var(--font-body)",
        fontWeight: 700,
        fontSize: "var(--text-md)",
        color,
        padding: "8px 4px",
        position: "relative",
        textShadow: onDark ? "0 1px 8px rgba(42,36,64,.4)" : "none",
        transition: "color var(--dur-med)",
      }}
    >
      {label}
      <span style={{
        position: "absolute", left: 4, right: 4, bottom: 2, height: 3, borderRadius: 3,
        background: active ? (onDark ? "#fff" : "var(--brand-primary)") : "transparent",
      }} />
    </button>
  );
}

function CartButton({ count, onCart, onDark }) {
  return (
    <button onClick={onCart} aria-label="Open cart" style={{
      position: "relative", width: 40, height: 44, borderRadius: 0,
      border: "none", background: "transparent", padding: 0,
      cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", flex: "none",
      filter: onDark ? "drop-shadow(0 1px 6px rgba(42,36,64,.4))" : "none",
      transition: "opacity var(--dur-fast)",
    }}
      onMouseEnter={(e) => (e.currentTarget.style.opacity = "0.7")}
      onMouseLeave={(e) => (e.currentTarget.style.opacity = "1")}
    >
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={onDark ? "#fff" : "var(--text-strong)"} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="9" cy="20" r="1.4"/><circle cx="18" cy="20" r="1.4"/>
        <path d="M2 3h2.2l2.3 12.1a1.6 1.6 0 0 0 1.6 1.3h8.6a1.6 1.6 0 0 0 1.6-1.2L21.5 7H5.1"/>
      </svg>
      {count > 0 && (
        <span style={{
          position: "absolute", top: -4, right: -4, minWidth: 20, height: 20, padding: "0 5px",
          borderRadius: "var(--radius-pill)", background: "var(--brand-primary)", color: "#fff",
          fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 12, display: "flex",
          alignItems: "center", justifyContent: "center", border: "2px solid var(--white)",
        }}>{count}</span>
      )}
    </button>
  );
}

function MenuDrawer({ open, links, current, onNav, onCategory, onClose }) {
  const pick = (id) => { onNav(id); onClose(); };
  const goCat = (id) => { onCategory(id); onClose(); };
  const [shopHover, setShopHover] = React.useState(false);
  const [catHover, setCatHover] = React.useState(false);
  const categories = [
    { id: "scoop-kits", label: "Scoop & Pour Kits" },
    { id: "filler-bags", label: "Scoop & Pour Filler Bags" },
    { id: "masterpiece", label: "Masterpiece Box Kit" },
    { id: "playpack", label: "Playpack Bag Kit" },
    { id: "little-wonder", label: "Little Wonder Kit" },
    { id: "treasure-jars", label: "Treasure Jars" },
    { id: "dough-jars", label: "Dough Jars" },
  ];
  return (
    <React.Fragment>
      <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "rgba(42,36,64,.4)", opacity: open ? 1 : 0,
        pointerEvents: open ? "auto" : "none", transition: "opacity var(--dur-med)", zIndex: 45 }} />
      <aside style={{ position: "fixed", top: 0, left: 0, height: "100%", width: "min(560px, 100vw)", background: "#ffffff", backgroundColor: "#ffffff", backdropFilter: "none", WebkitBackdropFilter: "none", isolation: "isolate",
        boxShadow: "var(--shadow-xl)", zIndex: 50, transform: open ? "translateX(0)" : "translateX(-100%)",
        transition: "transform var(--dur-slow) var(--ease-out)", display: "flex", flexDirection: "column" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "var(--space-5) var(--space-6)", borderBottom: "2px solid var(--border-soft)" }}>
          <img src="logo-wordmark-teal.png" alt="The Little Scoop" style={{ height: 40, width: "auto", display: "block" }} />
          <button onClick={onClose} aria-label="Close menu" style={{ width: 44, height: 44, borderRadius: "50%", border: "2px solid var(--border-soft)", background: "var(--white)", cursor: "pointer", fontSize: 18, color: "var(--text-strong)" }}>✕</button>
        </div>

        <div style={{ flex: 1, padding: "var(--space-6)", background: "#ffffff", display: "flex", flexDirection: "column", gap: "var(--space-3)" }}
          onMouseLeave={() => { setShopHover(false); setCatHover(false); }}>
          {/* Shop — hover to reveal the category section */}
          <button onClick={() => pick("products")}
            onMouseEnter={() => setShopHover(true)}
            style={{
              textAlign: "left", border: "none", cursor: "pointer", background: shopHover ? "var(--surface-sunken)" : "transparent",
              color: "#94d1c5", fontFamily: "var(--font-display)", fontWeight: 600,
              fontSize: "var(--text-2xl)", padding: "12px 14px", borderRadius: "var(--radius-md)",
            }}
          >Shop</button>

          {/* "Shop by category" — appears on Shop hover; hover IT to reveal the options */}
          <div style={{ overflow: "hidden", maxHeight: shopHover ? 600 : 0, opacity: shopHover ? 1 : 0,
            transition: "max-height var(--dur-slow) var(--ease-out), opacity var(--dur-med) var(--ease-out)" }}>
            <button
              onMouseEnter={() => setCatHover(true)}
              onClick={() => pick("shop")}
              style={{
                width: "100%", textAlign: "left", border: "none", cursor: "pointer", background: catHover ? "var(--surface-sunken)" : "transparent",
                fontFamily: "var(--font-body)", fontWeight: 800, fontSize: "var(--text-sm)", letterSpacing: "0.08em", textTransform: "uppercase",
                color: "#000", padding: "10px 14px", borderRadius: "var(--radius-md)", marginLeft: 8,
              }}
            >Shop by category ▾</button>
            <div style={{ overflow: "hidden", maxHeight: catHover ? 600 : 0, opacity: catHover ? 1 : 0,
              transition: "max-height var(--dur-slow) var(--ease-out), opacity var(--dur-med) var(--ease-out)" }}>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 4, paddingLeft: 16, marginTop: 4 }}>
                {categories.map((c) => (
                  <button key={c.id} onClick={() => goCat(c.id)} style={{
                    textAlign: "left", border: "none", cursor: "pointer", background: "transparent", color: "#000",
                    fontFamily: "var(--font-body)", fontWeight: 700, fontSize: "var(--text-md)", padding: "12px 14px", borderRadius: "var(--radius-md)",
                  }}
                    onMouseEnter={(e) => (e.currentTarget.style.background = "var(--surface-sunken)")}
                    onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
                  >{c.label}</button>
                ))}
              </div>
            </div>
          </div>
        </div>
      </aside>
    </React.Fragment>
  );
}

function LanguageSelect({ onDark }) {
  const [lang, setLang] = React.useState("EN");
  return (
    <div style={{ position: "relative", display: "inline-flex", alignItems: "center" }}>
      <span aria-hidden="true" style={{ position: "absolute", left: 4, top: "50%", transform: "translateY(-50%)", pointerEvents: "none", display: "flex", color: onDark ? "#fff" : "var(--text-strong)", filter: onDark ? "drop-shadow(0 1px 6px rgba(42,36,64,.4))" : "none" }}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.1" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18"/></svg>
      </span>
      <select
        value={lang}
        onChange={(e) => setLang(e.target.value)}
        aria-label="Choose language"
        style={{
          appearance: "none", WebkitAppearance: "none", height: 44, padding: "0 28px 0 26px", cursor: "pointer",
          fontFamily: "var(--font-body)", fontWeight: 700, fontSize: "var(--text-sm)",
          color: onDark ? "#fff" : "var(--text-strong)",
          background: "transparent", border: "none", outline: "none",
          textShadow: onDark ? "0 1px 8px rgba(42,36,64,.4)" : "none",
          transition: "color var(--dur-med)",
        }}
      >
        <option value="EN">English</option>
        <option value="ES">Español</option>
        <option value="FR">Français</option>
        <option value="DE">Deutsch</option>
        <option value="PT">Português</option>
      </select>
      <span aria-hidden="true" style={{ position: "absolute", right: 6, top: "50%", transform: "translateY(-50%)", pointerEvents: "none", fontSize: 9, color: onDark ? "#fff" : "var(--brand-primary)" }}>▼</span>
    </div>
  );
}

function AccountButton({ onDark, onClick }) {
  return (
    <button onClick={onClick} style={{
      display: "inline-flex", alignItems: "center", gap: 8, height: 44, padding: "0 4px", cursor: "pointer",
      fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "var(--text-sm)",
      color: onDark ? "#fff" : "var(--text-strong)",
      background: "transparent", border: "none", whiteSpace: "nowrap",
      textShadow: onDark ? "0 1px 8px rgba(42,36,64,.4)" : "none",
      transition: "opacity var(--dur-fast), color var(--dur-med)",
    }}
      onMouseEnter={(e) => (e.currentTarget.style.opacity = "0.7")}
      onMouseLeave={(e) => (e.currentTarget.style.opacity = "1")}
    >
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="12" cy="8" r="4"/><path d="M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1"/>
      </svg>
      Log in
    </button>
  );
}

function MenuButton({ onClick, onDark }) {
  const color = onDark ? "#fff" : "var(--text-strong)";
  return (
    <button onClick={onClick} aria-label="Open menu" style={{
      width: 40, height: 44, flex: "none", border: "none", background: "transparent",
      cursor: "pointer", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 5,
      padding: 0, filter: onDark ? "drop-shadow(0 1px 6px rgba(42,36,64,.4))" : "none",
    }}>
      {[0,1,2].map((k) => <span key={k} style={{ width: 24, height: 2.6, borderRadius: 2, background: color }} />)}
    </button>
  );
}

function Header({ current, onNav, onCategory, cartCount, onCart, mobile, overlay }) {
  const links = [
    { id: "shop", label: "Shop" },
    { id: "themes", label: "Themes" },
    { id: "about", label: "About Sensory Play" },
    { id: "contact", label: "Contact" },
  ];

  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    if (!overlay) return;
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, [overlay]);

  // Header is always solid white.
  const transparent = false;
  const dark = false; // dark controls on the white bar

  return (
    <header style={{
      position: "sticky", top: 0, left: 0, right: 0, zIndex: 30,
      background: "#fff",
      borderBottom: "2px solid var(--border-soft)",
      transition: "background var(--dur-med) var(--ease-out), border-color var(--dur-med)",
    }}>
      <div style={{
        maxWidth: "var(--container-max)", margin: "0 auto", padding: "12px var(--container-pad)",
        display: "flex", alignItems: "center", gap: "var(--space-4)", position: "relative",
      }}>
        <span style={{ marginLeft: "calc(-1 * var(--container-pad))", display: "inline-flex" }}>
          <MenuButton onClick={() => setMenuOpen(true)} onDark={dark} />
        </span>
        <button onClick={() => onNav("home")} aria-label="The Little Scoop home" style={{
          border: "none", background: "transparent", cursor: "pointer", padding: 0,
          position: "absolute", left: "50%", top: "50%", transform: "translate(-50%, -50%)",
          display: "flex", alignItems: "center",
          filter: dark ? "drop-shadow(0 2px 10px rgba(42,36,64,.45))" : "drop-shadow(0 1px 2px rgba(42,36,64,.45))",
        }}>
          <img src="logo-wordmark-teal.png" alt="The Little Scoop" style={{ height: mobile ? 40 : 52, width: "auto", display: "block" }} />
        </button>
        <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: "var(--space-3)" }}>
          {!mobile && <LanguageSelect onDark={dark} />}
          {!mobile && <AccountButton onDark={dark} onClick={() => onNav("account")} />}
          <CartButton count={cartCount} onCart={onCart} onDark={dark} />
        </div>
      </div>
      <MenuDrawer open={menuOpen} links={links} current={current} onNav={onNav} onCategory={onCategory} onClose={() => setMenuOpen(false)} />
    </header>
  );
}

Object.assign(window, { Header });