function Header({ active, onNav, onSearch, onJoin }) {
  const [open, setOpen] = React.useState(false);
  const items = window.NAV || [];

  return (
    <React.Fragment>
      <div className="utility-bar">
        <div className="inner">
          <span className="pill">LATAM</span>
          <a href="#" className="util-secondary" onClick={(e)=>{e.preventDefault(); alert('Directorio de Miembros — próximamente');}}>Directorio</a>
          <a href="#" className="util-secondary" onClick={(e)=>{e.preventDefault(); alert('HEAT.U LATAM — próximamente');}}>HEAT.U</a>
          <a href="#" className="util-secondary" onClick={(e)=>{e.preventDefault(); alert('Tarifas LATAM — próximamente');}}>Tarifas</a>
          <a href="https://hardinet.org/" target="_blank" rel="noreferrer" className="util-secondary">HARDI Global ↗</a>
          <span className="spacer" />
          <a href="mailto:hardilatam@hardinet.org" className="util-secondary">hardilatam@hardinet.org</a>
          <a href="#contacto" onClick={(e)=>{e.preventDefault(); onNav('contacto');}}>Contacto</a>
        </div>
      </div>
      <header className="site-header">
        <div className="inner">
          <a className="logo" href="#" onClick={(e)=>{e.preventDefault(); onNav('home');}}>
            <img src="assets/logo/hardi-latam-navy.svg" alt="HARDI LATAM" />
          </a>
          <nav className={open ? 'open' : ''}>
            {items.map(it => (
              <a key={it.key}
                 className={active === it.key ? 'active' : ''}
                 onClick={()=>{ setOpen(false); onNav(it.key); }}>
                {it.label}
              </a>
            ))}
          </nav>
          <div className="actions">
            <button className="btn btn-ghost icon-btn" aria-label="Buscar" onClick={onSearch}>
              <i data-lucide="search"></i>
            </button>
            <button className="btn btn-accent" onClick={onJoin}>
              Hazte Miembro
            </button>
            <button className="btn btn-ghost icon-btn menu-toggle" onClick={()=>setOpen(!open)} aria-label="Menú">
              <i data-lucide={open ? 'x' : 'menu'}></i>
            </button>
          </div>
        </div>
      </header>
    </React.Fragment>
  );
}
