// Como eu trabalho — psicanálise explicada simples + banner avaliação neuropsicológica
function Abordagem() {
  const pilares = [
    { icon: 'leaf', t: 'A palavra no centro', d: 'Na psicanálise, falar não é desabafar à toa: é o caminho pra entender o que se repete. Você fala, e juntos escutamos o que aparece.' },
    { icon: 'sparkle', t: 'O sintoma diz algo', d: 'Ansiedade, insônia, procrastinação, ciúme: o sintoma é a ponta de algo maior. O trabalho é entender o que ele está tentando dizer.' },
    { icon: 'user', t: 'No seu ritmo', d: 'Não existe roteiro pronto nem prazo fechado. Cada análise tem o tempo de quem está na sala — e respeitar isso faz parte do cuidado.' },
  ];
  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 }}>Psicanálise, <span className="em">sem mistério.</span></h2>
            <p style={{ fontSize: 18, color: 'var(--muted)', marginTop: 18, lineHeight: 1.65 }}>
              Um espaço de escuta onde o que você sente — e o que você nem sabia que sentia — pode ser dito e trabalhado.
            </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, #b4694a, #8c4e36)', backgroundColor: '#b4694a', 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>
        {/* Banner — avaliação neuropsicológica com foto real dos materiais */}
        <Reveal delay={0.1}>
          <div className="card" style={{ marginTop: 24, padding: 0, overflow: 'hidden' }}>
            <div className="grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', alignItems: 'stretch' }}>
              <div style={{ position: 'relative', minHeight: 240 }}>
                <img src="patricya-avaliacao.jpg" alt="Materiais padronizados de avaliação neuropsicológica no consultório" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
              </div>
              <div style={{ padding: '34px 36px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
                  <Icon name="brain" size={20} color="var(--brand)" />
                  <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--brand)' }}>Neuropsicologia</span>
                </div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 600, margin: '0 0 12px', color: 'var(--ink-2)' }}>Avaliação neuropsicológica</h3>
                <p style={{ fontSize: 15, lineHeight: 1.65, color: 'var(--muted)', margin: 0 }}>
                  Investigação de atenção, memória, funções executivas e outras questões cognitivas,
                  com instrumentos padronizados e devolutiva em laudo. Indicada quando há dúvida diagnóstica
                  ou necessidade de documentação para escola, trabalho ou outros profissionais de saúde.
                </p>
                <div style={{ marginTop: 20 }}>
                  <a href={window.WHATSAPP} target="_blank" rel="noopener" className="btn btn-ghost">
                    <Icon name="whatsapp" size={16} /> Perguntar sobre avaliação
                  </a>
                </div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.Abordagem = Abordagem;