<section id="testimonials" class="py-24 bg-white relative overflow-hidden">
  <!-- Background elements -->
  <div class="absolute inset-0 bg-gradient-to-br from-indigo-50 to-purple-50 opacity-30"></div>
  <div class="absolute inset-0 overflow-hidden">
    <div class="absolute inset-0 opacity-[0.03]" aria-hidden="true">
      <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <pattern id="testimonials-dots" width="20" height="20" patternUnits="userSpaceOnUse">
            <circle cx="10" cy="10" r="1" fill="currentColor" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#testimonials-dots)" />
      </svg>
    </div>
  </div>
  
  <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Section header -->
    <div class="text-center max-w-3xl mx-auto mb-16" data-aos="fade-up">
      {% if sections.testimonials.badge %}
      <span class="inline-block px-4 py-1 rounded-full text-sm font-medium bg-indigo-100 text-indigo-700 mb-4">
        {{ sections.testimonials.badge }}
      </span>
      {% endif %}
      <h2 class="text-4xl font-bold 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>
    
    <!-- Testimonials grid -->
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
      {% for testimonial in sections.testimonials.items %}
      <div 
        class="bg-white rounded-xl shadow-md p-8 border border-gray-100 transition-all duration-300 hover:shadow-lg hover:border-indigo-200"
        data-aos="fade-up" 
        data-aos-delay="{{ loop.index0 * 100 }}"
      >
        <!-- Quote icon -->
        <div class="mb-6">
          <svg class="w-10 h-10 text-indigo-200" fill="currentColor" viewBox="0 0 32 32" aria-hidden="true">
            <path d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z" />
          </svg>
        </div>
        
        <!-- Testimonial content -->
        <blockquote class="text-gray-600 mb-6">
          {{ testimonial.quote }}
        </blockquote>
        
        <!-- Rating stars if available -->
        {% if testimonial.rating %}
        <div class="flex items-center mb-6">
          {% for i in range(1, 6) %}
          <svg class="w-5 h-5 {% if i <= testimonial.rating %}text-yellow-400{% else %}text-gray-300{% endif %}" 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>
          {% endfor %}
        </div>
        {% endif %}
        
        <!-- Author info -->
        <div class="flex items-center">
          {% if testimonial.avatar %}
          <div class="flex-shrink-0 mr-4">
            <img 
              src="{{ testimonial.avatar }}" 
              alt="{{ testimonial.name }}" 
              class="w-12 h-12 rounded-full object-cover"
              loading="lazy"
            >
          </div>
          {% endif %}
          <div>
            <div class="font-medium text-gray-900">{{ testimonial.name }}</div>
            {% if testimonial.title %}
            <div class="text-sm text-gray-500">{{ testimonial.title }}</div>
            {% endif %}
            {% if testimonial.company %}
            <div class="text-sm text-indigo-600">{{ testimonial.company }}</div>
            {% endif %}
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
    
    <!-- Testimonial highlight if available -->
    {% if sections.testimonials.highlight %}
    <div class="mt-16" data-aos="fade-up" data-aos-delay="300">
      <div class="bg-indigo-600 rounded-2xl shadow-xl p-8 md:p-12 text-white">
        <div class="max-w-4xl mx-auto">
          <div class="mb-8">
            <svg class="w-16 h-16 text-indigo-300" fill="currentColor" viewBox="0 0 32 32" aria-hidden="true">
              <path d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z" />
            </svg>
          </div>
          <blockquote class="text-2xl font-medium mb-8">
            {{ sections.testimonials.highlight.quote }}
          </blockquote>
          <div class="flex items-center">
            {% if sections.testimonials.highlight.avatar %}
            <div class="flex-shrink-0 mr-4">
              <img 
                src="{{ sections.testimonials.highlight.avatar }}" 
                alt="{{ sections.testimonials.highlight.name }}" 
                class="w-16 h-16 rounded-full object-cover border-2 border-indigo-300"
                loading="lazy"
              >
            </div>
            {% endif %}
            <div>
              <div class="text-xl font-semibold">{{ sections.testimonials.highlight.name }}</div>
              {% if sections.testimonials.highlight.title %}
              <div class="text-indigo-200">{{ sections.testimonials.highlight.title }}</div>
              {% endif %}
              {% if sections.testimonials.highlight.company %}
              <div class="text-indigo-100">{{ sections.testimonials.highlight.company }}</div>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>
    {% endif %}
    
    <!-- Logos section if available -->
    {% if sections.testimonials.logos %}
    <div class="mt-16" data-aos="fade-up" data-aos-delay="400">
      <div class="text-center mb-8">
        <h3 class="text-xl font-medium text-gray-900">{{ sections.testimonials.logos.title }}</h3>
      </div>
      <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8 items-center">
        {% for logo in sections.testimonials.logos.items %}
        <div class="flex items-center justify-center">
          <img 
            src="{{ logo.src }}" 
            alt="{{ logo.alt }}" 
            class="max-h-12 grayscale opacity-70 hover:grayscale-0 hover:opacity-100 transition-all duration-300"
            loading="lazy"
          >
        </div>
        {% endfor %}
      </div>
    </div>
    {% endif %}
  </div>
</section>
