TestimonialsHighlight Social Proof

---
/**
 * TestimonialsHighlight
 * Twee grote testimonials naast een stat-kolom.
 */
interface Props {
  eyebrow?: string;
  testimonials: { quote: string; name: string; role: string; avatar?: string }[];
  stats?: { value: string; label: string }[];
  bg?: 'white' | 'light';
}
const { eyebrow = 'Wat klanten zeggen', testimonials, stats = [], bg = 'light' } = Astro.props;
---
<section class={`th th--${bg}`}>
  <div class="th-inner">
    <div class="th-left">
      {eyebrow && <p class="th-eyebrow">{eyebrow}</p>}
      {stats.length > 0 && (
        <div class="th-stats">
          {stats.map(s => (
            <div class="th-stat">
              <span class="th-stat-val">{s.value}</span>
              <span class="th-stat-lbl">{s.label}</span>
            </div>
          ))}
        </div>
      )}
    </div>
    <div class="th-quotes">
      {testimonials.slice(0, 2).map(t => (
        <blockquote class="th-quote">
          <p class="th-quote-text">"{t.quote}"</p>
          <footer class="th-quote-footer">
            {t.avatar && <img src={t.avatar} alt={t.name} class="th-avatar" />}
            <div>
              <cite class="th-name">{t.name}</cite>
              <span class="th-role">{t.role}</span>
            </div>
          </footer>
        </blockquote>
      ))}
    </div>
  </div>
</section>
<style>
  .th { padding: 5rem 2rem; }
  .th--white { background: #fff; border-top: 1px solid #e5e7eb; }
  .th--light { background: #f8fafc; border-top: 1px solid #e5e7eb; }
  .th-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 2fr; gap: 5rem; align-items: start; }
  .th-eyebrow { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent,#6366f1); margin: 0 0 2rem; }
  .th-stats { display: flex; flex-direction: column; gap: 1.75rem; }
  .th-stat { display: flex; flex-direction: column; }
  .th-stat-val { font-size: 3rem; font-weight: 900; color: #0a0a0a; letter-spacing: -0.04em; line-height: 1; }
  .th-stat-lbl { font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem; }
  .th-quotes { display: flex; flex-direction: column; gap: 1.5rem; }
  .th-quote { margin: 0; padding: 2rem; border-radius: 1rem; }
  .th--white .th-quote { background: #f8fafc; border: 1px solid #e5e7eb; }
  .th--light .th-quote { background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
  .th-quote-text { font-size: 1rem; line-height: 1.65; font-style: italic; color: #374151; margin: 0 0 1.25rem; }
  .th-quote-footer { display: flex; align-items: center; gap: 0.75rem; }
  .th-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
  .th-name { display: block; font-size: 0.9375rem; font-weight: 700; color: #0a0a0a; font-style: normal; }
  .th-role { display: block; font-size: 0.8125rem; color: #9ca3af; }
  @media (max-width: 768px) { .th-inner { grid-template-columns: 1fr; gap: 2.5rem; } }
</style>