const { Button, Logo, Icon } = window.Academia_fb1ae0;

function Header({ onEnroll }) {
  const t = window.GIO.t;
  const links = [
    [t.menu_1, '#cursos'],
    [t.menu_2, '#modalidad'],
    [t.menu_3, '#alumnos'],
    [t.menu_4, '#preguntas'],
  ].filter(([l]) => l);

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 40, background: 'rgba(16,16,19,.82)',
      backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)',
      borderBottom: '1px solid var(--border-inverse)',
    }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--gutter)', height: 76, display: 'flex', alignItems: 'center', gap: 'var(--space-8)' }}>
        <a href="#top" style={{ display: 'flex', alignItems: 'center' }}>
          <Logo variant="light" height={30} basePath="assets" />
        </a>
        <nav className="gio-nav" style={{ display: 'flex', gap: 'var(--space-6)', marginLeft: 'auto' }}>
          {links.map(([l, href]) => (
            <a key={href} href={href} style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-body-s)', fontWeight: 'var(--weight-bold)', color: 'var(--grey-100)', textDecoration: 'none' }}>{l}</a>
          ))}
        </nav>
        <div style={{ display: 'flex', gap: 'var(--space-3)', alignItems: 'center' }}>
          {window.GIO.contacto.waLink ? (
            <a href={window.GIO.contacto.waLink} target="_blank" rel="noopener" aria-label="WhatsApp"
              style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 38, height: 38, borderRadius: 'var(--radius-pill)', border: '1px solid var(--border-inverse)', color: 'var(--grey-100)' }}>
              <Icon name="message-circle" size={18} />
            </a>
          ) : null}
          <Button variant="primary" size="sm" onClick={() => onEnroll(null)}>{t.boton_inscripcion}</Button>
        </div>
      </div>
    </header>
  );
}
Object.assign(window, { Header });