// Sobre — bio + card do consultório (sem credenciais inventadas)
function Sobre() {
  const cuidados = [
    { icon: 'heart', t: 'Espaço lúdico', d: 'Consultório com tatame e materiais pensados para a criança se sentir à vontade desde a primeira sessão.' },
    { icon: 'users', t: 'Pais sempre por perto', d: 'Devolutivas e orientações periódicas — você acompanha o processo, não fica do lado de fora.' },
    { icon: 'leaf', t: 'Ritmo da criança', d: 'Cada criança tem seu tempo. O vínculo vem primeiro; o trabalho terapêutico cresce a partir dele.' },
  ];
  return (
    <section id="sobre" className="section">
      <div className="container">
        <div className="grid-2" style={{ display: 'grid', gridTemplateColumns: '.95fr 1.05fr', gap: 64, alignItems: 'start' }}>
          <Reveal>
            <span className="eyebrow">Sobre mim</span>
            <h2 className="h-section" style={{ marginTop: 8 }}>Toda criança tem um jeito <span className="em">próprio de contar.</span></h2>
            <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--muted)', marginTop: 22, maxWidth: '46ch' }}>
              Sou a Kathleen — psicóloga infantil em Curitiba. Trabalho com crianças e com as famílias delas,
              porque é impossível cuidar de uma sem escutar a outra.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--muted)', marginTop: 16, maxWidth: '46ch' }}>
              No consultório, a criança fala do jeito que sabe falar: <strong style={{ color: 'var(--ink-2)', fontWeight: 600 }}>brincando</strong>.
              É pelo brincar que ela mostra o que sente, o que a assusta e o que precisa de ajuda — e é por aí que o trabalho terapêutico acontece.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--muted)', marginTop: 16, maxWidth: '46ch' }}>
              Além da psicoterapia, realizo <strong style={{ color: 'var(--ink-2)', fontWeight: 600 }}>avaliação neuropsicológica</strong> —
              uma investigação cuidadosa de atenção, aprendizagem e desenvolvimento, para entender o que está por trás
              das dificuldades e orientar os próximos passos com a família e a escola.
            </p>
          </Reveal>
          <Reveal>
            {/* Card do consultório: photo header + como eu cuido */}
            <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
              <div style={{ position: 'relative', height: 280 }}>
                <img src="kathleen-consultorio.jpg" alt="Consultório da Kathleen Madalosso com espaço lúdico para crianças" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: '50% 60%', display: 'block' }} />
                <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 35%, rgba(26,21,31,.85) 100%)' }} />
                <div style={{ position: 'absolute', left: 22, right: 22, bottom: 18, color: '#fff' }}>
                  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 11, fontWeight: 600, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--mint)', marginBottom: 6 }}>
                    <Icon name="sparkle" size={13} color="var(--mint)" /> O consultório
                  </div>
                  <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 18, lineHeight: 1.3 }}>Um lugar onde criança chega e quer voltar</div>
                </div>
              </div>
              <div style={{ padding: '26px 28px 28px' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
                  <Icon name="sparkle" size={18} color="var(--brand)" />
                  <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--ink-2)' }}>Como eu cuido</span>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                  {cuidados.map(c => (
                    <div key={c.t} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                      <span style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--paper-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>
                        <Icon name={c.icon} size={18} color="var(--brand)" />
                      </span>
                      <span style={{ flex: 1 }}>
                        <span style={{ display: 'block', fontSize: 15, fontWeight: 600, color: 'var(--ink-2)' }}>{c.t}</span>
                        <span style={{ display: 'block', fontSize: 13.5, lineHeight: 1.55, color: 'var(--muted)', marginTop: 2 }}>{c.d}</span>
                      </span>
                    </div>
                  ))}
                </div>
                <div style={{ marginTop: 20, paddingTop: 16, borderTop: '1px solid var(--line)', fontSize: 13, color: 'var(--muted)', lineHeight: 1.55 }}>
                  Atendimento na <strong style={{ color: 'var(--ink-2)' }}>Av. Manoel Ribas, 507</strong> · Mercês, Curitiba.
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

window.Sobre = Sobre;