const SiteHeader = ({ t, lang, setLang }) => (
  <header className="site-header">
    <div className="container header-inner">
      <a className="brand" href="#top" aria-label="ALLIANCE">
        <img src="assets/logo-alliance-official.png" alt="ALLIANCE" className="brand-logo" />
      </a>
      <nav className="site-nav" aria-label="Main navigation">
        <a href="#units">{t.nav_units}</a>
        <a href="#compare">{t.nav_compare}</a>
        <a href="#info-requested">{t.nav_info_requested}</a>
        <a href="#process">{t.nav_process}</a>
        <a href="#form">{t.nav_form}</a>
        <a href="#contact">{t.nav_contact}</a>
      </nav>
      <div className="header-right">
        <div className="lang-switch" role="group" aria-label="Language selector">
          <button
            type="button"
            className={`lang-btn${lang === 'es' ? ' is-active' : ''}`}
            onClick={() => setLang('es')}
            aria-pressed={lang === 'es'}
            aria-label="Español"
          >ES</button>
          <span className="lang-sep" aria-hidden="true">|</span>
          <button
            type="button"
            className={`lang-btn${lang === 'en' ? ' is-active' : ''}`}
            onClick={() => setLang('en')}
            aria-pressed={lang === 'en'}
            aria-label="English"
          >EN</button>
        </div>
        <a href="#form" className="btn btn-primary btn-sm">
          {t.header_cta}
          <i data-lucide="arrow-right"></i>
        </a>
      </div>
    </div>
  </header>
);

window.SiteHeader = SiteHeader;