// Top navigation. Transparent over the hero (CTA + burger only),
// cream once scrolled past the hero (brand reveals).
// The burger opens a full-screen cream overlay with menu items in display type.
function Nav({ route, setRoute, transparentOverHero = true }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [panelDark, setPanelDark] = React.useState(true);   // home: hero (panel 1) is dark

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

  // On the home route the scroll is hijacked (scrollY stays 0), so the nav tone
  // follows the ACTIVE panel instead: cream wordmark + controls over dark/image
  // panels, forest over light (cream) panels — keeping the wordmark legible and
  // letting the image dominate, with no opaque bar.
  React.useEffect(() => {
    const isDark = (panel) => {
      if (!panel) return true;
      if (panel.querySelector(".hero, .why-table, .bleed, .section--forest, .footer")) return true;
      if (panel.querySelector(".section--cream, .section--warm")) return false;
      const el = panel.firstElementChild || panel;
      const bg = getComputedStyle(el).backgroundColor;
      const m = bg.match(/\d+/g);
      if (m) { const [r, g, b] = m.map(Number); return (0.299 * r + 0.587 * g + 0.114 * b) < 140; }
      return true;
    };
    const onHijack = (e) => {
      const idx = (e.detail && e.detail.index) || 0;
      const panel = document.querySelectorAll(".hijack__panel")[idx];
      setPanelDark(isDark(panel));
    };
    window.addEventListener("hijack:change", onHijack);
    return () => window.removeEventListener("hijack:change", onHijack);
  }, []);

  // Lock body scroll while the overlay is open.
  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);

  // Close-on-Escape.
  React.useEffect(() => {
    if (!menuOpen) return;
    const on = (e) => { if (e.key === "Escape") setMenuOpen(false); };
    window.addEventListener("keydown", on);
    return () => window.removeEventListener("keydown", on);
  }, [menuOpen]);

  // Tone: open menu → cream (forest × over the cream overlay); interior pages →
  // cream from the top; home → adapt to the active panel's surface.
  let tone;
  if (menuOpen) tone = "nav--cream";
  else if (!transparentOverHero) tone = "nav--cream";
  else tone = panelDark ? "nav--on-dark" : "nav--on-light";

  const go = (key) => () => {
    setMenuOpen(false);
    setRoute(key);
    window.scrollTo(0, 0);
  };

  const items = [
    ["home",    "Home"],
    ["whatis",  "What is Nourrir"],
    ["menu",    "Menu"],
    ["how",     "How It Works"],
    ["about",   "Our Story", "our-story.html"],
    ["contact", "Contact"],
  ];

  return (
    <>
      <nav className={`nav ${tone} ${menuOpen ? "nav--menu-open" : ""}`}>
        <div className="nav__left">
          <button className={`burger ${menuOpen ? "burger--open" : ""}`}
                  onClick={() => setMenuOpen(v => !v)}
                  aria-label={menuOpen ? "Close menu" : "Open menu"}
                  aria-expanded={menuOpen}>
            <span/><span/><span/>
          </button>
          <a className="nav__login" href="/member">Member login</a>
        </div>
        <a className="nav__brand" href="#" onClick={(e)=>{e.preventDefault(); setRoute("home"); window.scrollTo(0,0);}}>nourrir.</a>
        <div className="nav__right">
          <a className="btn btn--forest" href="build.html">
            Join The Table <Icon name="arrow-right" size={14}/>
          </a>
        </div>
      </nav>

      <div className={`menu-overlay ${menuOpen ? "menu-overlay--open" : ""}`} aria-hidden={!menuOpen}>
        <ol className="menu-overlay__list">
          {items.map(([key, label, href], i) => (
            <li key={key} style={{transitionDelay: menuOpen ? `${160 + i * 80}ms` : "0ms"}}>
              <a href={href || "#"}
                 className={`menu-overlay__link ${route === key ? "menu-overlay__link--active" : ""}`}
                 onClick={href ? () => setMenuOpen(false) : (e)=>{e.preventDefault(); go(key)();}}>
                <span className="menu-overlay__num">{String(i+1).padStart(2,"0")}</span>
                <span className="menu-overlay__label">{label}</span>
              </a>
            </li>
          ))}
        </ol>
        <div className="menu-overlay__footer">
          <span>@nourrir.life</span>
          <span>nourrir.life</span>
          <span>Eat with intention.</span>
        </div>
      </div>
    </>
  );
}
window.Nav = Nav;