const { Accordion, SectionHeading, Button } = window.Academia_fb1ae0;

function Faq({ onEnroll }) {
  const t = window.GIO.t;
  const items = window.GIO.faq;
  if (!items.length) return null;

  return (
    <section id="preguntas" style={{ background: 'var(--surface-card)', borderTop: '1px solid var(--border-subtle)', padding: 'var(--section-y) 0' }}>
      <div className="gio-faq-grid" style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--gutter)', display: 'grid', gridTemplateColumns: '.85fr 1.15fr', gap: 'var(--space-16)', alignItems: 'start' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)', position: 'sticky', top: 100 }}>
          <SectionHeading eyebrow={t.faq_eyebrow} title={t.faq_titulo} lead={t.faq_subtitulo} />
          <div style={{ display: 'flex', gap: 'var(--space-3)', flexWrap: 'wrap' }}>
            {window.GIO.contacto.waLink ? (
              <Button variant="accent" icon="message-circle" as="a" href={window.GIO.contacto.waLink} target="_blank" rel="noopener">
                {t.contacto_whatsapp_boton}
              </Button>
            ) : null}
            <Button variant="ghost" iconAfter="arrow-right" onClick={() => onEnroll(null)}>{t.boton_inscripcion}</Button>
          </div>
        </div>
        <Accordion items={items} />
      </div>
    </section>
  );
}
Object.assign(window, { Faq });