// Abordagem — sistêmica explicada simples
function Abordagem() {
  const pilares = [
    { icon: 'users', t: 'O foco está no contexto', d: 'A gente é formado pelas relações que vive. Olhar pra família, pro casal, pros vínculos — é olhar pra raiz, não pro sintoma.' },
    { icon: 'leaf', t: 'Cada pessoa tem seu ritmo', d: 'Não existe roteiro. A escuta vem antes do diagnóstico. Cada sessão é construída junto, no tempo que você precisar.' },
    { icon: 'sparkle', t: 'O objetivo é prático', d: 'Não é só falar — é encontrar caminhos. Você sai da sessão entendendo melhor o que sente e o que pode fazer com isso.' },
  ];
  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">A abordagem</span>
            <h2 className="h-section" style={{ marginTop: 14 }}>Terapia <span className="em">sistêmica.</span> Em uma frase:</h2>
            <p style={{ fontSize: 18, color: 'var(--muted)', marginTop: 18, lineHeight: 1.65 }}>
              Entender você dentro das suas relações — porque é nelas que a gente se constrói, sofre e cura.
            </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;