<section
  id="testimonials"
  aria-label="What our customers are saying"
  class="bg-slate-50 py-20 sm:py-32"
>
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-2xl md:text-center">
      <h2
        class="font-display text-3xl tracking-tight text-slate-900 sm:text-4xl"
      >
        {{ sections.testimonials.title }}
      </h2>
      <p class="mt-4 text-lg tracking-tight text-slate-700">
        {{ sections.testimonials.subtitle }}
      </p>
    </div>
    <div class="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
      {% for testimonial in sections.testimonials.items %}
      <figure
        class="relative rounded-2xl bg-white p-6 shadow-xl shadow-slate-900/10"
      >
        <div class="flex mb-4">
          {% for i in range(5) %} {% if i < testimonial.rating %}
          <svg
            class="w-5 h-5 text-yellow-400"
            fill="currentColor"
            viewBox="0 0 20 20"
          >
            <path
              d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
            />
          </svg>
          {% else %}
          <svg
            class="w-5 h-5 text-gray-300"
            fill="currentColor"
            viewBox="0 0 20 20"
          >
            <path
              d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
            />
          </svg>
          {% endif %} {% endfor %}
        </div>
        <blockquote class="relative">
          <p class="text-lg tracking-tight text-slate-900">
            {{ testimonial.quote }}
          </p>
        </blockquote>
        <figcaption
          class="relative mt-6 flex items-center justify-between border-t border-slate-100 pt-6"
        >
          <div>
            <div class="font-display text-base text-slate-900">
              {{ testimonial.name }}
            </div>
            <div class="mt-1 text-sm text-slate-500">
              {{ testimonial.title }}
            </div>
          </div>
          {% if testimonial.avatar and testimonial.avatar.src %}
          <div class="overflow-hidden rounded-full bg-slate-50">
            <img
              alt="{{ testimonial.name }}"
              loading="lazy"
              width="56"
              height="56"
              decoding="async"
              data-nimg="1"
              class="h-14 w-14 object-cover"
              style="color: transparent"
              src="{{ testimonial.avatar.src }}"
            />
          </div>
          {% endif %}
        </figcaption>
      </figure>
      {% endfor %}
    </div>

    {% if sections.testimonials.stats %}
    <div class="mt-16 grid grid-cols-2 gap-8 md:grid-cols-4">
      <div class="text-center">
        <p class="text-3xl font-bold text-blue-600">
          {{ sections.testimonials.stats.averageRating }}
        </p>
        <p class="mt-1 text-sm text-gray-500">Average Rating</p>
      </div>
      <div class="text-center">
        <p class="text-3xl font-bold text-blue-600">
          {{ sections.testimonials.stats.totalReviews }}+
        </p>
        <p class="mt-1 text-sm text-gray-500">Total Reviews</p>
      </div>
      <div class="text-center">
        <p class="text-3xl font-bold text-blue-600">
          {{ sections.testimonials.stats.satisfaction }}%
        </p>
        <p class="mt-1 text-sm text-gray-500">Satisfaction</p>
      </div>
      <div class="text-center">
        <p class="text-3xl font-bold text-blue-600">
          {{ sections.testimonials.stats.repeatCustomers }}%
        </p>
        <p class="mt-1 text-sm text-gray-500">Repeat Customers</p>
      </div>
    </div>
    {% endif %} {% if sections.testimonials.ctaButton %} {% endif %}
  </div>
</section>
