// Nav
function 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 (
    <div className={`nav-wrap ${scrolled ? 'scrolled' : ''}`}>
      <div className="container">
        <div className="nav-inner">
          <div className="brand">
            <div className="brand-mark"><I.Logo size={16}/></div>
            <span>DentiaCloud</span>
            <span className="mono" style={{fontSize:11, color:'var(--mute-2)', marginLeft:6}}>v2.4</span>
          </div>
          <div className="nav-links">
            <a className="nav-link" href="#features">Producto</a>
            <a className="nav-link" href="#dashboard">Plataforma</a>
            <a className="nav-link" href="#pricing">Precios</a>
            <a className="nav-link" href="#faq">Recursos</a>
            <a className="nav-link" href="#testi">Clientes</a>
          </div>
          <div className="nav-cta">
            <a className="nav-link" href="#" style={{display:'inline-block'}}>Iniciar sesión</a>
            <a className="btn btn-primary" href="#cta">Solicitar demo <I.Arrow size={12}/></a>
          </div>
        </div>
      </div>
    </div>
  );
}
window.Nav = Nav;