// Solution — three cards: Il répond, Il filtre, Il surveille.
const SOLUTION_STEPS = [
  {
    icon: 'phone-incoming',
    title: 'Il répond.',
    body: "Les appels inconnus passent d'abord par l'assistant. Il annonce son rôle et demande à l'appelant de se présenter.",
  },
  {
    icon: 'filter',
    title: 'Il filtre.',
    body: "L'assistant comprend qui appelle et pourquoi, puis décide : transmettre, prendre un message, ou bloquer et signaler.",
  },
  {
    icon: 'ear',
    title: 'Il surveille.',
    body: "Pendant les appels sensibles, Kin-Guard reste attentif aux signaux d'arnaque et peut intervenir si la conversation tourne mal.",
  },
];

function Solution() {
  return (
    <Section id="solution" tone="surface">
      <SectionHead
        eyebrow="La solution"
        title="Il répond, il filtre, il surveille."
        lead="Trois fonctions simples, pensées pour les appels qui ne devraient jamais aboutir — sans bloquer ceux qui comptent."
      />
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
          gap: 20,
        }}
      >
        {SOLUTION_STEPS.map((s, i) => (
          <Reveal key={s.title} delay={i * 80} as="div" className="kg-card reveal" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div className="icon-circle"><Icon name={s.icon} size={20} /></div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-xl)', fontWeight: 600, color: 'var(--charcoal-900)', margin: 0 }}>
              {s.title}
            </h3>
            <p style={{ color: 'var(--fg-body)', fontSize: 'var(--fs-base)' }}>{s.body}</p>
          </Reveal>
        ))}
      </div>

      {/* Mid-CTA — differentiator block */}
      <div
        style={{
          marginTop: 48,
          background: 'var(--bg-wash)',
          borderRadius: 'var(--radius-2xl)',
          padding: 'clamp(28px, 5vw, 48px)',
          display: 'grid',
          gridTemplateColumns: 'auto 1fr',
          gap: 24,
          alignItems: 'flex-start',
        }}
      >
        <div
          style={{
            width: 56, height: 56, borderRadius: 'var(--radius-md)',
            background: 'var(--amber-500)', color: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}
        >
          <Icon name="shield-check" size={26} />
        </div>
        <div>
          <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-2xl)', fontWeight: 500, color: 'var(--amber-700)', margin: 0, lineHeight: 1.2 }}>
            Et si un fraudeur passe quand même&nbsp;?
          </h3>
          <p style={{ marginTop: 12, color: 'var(--charcoal-700)', fontSize: 'var(--fs-base)', maxWidth: '52ch' }}>
            Certains fraudeurs ne se révèlent qu'après avoir gagné votre confiance.
            Kin-Guard reste attentif pendant l'appel&nbsp;: codes bancaires,
            virement urgent, secret imposé, pression émotionnelle… Si les signaux
            apparaissent, l'assistant peut couper l'appel et vous expliquer
            calmement ce qui vient de se passer.
          </p>
        </div>
      </div>
    </Section>
  );
}

window.Solution = Solution;