SocialProofBanner Social Proof

---
/**
 * SocialProofBanner
 * Compacte inline vertrouwensbalk met avatar-stack en korte tekst.
 */
interface Props {
  avatars?: string[];
  text: string;
  sub?: string;
  rating?: number;
  reviewCount?: number;
  bg?: 'white' | 'light' | 'dark';
}
const { avatars = [], text, sub, rating = 5, reviewCount, bg = 'light' } = Astro.props;
---
<div class={`spb spb--${bg}`}>
  <div class="spb-inner">
    {avatars.length > 0 && (
      <div class="spb-avatars">
        {avatars.slice(0,5).map((a, i) => (
          <img src={a} alt="" class="spb-avatar" style={`z-index:${5-i}`} />
        ))}
      </div>
    )}
    <div class="spb-text">
      <span class="spb-main">{text}</span>
      {sub && <span class="spb-sub">{sub}</span>}
    </div>
    {rating > 0 && (
      <div class="spb-rating">
        <div class="spb-stars">
          {Array.from({length: Math.round(rating)}).map(() => <span>★</span>)}
        </div>
        {reviewCount && <span class="spb-count">{reviewCount}+ reviews</span>}
      </div>
    )}
  </div>
</div>
<style>
  .spb { padding: 1rem 2rem; }
  .spb--white { background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem; }
  .spb--light { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 0.75rem; }
  .spb--dark { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 0.75rem; }
  .spb-inner { max-width: 700px; margin: 0 auto; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; justify-content: center; }
  .spb-avatars { display: flex; }
  .spb-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; margin-left: -8px; }
  .spb-avatar:first-child { margin-left: 0; }
  .spb-text { display: flex; flex-direction: column; }
  .spb-main { font-size: 0.9375rem; font-weight: 700; }
  .spb--white .spb-main, .spb--light .spb-main { color: #0a0a0a; }
  .spb--dark .spb-main { color: #fff; }
  .spb-sub { font-size: 0.8125rem; }
  .spb--white .spb-sub, .spb--light .spb-sub { color: #6b7280; }
  .spb--dark .spb-sub { color: rgba(255,255,255,0.45); }
  .spb-rating { display: flex; flex-direction: column; align-items: center; }
  .spb-stars { color: #f59e0b; font-size: 0.875rem; letter-spacing: 0.05em; }
  .spb-count { font-size: 0.75rem; }
  .spb--white .spb-count, .spb--light .spb-count { color: #9ca3af; }
  .spb--dark .spb-count { color: rgba(255,255,255,0.3); }
</style>