// Como eu trabalho — explicado simples, pros pais
function Abordagem() {
  const pilares = [
    { icon: 'leaf', t: 'A criança no centro', d: 'A sessão acontece no ritmo e na linguagem da criança — brincar, desenhar, conversar. É assim que o mundo interno dela aparece.' },
    { icon: 'users', t: 'A família junto', d: 'Pais e cuidadores recebem orientação e devolutivas. O que acontece no consultório só se sustenta se ecoar em casa.' },
    { icon: 'sparkle', t: 'Sinais viram entendimento', d: 'Birra, medo, nota baixa, isolamento: o comportamento é a ponta. O trabalho é entender o que está por trás — e agir nisso.' },
  ];
  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">sem mistério.</span></h2>
            <p style={{ fontSize: 18, color: 'var(--muted)', marginTop: 18, lineHeight: 1.65 }}>
              Um espaço onde a criança pode ser criança — e onde os pais entendem o que está acontecendo, passo a passo.
            </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, #6a8a7a, #4f6b5e)', backgroundColor: '#6a8a7a', 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;