PressMentions Social Proof

---
/**
 * PressMentions
 * Persmelding sectie met citaten en publicatienamen.
 */
interface Props {
  eyebrow?: string;
  mentions: { publication: string; quote: string; logo?: string }[];
  bg?: 'white' | 'light' | 'dark';
}
const { eyebrow = 'In de pers', mentions, bg = 'white' } = Astro.props;
---
<section class={`pm pm--${bg}`}>
  <div class="pm-inner">
    {eyebrow && <p class="pm-eyebrow">{eyebrow}</p>}
    <div class="pm-grid">
      {mentions.map(m => (
        <div class="pm-item">
          <blockquote class="pm-quote">"{m.quote}"</blockquote>
          <div class="pm-source">
            {m.logo
              ? <img src={m.logo} alt={m.publication} class="pm-logo" />
              : <span class="pm-publication">{m.publication}</span>
            }
          </div>
        </div>
      ))}
    </div>
  </div>
</section>
<style>
  .pm { padding: 5rem 2rem; }
  .pm--white { background: #fff; border-top: 1px solid #e5e7eb; }
  .pm--light { background: #f8fafc; border-top: 1px solid #e5e7eb; }
  .pm--dark { background: #0a0a0a; }
  .pm-inner { max-width: 1100px; margin: 0 auto; }
  .pm-eyebrow { text-align: center; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 2.5rem; }
  .pm--white .pm-eyebrow, .pm--light .pm-eyebrow { color: #9ca3af; }
  .pm--dark .pm-eyebrow { color: rgba(255,255,255,0.3); }
  .pm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
  .pm-item { padding: 2rem; border-radius: 0.875rem; display: flex; flex-direction: column; gap: 1.25rem; }
  .pm--white .pm-item { background: #f8fafc; border: 1px solid #e5e7eb; }
  .pm--light .pm-item { background: #fff; border: 1px solid #e5e7eb; }
  .pm--dark .pm-item { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); }
  .pm-quote { font-size: 1rem; line-height: 1.65; font-style: italic; margin: 0; flex: 1; }
  .pm--white .pm-quote, .pm--light .pm-quote { color: #374151; }
  .pm--dark .pm-quote { color: rgba(255,255,255,0.65); }
  .pm-source { }
  .pm-logo { height: 20px; opacity: 0.4; filter: grayscale(1); }
  .pm-publication { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.04em; }
  .pm--white .pm-publication, .pm--light .pm-publication { color: #9ca3af; }
  .pm--dark .pm-publication { color: rgba(255,255,255,0.3); }
</style>