// Nav.jsx
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? 'nav--scrolled' : ''}`}>
      <a href="#top" className="nav__mark" data-cursor="view">
        <img src="/assets/logo-primary.png" alt="NUUN Creative" />
        <span>NUUN</span>
      </a>
      <div className="nav__links">
        <a href="#work" data-cursor="view">Work</a>
        <a href="#services" data-cursor="view">Services</a>
        <a href="#process" data-cursor="view">Process</a>
        <a href="#fit" data-cursor="view">Fit</a>
      </div>
      <a href="#contact" className="nav__cta" data-cursor="book">
        <span className="dot" />
        Book a call
      </a>
    </nav>
  );
}
window.Nav = Nav;