// Top navigation
const { useState, useEffect } = React;

function Logo() {
  return (
    <a href="#top" style={{ display: 'flex', alignItems: 'center' }} aria-label="Inversimply">
      <img src="assets/logo-inversimply.webp" alt="Inversimply" style={{ height: 30, width: 'auto', display: 'block' }} />
    </a>
  );
}

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);

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

  const links = [
    { href: '#servicio', label: 'Servicio' },
    { href: '#proceso', label: 'Cómo funciona' },
    { href: '#comparativa', label: 'Vs. tu banco' },
    { href: '#resultados', label: 'Resultados' },
    { href: 'test.html', label: 'Test gratis' },
    { href: '#faq', label: 'FAQs' },
  ];

  return (
    <header
      style={{
        position: 'sticky',
        top: 0,
        zIndex: 50,
        backdropFilter: 'saturate(180%) blur(14px)',
        WebkitBackdropFilter: 'saturate(180%) blur(14px)',
        background: scrolled ? 'rgba(255,255,255,0.82)' : 'rgba(255,255,255,0.6)',
        borderBottom: scrolled ? '1px solid var(--ink-150)' : '1px solid transparent',
        transition: 'background 0.2s ease, border-color 0.2s ease',
      }}
    >
      <div className="container-wide" style={{
        height: 'var(--header-height)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
      }}>
        <Logo />

        <nav style={{ display: 'flex', alignItems: 'center', gap: 4 }} className="nav-links">
          {links.map((l) => (
            <a key={l.href} href={l.href} style={{
              padding: '8px 14px',
              fontSize: 14.5,
              fontWeight: 450,
              color: 'var(--ink-700)',
              borderRadius: 'var(--radius-md)',
              transition: 'background 0.15s ease, color 0.15s ease',
            }}
              onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--ink-100)'; e.currentTarget.style.color = 'var(--ink-950)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--ink-700)'; }}
            >
              {l.label}
            </a>
          ))}
        </nav>

        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <a href="#reservar" className="btn btn-accent btn-sm">
            Reserva gratis
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
              <path d="M3 7h8m-3-3l3 3-3 3" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </a>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .nav-links { display: none !important; }
          .nav-login { display: none !important; }
        }
      `}</style>
    </header>
  );
}

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