// Como eu trabalho — terapia infantil explicada simples para os pais
function Abordagem() {
  const pilares = [
    { icon: 'heart', t: 'O brincar é a linguagem', d: 'Criança não senta no divã. Ela desenha, monta, inventa história — e é nesse brincar que mostra o que sente e elabora o que vive.' },
    { icon: 'users', t: 'Os pais fazem parte', d: 'Vocês conhecem seu filho como ninguém. Por isso o processo inclui conversas de orientação e devolutivas periódicas com a família.' },
    { icon: 'sparkle', t: 'Ciência do desenvolvimento', d: 'Por trás do lúdico há método: observação clínica e conhecimento de desenvolvimento infantil guiando cada etapa do acompanhamento.' },
  ];
  return (
    <section id="abordagem" className="section" style={{ background: 'var(--paper-2)' }}>
      <div className="container">
        <Reveal>
          <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 56px' }}>
            <span className="tagline">Como eu trabalho</span>
            <h2 className="h-section" style={{ marginTop: 14 }}>Terapia infantil, <span className="em">em uma frase:</span></h2>
            <p style={{ fontSize: 18, color: 'var(--muted)', marginTop: 18, lineHeight: 1.65 }}>
              Ajudar a criança a entender e expressar o que sente — brincando — com a família participando do caminho.
            </p>
          </div>
        </Reveal>
        <div className="grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {pilares.map((p, i) => (
            <Reveal key={p.t} delay={i * 0.08}>
              <div className="card card-hover" style={{ padding: 30, height: '100%' }}>
                <div style={{ width: 52, height: 52, borderRadius: 14, backgroundImage: 'linear-gradient(135deg, #7d6b96, #5d4e75)', backgroundColor: '#7d6b96', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 22 }}>
                  <Icon name={p.icon} size={26} color="#fff" />
                </div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600, margin: '0 0 10px', color: 'var(--ink-2)' }}>{p.t}</h3>
                <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--muted)', margin: 0 }}>{p.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Abordagem = Abordagem;