// Top navigation bar — sticky, minimal, editorial

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

  const links = [
    { label: 'Producto', href: '#producto' },
    { label: 'Cómo funciona', href: '#flujo' },
    { label: 'IA Clínica', href: '#ia' },
    { label: 'Resultados', href: '#impacto' },
    { label: 'Precios', href: '#precios' },
  ];

  return (
    <header style={{
      position:'sticky', top:0, zIndex:50,
      background: scrolled ? 'rgba(250,250,247,0.85)' : 'transparent',
      backdropFilter: scrolled ? 'blur(12px) saturate(120%)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line-2)' : '1px solid transparent',
      transition:'all .25s ease',
    }}>
      <div className="container" style={{
        display:'flex', alignItems:'center', justifyContent:'space-between',
        height: 68
      }}>
        <a href="#" style={{ display:'flex', alignItems:'center', gap:10 }}>
          <Logo/>
          <span className="serif" style={{ fontSize:22, fontWeight:500, letterSpacing:'-0.02em' }}>DrVet.app</span>
        </a>
        <nav style={{ display:'flex', alignItems:'center', gap:28 }} className="nav-links">
          {links.map(l => (
            <a key={l.href} href={l.href} style={{
              fontSize:14, color:'var(--ink-2)', fontWeight:450,
            }}>{l.label}</a>
          ))}
        </nav>
        <div style={{ display:'flex', alignItems:'center', gap:10 }}>
          <Btn kind="ghost" size="sm">Iniciar sesión</Btn>
          <Btn kind="primary" size="sm">Solicitar demo {Ico.arrow()}</Btn>
        </div>
      </div>
      <style>{`
        @media (max-width: 920px){
          .nav-links { display: none !important; }
        }
      `}</style>
    </header>
  );
};

// DrVet.app mark — simple geometric: stethoscope ring + paw dot
const Logo = () => (
  <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
    <circle cx="14" cy="14" r="13" stroke="var(--primary)" strokeWidth="1.5"/>
    <circle cx="14" cy="14" r="6" stroke="var(--primary)" strokeWidth="1.5"/>
    <circle cx="14" cy="14" r="2" fill="var(--accent)"/>
  </svg>
);

window.Nav = Nav;
window.Logo = Logo;