// HowItWorks — 6-step walk-through, the "trois résultats" pictograms, and
// the "Ce que Kin-Guard ne fait pas" transparency block.

const STEPS = [
  "Vous activez Kin-Guard sur votre ligne, ou sur celle d’un proche, en quelques minutes.",
  "Les appels de vos contacts connus passent normalement. Les appels inconnus sont d’abord pris en charge par l’assistant.",
  "L’assistant se présente, explique son rôle, et demande à l’appelant son identité et son motif. Si l’appel est enregistré, il en informe l’appelant.",
  "En fonction de la réponse, l’assistant transmet l’appel, prend un message, ou bloque et signale.",
  "Pendant les appels sensibles, l’assistant reste à l’écoute des signaux d’arnaque. Si les signaux deviennent clairs, il peut couper la conversation.",
  "Si un appel est coupé, l’assistant vous explique calmement pourquoi, sans jugement, et vous indique la marche à suivre.",
];

const OUTCOMES = [
  { icon: 'phone-forwarded', label: 'Transmis',           body: 'Kin-Guard a reconnu un appel légitime et vous l’a passé.', tone: 'ok' },
  { icon: 'message-square',  label: 'Message pris',       body: 'Kin-Guard n’est pas certain : il garde une trace pour vous.', tone: 'neutral' },
  { icon: 'shield-x',        label: 'Bloqué et signalé',body: 'Kin-Guard détecte une intention suspecte et arrête l’appel.', tone: 'danger' },
];

const NOT_DOING = [
  'Ne décide pas seul de ce qui est important pour vous. Vous gardez la main sur la liste blanche, les contacts et la sensibilité du filtre.',
  'Ne remplace pas votre jugement. En cas de doute sérieux, le contact de confiance prend le relais.',
  'Ne garantit pas une protection parfaite à 100 %. Aucun outil ne le peut.',
];

function HowItWorks({ setRoute }) {
  return (
    <>
      <Section id="how" tone="default">
        <div style={{ maxWidth: '38rem' }}>
          <div className="eyebrow">Comment ca marche</div>
          <h1 style={{ marginTop: 12 }}>De l’appel à l’alerte, en six étapes.</h1>
          <p className="lead" style={{ marginTop: 16 }}>Concrètement, voici ce que Kin-Guard fait quand un numéro inconnu vous appelle.</p>
        </div>

        {/* Steps */}
        <ol style={{ listStyle: 'none', padding: 0, margin: 0, marginTop: 48, display: 'grid', gap: 16, counterReset: 'step' }}>
          {STEPS.map((s, i) => (
            <li
              key={i}
              className="kg-card"
              style={{
                display: 'grid',
                gridTemplateColumns: 'auto 1fr',
                gap: 20,
                alignItems: 'flex-start',
              }}
            >
              <div
                style={{
                  width: 44, height: 44, borderRadius: 999,
                  background: 'var(--charcoal-900)', color: '#fff',
                  fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}
              >
                {i + 1}
              </div>
              <p style={{ color: 'var(--fg-body)', fontSize: 'var(--fs-base)', paddingTop: 10 }}>{s}</p>
            </li>
          ))}
        </ol>
      </Section>

      {/* Trois résultats */}
      <Section tone="surface">
        <SectionHead
          eyebrow="Trois resultats possibles"
          title="À chaque appel inconnu, trois sorties possibles."
          lead="Pas de zone grise. Chaque appel est traité, puis classé."
        />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 16 }}>
          {OUTCOMES.map((o) => {
            const bg = o.tone === 'ok' ? 'var(--amber-100)'
                      : o.tone === 'danger' ? 'rgba(178,58,72,0.10)'
                      : 'var(--charcoal-50)';
            const ink = o.tone === 'ok' ? 'var(--amber-700)'
                      : o.tone === 'danger' ? 'var(--danger)'
                      : 'var(--charcoal-700)';
            return (
              <div key={o.label} className="kg-card" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <div className="icon-circle" style={{ background: bg, color: ink }}>
                  <Icon name={o.icon} size={20} />
                </div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-xl)', fontWeight: 600, color: 'var(--charcoal-900)', margin: 0 }}>{o.label}</h3>
                <p style={{ color: 'var(--fg-body)', fontSize: 'var(--fs-base)' }}>{o.body}</p>
              </div>
            );
          })}
        </div>
      </Section>

      {/* Ce que Kin-Guard ne fait pas */}
      <Section tone="default">
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.4fr)', gap: 48 }}>
          <div>
            <div className="eyebrow">Transparence</div>
            <h2 style={{ marginTop: 12 }}>Ce que Kin-Guard ne fait pas.</h2>
            <p className="lead" style={{ marginTop: 16 }}>Aussi important que ce qu’il fait : ce qu’il refuse de faire à votre place.</p>
          </div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
            {NOT_DOING.map((n, i) => (
              <li key={i} className="kg-card" style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                <Icon name="x" size={20} style={{ color: 'var(--danger)', marginTop: 2 }} />
                <p style={{ color: 'var(--charcoal-700)', fontSize: 'var(--fs-base)' }}>{n}</p>
              </li>
            ))}
          </ul>
        </div>
      </Section>

      <FinalCTA setRoute={setRoute} />
    </>
  );
}

window.HowItWorks = HowItWorks;