// Top navigation bar — transparent over the dark hero; solid white once scrolled.
// Exports: Header

function Header() {
  const items = ['Inicio', 'Soluciones', 'Sectores', 'Beneficios', 'Productos', 'Contacto'];
  const [active, setActive] = React.useState('Inicio');
  const [scrolled, setScrolled] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 80);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Two skins:
  //  - over-hero (scrolled = false): transparent, white text, aqua-ghost CTA
  //  - solid     (scrolled = true) : white bg, navy text, gradient CTA
  const onDark = !scrolled;

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0,
      zIndex: 50,
      padding: '14px 0',
      background: onDark ? 'transparent' : 'rgba(255,255,255,0.92)',
      backdropFilter: onDark ? 'none' : 'saturate(180%) blur(12px)',
      borderBottom: onDark ? '1px solid transparent' : '1px solid var(--border-soft)',
      boxShadow: onDark ? 'none' : '0 2px 14px rgba(25,22,168,0.04)',
      transition: 'background 220ms var(--ease-out), border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out)',
    }}>
      <div className="container" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32, height: 56,
      }}>
        <a href="#" aria-label="DISPROQUILIM — Inicio">
          <img
            src={onDark ? 'assets/logo-principal-blanco.png' : 'assets/logo-principal.png'}
            alt="DISPROQUILIM"
            style={{ height: 40, width: 'auto', display: 'block' }}
          />
        </a>

        <nav style={{ display: 'flex', alignItems: 'center', gap: 32 }}>
          {items.map(item => {
            const isActive = active === item;
            const idleColor = onDark ? 'rgba(255,255,255,0.78)' : 'var(--fg2)';
            const activeColor = onDark ? '#FFFFFF' : 'var(--fg1)';
            return (
              <button
                key={item}
                onClick={() => setActive(item)}
                style={{
                  position: 'relative',
                  fontSize: 14.5,
                  fontWeight: 500,
                  color: isActive ? activeColor : idleColor,
                  padding: '6px 0',
                  transition: 'color 150ms',
                }}
                onMouseEnter={(e) => e.currentTarget.style.color = activeColor}
                onMouseLeave={(e) => e.currentTarget.style.color = isActive ? activeColor : idleColor}
              >
                {item}
                {isActive && (
                  <div style={{
                    position: 'absolute', bottom: -10, left: '50%', transform: 'translateX(-50%)',
                    width: 5, height: 5, borderRadius: 999, background: 'var(--accent)',
                  }} />
                )}
              </button>
            );
          })}
        </nav>

        {onDark ? (
          <button className="btn btn--ghost-aqua" style={{ padding: '12px 20px', fontSize: 14.5, color: '#fff', borderColor: 'var(--accent)' }}>
            <Icon name="phone" size={16} />
            Solicitar asesoría
          </button>
        ) : (
          <button className="btn btn--primary" style={{ padding: '12px 20px', fontSize: 14.5 }}>
            <Icon name="messageCircle" size={16} />
            Solicitar asesoría
          </button>
        )}
      </div>
    </header>
  );
}

window.Header = Header;