// NavV4.jsx — fixed, light chrome. 3 pages.
function NavV4({ page, setPage }) {
  const links = [
    { id: 'home', label: 'Home' },
    { id: 'portfolio', label: 'Portfolio' },
    { id: 'team', label: 'Team' },
    { id: 'contact', label: 'Contact' },
  ];
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  const go = (id) => (e) => { if (e) e.preventDefault(); setPage(id); setMenuOpen(false); };

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

  React.useEffect(() => {
    if (!menuOpen) return;
    const b = document.body, y = window.scrollY;
    const prev = { pos: b.style.position, top: b.style.top, w: b.style.width, ov: b.style.overflow };
    b.style.position = 'fixed'; b.style.top = `-${y}px`; b.style.width = '100%'; b.style.overflow = 'hidden';
    const onKey = (e) => { if (e.key === 'Escape') setMenuOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => {
      b.style.position = prev.pos; b.style.top = prev.top; b.style.width = prev.w; b.style.overflow = prev.ov;
      window.scrollTo(0, y);
      window.removeEventListener('keydown', onKey);
    };
  }, [menuOpen]);

  return (
    <nav className="nav" data-scrolled={scrolled ? 'true' : 'false'}>
      <a href="#" className="brand" onClick={go('home')} aria-label="AXV — Aero X Ventures, home">
        <img className="brand-logo" src={window.R('assets/logos/axv-wordmark.png')} alt="Aero X Ventures" />
      </a>

      <div className="nav-links">
        {links.map(l => (
          <button key={l.id} onClick={go(l.id)} data-active={page === l.id}>{l.label}</button>
        ))}
      </div>

      <div className="nav-right">
        <a href="#" className="cta-link nav-cta" onClick={go('contact')}>
          Get in touch <span className="arr">→</span>
        </a>
        <button
          className="nav-burger"
          aria-label={menuOpen ? 'Close menu' : 'Open menu'}
          aria-expanded={menuOpen}
          data-open={menuOpen}
          onClick={() => setMenuOpen(o => !o)}>
          <span /><span /><span />
        </button>
      </div>

      <div className="nav-sheet" data-open={menuOpen} aria-hidden={!menuOpen}>
        <div className="nav-sheet-links">
          {links.map((l, i) => (
            <button key={l.id} onClick={go(l.id)} data-active={page === l.id}>
              <span className="n">{String(i + 1).padStart(2, '0')}</span>
              <span className="l">{l.label}</span>
            </button>
          ))}
        </div>
        <div className="nav-sheet-foot">
          Aero X Ventures · Deep Tech Venture Capital
        </div>
      </div>
    </nav>
  );
}
window.NavV4 = NavV4;