// Navegación sticky con blur ligero, fondo blanco
const Nav = ({ current = 'home' }) => {
  const items = [
    { key: 'producto',     label: 'Producto',         href: 'producto.html' },
    { key: 'arquitectura', label: 'Arquitectura',     href: 'arquitectura.html' },
    { key: 'ias',          label: 'IAs propietarias', href: 'ias-propietarias.html' },
    { key: 'transferencia',label: 'Transferencia',    href: 'transferencia.html' },
    { key: 'seguridad',    label: 'Seguridad',        href: 'seguridad.html' },
    { key: 'industrias',   label: 'Industrias',       href: 'industrias.html' },
  ];
  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 (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 40,
      background: scrolled ? 'rgba(255,255,255,0.88)' : '#FFFFFF',
      backdropFilter: scrolled ? 'blur(14px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(14px)' : 'none',
      borderBottom: scrolled ? '1px solid #E4EBF3' : '1px solid transparent',
      transition: 'all 220ms cubic-bezier(0.2,0.7,0.2,1)',
    }}>
      <Container>
        <div style={{ display: 'flex', alignItems: 'center', height: 68, gap: 40 }}>
          <a href="index.html" style={{ display: 'inline-flex', alignItems: 'center' }}>
            <img src="assets/logo-omnix.png" alt="OMNIX" style={{ height: 24 }} />
          </a>
          <ul style={{ listStyle: 'none', display: 'flex', gap: 28, margin: 0, padding: 0, marginLeft: 24 }}>
            {items.map((it) => (
              <li key={it.key}>
                <a href={it.href} style={{
                  fontFamily: 'var(--font-body)', fontSize: 14, color: '#1E1F26',
                  textDecoration: 'none', fontWeight: 500, letterSpacing: '-0.005em',
                  paddingBottom: 4,
                  borderBottom: current === it.key ? '1.5px solid #F4024C' : '1.5px solid transparent',
                  transition: 'border-color 160ms',
                }}>{it.label}</a>
              </li>
            ))}
          </ul>
          <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 16 }}>
            <a href="#" style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#52557A', textDecoration: 'none' }}>
              ES · EN
            </a>
            <Button variant="primary" icon="arrow-right" href="diagnostico.html">Solicitar diagnóstico</Button>
          </div>
        </div>
      </Container>
    </nav>
  );
};

Object.assign(window, { Nav });