TestimonialsSingle Social Proof

---
/**
 * TestimonialsSingle
 * Groot, impactvol enkelvoudig klantcitaat. Centraal op pagina.
 */
interface Props {
  quote: string;
  name: string;
  role: string;
  company?: string;
  avatar?: string;
  rating?: number;
  logo?: string;
  bg?: 'white' | 'light' | 'dark';
}
const { quote, name, role, company, avatar, rating = 5, logo, bg = 'white' } = Astro.props;
---
<section class={`tss tss--${bg}`}>
  <div class="tss-inner">
    {rating > 0 && (
      <div class="tss-stars">
        {Array.from({length: rating}).map(() => <span class="tss-star">★</span>)}
      </div>
    )}
    <blockquote class="tss-quote">"{quote}"</blockquote>
    <footer class="tss-footer">
      {avatar && <img src={avatar} alt={name} class="tss-avatar" />}
      <div class="tss-meta">
        <cite class="tss-name">{name}</cite>
        <span class="tss-role">{role}{company && `, ${company}`}</span>
      </div>
      {logo && <img src={logo} alt={company || name} class="tss-logo" />}
    </footer>
  </div>
</section>
<style>
  .tss { padding: 6rem 2rem; }
  .tss--white { background: #fff; }
  .tss--light { background: #f8fafc; }
  .tss--dark { background: #0a0a0a; }
  .tss-inner { max-width: 820px; margin: 0 auto; text-align: center; }
  .tss-stars { display: flex; justify-content: center; gap: 0.25rem; margin-bottom: 1.5rem; }
  .tss-star { color: #f59e0b; font-size: 1.25rem; }
  .tss-quote { font-size: clamp(1.375rem, 2.5vw, 2rem); line-height: 1.55; font-style: italic; margin: 0 0 2.5rem; }
  .tss--white .tss-quote, .tss--light .tss-quote { color: #0a0a0a; }
  .tss--dark .tss-quote { color: rgba(255,255,255,0.85); }
  .tss-footer { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
  .tss-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
  .tss-meta { text-align: left; }
  .tss-name { display: block; font-size: 1rem; font-weight: 700; font-style: normal; }
  .tss--white .tss-name, .tss--light .tss-name { color: #0a0a0a; }
  .tss--dark .tss-name { color: #fff; }
  .tss-role { display: block; font-size: 0.875rem; }
  .tss--white .tss-role, .tss--light .tss-role { color: #6b7280; }
  .tss--dark .tss-role { color: rgba(255,255,255,0.45); }
  .tss-logo { height: 28px; opacity: 0.4; filter: grayscale(1); margin-left: 1.5rem; }
</style>