function Nav() {
  const { colors, mono, caps, links } = window.GFX_TOKENS;
  const { GAMES } = window.GFX_CONTENT;

  // Per-menu open state — keyed by menu name so multiple dropdowns coexist.
  const [openMenu, setOpenMenu] = React.useState(null);
  const closeTimer = React.useRef(null);
  const path = window.location.pathname.replace(/\/$/, '') || '/';

  // Path-based active highlight. .includes() tolerates a serving prefix
  // (design preview) as well as the real production paths.
  const active = (() => {
    if (path.includes('/plugins')) return 'plugins';
    if (path.includes('/games'))   return 'games';
    if (path.includes('/contact')) return 'contact';
    return 'home';
  })();

  // Hover-open: clear any pending close, open on enter, close-with-delay on
  // leave so the cursor can travel from trigger to panel without a flicker.
  const hover = (name, v) => {
    clearTimeout(closeTimer.current);
    if (v) setOpenMenu(name);
    else closeTimer.current = setTimeout(() => setOpenMenu(null), 120);
  };

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') setOpenMenu(null); };
    document.addEventListener('keydown', onKey);
    return () => { document.removeEventListener('keydown', onKey); clearTimeout(closeTimer.current); };
  }, []);

  const linkStyle = (k) => ({
    ...caps, fontSize: 11,
    color: k === active ? colors.ember : colors.dim,
    textDecoration: 'none', paddingBottom: 4,
    borderBottom: k === active ? `1px solid ${colors.ember}` : '1px solid transparent',
    display: 'inline-flex', alignItems: 'center', gap: 6,
  });

  // === Dropdown trigger + panel container ==================================
  // Wraps a top-level link in a hover region with the floating popover panel.
  const Dropdown = ({ name, href, label, kActive, children }) => {
    const open = openMenu === name;
    return (
      <div
        onMouseEnter={() => hover(name, true)}
        onMouseLeave={() => hover(name, false)}
        style={{ position: 'relative' }}
      >
        <a
          href={href}
          style={linkStyle(kActive)}
          aria-haspopup="true"
          aria-expanded={open}
          onFocus={() => hover(name, true)}
        >
          {label}
          <svg width="8" height="6" viewBox="0 0 8 6" style={{ opacity: 0.7 }}>
            <path d="M0 0 L4 6 L8 0" fill="none" stroke="currentColor" strokeWidth="1.5" />
          </svg>
        </a>
        <div style={{
          position: 'absolute', top: '100%', left: -16, marginTop: 12,
          minWidth: 320, background: 'rgba(14,12,10,0.96)',
          backdropFilter: 'blur(14px)',
          border: `1px solid ${colors.lineSoft}`,
          boxShadow: '0 24px 48px rgba(0,0,0,0.5)',
          padding: 10,
          opacity: open ? 1 : 0,
          pointerEvents: open ? 'auto' : 'none',
          transform: open ? 'translateY(0)' : 'translateY(-6px)',
          transition: 'opacity .14s ease, transform .14s ease',
        }}>{children}</div>
      </div>
    );
  };

  // === Menu-item row =======================================================
  // Used in both dropdowns. `icon` is a small left affordance (logo tile or
  // status-dot), `meta` is the small right-aligned label (e.g. "v1.0", "TBA").
  const MenuItem = ({ href, icon, title, sub, meta }) => (
    <a href={href} style={{
      display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 14,
      padding: '12px 14px', textDecoration: 'none', alignItems: 'center',
      borderLeft: `2px solid ${colors.ember}`,
      transition: 'background .15s',
    }}
    onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(255,122,53,0.06)'; }}
    onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}
    >
      {icon}
      <span>
        <div style={{ ...caps, fontSize: 12, color: colors.text }}>{title}</div>
        <div style={{ ...mono, fontSize: 10, marginTop: 4, color: colors.dim, letterSpacing: '0.06em' }}>
          {sub}
        </div>
      </span>
      <span style={{ ...mono, fontSize: 10, color: colors.ember, whiteSpace: 'nowrap' }}>{meta}</span>
    </a>
  );

  // === Plugin tile icon (gradient "GV" chip) ===============================
  const pluginIcon = (
    <span style={{
      width: 36, height: 36,
      background: `linear-gradient(135deg, ${colors.ember}, ${colors.ember2})`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: colors.ink, fontWeight: 700, fontSize: 14,
      fontFamily: "'JetBrains Mono', monospace",
    }}>GV</span>
  );

  // === Game tile icon (status dot) =========================================
  const gameIcon = (
    <span style={{
      width: 36, height: 36,
      border: `1px solid ${colors.lineSoft}`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: 'rgba(0,0,0,0.4)',
    }}>
      <span style={{
        width: 8, height: 8, background: colors.ember, borderRadius: '50%',
        boxShadow: `0 0 12px ${colors.ember}`,
      }} />
    </span>
  );

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 5,
      background: 'rgba(10,9,8,0.78)', backdropFilter: 'blur(12px)',
      borderBottom: `1px solid ${colors.lineSoft}`,
    }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto', padding: '16px 32px',
        display: 'flex', alignItems: 'center', gap: 32,
      }}>
        <a href="./" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <img src="assets/favicon.png" alt="" width={28} height={28} />
          <div style={{ ...caps, fontSize: 13, color: colors.text }}>
            Grimfox<span style={{ color: colors.dim, marginLeft: 6 }}>Games</span>
          </div>
        </a>

        <nav style={{ display: 'flex', gap: 24, marginLeft: 40, position: 'relative', alignItems: 'center' }}>
          <a href="./" style={linkStyle('home')}>Home</a>

          {/* Plugins dropdown */}
          <Dropdown name="plugins" href="plugins/grimvehicle/" label="Plugins" kActive="plugins">
            <MenuItem
              href="plugins/grimvehicle/"
              icon={pluginIcon}
              title="GrimVehicle"
              sub="Vehicle simulation framework"
              meta="v1.0"
            />
            <div style={{
              padding: '10px 14px', marginTop: 4,
              borderTop: `1px solid ${colors.lineSoft}`,
              ...mono, fontSize: 9, color: colors.dim,
            }}>// More plugins in development</div>
          </Dropdown>

          {/* Games dropdown — populated from GFX_CONTENT.GAMES */}
          <Dropdown name="games" href="games/" label="Games" kActive="games">
            {GAMES.map((g) => (
              <MenuItem
                key={g.slug}
                href={`games/${g.slug}/`}
                icon={gameIcon}
                title={g.title}
                sub={g.status}
                meta={g.year === '—' ? 'TBA' : g.year}
              />
            ))}
            <div style={{
              padding: '10px 14px', marginTop: 4,
              borderTop: `1px solid ${colors.lineSoft}`,
              ...mono, fontSize: 9, color: colors.dim,
            }}>
              <a href="games/" style={{ color: colors.dim, textDecoration: 'none' }}>
                // See all titles →
              </a>
            </div>
          </Dropdown>

          <a href="contact/" style={linkStyle('contact')}>Contact</a>
        </nav>

        <div style={{ marginLeft: 'auto', display: 'flex', gap: 14, alignItems: 'center' }}>
          <a href={links.discord} target="_blank" rel="noreferrer"
             style={{ ...mono, fontSize: 10, color: colors.dim, textDecoration: 'none' }}>
            DISCORD ↗
          </a>
        </div>
      </div>
    </header>
  );
}

window.GFX_COMPONENTS = window.GFX_COMPONENTS || {};
window.GFX_COMPONENTS.Nav = Nav;