function WhyChooseUs() {
  const points = [
    { title: 'Especializada', description: 'Pós-graduada em Traumato-Ortopedia e Fisioterapia Hospitalar e Respiratória.' },
    { title: 'Humanizada', description: 'Atendimento acolhedor que respeita o ritmo e a história de cada paciente.' },
    { title: 'Resultados', description: 'Pacientes recuperam mobilidade, autonomia e qualidade de vida — de verdade.' },
  ];
  return (
    <section style={{ padding: 'var(--space-9) var(--container-padding-x)', background: 'var(--color-bg-inverse)', color: 'var(--white)', position: 'relative', overflow: 'hidden' }}>
      <img src="assets/illustration/elemento-visual-linha.png" alt="" aria-hidden="true" style={{
        position: 'absolute', bottom: -80, left: -100, width: 420, opacity: 0.08, pointerEvents: 'none', filter: 'brightness(0) invert(1)',
      }} />
      <div style={{ position: 'relative', maxWidth: 'var(--container-width)', margin: '0 auto' }}>
        <div data-reveal className="reveal-up" style={{ textAlign: 'center', marginBottom: 'var(--space-7)' }}>
          <h2 style={{ font: 'var(--text-h2)', color: 'var(--white)', margin: 0 }}>Por que escolher Mariana França</h2>
        </div>
        <div className="why-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-6)' }}>
          {points.map((p, i) => (
            <div key={p.title} data-reveal data-reveal-delay={i * 60} className="reveal-up" style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' }}>
              <h3 style={{ font: 'var(--text-h3)', color: 'var(--green-lime)', margin: 0 }}>{p.title}</h3>
              <p style={{ font: 'var(--text-body)', color: 'rgba(255,255,255,0.85)', margin: 0 }}>{p.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.WhyChooseUs = WhyChooseUs;