// Avaliação neuropsicológica — seção destaque (linguagem cuidadosa, sem prometer diagnóstico)
function Precos() {
  const quando = [
    'A escola sinalizou desatenção, agitação ou dificuldade para acompanhar a turma',
    'Há suspeita de TDAH, TEA ou transtorno de aprendizagem e vocês querem entender melhor',
    'A criança esquece o que estudou, troca letras ou evita tarefas que exigem concentração',
    'Um especialista (pediatra, neurologista, fonoaudióloga) solicitou a avaliação',
  ];
  const etapas = [
    { t: 'Entrevista com os pais', d: 'Histórico de desenvolvimento, rotina e queixas da escola.' },
    { t: 'Sessões com a criança', d: 'Atividades e instrumentos que investigam atenção, memória, linguagem e raciocínio — em formato leve, adaptado à idade.' },
    { t: 'Devolutiva e orientações', d: 'Conversa com a família sobre o que foi observado e os caminhos recomendados, com material para compartilhar com a escola e outros profissionais.' },
  ];
  return (
    <section id="avaliacao" className="section">
      <div className="container">
        <Reveal>
          <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 48px' }}>
            <span className="eyebrow">Avaliação neuropsicológica</span>
            <h2 className="h-section" style={{ marginTop: 8 }}>Entender <span className="em">antes de rotular.</span></h2>
            <p style={{ fontSize: 16, color: 'var(--muted)', marginTop: 14, lineHeight: 1.65 }}>
              A avaliação neuropsicológica é uma investigação cuidadosa de como a criança aprende, presta atenção e se desenvolve.
              Ela não é um veredito — é compreensão, para orientar família, escola e equipe de saúde.
            </p>
          </div>
        </Reveal>
        <div className="grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22, maxWidth: 980, margin: '0 auto', alignItems: 'stretch' }}>
          <Reveal>
            <div className="card" style={{ padding: 34, height: '100%', position: 'relative', overflow: 'hidden', backgroundImage: 'linear-gradient(135deg, #7d6b96, #5d4e75)', backgroundColor: '#7d6b96', color: '#fff', border: 0 }}>
              <div style={{ position: 'absolute', width: 240, height: 240, right: -80, top: -80, background: 'radial-gradient(circle, rgba(227,220,236,.35), transparent 65%)' }} />
              <div style={{ position: 'relative' }}>
                <Icon name="sparkle" size={28} color="#fff" />
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 600, margin: '16px 0 18px', color: '#fff' }}>Quando considerar</h3>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                  {quando.map((q, i) => (
                    <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                      <Icon name="check" size={17} color="#e3dcec" />
                      <span style={{ fontSize: 14.5, lineHeight: 1.55, color: 'rgba(255,255,255,.92)', flex: 1 }}>{q}</span>
                    </div>
                  ))}
                </div>
                <a href={window.WHATSAPP} target="_blank" rel="noopener" className="btn btn-primary" style={{ background: '#fff', color: 'var(--brand-700)', marginTop: 26 }}>
                  <Icon name="whatsapp" size={17} color="#5d4e75" /> Perguntar sobre a avaliação
                </a>
              </div>
            </div>
          </Reveal>
          <Reveal delay={0.08}>
            <div className="card" style={{ padding: 0, height: '100%', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
              <div style={{ position: 'relative', height: 170, flex: 'none' }}>
                <img src="kathleen-mural.jpg" alt="Mural do consultório: tudo que a gente cuida floresce" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: '50% 42%', display: 'block' }} />
                <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 40%, rgba(26,21,31,.5) 100%)' }} />
              </div>
              <div style={{ padding: '26px 30px 30px', flex: 1 }}>
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 600, margin: '0 0 18px', color: 'var(--ink-2)' }}>Como acontece</h3>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                  {etapas.map((e, i) => (
                    <div key={e.t} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                      <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 500, fontSize: 20, color: 'var(--brand)', minWidth: 26, lineHeight: 1.3 }}>{i + 1}.</span>
                      <span style={{ flex: 1 }}>
                        <span style={{ display: 'block', fontSize: 15, fontWeight: 600, color: 'var(--ink-2)' }}>{e.t}</span>
                        <span style={{ display: 'block', fontSize: 13.5, lineHeight: 1.55, color: 'var(--muted)', marginTop: 2 }}>{e.d}</span>
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </Reveal>
        </div>
        <Reveal>
          <p style={{ textAlign: 'center', marginTop: 28, fontSize: 14, color: 'var(--muted)', maxWidth: '72ch', marginLeft: 'auto', marginRight: 'auto' }}>
            Cada caso é único: número de sessões, instrumentos e encaminhamentos são definidos individualmente, em conjunto com a família.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

window.Precos = Precos;