/* Nav — sticky top bar with theme switcher + mobile menu */

const Nav = ({ theme, setTheme }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

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

  React.useEffect(() => {
    document.body.classList.toggle("menu-open", open);
  }, [open]);

  const links = [
    { id: "systems", label: "Systems" },
    { id: "industries", label: "Industries" },
    { id: "process", label: "Process" },
    { id: "contact", label: "Contact" },
  ];

  const themes = [
    { id: "herbarium", label: "Herbarium" },
    { id: "greenhouse", label: "Greenhouse" },
    { id: "wildflower", label: "Wildflower" },
  ];

  return (
    <React.Fragment>
      <nav
        style={{
          position: "sticky",
          top: 0,
          zIndex: 40,
          backdropFilter: scrolled ? "blur(14px)" : "none",
          background: scrolled ? "color-mix(in oklab, var(--paper) 80%, transparent)" : "transparent",
          borderBottom: scrolled ? "1px solid var(--line)" : "1px solid transparent",
          transition: "background 280ms, border-color 280ms, backdrop-filter 280ms",
        }}
      >
        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            padding: "18px var(--pad-x)",
            gap: 24,
          }}
        >
          <a href="#top" style={{ textDecoration: "none", color: "var(--ink)", display: "flex", alignItems: "center", gap: 10 }}>
            <Botanical kind="sprig" size={28} stroke={1.2} style={{ color: "var(--moss)" }} />
            <span className="display" style={{ fontSize: 26, letterSpacing: "-0.02em" }}>
              eth3r<span style={{ color: "var(--moss)", fontStyle: "italic" }}>·</span>
            </span>
          </a>

          {/* Desktop links */}
          <div className="desktop-only" style={{ display: "flex", gap: 28, alignItems: "center" }}>
            {links.map((l) => (
              <a key={l.id} href={"#" + l.id} className="nav-link">
                {l.label}
              </a>
            ))}
          </div>

          {/* Desktop palette switcher — floated to bottom of viewport via CSS
              so it doesn't clash with the cross-theme bar at top. */}
          <div className="desktop-only palette-switcher-float" style={{ display: "flex", gap: 6, alignItems: "center" }}>
            {themes.map((t) => (
              <button
                key={t.id}
                className={"theme-chip" + (theme === t.id ? " active" : "")}
                onClick={() => setTheme(t.id)}
              >
                {t.label}
              </button>
            ))}
          </div>

          {/* Mobile burger */}
          <button
            className="mobile-only"
            onClick={() => setOpen((v) => !v)}
            style={{
              display: "none",
              border: "1px solid var(--ink)",
              background: "transparent",
              color: "var(--ink)",
              padding: "10px 14px",
              borderRadius: 999,
              fontFamily: "JetBrains Mono, monospace",
              fontSize: 11,
              letterSpacing: "0.1em",
              textTransform: "uppercase",
              cursor: "pointer",
            }}
          >
            {open ? "Close" : "Menu"}
          </button>
        </div>
      </nav>

      {/* Mobile overlay */}
      <div className={"mobile-menu" + (open ? " open" : "")}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <span className="display" style={{ fontSize: 28 }}>menu</span>
          <button
            onClick={() => setOpen(false)}
            style={{
              border: "1px solid var(--ink)",
              background: "transparent",
              color: "var(--ink)",
              padding: "10px 14px",
              borderRadius: 999,
              fontFamily: "JetBrains Mono, monospace",
              fontSize: 11,
              letterSpacing: "0.1em",
              textTransform: "uppercase",
              cursor: "pointer",
            }}
          >
            Close
          </button>
        </div>
        <div style={{ height: 32 }} />
        <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
          {links.map((l) => (
            <a
              key={l.id}
              href={"#" + l.id}
              onClick={() => setOpen(false)}
              className="display"
              style={{ fontSize: 56, textDecoration: "none", color: "var(--ink)" }}
            >
              {l.label}
              <span style={{ color: "var(--moss)", fontStyle: "italic" }}>.</span>
            </a>
          ))}
        </div>
        <div style={{ marginTop: "auto" }}>
          <div className="label" style={{ marginBottom: 12 }}>// Theme</div>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            {themes.map((t) => (
              <button
                key={t.id}
                className={"theme-chip" + (theme === t.id ? " active" : "")}
                onClick={() => setTheme(t.id)}
              >
                {t.label}
              </button>
            ))}
          </div>
        </div>
      </div>
    </React.Fragment>
  );
};

window.Nav = Nav;