function SpeakerInitials({ initials, bg }) {
  return (
    <div className="speaker-portrait" style={{ background: bg }}>
      <div style={{
        position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: '6rem', letterSpacing: '-.04em',
        color: 'rgba(255,255,255,.92)'
      }}>{initials}</div>
      <div className="badge">Retrato · placeholder</div>
    </div>
  );
}

function Speakers() {
  return (
    <section id="especialistas">
      <div className="padding-global">
        <div className="container mid">
          <div className="section-header" style={{ marginBottom: '3rem' }}>
            <div className="section-eyebrow">Quem conduz</div>
            <h2 className="h2-bold" style={{ margin: 0 }}>Conduzido por especialistas da Maitha Tech.</h2>
            <p className="text-regular opacity-70" style={{ margin: 0, maxWidth: '52ch' }}>
              O encontro será conduzido por especialistas com experiência em estratégia, tecnologia, inteligência artificial e desenho de soluções digitais para empresas.
            </p>
          </div>
          <div className="speakers-grid">
            <div className="speaker-card">
              <div className="speaker-portrait">
                <img src="assets/imagery/caio-laurino.jpeg" alt="Caio Laurino" style={{ objectPosition: 'top' }} />
              </div>
              <div className="speaker-info">
                <div>
                  <div className="name">Caio Laurino</div>
                  <div className="role">Chief AI Officer · Cofundador</div>
                </div>
                <div className="bio">
                  Executivo de tecnologia com atuação em estratégia digital, inteligência artificial e desenvolvimento de soluções para negócios complexos. Na Maitha, lidera iniciativas que conectam tecnologia, dados, cloud e IA para gerar impacto real em empresas.
                </div>
              </div>
            </div>
            <div className="speaker-card">
                            <div className="speaker-portrait">
                <img src="assets/imagery/fabiano-brito.jpeg" alt="Fabiano Brito" style={{ objectPosition: 'top' }} />
              </div>
              <div className="speaker-info">
                <div>
                  <div className="name">Fabiano Brito</div>
                  <div className="role">COO · Chief Operating Officer</div>
                </div>
                <div className="bio">
                  Lidera frentes de operação, inovação e entrega na Maitha Tech, conectando estratégia, execução e tecnologia para apoiar empresas na construção de soluções digitais mais eficientes, escaláveis e orientadas a resultado.
                </div>
              </div>
            </div>
            <div className="speaker-card">
              <div className="speaker-portrait">
                <img src="assets/imagery/vinicius-limeira.jpg" alt="Vinicius Limeira" />
              </div>
              <div className="speaker-info">
                <div>
                  <div className="name">Vinicius Limeira</div>
                  <div className="role">Especialista/Desenvolvedor de IA</div>
                </div>
                <div className="bio">
                  Doutor em Física e especialista em Inteligência Artificial. Atua no desenvolvimento de soluções com Machine Learning, IA Generativa e Agentes de IA, liderando iniciativas que conectam estratégia, tecnologia e negócio para gerar impacto real, eficiência e escalabilidade nas empresas.
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Speakers });