// ADOS website — Header / floating pill navigation (scroll-spy) + menú móvil
function Header({ active, onNavigate }) {
  const links = [
    { id: 'inicio', label: 'Inicio' },
    { id: 'servicios', label: 'Servicios' },
    { id: 'proyectos', label: 'Proyectos' },
    { id: 'nosotros', label: 'Nosotros' },
    { id: 'contacto', label: 'Contacto' },
  ];
  // Translucent backdrop appears once the page starts scrolling.
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  // El menú móvil bloquea el scroll del body mientras está abierto.
  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  const go = (id) => { setMenuOpen(false); onNavigate(id); };

  return (
    <React.Fragment>
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      background: scrolled ? 'rgba(26,33,41,0.72)' : 'transparent',
      backdropFilter: scrolled ? 'blur(14px) saturate(140%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(14px) saturate(140%)' : 'none',
      borderBottom: `1px solid ${scrolled ? 'var(--border)' : 'transparent'}`,
      transition: 'background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), backdrop-filter var(--dur-base)',
    }}>
      <div style={{
        maxWidth: 'var(--container-wide)', margin: '0 auto',
        padding: scrolled ? '12px var(--pad-x)' : '20px var(--pad-x)',
        display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', gap: 16,
        transition: 'padding var(--dur-base) var(--ease-standard)',
      }}>
        {/* logo — cube mark only; gira 120° al pasar el mouse (guiño isométrico) */}
        <a href="#inicio" onClick={(e) => { e.preventDefault(); go('inicio'); }}
          className="w-logo-cube"
          style={{ display: 'inline-flex', justifySelf: 'start', gridColumn: 1 }} aria-label="ADOS — inicio">
          <img src="./assets/logo/ados-cube-real.png" alt="ADOS" style={{ height: 44, filter: 'drop-shadow(0 2px 10px rgba(10,14,18,0.35))' }} />
        </a>

        {/* floating pill nav (escritorio) */}
        <nav className="w-nav-desktop" style={{
          justifySelf: 'center', gridColumn: 2, display: 'flex', alignItems: 'center', gap: 2,
          background: 'var(--ados-white)', borderRadius: 'var(--radius-pill)',
          padding: 6, border: '1px solid rgba(34,43,53,0.06)', boxShadow: '0 8px 28px rgba(10,14,18,0.22)',
        }}>
          {links.map((l) => {
            const isActive = active === l.id;
            return (
              <a key={l.id} href={`#${l.id}`} onClick={(e) => { e.preventDefault(); go(l.id); }}
                className="ados-navpill"
                aria-current={isActive ? 'true' : undefined}
                style={{
                  padding: '9px 20px', borderRadius: 'var(--radius-pill)',
                  fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14, letterSpacing: '-0.01em',
                  color: isActive ? 'var(--ados-white)' : 'var(--ados-ink)',
                  background: isActive ? 'var(--ados-navy-900)' : 'transparent',
                  transition: 'background var(--dur-fast), color var(--dur-fast)',
                }}>{l.label}</a>
            );
          })}
        </nav>

        {/* CTA pill (escritorio) + burger (móvil) */}
        {/* gridColumn 3 explícito: si el nav (col 2) está display:none, la
            colocación automática movería este bloque a la columna central */}
        <div style={{ justifySelf: 'end', gridColumn: 3, display: 'flex', alignItems: 'center', gap: 10 }}>
          <button type="button" onClick={() => go('contacto')}
            className="ados-cta-pill w-cta-desktop"
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              height: 48, padding: '0 24px', border: 'none', cursor: 'pointer',
              background: 'var(--accent)', color: 'var(--on-accent)',
              fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14, letterSpacing: '-0.01em',
              borderRadius: 'var(--radius-pill)', boxShadow: '0 8px 28px rgba(10,14,18,0.22)',
              transition: 'background var(--dur-fast)',
            }}>
            Solicitar consultoría
          </button>
          <button type="button" className="w-burger" aria-label={menuOpen ? 'Cerrar menú' : 'Abrir menú'}
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen((v) => !v)}
            style={{
              width: 48, height: 48, alignItems: 'center', justifyContent: 'center',
              background: 'var(--ados-white)', color: 'var(--ados-ink)', border: 'none', cursor: 'pointer',
              borderRadius: 'var(--radius-pill)', boxShadow: '0 8px 28px rgba(10,14,18,0.22)',
              position: 'relative', zIndex: 90,
            }}>
            {menuOpen ? (
              <svg width="18" height="18" viewBox="0 0 16 16" fill="none"><path d="M3 3l10 10M13 3L3 13" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
            ) : (
              <svg width="18" height="18" viewBox="0 0 16 16" fill="none"><path d="M2 4.5h12M2 8h12M2 11.5h12" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
            )}
          </button>
        </div>
      </div>
    </header>

    {/* menú móvil a pantalla completa */}
    <div className={`w-mobilemenu${menuOpen ? ' is-open' : ''}`} aria-hidden={!menuOpen}>
      <nav style={{ display: 'flex', flexDirection: 'column' }}>
        {links.map((l) => (
          <a key={l.id} href={`#${l.id}`} aria-current={active === l.id ? 'true' : undefined}
            onClick={(e) => { e.preventDefault(); go(l.id); }}>{l.label}</a>
        ))}
      </nav>
      <div style={{ marginTop: 28 }}>
        <button type="button" onClick={() => go('contacto')}
          className="ados-cta-pill"
          style={{
            display: 'inline-flex', alignItems: 'center', height: 52, padding: '0 28px',
            border: 'none', cursor: 'pointer', background: 'var(--accent)', color: 'var(--on-accent)',
            fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15,
            borderRadius: 'var(--radius-pill)',
          }}>
          Solicitar consultoría
        </button>
      </div>
    </div>
    </React.Fragment>
  );
}

window.Header = Header;