const { Button, Badge, Stat, Icon } = window.Academia_fb1ae0;

function Hero({ onEnroll }) {
  const t = window.GIO.t;
  const destacados = window.GIO.cursos.filter(c => c.destacado).slice(0, 3);
  const stats = [
    [t.hero_stat_1_valor, t.hero_stat_1_label, 'brand'],
    [t.hero_stat_2_valor, t.hero_stat_2_label, 'accent'],
    [t.hero_stat_3_valor, t.hero_stat_3_label, 'plain'],
  ].filter(([v, l]) => v || l);

  return (
    <section id="top" className="gio-dark" style={{ position: 'relative', background: 'var(--ink-900)', overflow: 'hidden' }}>
      <span style={{ position: 'absolute', top: -220, right: -160, width: 620, height: 620, borderRadius: '50%', background: 'radial-gradient(circle, rgba(242,107,29,.30) 0%, rgba(242,107,29,0) 66%)' }} />
      <span style={{ position: 'absolute', bottom: -280, left: -200, width: 560, height: 560, borderRadius: '50%', background: 'radial-gradient(circle, rgba(32,96,240,.26) 0%, rgba(32,96,240,0) 68%)' }} />
      <div className="gio-hero-grid" style={{ position: 'relative', maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'clamp(56px,7vw,104px) var(--gutter) clamp(64px,7vw,96px)', display: 'grid', gridTemplateColumns: '1.15fr .85fr', gap: 'var(--space-16)', alignItems: 'center' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-6)', alignItems: 'flex-start' }}>
          {t.hero_badge ? <Badge tone="brand" icon="calendar">{t.hero_badge}</Badge> : null}
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-display-xl)', fontWeight: 'var(--weight-extrabold)', lineHeight: 'var(--leading-tight)', letterSpacing: 'var(--tracking-tight)', color: '#fff', margin: 0, textWrap: 'balance' }}>
            {t.hero_titulo}{t.hero_titulo_destacado ? ' ' : ''}
            <span style={{ color: 'var(--brand)' }}>{t.hero_titulo_destacado}</span>
            {t.hero_titulo_final}
          </h1>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-body-l)', lineHeight: 'var(--leading-relaxed)', color: 'var(--grey-200)', maxWidth: 520, margin: 0, textWrap: 'pretty' }}>
            {t.hero_subtitulo}
          </p>
          <div style={{ display: 'flex', gap: 'var(--space-3)', flexWrap: 'wrap' }}>
            <Button variant="primary" size="lg" icon="graduation-cap" onClick={() => onEnroll(null)}>{t.hero_boton_1}</Button>
            <Button variant="secondary" size="lg" as="a" href="#cursos" style={{ color: '#fff', borderColor: 'rgba(255,255,255,.28)' }}>{t.hero_boton_2}</Button>
          </div>
          {stats.length ? (
            <div style={{ display: 'flex', gap: 'var(--space-10)', paddingTop: 'var(--space-4)', flexWrap: 'wrap' }}>
              {stats.map(([v, l, tone]) => <Stat key={l} value={v} label={l} tone={tone} />)}
            </div>
          ) : null}
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
          {destacados.length ? (
            <div style={{ background: 'var(--ink-800)', border: '1px solid var(--border-inverse)', borderRadius: 'var(--radius-xl)', padding: 'var(--space-6)', display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
              <span className="gio-eyebrow">{t.hero_panel_titulo}</span>
              {destacados.map(c => (
                <button key={c.id} type="button" onClick={() => onEnroll(c)}
                  style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', background: 'transparent', border: 'none', padding: 0, cursor: 'pointer', textAlign: 'left' }}>
                  <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 42, height: 42, borderRadius: 'var(--radius-icon-tile)', background: 'var(--brand)', color: '#fff', flex: '0 0 auto' }}>
                    <Icon name={c.icono} size={20} />
                  </span>
                  <span style={{ display: 'flex', flexDirection: 'column' }}>
                    <span style={{ fontFamily: 'var(--font-display)', fontWeight: 'var(--weight-bold)', fontSize: 'var(--text-body-m)', color: '#fff' }}>{c.titulo}</span>
                    <span style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-caption)', color: 'var(--grey-300)' }}>{c.horario || c.nivel}</span>
                  </span>
                </button>
              ))}
            </div>
          ) : null}
          {t.hero_aviso ? (
            <a href={window.GIO.contacto.waLink || '#cursos'} target={window.GIO.contacto.waLink ? '_blank' : undefined} rel="noopener"
              style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', padding: 'var(--space-4) var(--space-5)', background: 'rgba(32,96,240,.14)', border: '1px solid rgba(32,96,240,.34)', borderRadius: 'var(--radius-lg)', textDecoration: 'none' }}>
              <Icon name="message-circle" size={20} style={{ color: 'var(--blue-300)' }} />
              <span style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-body-s)', color: 'var(--grey-100)' }}>{t.hero_aviso}</span>
            </a>
          ) : null}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Hero });