<section id="testimonials" class="py-24 bg-white" data-aos="fade-up">
  <div class="max-w-6xl mx-auto px-6">
    <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">
      {{ sections.testimonials.title }}
    </h2>
    <div class="grid md:grid-cols-2 gap-8">
      {% for item in sections.testimonials.items %}
      <div class="bg-gray-50 rounded-xl p-6 shadow-md">
        <p class="text-lg italic mb-4">“{{ item.quote }}”</p>
        <div class="flex items-center gap-4">
          <img
            src="{{ item.avatar }}"
            alt="{{ item.author }}"
            class="w-12 h-12 rounded-full object-cover"
          />
          <div>
            <p class="font-semibold">{{ item.author }}</p>
            <p class="text-sm text-muted">{{ item.role }}</p>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
