// PracticeAreas — grid of areas of expertise.
function PracticeAreas({ onNav }) {
  const { Card, Eyebrow } = window.AmorimECostaDesignSystem_658eb5;
  const areas = [
    ['hourglass', 'Aposentadorias', 'Por idade, tempo de contribuição, rural, especial e da pessoa com deficiência.'],
    ['heart-pulse', 'Benefícios por incapacidade', 'Auxílio-doença, aposentadoria por invalidez e auxílio-acidente.'],
    ['hand-heart', 'BPC / LOAS', 'Benefício assistencial ao idoso e à pessoa com deficiência de baixa renda.'],
    ['users', 'Pensão por morte', 'Reconhecimento e habilitação de dependentes junto ao INSS.'],
    ['file-search', 'Revisões de benefício', 'Revisão da vida toda, do teto e correção de cálculos do INSS.'],
    ['scale', 'Recursos e ações judiciais', 'Recurso administrativo, mandado e ação contra indeferimentos.'],
  ];
  return (
    <section id="areas" style={{ background: 'var(--surface-page)' }}>
      <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>Áreas de atuação</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',
          }}>Direito previdenciário, do começo ao fim do processo</h2>
          <p style={{ fontSize: 'var(--text-md)', color: 'var(--text-muted)', lineHeight: 1.6, margin: 0 }}>
            Atuação focada em previdência social. Avaliamos a melhor estratégia para o seu caso.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-5)' }}>
          {areas.map(([ic, title, desc]) => (
            <Card key={title} interactive padding="lg" onClick={() => onNav('contato')}>
              <span style={{
                width: 46, height: 46, borderRadius: 'var(--radius-md)', background: 'var(--navy-50)',
                display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 'var(--space-4)',
              }}><i data-lucide={ic} style={{ width: 23, height: 23, color: 'var(--navy-700)' }}></i></span>
              <h3 style={{
                fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-lg)',
                color: 'var(--text-strong)', margin: '0 0 var(--space-2)',
              }}>{title}</h3>
              <p style={{ fontSize: '14.5px', color: 'var(--text-body)', lineHeight: 1.55, margin: '0 0 var(--space-4)' }}>{desc}</p>
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: '6px',
                fontSize: '13.5px', fontWeight: 600, color: 'var(--text-link)',
              }}>Saiba mais <i data-lucide="arrow-right" style={{ width: 15, height: 15 }}></i></span>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}
window.PracticeAreas = PracticeAreas;