const AREAS = ['Produto', 'Marketing', 'Vendas', 'Operações', 'RH e People', 'Atendimento e CX', 'Financeiro', 'Jurídico'];

function Audience() {
  return (
    <section id="para-quem">
      <div className="padding-global">
        <div className="container mid">
          <div className="audience-grid">
            <div>
              <div className="section-eyebrow" style={{ marginBottom: '1.25rem' }}>Para quem é</div>
              <h2 className="h2-bold" style={{ margin: '0 0 1.5rem' }}>Líderes que querem aplicar IA, não só falar sobre ela.</h2>
              <p className="text-regular opacity-80" style={{ margin: 0, maxWidth: '46ch' }}>
                O AI Agents Lab é voltado para líderes, gestores e profissionais de áreas de negócio que querem entender como agentes de IA podem gerar eficiência, reduzir gargalos, acelerar decisões e redesenhar processos no dia a dia da operação.
              </p>
              <div style={{ marginTop: '2rem' }}>
                <PrimaryButton>Quero aplicar agentes no meu negócio</PrimaryButton>
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
              <div className="text-small-bold" style={{ opacity: .55, letterSpacing: '.14em', textTransform: 'uppercase' }}>
                Áreas atendidas
              </div>
              <div className="audience-pills">
                {AREAS.map((a, i) => (
                  <div key={a} className={`pill ${i === 0 ? 'featured' : ''}`}>{a}</div>
                ))}
              </div>
              <div className="text-small opacity-60" style={{ marginTop: '1rem' }}>
                Não vê sua área? Conte na inscrição — o programa é adaptado por turma.
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Audience });