const { Testimonial, SectionHeading } = window.Academia_fb1ae0;

function Students() {
  const t = window.GIO.t;
  const quotes = window.GIO.testimonios;
  if (!quotes.length) return null;

  return (
    <section id="alumnos" style={{ background: 'var(--surface-page)', padding: 'var(--section-y) 0' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--gutter)', display: 'flex', flexDirection: 'column', gap: 'var(--space-8)' }}>
        <SectionHeading eyebrow={t.alumnos_eyebrow} title={t.alumnos_titulo} align="center" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(280px,1fr))', gap: 'var(--space-6)' }}>
          {quotes.map(q => (
            <Testimonial key={q.id} quote={q.quote} name={q.name} role={q.role} initials={q.initials} />
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Students });