// AFF website — about / firm values split section
function About() {
  const { GoldRule } = window.AFFAdvogadosDesignSystem_cf5902;
  const values = [
    { t: 'Ética', d: 'Conduta pautada pela transparência e pelo respeito ao cliente e à Justiça.' },
    { t: 'Técnica', d: 'Domínio doutrinário e jurisprudencial aplicado a cada estratégia processual.' },
    { t: 'Proximidade', d: 'Atendimento próximo e personalizado, do primeiro contato à decisão final.' },
  ];
  return (
    <section style={{ background: 'var(--paper)', padding: '92px var(--page-gutter)' }}>
      <div className="two-col" style={{ maxWidth: 'var(--container-lg)', margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
        <div>
          <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'var(--gold-700)', marginBottom: 16 }}>O Escritório</div>
          <h2 style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 'clamp(28px,3.4vw,40px)', color: 'var(--navy-700)', margin: '0 0 20px', lineHeight: 1.12 }}>Tradição e compromisso a serviço do seu direito</h2>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.75, color: 'var(--text-body)', margin: '0 0 16px' }}>
            Fundado sobre os princípios da ética e da excelência técnica, o
            Amâncio &amp; Favarato Freire acompanha cada cliente com dedicação
            integral, traduzindo questões jurídicas complexas em decisões claras.
          </p>
          <GoldRule variant="fade" style={{ maxWidth: 320, marginTop: 28 }} />
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          {values.map((v, i) => (
            <div key={i} style={{ display: 'flex', gap: 18, alignItems: 'flex-start' }}>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 26, color: 'var(--gold-500)', lineHeight: 1, width: 42, flex: 'none', fontVariantNumeric: 'tabular-nums', paddingTop: 3 }}>{String(i+1).padStart(2,'0')}</span>
              <div>
                <div style={{ fontFamily: 'var(--font-serif)', fontSize: 22, fontWeight: 600, color: 'var(--navy-700)' }}>{v.t}</div>
                <p style={{ margin: '4px 0 0', fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.6, color: 'var(--text-muted)' }}>{v.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}