// Sobre — bio + formação destacada
function Sobre() {
  const formacao = [
    { ano: '2005', t: 'Psicologia · Universidade Positivo (1ª turma)' },
    { ano: '2018', t: 'Avaliação Psicológica · Sapiens' },
    { ano: '2022', t: 'Formação em Terapia Familiar Sistêmica · Intercef' },
    { ano: '2023', t: 'Curso intensivo com Dr. Maurizio Andolfi · Roma' },
    { ano: '2024', t: 'Formação em Terapia de Casais · Intercef' },
  ];
  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 }}>Acolher, sem <span className="em">julgar.</span></h2>
            <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--muted)', marginTop: 22, maxWidth: '46ch' }}>
              Sou a Maria Fernanda — psicóloga formada em 2005, com quase duas décadas de prática clínica em Curitiba.
              Atendo adultos, adolescentes (a partir dos 10 anos), casais e famílias.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--muted)', marginTop: 16, maxWidth: '46ch' }}>
              Meu trabalho parte da <strong style={{ color: 'var(--ink-2)', fontWeight: 600 }}>abordagem sistêmica</strong> —
              entender a pessoa dentro das relações que a formam, não como um problema isolado. O objetivo é simples:
              facilitar a auto aceitação, a auto valorização e diminuir o sofrimento. Ajudar a viver melhor.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--muted)', marginTop: 16, maxWidth: '46ch' }}>
              Atendo presencial no consultório em Bigorrilho, Curitiba, e online por teleconsulta —
              com a mesma qualidade e cuidado em ambos.
            </p>
          </Reveal>
          <Reveal>
            {/* Card único de perfil profissional: photo header + formação */}
            <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
              <div style={{ position: 'relative', height: 280 }}>
                <img src="mf-palestra.jpg" alt="Maria Fernanda em congresso profissional" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: '50% 38%', 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)" /> Em congresso profissional
                  </div>
                  <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 18, lineHeight: 1.3 }}>Convidada como palestrante</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)' }}>Formação</span>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 13 }}>
                  {formacao.map(f => (
                    <div key={f.ano} style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
                      <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 500, fontSize: 19, color: 'var(--brand)', minWidth: 56, lineHeight: 1.2 }}>{f.ano}</span>
                      <span style={{ fontSize: 14.5, lineHeight: 1.5, color: 'var(--ink-2)', flex: 1, paddingTop: 3 }}>{f.t}</span>
                    </div>
                  ))}
                </div>
                <div style={{ marginTop: 20, paddingTop: 16, borderTop: '1px solid var(--line)', fontSize: 13, color: 'var(--muted)', lineHeight: 1.55 }}>
                  Associada à <strong style={{ color: 'var(--ink-2)' }}>APRTF</strong> · Associação Paranaense de Terapia Familiar.
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

window.Sobre = Sobre;