// AFF website — practice areas grid
function PracticeAreas() {
  const { PracticeCard } = window.AFFAdvogadosDesignSystem_cf5902;
  const areas = [
    { icon: '⚖', title: 'Direito Civil', description: 'Contratos, responsabilidade civil, direito de família e sucessões com atenção a cada detalhe.' },
    { icon: '₪', title: 'Direito Tributário', description: 'Planejamento tributário, defesas administrativas e judiciais perante o fisco.' },
    { icon: '⌂', title: 'Direito Empresarial', description: 'Assessoria societária, contratos e contencioso estratégico para empresas de todos os portes.' },
    { icon: '§', title: 'Direito Criminal', description: 'Defesa criminal técnica e estratégica em todas as fases da persecução penal.' },
  ];
  return (
    <section style={{ background: 'var(--cream)', padding: '92px var(--page-gutter)' }}>
      <div style={{ maxWidth: 'var(--container-xl)', margin: '0 auto' }}>
        <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 48px' }}>
          <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'var(--gold-700)', marginBottom: 16 }}>Áreas de Atuação</div>
          <h2 style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 'clamp(30px,4vw,44px)', color: 'var(--navy-700)', margin: 0, lineHeight: 1.1 }}>Advocacia completa para pessoas e empresas</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 20 }}>
          {areas.map((a, i) => <PracticeCard key={i} {...a} />)}
        </div>
        <p style={{ textAlign: 'center', marginTop: 32, fontFamily: 'var(--font-body)', fontStyle: 'italic', fontSize: 16, color: 'var(--text-muted)' }}>
          Atuamos em <strong style={{ fontStyle: 'normal', color: 'var(--navy-700)' }}>todas as áreas do direito</strong> — <a href="#sec-contato" style={{ color: 'var(--gold-700)', fontStyle: 'normal', fontWeight: 600 }}>consulte-nos sobre o seu caso</a>.
        </p>
      </div>
    </section>
  );
}