// WhoFor — 5 profile cards. Frames audience broadly, not "seniors only".
const PROFILES = [
  { icon: 'phone-incoming', label: "Vous recevez beaucoup d'appels inconnus." },
  { icon: 'landmark',       label: "Vous redoutez les fraudes bancaires ou administratives." },
  { icon: 'users',          label: "Vous voulez protéger un parent ou un grand-parent." },
  { icon: 'heart-handshake',label: "Vous accompagnez un proche au quotidien." },
  { icon: 'phone-off',      label: "Vous ne voulez pas manquer un appel important." },
];

function WhoFor() {
  return (
    <Section id="who" tone="surface">
      <SectionHead
        eyebrow="Pour qui ?"
        title="Pas seulement pour les seniors."
        lead="Toute personne en France qui veut se protéger, ou protéger un proche, contre les arnaques téléphoniques."
      />
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
          gap: 16,
        }}
      >
        {PROFILES.map((p) => (
          <div key={p.label} className="kg-card" style={{ display: 'flex', gap: 14, alignItems: 'flex-start', padding: 20 }}>
            <div className="icon-circle" style={{ width: 36, height: 36 }}><Icon name={p.icon} size={18} /></div>
            <p style={{ color: 'var(--charcoal-700)', fontSize: 'var(--fs-base)', lineHeight: 1.5 }}>{p.label}</p>
          </div>
        ))}
      </div>
    </Section>
  );
}

window.WhoFor = WhoFor;