PartnerLogos Social Proof

---
/**
 * PartnerLogos
 * Gecertificeerde partnerlogo's met badge-stijl.
 */
interface Props {
  eyebrow?: string;
  headline?: string;
  partners: { name: string; badge?: string; src?: string; tier?: 'gold' | 'silver' | 'bronze' | 'partner' }[];
  bg?: 'white' | 'light';
}
const { eyebrow = 'Gecertificeerde partners', headline, partners, bg = 'white' } = Astro.props;
const tierColors: Record<string,string> = { gold: '#f59e0b', silver: '#9ca3af', bronze: '#b45309', partner: '#6366f1' };
---
<section class={`pl pl--${bg}`}>
  <div class="pl-inner">
    {eyebrow && <p class="pl-eyebrow">{eyebrow}</p>}
    {headline && <h2 class="pl-headline">{headline}</h2>}
    <div class="pl-grid">
      {partners.map(p => (
        <div class="pl-partner">
          {p.src
            ? <img src={p.src} alt={p.name} class="pl-img" />
            : <span class="pl-name">{p.name}</span>
          }
          {p.badge && <span class="pl-badge" style={p.tier ? `background: ${tierColors[p.tier] || '#6366f1'}` : ''}>{p.badge}</span>}
        </div>
      ))}
    </div>
  </div>
</section>
<style>
  .pl { padding: 4rem 2rem; }
  .pl--white { background: #fff; border-top: 1px solid #e5e7eb; }
  .pl--light { background: #f8fafc; border-top: 1px solid #e5e7eb; }
  .pl-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
  .pl-eyebrow { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #9ca3af; margin: 0 0 0.75rem; }
  .pl-headline { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: #0a0a0a; letter-spacing: -0.03em; margin: 0 0 2.5rem; }
  .pl-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
  .pl-partner { display: flex; flex-direction: column; align-items: center; gap: 0.625rem; padding: 1.5rem 2rem; border-radius: 0.875rem; min-width: 140px; position: relative; }
  .pl--white .pl-partner { background: #f8fafc; border: 1px solid #e5e7eb; }
  .pl--light .pl-partner { background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 2px 10px rgba(0,0,0,0.04); }
  .pl-img { height: 36px; width: auto; filter: grayscale(0.4); }
  .pl-name { font-size: 1rem; font-weight: 800; color: #374151; }
  .pl-badge { font-size: 0.6875rem; font-weight: 700; padding: 0.2rem 0.625rem; background: var(--color-accent,#6366f1); color: #fff; border-radius: 1rem; letter-spacing: 0.04em; text-transform: uppercase; }
</style>