LogoBar Social Proof

---
/**
 * LogoBar
 * Horizontale rij met klanten- of partnerlogo's.
 *
 * Props:
 * - label?: string — tekst boven de logos ("Vertrouwd door")
 * - logos: Array<{ src: string; alt: string; href?: string }>
 * - grayscale?: boolean — logos zwart-wit (default: true)
 */
interface Props {
  label?: string;
  logos: { src: string; alt: string; href?: string }[];
  grayscale?: boolean;
}

const { label, logos, grayscale = true } = Astro.props;
---

<section class="logo-bar">
  <div class="logo-bar__inner">
    {label && <p class="logo-bar__label">{label}</p>}
    <ul class="logo-bar__list">
      {logos.map(logo => (
        <li class="logo-bar__item">
          {logo.href ? (
            <a href={logo.href} class="logo-bar__link" rel="noopener noreferrer" target="_blank">
              <img
                src={logo.src}
                alt={logo.alt}
                class:list={['logo-bar__logo', { 'logo-bar__logo--grayscale': grayscale }]}
                loading="lazy"
              />
            </a>
          ) : (
            <img
              src={logo.src}
              alt={logo.alt}
              class:list={['logo-bar__logo', { 'logo-bar__logo--grayscale': grayscale }]}
              loading="lazy"
            />
          )}
        </li>
      ))}
    </ul>
  </div>
</section>

<style>
  .logo-bar {
    padding: 3rem 1.5rem;
    background: var(--color-bg);
    border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  }
  .logo-bar__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  .logo-bar__label {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin: 0;
    text-align: center;
  }
  .logo-bar__list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem 3rem;
  }
  .logo-bar__item { display: flex; align-items: center; }
  .logo-bar__link { display: block; }
  .logo-bar__logo {
    height: 2rem;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    display: block;
    opacity: 0.7;
    transition: opacity 0.2s;
  }
  .logo-bar__logo--grayscale { filter: grayscale(1); }
  .logo-bar__logo:hover,
  .logo-bar__link:hover .logo-bar__logo {
    opacity: 1;
    filter: none;
  }
</style>