LogosBanner Social Proof

---
/**
 * LogosBanner
 * Brede banner met grijze klantlogo's op een gekleurde achtergrond.
 */
interface Props {
  eyebrow?: string;
  logos: { name: string; src?: string }[];
  bg?: string;
}
const { eyebrow = 'Onder vertrouwde merken', logos, bg = '#0a0a0a' } = Astro.props;
---
<section class="lb" style={`background: ${bg}`}>
  <div class="lb-inner">
    {eyebrow && <p class="lb-eyebrow">{eyebrow}</p>}
    <div class="lb-logos">
      {logos.map(l => (
        <div class="lb-logo">
          {l.src
            ? <img src={l.src} alt={l.name} class="lb-img" />
            : <span class="lb-name">{l.name}</span>
          }
        </div>
      ))}
    </div>
  </div>
</section>
<style>
  .lb { padding: 3.5rem 2rem; }
  .lb-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
  .lb-eyebrow { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.3); margin: 0 0 2rem; }
  .lb-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem 3rem; }
  .lb-logo { }
  .lb-img { height: 26px; width: auto; opacity: 0.35; filter: grayscale(1) brightness(5); }
  .lb-name { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; color: rgba(255,255,255,0.2); }
</style>