function CheckIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" width="18" height="18">
      <path d="M20 6L9 17l-5-5" />
    </svg>
  );
}

function Lacos() {
  const { Button } = window.MarianaFranADesignSystem_8735af;
  const benefits = [
    'Prevenção de quedas',
    'Melhora da mobilidade',
    'Mais independência no dia a dia',
    'Mais qualidade de vida',
    'Mais segurança para a família',
  ];
  return (
    <section id="lacos" style={{ padding: 'var(--space-9) var(--container-padding-x)', background: 'var(--white)' }}>
      <div className="lacos-grid" style={{
        maxWidth: 'var(--container-width)', margin: '0 auto', display: 'grid',
        gridTemplateColumns: '1.05fr 0.95fr', gap: 'var(--space-8)', alignItems: 'center',
      }}>
        <div data-reveal 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)',
          }}>Programa Laços</span>
          <h2 style={{ font: 'var(--text-h2)', color: 'var(--color-text-heading)', margin: 0, textWrap: 'balance' }}>
            Cuidar da vida vai muito além de tratar uma dor
          </h2>
          <p style={{ font: 'var(--text-body-lg)', color: 'var(--color-text-primary)', margin: 0 }}>
            Muita gente ainda acha que fisioterapia é só fazer alguns exercícios ou aliviar a dor por um momento. Mas
            quando falamos de cuidado com o corpo — principalmente na terceira idade — estamos falando de algo maior.
          </p>
          <p style={{ font: 'var(--text-body-lg)', color: 'var(--color-text-primary)', margin: 0 }}>
            Foi pensando nisso que criamos o <strong style={{ color: 'var(--color-text-heading)' }}>Programa Laços</strong>:
            um acompanhamento pensado para fortalecer o corpo, preservar a autonomia e cuidar de quem você ama, com
            atenção contínua. Porque quem ama, cuida — e cuidar também é criar laços.
          </p>
          <div className="cta-row" style={{ display: 'flex' }}>
            <Button variant="primary" size="lg" as="a" href="https://wa.me/5581997500346">Conheça o Programa Laços</Button>
          </div>
        </div>
        <div data-reveal data-reveal-delay="80" className="reveal-up" style={{
          background: 'var(--white)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-md)',
          border: '1px solid var(--color-border)', padding: 'var(--space-6)',
          display: 'flex', flexDirection: 'column', gap: 'var(--space-4)',
        }}>
          {benefits.map((b) => (
            <div key={b} style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)' }}>
              <span style={{
                display: 'flex', alignItems: 'center', justifyContent: 'center', width: 32, height: 32,
                borderRadius: '50%', background: 'var(--color-bg-surface-muted)', color: 'var(--color-brand-primary)',
                flexShrink: 0,
              }}>
                <CheckIcon />
              </span>
              <span style={{ font: 'var(--text-body-lg)', color: 'var(--color-text-heading)', fontWeight: 500 }}>{b}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Lacos = Lacos;