// AboutTeam — "Sobre" section: quem somos, dupla de sócios.
function AboutTeam() {
  const { Eyebrow, Card } = window.AmorimECostaDesignSystem_658eb5;
  const team = [
    {
      img: 'assets/team-hugo-amorim.png',
      name: 'Dr. Hugo Amorim',
      oab: 'OAB/MS 27.599',
      bio: 'Mais de 7 anos de atuação em Direito Previdenciário, com pós-graduação pela FMP e atuação no RGPS (INSS) e RPPS (Servidores Públicos). Membro da Comissão de Direito Previdenciário da OAB/MS.',
    },
    {
      img: 'assets/team-joice-costa.jpeg',
      name: 'Dra. Joice Costa',
      oab: 'OAB/MS 28.277',
      bio: 'Advogada especialista em Direito Previdenciário. Atua com foco em benefícios do INSS e direitos das seguradas.',
    },
  ];
  return (
    <section id="sobre" style={{ background: 'var(--surface-card)' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'var(--space-10) var(--space-6)' }}>
        <div style={{ maxWidth: '640px', marginBottom: 'var(--space-8)' }}>
          <Eyebrow>Quem somos</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-2xl)',
            color: 'var(--text-strong)', letterSpacing: 'var(--tracking-tight)',
            margin: 'var(--space-4) 0 var(--space-3)', textWrap: 'balance',
          }}>Um escritório à frente de cada caso</h2>
          <p style={{ fontSize: 'var(--text-md)', color: 'var(--text-muted)', lineHeight: 1.6, margin: 0 }}>
            A Amorim e Costa nasceu da parceria entre dois advogados dedicados ao direito
            previdenciário. Você fala direto com quem conduz o seu processo.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 'var(--space-6)' }}>
          {team.map((p) => (
            <Card key={p.name} padding="none" style={{ overflow: 'hidden' }}>
              <div style={{ width: '100%', aspectRatio: '3 / 4', overflow: 'hidden', borderTop: '3px solid var(--brown-500)' }}>
                <img src={p.img} alt={p.name} style={{
                  width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top center', display: 'block',
                }} />
              </div>
              <div style={{ padding: 'var(--space-6)' }}>
                <h3 style={{
                  fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-lg)',
                  color: 'var(--text-strong)', margin: '0 0 4px',
                }}>{p.name}</h3>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: '12.5px', color: 'var(--brown-600)',
                  fontWeight: 500, margin: '0 0 var(--space-3)',
                }}>{p.oab}</div>
                <p style={{ fontSize: '14.5px', color: 'var(--text-body)', lineHeight: 1.55, margin: 0 }}>{p.bio}</p>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}
window.AboutTeam = AboutTeam;