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

  const isTeam = typeof window !== 'undefined' && window.location.pathname.endsWith('team.html');

  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`} data-screen-label="Nav">
      <a href="index.html" className="nav-logo always-visible">
        <div className="nav-logo-mark" />
        <span>Model OS</span>
      </a>
      <div className="nav-links">
        <a href="index.html" className={!isTeam ? 'active' : ''}>Home</a>
        <a href="team.html" className={isTeam ? 'active' : ''}>Team</a>
        <a href="mailto:contact@modelos.technology" className="nav-cta always-visible">Talk to us →</a>
      </div>
    </nav>
  );
};

window.Nav = Nav;