<section class="testimonials" id="testimonials">
  <div class="testimonials__wrapper">
    <div class="testimonials__header">
      <h2>Das sagen unsere Kunden</h2>
      <p class="text-muted">Echte Ergebnisse für echte Unternehmen.</p>
    </div>
    <div class="testimonials__grid">
      @for (testimonial of testimonials; track testimonial.id; let i = $index) {
        <div
          class="testimonials__card"
          [style.--delay]="(i * 150) + 'ms'"
          opTrack="testimonial_view"
          [opTrackProps]="{ testimonial_id: testimonial.id, company: testimonial.company }">

          <div class="testimonials__quote-icon">
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
              <path d="M10 8C6.686 8 4 10.686 4 14v10c0 1.1.9 2 2 2h2c1.1 0 2-.9 2-2v-6c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2v6c0 1.1.9 2 2 2h2c1.1 0 2-.9 2-2V14c0-3.314-2.686-6-6-6h-6z" fill="currentColor" opacity="0.15"/>
            </svg>
          </div>

          <div class="testimonials__stars">
            @for (star of [1,2,3,4,5]; track star) {
              <span [class.filled]="star <= testimonial.rating">★</span>
            }
          </div>

          <blockquote class="testimonials__text">
            "{{ testimonial.quote }}"
          </blockquote>

          <div class="testimonials__author">
            <div
              class="testimonials__avatar"
              [style.background]="'linear-gradient(135deg, ' + testimonial.gradientFrom + ', ' + testimonial.gradientTo + ')'">
              {{ testimonial.initials }}
            </div>
            <div class="testimonials__author-info">
              <div class="testimonials__name">{{ testimonial.name }}</div>
              <div class="testimonials__role">{{ testimonial.role }}, {{ testimonial.company }}</div>
            </div>
          </div>
        </div>
      }
    </div>
  </div>
</section>
