/* Pre-launch credibility — honest placeholder slots (story / metric / partner).
   No fake logos or fabricated numbers: clearly-labeled "coming soon" cards. */
function Credibility() {
  const { Badge } = window.RevvoDesignSystem_a89086;
  const { Reveal, Ic } = window;
  const slots = [
    { icon: 'MessageSquareQuote', kind: 'Driver story', note: 'Real beta-driver stories will appear here as ALEROQ rolls out in Phoenix.' },
    { icon: 'TrendingUp', kind: 'Verified metric', note: 'We\u2019ll publish real savings and outcome data once the beta produces it.' },
    { icon: 'Handshake', kind: 'Partner shop', note: 'Vetted partner shops will be featured here as they join the network.' },
  ];
  return (
    <section style={{ position: 'relative', padding: 'var(--space-section) clamp(20px, 5vw, 48px)' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto' }}>
        <Reveal style={{ textAlign: 'center', marginBottom: 44 }}>
          <Badge variant="neutral" style={{ marginBottom: 20 }}>Honest about where we are</Badge>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--fs-display-2)',
            letterSpacing: 'var(--ls-snug)', color: 'var(--text-strong)', margin: '0 0 14px', lineHeight: 'var(--lh-snug)' }}>
            No fake reviews. No borrowed logos.
          </h2>
          <p style={{ fontSize: 'var(--fs-lead)', color: 'var(--text-body)', maxWidth: 560, margin: '0 auto' }}>
            ALEROQ is pre-launch. Rather than invent social proof, we&rsquo;re leaving these spots open &mdash; and we&rsquo;ll fill them with the real thing.
          </p>
        </Reveal>
        <div className="cred-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {slots.map((s, i) => (
            <Reveal key={s.kind} delay={i * 100} style={{ height: '100%' }}>
              <div style={{ height: '100%', boxSizing: 'border-box', minHeight: 200, display: 'flex', flexDirection: 'column',
                background: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.012) 0 12px, transparent 12px 24px), var(--surface)',
                border: '1px dashed var(--border-hover)', borderRadius: 'var(--radius-lg)', padding: 'clamp(24px, 3vw, 32px)' }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'auto' }}>
                  <div style={{ width: 44, height: 44, display: 'flex', alignItems: 'center', justifyContent: 'center',
                    borderRadius: 'var(--radius-md)', background: 'var(--inset)', border: '1px solid var(--border)', color: 'var(--text-muted)' }}>
                    <Ic name={s.icon} size={20} color="var(--text-muted)" />
                  </div>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase',
                    color: 'var(--text-faint)', border: '1px solid var(--line-200)', borderRadius: 'var(--radius-pill)', padding: '4px 10px' }}>Coming soon</span>
                </div>
                <div style={{ marginTop: 28 }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 17, color: 'var(--text-body)', marginBottom: 8 }}>{s.kind}</div>
                  <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--text-muted)', margin: 0, textWrap: 'pretty' }}>{s.note}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Credibility = Credibility;