// Nav — sticky top, subtle backdrop, anchor links
const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);

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

  return (
    <header className={`nav ${scrolled ? 'nav--scrolled' : ''}`}>
      <div className="nav__inner">
        <a href="#top" className="nav__logo" aria-label="lo programamos — inicio">
          <span className="nav__logo-bracket">{'{'}</span>
          <span className="nav__logo-text">lo&nbsp;programamos</span>
          <span className="nav__logo-bracket">{'}'}</span>
          <span className="nav__logo-caret">_</span>
        </a>
        <nav className="nav__links" aria-label="principal">
          <a href="#servicios">Servicios</a>
          <a href="#proceso">Proceso</a>
          <a href="#portfolio">Portfolio</a>
          <a href="#stack">Stack</a>
          <a href="#contacto">Contacto</a>
        </nav>
        <a href="mailto:contacto@loprogramamos.com" className="nav__cta">
          <span className="nav__cta-dot" />
          contacto@loprogramamos.com
        </a>
      </div>
    </header>
  );
};

window.Nav = Nav;