function About() {
  const { DifferentialCard } = window.MarianaFranADesignSystem_8735af;
  return (
    <section id="sobre" style={{ padding: 'var(--space-9) var(--container-padding-x)', background: 'var(--color-bg-surface-muted)' }}>
      <div className="about-grid" style={{
        maxWidth: 'var(--container-width)', margin: '0 auto', display: 'grid',
        gridTemplateColumns: '0.85fr 1.15fr', gap: 'var(--space-8)', alignItems: 'center',
      }}>
        <div data-reveal className="reveal-up" style={{
          borderRadius: 'var(--radius-lg)', overflow: 'hidden', aspectRatio: '4/5', boxShadow: 'var(--shadow-md)',
        }}>
          <img src="assets/photos/mariana-01-crop.jpeg" alt="Mariana França sorrindo, em atendimento profissional"
            style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: '50% 15%' }} />
        </div>
        <div data-reveal data-reveal-delay="80" className="reveal-up" style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
          <span style={{
            font: 'var(--text-caption)', letterSpacing: 'var(--letter-spacing-caption)', textTransform: 'uppercase',
            color: 'var(--color-brand-secondary)',
          }}>Sobre Mariana</span>
          <h2 style={{ font: 'var(--text-h2)', color: 'var(--color-text-heading)', margin: 0 }}>
            Uma fisioterapeuta que entende dor — e recuperação — na pele
          </h2>
          <p style={{ font: 'var(--text-body-lg)', color: 'var(--color-text-primary)', margin: 0 }}>
            Com pós-graduação em Traumato-Ortopedia e em Fisioterapia Hospitalar e Respiratória, Mariana dedica sua
            prática ao cuidado do idoso — ajudando pacientes em reabilitação a recuperar autonomia, mobilidade e
            qualidade de vida.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
            <DifferentialCard title="Pós-graduada em Traumato-Ortopedia" description="Formação avançada em fisioterapia ortopédica e traumatológica." />
            <DifferentialCard title="Fisioterapia Hospitalar e Respiratória" description="Cuidado técnico em quadros mais delicados de saúde." />
            <DifferentialCard title="Atendimento domiciliar especializado" description="Comodidade e cuidado onde o paciente estiver." />
            <DifferentialCard title="Equipe multidisciplinar na clínica" description="MET Pilates, Ventosaterapia e Nutricionista sob o mesmo cuidado." />
          </div>
        </div>
      </div>
    </section>
  );
}
window.About = About;