<section id="testimonials" class="py-20 bg-gray-50">
  <div class="container mx-auto px-4">
    <div class="text-center max-w-3xl mx-auto mb-16">
      <h2 class="text-4xl md:text-5xl font-bold mb-4">{{ sections.testimonials.title }}</h2>
      <p class="text-lg text-gray-600">{{ sections.testimonials.subtitle }}</p>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
      {% for testimonial in sections.testimonials.items %}
      <div class="bg-white p-8 rounded-xl shadow-md relative">
        <div class="absolute -top-6 left-8 w-12 h-12 bg-primary rounded-full flex items-center justify-center">
          <span class="w-6 h-6 flex items-center justify-center text-white"><i
              class="ri-double-quotes-l ri-lg"></i></span>
        </div>
        <div class="pt-4">
          <div class="flex items-center mb-4">
            <span class="text-primary">
            {% for i in range(testimonial.rating | int) %}
            <i class='ri-star-fill'></i>
            {% endfor %}
            </span>
          </div>
          <p class="text-gray-700 mb-8 text-lg italic">"{{ testimonial.quote }}"</p>
          <div class="flex items-center">
            <img src="{{ testimonial.avatar.src }}" alt="{{ testimonial.name }}"
              class="w-16 h-16 rounded-full mr-4 object-cover object-top border-2 border-primary">

            <div>
              <h4 class="font-semibold text-lg">{{ testimonial.name }}</h4>
              <p class="text-gray-500">{{ testimonial.title }}</p>
              <div class="flex mt-2">
                <span class="text-xs px-2 py-1 bg-primary/10 text-primary rounded-full mr-2">{{ testimonial.category }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>