// Trust — 4 bullet points + link to confiance page.
const TRUST_POINTS = [
  { icon: 'shield',     label: 'Conforme au RGPD.' },
  { icon: 'globe',      label: 'Hébergement visé en France ou dans l’Union européenne.' },
  { icon: 'eye-off',    label: 'Aucune publication publique automatique de numéros signalés.' },
  { icon: 'minimize-2', label: 'Analyse en temps réel, avec le minimum de données conservées.' },
];

function TrustSummary() {
  return (
    <Section id="trust" tone="wash" tight>
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.2fr)', gap: 48, alignItems: 'center' }}>
        <div>
          <div className="eyebrow" style={{ color: 'var(--amber-700)' }}>Confiance</div>
          <h2 style={{ marginTop: 12, color: 'var(--charcoal-900)' }}>
            Vos données restent à leur place : chez vous.
          </h2>
          <p className="lead" style={{ marginTop: 16, color: 'var(--charcoal-700)' }}>
            Une protection contre les arnaques ne devrait pas créer un nouveau risque. Voici les principes que nous tenons.
          </p>
          <a href="#confiance" className="kg-btn kg-btn--secondary" style={{ marginTop: 24 }}>
            Lire la page confiance & confidentialité
            <Icon name="arrow-right" size={16} />
          </a>
        </div>
        <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
          {TRUST_POINTS.map((p) => (
            <li
              key={p.label}
              style={{
                display: 'flex', gap: 16, alignItems: 'flex-start',
                background: 'rgba(255,255,255,0.6)',
                border: '1px solid rgba(180,83,9,0.16)',
                borderRadius: 'var(--radius-lg)',
                padding: '18px 20px',
              }}
            >
              <div style={{ width: 32, height: 32, borderRadius: 'var(--radius-sm)', background: 'var(--amber-500)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Icon name={p.icon} size={16} />
              </div>
              <p style={{ color: 'var(--charcoal-900)', fontSize: 'var(--fs-base)', fontWeight: 700 }}>{p.label}</p>
            </li>
          ))}
        </ul>
      </div>
    </Section>
  );
}

window.TrustSummary = TrustSummary;