// Nav.jsx — sticky header that inverts on scroll + mobile drawer + language toggle
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  const { lang, setLang, T } = useLang();

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const onLight = scrolled;
  const ink = onLight ? "var(--ink)" : "var(--paper)";

  // Small EN / NL toggle button
  const LangToggle = ({ dark }) => (
    <div style={{ display: "flex", gap: 4, alignItems: "center" }}>
      {["en", "nl"].map((l) => (
        <button key={l} onClick={() => setLang(l)} style={{
          background: "none", border: "none", cursor: "pointer", padding: "4px 6px",
          fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 12,
          letterSpacing: ".08em", textTransform: "uppercase",
          color: lang === l ? (dark ? "var(--lime)" : "var(--lime)") : (dark ? "rgba(255,255,255,.4)" : (onLight ? "rgba(0,0,0,.35)" : "rgba(255,255,255,.4)")),
          transition: "color .18s",
        }}>{l}</button>
      ))}
    </div>
  );

  return (
    <>
      <header style={{
        position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
        transition: "background .3s ease, box-shadow .3s ease, border-color .3s",
        background: onLight ? "rgba(255,255,255,.95)" : "transparent",
        backdropFilter: onLight ? "saturate(140%) blur(10px)" : "none",
        WebkitBackdropFilter: onLight ? "saturate(140%) blur(10px)" : "none",
        borderBottom: "1px solid " + (onLight ? "var(--border)" : "transparent"),
      }}>
        <div className="container" style={{ display: "flex", alignItems: "center", height: 90, gap: 24 }}>
          <a href="#top" style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <img src={onLight ? IMG.logoInk : IMG.logoCream} alt="No Mad Plant Co."
              style={{ height: 83, width: 83, objectFit: "contain" }} />
          </a>
          <nav className="nm-desktop-nav" style={{ marginLeft: "auto", display: "flex", gap: 30, alignItems: "center" }}>
            {T.nav.links.map(([label, href]) => (
              <a key={label} href={href} style={{
                fontWeight: 700, fontSize: 14.5, color: ink, letterSpacing: ".01em",
                transition: "color .18s, opacity .18s", opacity: .92,
              }}
                onMouseEnter={(e) => (e.currentTarget.style.color = onLight ? "#000000" : "var(--lime)")}
                onMouseLeave={(e) => (e.currentTarget.style.color = ink)}>{label}</a>
            ))}
            <LangToggle />
            <Button as="a" href="#contact" variant={onLight ? "primary" : "outlineLight"}>{T.nav.cta}</Button>
          </nav>
          <button className="nm-burger" onClick={() => setOpen(true)} aria-label="Menu"
            style={{ marginLeft: "auto", display: "none", background: "none", border: 0, cursor: "pointer", color: ink, padding: 6 }}>
            <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
          </button>
        </div>
        <style>{`
          @media (max-width: 860px){
            .nm-desktop-nav{ display:none !important; }
            .nm-burger{ display:inline-flex !important; }
          }
        `}</style>
      </header>

      {/* mobile drawer — outside <header> so backdrop-filter can't trap it */}
      {open && (
        <div style={{ position: "fixed", inset: 0, zIndex: 60, background: "var(--ink)", color: "var(--paper)",
          display: "flex", flexDirection: "column", padding: "26px 28px" }}>
          <div style={{ display: "flex", alignItems: "center" }}>
            <img src={IMG.logoCream} style={{ height: 69 }} />
            <button onClick={() => setOpen(false)} aria-label="Close"
              style={{ marginLeft: "auto", background: "none", border: 0, color: "var(--paper)", cursor: "pointer" }}>
              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
            </button>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 6, marginTop: 38 }}>
            {T.nav.links.map(([label, href]) => (
              <a key={label} href={href} onClick={() => setOpen(false)}
                style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 34, textTransform: "uppercase",
                  letterSpacing: "-.01em", padding: "8px 0", color: "var(--paper)" }}>{label}</a>
            ))}
          </div>
          <div style={{ marginTop: 28, display: "flex", gap: 14, alignItems: "center" }}>
            <Button as="a" href="#contact" onClick={() => setOpen(false)}>{T.nav.cta}</Button>
            <LangToggle dark />
          </div>
        </div>
      )}
    </>
  );
}
window.Nav = Nav;