// Nav.jsx — top nav with route-aware active state + drawer trigger.
const { useState, useEffect } = React;

function Nav({ route, onNavigate, onOpenDrawer }) {
  const [scrolled, setScrolled] = useState(false);

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

  const go = (path) => (e) => {
    e.preventDefault();
    onNavigate(path);
  };

  const isActive = (path) => {
    if (path === "/") return route === "/";
    return route.startsWith(path);
  };

  return (
    <nav className={"nav " + (scrolled ? "scrolled" : "")}>
      <Logo onClick={go("/")} />

      <div className="nav-links hide-mobile">
        <a href="#/" onClick={go("/")} className={isActive("/") && route === "/" ? "active" : ""}>Index</a>
        <a href="#/platform/aviation" onClick={go("/platform/aviation")} className={isActive("/platform") ? "active" : ""}>Platform</a>
        <a href="#/capabilities" onClick={go("/capabilities")} className={isActive("/capabilities") ? "active" : ""}>Capabilities</a>
        <a href="#/about" onClick={go("/about")} className={isActive("/about") ? "active" : ""}>Company</a>
        <a href="#/contact" onClick={go("/contact")} className={isActive("/contact") ? "active" : ""}>Contact</a>
      </div>

      <div className="nav-right">
        <span className="eyebrow mute hide-mobile" style={{ display: "inline-flex", alignItems: "center" }}>
          <span className="dot" style={{ background: "#3FB46E" }}></span>
          ONLINE · RENO NV
        </span>
        <button
          onClick={onOpenDrawer}
          aria-label="Open menu"
          style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: ".14em",
            textTransform: "uppercase", color: "var(--paper)",
            padding: "10px 14px",
            border: "1px solid rgba(255,255,255,.25)",
          }}
        >
          Menu
          <span style={{ display: "inline-flex", flexDirection: "column", gap: 3 }}>
            <span style={{ width: 14, height: 1, background: "currentColor" }}></span>
            <span style={{ width: 14, height: 1, background: "currentColor" }}></span>
          </span>
        </button>
      </div>
    </nav>
  );
}

window.Nav = Nav;