<section id="testimonials" class="py-24 bg-gray-50">
  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-16" data-aos="fade-up">
      <div class="w-12 h-px bg-primary mx-auto mb-6"></div>
      <h2 class="text-4xl font-light text-gray-900 mb-4">
        {{ sections.testimonials.title }}
      </h2>
      <p class="text-lg text-gray-600 max-w-2xl mx-auto">
        {{ sections.testimonials.subtitle }}
      </p>
    </div>
    
    {% if sections.testimonials.featured %}
    <div class="bg-white p-12 rounded-lg shadow-sm border border-gray-100 mb-16 max-w-4xl mx-auto" data-aos="fade-up">
      <div class="flex flex-col lg:flex-row items-center gap-8">
        {% if sections.testimonials.featured.avatar %}
        <div class="flex-shrink-0">
          <img src="{{ sections.testimonials.featured.avatar.src }}" 
               alt="{{ sections.testimonials.featured.name }}" 
               class="w-20 h-20 rounded-full object-cover border-2 border-gray-100">
        </div>
        {% endif %}
        
        <div class="flex-1 text-center lg:text-left">
          <blockquote class="text-2xl font-light text-gray-900 mb-6 leading-relaxed">
            "{{ sections.testimonials.featured.quote }}"
          </blockquote>
          
          <div class="space-y-1">
            <div class="font-medium text-gray-900">{{ sections.testimonials.featured.name }}</div>
            <div class="text-gray-600">{{ sections.testimonials.featured.title }}</div>
            
            {% if sections.testimonials.featured.rating %}
            <div class="flex justify-center lg:justify-start gap-1 mt-3">
              {% for i in range(5) %}
              <i class="ri-star-fill text-yellow-400 text-sm"></i>
              {% endfor %}
            </div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
    {% endif %}
    
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
      {% for testimonial in sections.testimonials.items %}
      <div class="bg-white p-8 rounded-lg shadow-sm border border-gray-100" data-aos="fade-up" data-aos-delay="{{ loop.index0 * 100 }}">
        <div class="flex items-center gap-4 mb-6">
          {% if testimonial.avatar %}
          <img src="{{ testimonial.avatar.src }}" 
               alt="{{ testimonial.name }}" 
               class="w-12 h-12 rounded-full object-cover border border-gray-100">
          {% endif %}
          
          <div>
            <div class="font-medium text-gray-900">{{ testimonial.name }}</div>
            <div class="text-sm text-gray-600">{{ testimonial.title }}</div>
          </div>
        </div>
        
        <blockquote class="text-gray-700 mb-4 leading-relaxed">
          "{{ testimonial.quote }}"
        </blockquote>
        
        {% if testimonial.rating %}
        <div class="flex gap-1">
          {% for i in range(testimonial.rating) %}
          <i class="ri-star-fill text-yellow-400 text-sm"></i>
          {% endfor %}
        </div>
        {% endif %}
      </div>
      {% endfor %}
    </div>
  </div>
</section>