const { FeatureItem, SectionHeading, Card, Icon } = window.Academia_fb1ae0;

function Why() {
  const t = window.GIO.t;
  const items = [
    ['users', t.modalidad_item_1_titulo, t.modalidad_item_1_texto, 'brand'],
    ['school', t.modalidad_item_2_titulo, t.modalidad_item_2_texto, 'accent'],
    ['wrench', t.modalidad_item_3_titulo, t.modalidad_item_3_texto, 'brand'],
    ['award', t.modalidad_item_4_titulo, t.modalidad_item_4_texto, 'accent'],
  ].filter(([, titulo]) => titulo);

  const chips = [
    ['calendar-clock', t.modalidad_chip_1],
    ['map-pin', t.modalidad_chip_2],
    ['messages-square', t.modalidad_chip_3],
    ['repeat', t.modalidad_chip_4],
  ].filter(([, texto]) => texto);

  return (
    <section id="modalidad" style={{ background: 'var(--surface-card)', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)', padding: 'var(--section-y) 0' }}>
      <div className="gio-2col" style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--gutter)', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-16)', alignItems: 'center' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-6)' }}>
          <SectionHeading eyebrow={t.modalidad_eyebrow} title={t.modalidad_titulo} />
          {items.map(([ic, titulo, texto, tone]) => (
            <FeatureItem key={titulo} icon={ic} tone={tone} title={titulo}>{texto}</FeatureItem>
          ))}
        </div>
        <div style={{ display: 'grid', gap: 'var(--space-4)' }}>
          <Card tone="sunken" padding="0" style={{ overflow: 'hidden', boxShadow: 'var(--shadow-md)' }}>
            <img src="assets/panel-oscuro.png" alt="academiagio." style={{ width: '100%', display: 'block' }} />
          </Card>
          {chips.length ? (
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-4)' }}>
              {chips.map(([ic, texto]) => (
                <div key={texto} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', padding: 'var(--space-4)', background: 'var(--surface-sunken)', borderRadius: 'var(--radius-md)' }}>
                  <Icon name={ic} size={18} style={{ color: 'var(--brand)', marginTop: 2 }} />
                  <span style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-body-s)', color: 'var(--text-body)' }}>{texto}</span>
                </div>
              ))}
            </div>
          ) : null}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Why });