const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

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

  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  const path = typeof window !== 'undefined' ? window.location.pathname : '';
  const onPage = (file) => path.endsWith(`/${file}`) || path.endsWith(file);

  const links = [
    { label: 'Platform',  href: 'platform.html',  active: onPage('platform.html') },
    { label: 'Use Cases', href: 'use-cases.html', active: onPage('use-cases.html') },
    { label: 'Research',  href: 'research.html',  active: onPage('research.html') },
    { label: 'Labs',      href: 'labs.html',      active: onPage('labs.html') },
    { label: 'Company',   href: 'company.html',   active: onPage('company.html') },
    { label: 'Contact',   href: 'demo.html', active: onPage('demo.html') },
  ];

  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`} data-screen-label="Nav">
      <a href="index.html" className="nav-logo">
        <img src="assets/model os Logo.png" alt="ModelOS" className="nav-logo-img" />
      </a>
      <div className="nav-end">
        <button
          type="button"
          className={`nav-toggle ${menuOpen ? 'open' : ''}`}
          aria-label={menuOpen ? 'Close menu' : 'Open menu'}
          aria-expanded={menuOpen}
          onClick={() => setMenuOpen((o) => !o)}
        >
          <span /><span /><span />
        </button>
        <div className={`nav-links ${menuOpen ? 'open' : ''}`}>
          {links.map(({ label, href, active }) => (
            <a key={label} href={href} className={active ? 'active' : ''} onClick={() => setMenuOpen(false)}>{label}</a>
          ))}
        </div>
        <a href="demo.html" className="nav-cta">Request Access →</a>
      </div>
    </nav>
  );
};

window.Nav = Nav;