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

const PLATFORM_ITEMS = [
  { label: "Aviation Status", desc: "Fielded readiness dashboard", path: "/platform/aviation" },
  { label: "AviationMax",     desc: "Federated enterprise platform", path: "/platform/aviationmax" },
  { label: "AI at the Edge",  desc: "On-device inference & ARMS self-assessment", path: "/platform/ai-edge" },
];

function Nav({ route, onNavigate, onOpenDrawer }) {
  const [scrolled, setScrolled] = useState(false);
  const [platformOpen, setPlatformOpen] = useState(false);
  const closeTimer = useRef(null);

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

  // close dropdown on route change
  useEffect(() => { setPlatformOpen(false); }, [route]);

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

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

  const openMenu = () => { clearTimeout(closeTimer.current); setPlatformOpen(true); };
  const closeMenuSoon = () => { closeTimer.current = setTimeout(() => setPlatformOpen(false), 140); };

  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>

        {/* Platform dropdown */}
        <div
          className="nav-dd"
          onMouseEnter={openMenu}
          onMouseLeave={closeMenuSoon}
        >
          <a
            href="#/platform/aviation"
            onClick={(e) => { e.preventDefault(); setPlatformOpen((v) => !v); }}
            className={isActive("/platform") ? "active" : ""}
            aria-haspopup="true"
            aria-expanded={platformOpen}
            style={{ display: "inline-flex", alignItems: "center", gap: 6 }}
          >
            Platform
            <span className="nav-dd-caret" style={{ transform: platformOpen ? "rotate(180deg)" : "none" }}>▾</span>
          </a>

          <div className={"nav-dd-panel " + (platformOpen ? "open" : "")} role="menu">
            {PLATFORM_ITEMS.map((it) => (
              <a
                key={it.path}
                href={"#" + it.path}
                onClick={go(it.path)}
                role="menuitem"
                className={"nav-dd-item " + (route.startsWith(it.path) ? "current" : "")}
              >
                <span className="nav-dd-label">{it.label}</span>
                <span className="nav-dd-desc">{it.desc}</span>
              </a>
            ))}
          </div>
        </div>

        <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: 12, letterSpacing: ".14em",
            textTransform: "uppercase", color: "var(--paper)",
            padding: "12px 16px",
            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>

      <style>{`
        .nav-dd { position: relative; }
        .nav-dd-caret { font-size: 9px; opacity: .7; transition: transform .2s ease; }
        .nav-dd-panel {
          position: absolute;
          top: calc(100% + 14px);
          left: -16px;
          min-width: 300px;
          background: rgba(8,7,5,.94);
          -webkit-backdrop-filter: blur(16px) saturate(140%);
          backdrop-filter: blur(16px) saturate(140%);
          border: 1px solid var(--line-2);
          box-shadow: 0 24px 60px rgba(0,0,0,.5);
          padding: 8px;
          display: flex; flex-direction: column;
          opacity: 0; visibility: hidden;
          transform: translateY(-6px);
          transition: opacity .16s ease, transform .16s ease, visibility .16s;
          z-index: 120;
        }
        .nav-dd-panel.open { opacity: 1; visibility: visible; transform: translateY(0); }
        /* invisible hover bridge so the gap doesn't close the menu */
        .nav-dd-panel::before { content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: 16px; }
        .nav-dd-item {
          display: flex; flex-direction: column; gap: 3px;
          padding: 12px 14px;
          border-left: 1px solid transparent;
          opacity: 1;
          transition: background .15s ease, border-color .15s ease, padding-left .15s ease;
        }
        .nav-dd-item:hover { background: rgba(200,164,92,.07); border-left-color: var(--accent); padding-left: 18px; }
        .nav-dd-item.current { border-left-color: var(--accent); }
        .nav-dd-label {
          font-family: var(--f-display);
          font-weight: 600;
          letter-spacing: -0.01em;
          font-size: 16px;
          text-transform: none;
          color: var(--paper);
        }
        .nav-dd-item.current .nav-dd-label { color: var(--accent); }
        .nav-dd-desc {
          font-family: var(--f-mono);
          font-size: 10.5px;
          letter-spacing: .04em;
          text-transform: none;
          color: var(--mute-2);
        }
      `}</style>
    </nav>
  );
}

window.Nav = Nav;