function Services() {
  const { ServiceCard, Tag } = window.MarianaFranADesignSystem_8735af;
  const icon = (path) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width="28" height="28">{path}</svg>
  );
  const services = [
    { title: 'Fisioterapia Geriátrica', description: 'Especializada em saúde do idoso, prevenção de quedas e manutenção da autonomia no dia a dia.', path: <path d="M12 21s-7-4.35-9.5-8.5C.5 8 2.5 4 6.5 4c2 0 3.5 1.2 4.5 2.7C12 5.2 13.5 4 15.5 4c4 0 6 4 4 8.5C19 16.65 12 21 12 21z" /> },
    { title: 'Traumato-Ortopedia', description: 'Reabilitação de lesões ortopédicas e traumatológicas com técnicas avançadas.', path: <path d="M9 3a3 3 0 0 0-3 3v1a3 3 0 0 0-3 3v1a3 3 0 0 0 3 3v1a3 3 0 0 0 3 3h1a3 3 0 0 0 3-3v-8a3 3 0 0 0-3-3H9z" /> },
    { title: 'Atendimento Domiciliar', description: 'Fisioterapia na comodidade da sua casa, em Paulista e proximidades — sem sair de casa.', path: <path d="M3 11l9-8 9 8M5 10v10h14V10" /> },
    { title: 'MET Pilates', description: 'Método de exercícios terapêuticos para força, mobilidade e equilíbrio.', path: <path d="M4 12a8 8 0 1 0 16 0 8 8 0 0 0-16 0zm8-4v4l3 2" /> },
  ];
  const extras = ['Fisioterapia Hospitalar e Respiratória', 'Ventosaterapia', 'Nutricionista', 'Massagem Terapêutica', 'Reeducação de Marcha'];
  return (
    <section id="servicos" style={{ padding: 'var(--space-9) var(--container-padding-x)', background: 'var(--color-bg-inverse)', position: 'relative', overflow: 'hidden' }}>
      <img src="assets/illustration/elemento-visual-linha.png" alt="" aria-hidden="true" style={{
        position: 'absolute', top: -60, left: -140, width: 460, opacity: 0.07, 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 0 12px' }}>Cuidado especializado, para cada etapa</h2>
          <p style={{ font: 'var(--text-body-lg)', color: 'rgba(255,255,255,0.8)', margin: '0 auto', maxWidth: '56ch' }}>
            Um plano de tratamento pensado para o seu corpo, o seu ritmo e a sua rotina.
          </p>
        </div>
        <div className="services-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--space-5)' }}>
          {services.map((s, i) => (
            <div key={s.title} data-reveal data-reveal-delay={i * 60} className="reveal-up">
              <ServiceCard icon={icon(s.path)} title={s.title} description={s.description} />
            </div>
          ))}
        </div>
        <div data-reveal className="reveal-up" style={{
          display: 'flex', gap: 'var(--space-3)', flexWrap: 'wrap', justifyContent: 'center', marginTop: 'var(--space-7)',
        }}>
          {extras.map((e) => (
            <span key={e} style={{
              display: 'inline-flex', alignItems: 'center', padding: '6px 16px', borderRadius: 'var(--radius-pill)',
              font: '500 14px/1.3 var(--font-family)', background: 'var(--green-mint)', color: 'var(--white)',
            }}>{e}</span>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Services = Services;