// HelpAreas — title on the left, two main practice-area cards on the right.
function HelpAreas({ onNav }) {
  const isMobile = window.useMQ('(max-width: 860px)');
  const areas = [
    ['landmark', 'Benefícios do INSS', 'Aposentadorias, auxílios por incapacidade, auxílio-acidente, pensão por morte, salário-maternidade e revisões.', 'benefícios do INSS'],
    ['hand-heart', 'BPC / LOAS', 'Benefício assistencial para idosos a partir de 65 anos e pessoas com deficiência, inclusive autismo, em situação de baixa renda.', 'BPC/LOAS'],
  ];
  const pill = {
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: '8px',
    padding: '11px 22px', borderRadius: 'var(--radius-pill)', fontSize: '14px', fontWeight: 600,
    textDecoration: 'none', cursor: 'pointer', fontFamily: 'var(--font-sans)',
  };
  return (
    <section id="areas" style={{ background: 'var(--surface-card)' }}>
      <div style={{
        maxWidth: 'var(--container-max)', margin: '0 auto', padding: isMobile ? 'var(--space-9) var(--space-5)' : 'var(--space-10) var(--space-6)',
        display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '0.8fr 1.2fr', gap: isMobile ? 'var(--space-7)' : 'var(--space-9)', alignItems: 'center',
      }}>
        <div>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-2xl)', lineHeight: 1.15,
            color: 'var(--text-strong)', letterSpacing: 'var(--tracking-tight)', margin: '0 0 var(--space-4)', textWrap: 'balance',
          }}>Como podemos ajudar no seu caso</h2>
          <p style={{ fontSize: 'var(--text-md)', color: 'var(--text-muted)', lineHeight: 1.6, margin: 0 }}>
            Conheça nossas frentes de atuação.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 'var(--space-5)' }}>
          {areas.map(([ic, title, desc, topic]) => (
            <div key={title} style={{
              background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-xl)',
              boxShadow: 'var(--shadow-md)', padding: 'var(--space-7) var(--space-6)', display: 'flex', flexDirection: 'column',
            }}>
              <span style={{
                width: 52, height: 52, borderRadius: '50%', background: 'var(--brown-600)', marginBottom: 'var(--space-5)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}><i data-lucide={ic} style={{ width: 24, height: 24, color: 'var(--white)' }}></i></span>
              <h3 style={{
                fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-lg)',
                color: 'var(--text-strong)', margin: '0 0 var(--space-3)',
              }}>{title}</h3>
              <p style={{ fontSize: '15px', color: 'var(--text-body)', lineHeight: 1.6, margin: '0 0 var(--space-6)', flex: 1 }}>{desc}</p>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 'var(--space-3)' }}>
                <button onClick={() => onNav('servicos')} style={{ ...pill, border: 0, background: 'var(--brown-600)', color: 'var(--white)' }}>
                  Ver serviços
                </button>
                <a href={window.waLink(`Olá! Vim pelo site e gostaria de falar com um advogado sobre ${topic}.`)} target="_blank" rel="noopener"
                  style={{ ...pill, border: '1.5px solid var(--brown-600)', color: 'var(--brown-600)', background: 'transparent' }}>
                  Falar com um advogado
                </a>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.HelpAreas = HelpAreas;