// Sobre — bio + como é o atendimento (sem dados não verificados)
function Sobre() {
  const destaques = [
    { icon: 'leaf', t: 'O brincar é a linguagem', d: 'Criança nem sempre consegue explicar o que sente com palavras. No consultório, o brincar e o desenho viram o caminho da conversa.' },
    { icon: 'users', t: 'Os pais participam', d: 'Vocês não ficam de fora: há devolutivas e orientações periódicas para que o cuidado continue em casa.' },
    { icon: 'heart', t: 'Cada fase tem seu jeito', d: 'O atendimento de uma criança de 6 anos não é igual ao de um adolescente de 15. O formato se adapta ao momento de vida.' },
  ];
  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 }}>Cuidar de quem ainda está <span className="em">se formando.</span></h2>
            <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--muted)', marginTop: 22, maxWidth: '46ch' }}>
              Sou a Sabrina — psicóloga clínica com atuação dedicada a <strong style={{ color: 'var(--ink-2)', fontWeight: 600 }}>crianças e adolescentes</strong>,
              no consultório nas Mercês, em Curitiba.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--muted)', marginTop: 16, maxWidth: '46ch' }}>
              Muitas famílias chegam até mim depois de perceber mudanças: irritabilidade, medos novos, dificuldade na escola,
              isolamento, birras que não passam. Meu trabalho é entender o que esses sinais estão dizendo —
              e ajudar a criança a elaborar o que ela ainda não consegue nomear.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--muted)', marginTop: 16, maxWidth: '46ch' }}>
              E como quem contrata a terapia são os pais, vocês fazem parte do processo do começo ao fim:
              da primeira conversa às devolutivas ao longo do acompanhamento.
            </p>
          </Reveal>
          <Reveal>
            {/* Card de perfil: foto + como é o atendimento */}
            <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
              <div style={{ position: 'relative', height: 280 }}>
                <img src="sabrina-sobre.jpg" alt="Sabrina Santos, psicóloga infantil em Curitiba" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: '50% 30%', display: 'block' }} />
                <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 35%, rgba(15,23,21,.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)" /> Psicóloga infantil e de adolescentes
                  </div>
                  <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 18, lineHeight: 1.3 }}>Sabrina Santos · Curitiba</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 é o atendimento</span>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                  {destaques.map(f => (
                    <div key={f.t} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                      <span style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--mint)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>
                        <Icon name={f.icon} size={18} color="var(--brand-700)" />
                      </span>
                      <span style={{ flex: 1 }}>
                        <span style={{ display: 'block', fontSize: 14.5, fontWeight: 600, color: 'var(--ink-2)' }}>{f.t}</span>
                        <span style={{ display: 'block', fontSize: 13.5, lineHeight: 1.55, color: 'var(--muted)', marginTop: 2 }}>{f.d}</span>
                      </span>
                    </div>
                  ))}
                </div>
                <div style={{ marginTop: 20, paddingTop: 16, borderTop: '1px solid var(--line)', fontSize: 13, color: 'var(--muted)', lineHeight: 1.55 }}>
                  Consultório na <strong style={{ color: 'var(--ink-2)' }}>R. Jacarezinho, 734 · sala 15</strong> · Mercês, Curitiba.
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

window.Sobre = Sobre;