// Comparison — anti-spam classique vs Kin-Guard.
const COMPARISON_ROWS = [
  ["Bloquer un numéro déjà signalé",          true,  true ],
  ["Reconnaître un nouveau scénario d'arnaque", false, true ],
  ["Dialoguer avec l'appelant inconnu",        false, true ],
  ["Surveiller pendant l'appel",                false, true ],
  ["Alerter un proche de confiance",            false, true ],
  ["Prendre un message si vous ne répondez pas", false, true ],
];

function Cell({ on }) {
  if (on) {
    return (
      <span style={{ color: 'var(--amber-600)', fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
        <Icon name="check" size={18} /> Oui
      </span>
    );
  }
  return <span style={{ color: 'var(--charcoal-300)' }}>—</span>;
}

function Comparison() {
  return (
    <Section id="comparison" tone="default">
      <SectionHead
        eyebrow="Pas un anti-spam"
        title="En quoi c'est différent d'un bloqueur d'appels ?"
        lead="Les filtres classiques bloquent ce qui est déjà connu. Kin-Guard reconnaît ce qui ne l'est pas encore."
      />
      <div
        style={{
          background: '#fff',
          border: '1px solid var(--border)',
          borderRadius: 'var(--radius-2xl)',
          overflow: 'hidden',
        }}
      >
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: '1.6fr 1fr 1fr',
            fontSize: 14,
            letterSpacing: '0.05em',
            textTransform: 'uppercase',
            fontWeight: 700,
          }}
        >
          <div style={{ padding: '18px 24px', background: 'var(--charcoal-50)', color: 'var(--charcoal-500)' }}>
            Capacité
          </div>
          <div style={{ padding: '18px 24px', background: 'var(--charcoal-50)', color: 'var(--charcoal-500)', textAlign: 'center' }}>
            Anti-spam classique
          </div>
          <div style={{ padding: '18px 24px', background: 'var(--charcoal-900)', color: '#fff', textAlign: 'center' }}>
            Kin-Guard
          </div>
        </div>
        {COMPARISON_ROWS.map(([label, a, b], i) => (
          <div
            key={label}
            style={{
              display: 'grid',
              gridTemplateColumns: '1.6fr 1fr 1fr',
              borderTop: '1px solid var(--border)',
              alignItems: 'center',
            }}
          >
            <div style={{ padding: '18px 24px', color: 'var(--charcoal-700)', fontSize: 'var(--fs-base)' }}>
              {label}
            </div>
            <div style={{ padding: '18px 24px', textAlign: 'center' }}>
              <Cell on={a} />
            </div>
            <div style={{ padding: '18px 24px', textAlign: 'center', background: 'rgba(217,119,6,0.04)' }}>
              <Cell on={b} />
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

window.Comparison = Comparison;