/* Trust foundation — 4-cell strip stating the core promises. */
function TrustStrip() {
  const { Reveal, Ic } = window;
  const cells = [
    { icon: 'SlidersHorizontal', title: 'You stay in control', desc: 'Every decision is yours. ALEROQ informs \u2014 it never auto-books or upsells.' },
    { icon: 'MessageSquareText', title: 'Plain English, always', desc: 'No jargon, no codes you have to Google. Just what\u2019s wrong, clearly.' },
    { icon: 'ShieldCheck', title: 'Your data, handled with care', desc: 'Vehicle data stays yours. Share only what a repair request needs.' },
    { icon: 'Scale', title: 'Better choices, fair pricing', desc: 'Compare real offers scored on value \u2014 not just the lowest number.' },
  ];
  return (
    <section style={{ position: 'relative', padding: 'clamp(56px, 8vw, 96px) clamp(20px, 5vw, 48px)' }}>
      <div className="trust-grid" style={{
        maxWidth: 'var(--container)', margin: '0 auto',
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
        border: '1px solid var(--border)', borderRadius: 'var(--radius-lg)', overflow: 'hidden',
        background: 'var(--surface)',
      }}>
        {cells.map((c, i) => (
          <Reveal key={c.title} delay={i * 90} style={{ height: '100%' }}>
            <div className="trust-cell" style={{
              height: '100%', boxSizing: 'border-box', padding: 'clamp(24px, 3vw, 34px)',
              borderRight: i < 3 ? '1px solid var(--line-100)' : 'none',
            }}>
              <Ic name={c.icon} size={22} color="var(--positive-bright)" />
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 17,
                color: 'var(--text-strong)', margin: '16px 0 8px', letterSpacing: '-0.01em' }}>{c.title}</h3>
              <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--text-muted)', margin: 0, textWrap: 'pretty' }}>{c.desc}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}
window.TrustStrip = TrustStrip;