const { Logo, Button } = window.CensoNosaraDesignSystem_f123a0;

/* Cabecera con selector de idioma.
 *
 * El SiteHeader del sistema de diseño trae un interruptor de dos idiomas:
 * un botón que muestra el idioma contrario. Con seis idiomas eso deja de
 * funcionar, obligaría a pasar cinco veces por idiomas que no le sirven a
 * nadie para llegar al suyo.
 *
 * Aquí va un <select> nativo. No es la opción más vistosa, es la que funciona:
 * el sistema operativo lo dibuja con su propio control, se abre bien en un
 * teléfono viejo, lo entiende un lector de pantalla sin ayuda y no necesita
 * una línea de JavaScript para desplegarse.
 */

window.CabeceraML = function CabeceraML({ items = [], active, lang, idiomas, onLang, onNavigate, cta, assetBase = '' }) {
  const [abierto, setAbierto] = React.useState(false);

  const enlaces = (
    <ul style={{ display: 'flex', gap: 'var(--space-6)', listStyle: 'none', margin: 0, padding: 0, flexWrap: 'wrap' }}>
      {items.map(it => {
        const on = active === it.id;
        return (
          <li key={it.id}>
            <a href={'#' + it.id}
              onClick={e => { e.preventDefault(); onNavigate(it.id); setAbierto(false); }}
              aria-current={on ? 'page' : undefined}
              style={{
                fontFamily: 'var(--font-display)', fontSize: 'var(--fs-2xs)', fontWeight: 'var(--fw-semibold)',
                letterSpacing: 'var(--ls-caps)', textTransform: 'uppercase', textDecoration: 'none',
                color: on ? 'var(--cn-red-600)' : 'var(--cn-navy-700)', paddingBottom: 4,
                borderBottom: '2px solid ' + (on ? 'var(--cn-red-600)' : 'transparent'),
                transition: 'color var(--motion-hover),border-color var(--motion-hover)'
              }}>
              {it.label}
            </a>
          </li>
        );
      })}
    </ul>
  );

  const selectorIdioma = (
    <label style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
      <span style={{
        position: 'absolute', width: 1, height: 1, overflow: 'hidden',
        clip: 'rect(0 0 0 0)', whiteSpace: 'nowrap'
      }}>
        Idioma / Language
      </span>
      <select value={lang} onChange={e => onLang(e.target.value)}
        style={{
          fontFamily: 'var(--font-display)', fontSize: 'var(--fs-2xs)', fontWeight: 600,
          letterSpacing: '0.06em', color: 'var(--cn-navy-700)', background: 'var(--cn-white)',
          border: 'var(--border-width) solid var(--border-default)',
          borderRadius: 'var(--radius-pill)', padding: '8px 12px', minHeight: 36, cursor: 'pointer'
        }}>
        {idiomas.map(i => <option key={i.codigo} value={i.codigo}>{i.nombre}</option>)}
      </select>
    </label>
  );

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 40, background: 'var(--glass-fill)',
      backdropFilter: 'var(--blur-glass)', WebkitBackdropFilter: 'var(--blur-glass)',
      borderBottom: 'var(--border-width) solid var(--border-subtle)'
    }}>
      <div style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: '12px var(--gutter)', display: 'flex', alignItems: 'center', gap: 'var(--space-5)' }}>
        <Logo variant="stacked" height={46} assetBase={assetBase} href="#inicio" />

        <nav aria-label="Principal" className="cn-nav-ancha" style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 'var(--space-5)' }}>
          {enlaces}
          {selectorIdioma}
          {cta && <Button variant="accent" size="sm" onClick={cta.onClick}>{cta.label}</Button>}
        </nav>

        {/* En pantallas angostas el menú se pliega tras un botón. */}
        <div className="cn-nav-angosta" style={{ marginLeft: 'auto', display: 'none', alignItems: 'center', gap: 'var(--space-3)' }}>
          {selectorIdioma}
          <button type="button" onClick={() => setAbierto(a => !a)}
            aria-expanded={abierto} aria-controls="cn-menu-movil"
            style={{
              minHeight: 40, minWidth: 40, borderRadius: 'var(--radius-pill)',
              border: 'var(--border-width-thick) solid var(--cn-navy-700)', background: 'transparent',
              color: 'var(--cn-navy-700)', cursor: 'pointer', fontFamily: 'var(--font-display)',
              fontWeight: 600, fontSize: 'var(--fs-xs)', padding: '0 14px'
            }}>
            {abierto ? 'Cerrar' : 'Menú'}
          </button>
        </div>
      </div>

      {abierto && (
        <div id="cn-menu-movil" className="cn-nav-angosta" style={{ padding: '0 var(--gutter) var(--space-5)', display: 'grid', gap: 'var(--space-5)' }}>
          <nav aria-label="Principal">{enlaces}</nav>
          {cta && <Button variant="accent" onClick={() => { cta.onClick(); setAbierto(false); }}>{cta.label}</Button>}
        </div>
      )}
    </header>
  );
};