// Benefits — six short user-facing benefits.
const BENEFITS = [
  { icon: 'heart',      title: 'Moins de stress', body: "Face aux appels inconnus, et face aux moments où vous n’êtes pas sûr." },
  { icon: 'lock',       title: "Moins d'erreurs", body: "Moins de risque de transmettre une information sensible sous pression." },
  { icon: 'clock',      title: 'Protection continue', body: "Même quand la famille n’est pas disponible, l’assistant veille." },
  { icon: 'bell',       title: 'Alertes immédiates', body: "Une tentative suspecte ? Vous, ou votre contact de confiance, êtes prévenu." },
  { icon: 'phone',      title: 'Aucun appel important manqué', body: "Les appels légitimes sont transmis sans friction." },
  { icon: 'sliders-horizontal', title: 'Contrôle complet', body: "Vous, ou un proche autorisé, décidez de la sensibilité et de la liste blanche." },
];

function Benefits() {
  return (
    <Section id="benefits" tone="default">
      <SectionHead
        eyebrow="Bénéfices"
        title="Ce que ça change, concrètement."
        lead="Pas une démonstration technique. Six différences que vous ressentez."
      />
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
          gap: 28,
        }}
      >
        {BENEFITS.map((b) => (
          <div key={b.title} style={{ display: 'flex', gap: 16 }}>
            <div className="icon-circle" style={{ width: 40, height: 40 }}>
              <Icon name={b.icon} size={20} />
            </div>
            <div>
              <h3 style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-lg)', fontWeight: 700, color: 'var(--charcoal-900)', margin: 0, lineHeight: 1.25 }}>
                {b.title}
              </h3>
              <p style={{ marginTop: 6, color: 'var(--fg-body)', fontSize: 'var(--fs-base)' }}>{b.body}</p>
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

window.Benefits = Benefits;