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

  return (
    <nav className="nav" style={{ borderColor: scrolled ? 'var(--line-2)' : 'var(--line)' }}>
      <div className="nav-inner">
        <a href="#top" className="nav-logo">
          <Logo size={32} />
          <span>TecnoEducando</span>
        </a>
        <div className="nav-links">
          <a href="#servicios">Servicios</a>
          <a href="#proceso">Proceso</a>
          <a href="#stack">Stack</a>
          <a href="#proyectos">Proyectos</a>
          <a href="#capacitaciones">Capacitaciones</a>
          <a href="#contacto">Contacto</a>
        </div>
        <div className="nav-cta">
          <span className="badge" style={{display: window.innerWidth > 720 ? 'inline-flex' : 'none'}}>
            <span style={{width:6, height:6, borderRadius:'50%', background:'#22D3EE', boxShadow:'0 0 8px #22D3EE'}}/>
            Aceptando proyectos 2026
          </span>
          <a href="#contacto" className="btn btn-primary" style={{ padding: '10px 18px', fontSize: 13 }}>
            Cotizar sistema
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
              <path d="M5 12h14M13 6l6 6-6 6"/>
            </svg>
          </a>
        </div>
      </div>
    </nav>
  );
}
window.Nav = Nav;
