// Problem — three plain bullets, NO statistics (brief: no unsourced numbers).
const PROBLEM_POINTS = [
  {
    icon: 'phone-call',
    title: 'Les arnaques sont devenues crédibles.',
    body: "Faux conseiller bancaire, faux proche en urgence, faux support technique, faux livreur. Le ton est juste, l'urgence est convaincante.",
  },
  {
    icon: 'alert-triangle',
    title: "N'importe qui peut se faire avoir.",
    body: "Un fraudeur préparé peut convaincre n'importe qui au mauvais moment — fatigue, stress, urgence familiale.",
  },
  {
    icon: 'ear-off',
    title: 'Les anti-spam classiques ne suffisent plus.',
    body: "Ils protègent contre les numéros déjà signalés, pas contre une nouvelle arnaque construite pour paraître légitime.",
  },
];

function Problem() {
  return (
    <Section tone="dark" id="problem">
      <SectionHead
        eyebrow="Le problème"
        title="Pourquoi un filtre ne suffit plus."
        lead="Les arnaques téléphoniques ont changé. Elles ne tombent plus dans les filtres — elles s'y glissent."
      />
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
          gap: 24,
        }}
      >
        {PROBLEM_POINTS.map((p) => (
          <div key={p.title} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div className="icon-circle"><Icon name={p.icon} size={20} /></div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-xl)', fontWeight: 600, color: '#fff', margin: 0 }}>
              {p.title}
            </h3>
            <p style={{ color: 'var(--charcoal-100)', fontSize: 'var(--fs-base)' }}>{p.body}</p>
          </div>
        ))}
      </div>
      <p
        style={{
          marginTop: 40, color: 'var(--charcoal-300)', fontSize: 'var(--fs-sm)',
          maxWidth: '52ch', fontStyle: 'italic',
        }}
      >
        Les chiffres officiels (SSMSI, Banque de France, Cybermalveillance.gouv.fr)
        seront cités avec leur source et leur année dès la mise en ligne.
      </p>
    </Section>
  );
}

window.Problem = Problem;