// Top navigation
function Header() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <header style={{
      position: 'sticky', top: 42, zIndex: 50,
      backdropFilter: 'blur(20px) saturate(180%)',
      WebkitBackdropFilter: 'blur(20px) saturate(180%)',
      background: scrolled ? 'rgba(241, 236, 255, .82)' : 'rgba(241, 236, 255, .55)',
      borderBottom: scrolled ? '1px solid var(--pl-border)' : '1px solid transparent',
      transition: 'background .2s, border-color .2s',
    }}>
      <div className="pl-container" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        height: 68,
      }}>
        <a href="#" style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
          <img src="/img/logo-pillaleads.png" alt="PillaLeads" style={{ width: 36, height: 36, objectFit: 'contain' }} />
          <span style={{ fontFamily: 'var(--pl-font-display)', fontWeight: 700, fontSize: 18, letterSpacing: '-0.01em' }}>PillaLeads</span>
        </a>
        <nav style={{ display: 'flex', alignItems: 'center', gap: 30 }}>
          <a href="#como-funciona" style={navLink}>Cómo funciona</a>
          <a href="#prueba" style={navLink}>Casos</a>
          <a href="#roi" style={navLink}>Calculadora ROI</a>
          <a href="#planes" style={navLink}>Planes</a>
          <a href="#faq" style={navLink}>FAQ</a>
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <a href="https://pillaleads.localbrain.app/login" className="pl-btn pl-btn-ghost pl-btn-sm" style={{ padding: '8px 14px' }}>Entrar</a>
          <a href="#planes" className="pl-btn pl-btn-primary pl-btn-sm">Empezar →</a>
        </div>
      </div>
    </header>
  );
}
const navLink = {
  fontSize: 14.5, fontWeight: 600, color: 'var(--pl-ink-2)',
  padding: '6px 0', position: 'relative',
};
window.Header = Header;