TrustBadges Social Proof

---
/**
 * TrustBadges
 * Rij met vertrouwens- en certificeringsbadges.
 */
interface Props {
  headline?: string;
  badges: { icon: string; label: string; sub?: string }[];
  bg?: 'white' | 'light' | 'dark';
}
const { headline, badges, bg = 'light' } = Astro.props;
---
<section class={`trb trb--${bg}`}>
  <div class="trb-inner">
    {headline && <p class="trb-headline">{headline}</p>}
    <div class="trb-badges">
      {badges.map(b => (
        <div class="trb-badge">
          <span class="trb-badge-icon">{b.icon}</span>
          <div class="trb-badge-text">
            <span class="trb-badge-label">{b.label}</span>
            {b.sub && <span class="trb-badge-sub">{b.sub}</span>}
          </div>
        </div>
      ))}
    </div>
  </div>
</section>
<style>
  .trb { padding: 3rem 2rem; }
  .trb--white { background: #fff; border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; }
  .trb--light { background: #f8fafc; border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; }
  .trb--dark { background: #111827; }
  .trb-inner { max-width: 1100px; margin: 0 auto; }
  .trb-headline { text-align: center; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin: 0 0 1.75rem; }
  .trb--white .trb-headline, .trb--light .trb-headline { color: #9ca3af; }
  .trb--dark .trb-headline { color: rgba(255,255,255,0.3); }
  .trb-badges { display: flex; justify-content: center; align-items: center; gap: 0.75rem 2rem; flex-wrap: wrap; }
  .trb-badge { display: flex; align-items: center; gap: 0.625rem; padding: 0.75rem 1.25rem; border-radius: 0.5rem; }
  .trb--white .trb-badge, .trb--light .trb-badge { background: #fff; border: 1px solid #e5e7eb; }
  .trb--dark .trb-badge { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
  .trb-badge-icon { font-size: 1.5rem; }
  .trb-badge-text { display: flex; flex-direction: column; }
  .trb-badge-label { font-size: 0.875rem; font-weight: 700; line-height: 1.2; }
  .trb--white .trb-badge-label, .trb--light .trb-badge-label { color: #0a0a0a; }
  .trb--dark .trb-badge-label { color: #fff; }
  .trb-badge-sub { font-size: 0.75rem; }
  .trb--white .trb-badge-sub, .trb--light .trb-badge-sub { color: #6b7280; }
  .trb--dark .trb-badge-sub { color: rgba(255,255,255,0.4); }
</style>