<section id="testimonials" class="py-24 bg-gradient-to-br from-gray-50 to-white">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    {# — Section Heading — #}
    <div class="text-center mb-16" data-aos="fade-up">
      <h2 class="text-3xl font-bold mb-4 relative inline-block">
        {{ sections.testimonials.title }}
        <span class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-24 h-1 bg-primary rounded-full"></span>
      </h2>
      {%- if sections.testimonials.subtitle %}
      <p class="text-xl text-gray-600 max-w-3xl mx-auto mt-6">
        {{ sections.testimonials.subtitle }}
      </p>
      {%- endif %}
    </div>

    {# — Testimonial Carousel — #}
    <div class="testimonial-carousel relative overflow-hidden" data-aos="fade-up" data-aos-delay="200">
      <div class="testimonial-track flex transition-transform duration-500 ease-out">
        {%- for t in sections.testimonials.items %}
        <div class="testimonial-slide min-w-full px-4 md:min-w-[50%] lg:min-w-[33.333%]">
          <div class="h-full bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden group">
            <div class="p-6 flex flex-col h-full relative">
              {# Quote icon #}
              <div class="absolute top-4 right-4 text-primary/20 group-hover:text-primary/30 transition-colors duration-300">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" />
                </svg>
              </div>
              
              {# Quote text #}
              <p class="text-gray-700 italic mb-6 flex-grow text-lg leading-relaxed">
                "{{ t.quote }}"
              </p>
              
              {# Rating stars #}
              <div class="flex text-yellow-400 mb-4 transform group-hover:scale-105 transition-transform duration-300 origin-left">
                {# Render filled stars #}
                {% for _ in range(t.rating) %}
                <svg class="w-5 h-5" 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.118l-2.8-2.034c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                </svg>
                {% endfor %}
                
                {# Render empty stars up to 5 #}
                {% for _ in range(5 - t.rating) %}
                <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.118l-2.8-2.034c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                </svg>
                {% endfor %}
              </div>
              
              {# Author info with horizontal line separator #}
              <div class="pt-4 border-t border-gray-100 flex items-center">
                <div class="relative">
                  {%- if t.avatar %}
                  <img
                    src="{{ t.avatar }}"
                    alt="{{ t.author }}"
                    class="w-14 h-14 rounded-full object-cover border-2 border-primary/20 group-hover:border-primary transition-colors duration-300"
                  />
                  {%- else %}
                  {# Fallback to initials #}
                  {% set parts = t.author.split(' ') %}
                  <div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center border-2 border-primary/20 group-hover:border-primary transition-colors duration-300">
                    <span class="text-lg font-semibold text-primary">
                      {{ parts[0][0] }}{{ parts[1][0] if parts|length > 1 else '' }}
                    </span>
                  </div>
                  {%- endif %}
                  <div class="absolute -bottom-1 -right-1 bg-primary text-white rounded-full w-6 h-6 flex items-center justify-center shadow-md">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                    </svg>
                  </div>
                </div>
                <div class="ml-4">
                  <h4 class="font-bold text-gray-900">{{ t.author }}</h4>
                  <p class="text-sm text-gray-500">{{ t.role }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        {%- endfor %}
      </div>
      
      {# Navigation controls #}
      <div class="flex justify-between items-center mt-10">
        <button class="prev-button bg-white rounded-full p-3 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all duration-300 transform hover:-translate-x-1">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
          </svg>
        </button>
        
        <div class="flex space-x-2 dots-container">
          {%- for t in sections.testimonials.items %}
          <button class="w-3 h-3 rounded-full transition-all duration-300 focus:outline-none dot {% if loop.first %}bg-primary scale-125{% else %}bg-gray-300{% endif %}" data-index="{{ loop.index0 }}"></button>
          {%- endfor %}
        </div>
        
        <button class="next-button bg-white rounded-full p-3 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all duration-300 transform hover:translate-x-1">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
          </svg>
        </button>
      </div>
    </div>
  </div>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const track = document.querySelector('.testimonial-track');
      const slides = document.querySelectorAll('.testimonial-slide');
      const nextButton = document.querySelector('.next-button');
      const prevButton = document.querySelector('.prev-button');
      const dots = document.querySelectorAll('.dot');
      
      let currentIndex = 0;
      const totalSlides = slides.length;
      
      // Determine slides per view based on screen size
      function getSlidesPerView() {
        if (window.innerWidth >= 1024) return 3; // lg
        if (window.innerWidth >= 768) return 2; // md
        return 1; // mobile
      }
      
      let slidesPerView = getSlidesPerView();
      
      // Set initial width
      function updateSlideWidth() {
        slidesPerView = getSlidesPerView();
        slides.forEach(slide => {
          slide.style.minWidth = `${100 / slidesPerView}%`;
        });
      }
      
      updateSlideWidth();
      
      function goToSlide(index) {
        const maxIndex = totalSlides - slidesPerView;
        
        // Handle looping
        if (index < 0) index = maxIndex;
        if (index > maxIndex) index = 0;
        
        currentIndex = index;
        track.style.transform = `translateX(-${currentIndex * (100 / slidesPerView)}%)`;
        
        // Update active dot
        dots.forEach((dot, i) => {
          dot.classList.toggle('bg-primary', i === currentIndex);
          dot.classList.toggle('scale-125', i === currentIndex);
          dot.classList.toggle('bg-gray-300', i !== currentIndex);
        });
      }
      
      // Event listeners
      nextButton.addEventListener('click', () => {
        goToSlide(currentIndex + 1);
        clearInterval(autoplayInterval);
        startAutoplay();
      });
      
      prevButton.addEventListener('click', () => {
        goToSlide(currentIndex - 1);
        clearInterval(autoplayInterval);
        startAutoplay();
      });
      
      dots.forEach((dot, i) => {
        dot.addEventListener('click', () => {
          goToSlide(i);
          clearInterval(autoplayInterval);
          startAutoplay();
        });
      });
      
      // Touch swipe support
      let touchStartX = 0;
      let touchEndX = 0;
      
      track.addEventListener('touchstart', e => {
        touchStartX = e.changedTouches[0].screenX;
      });
      
      track.addEventListener('touchend', e => {
        touchEndX = e.changedTouches[0].screenX;
        handleSwipe();
      });
      
      function handleSwipe() {
        const swipeThreshold = 50;
        if (touchEndX < touchStartX - swipeThreshold) {
          goToSlide(currentIndex + 1);
        } else if (touchEndX > touchStartX + swipeThreshold) {
          goToSlide(currentIndex - 1);
        }
      }
      
      // Autoplay
      let autoplayInterval;
      
      function startAutoplay() {
        autoplayInterval = setInterval(() => {
          goToSlide(currentIndex + 1);
        }, 5000);
      }
      
      startAutoplay();
      
      // Pause on hover
      const carousel = document.querySelector('.testimonial-carousel');
      carousel.addEventListener('mouseenter', () => clearInterval(autoplayInterval));
      carousel.addEventListener('mouseleave', startAutoplay);
      
      // Handle window resize
      let resizeTimer;
      window.addEventListener('resize', () => {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(() => {
          const oldSlidesPerView = slidesPerView;
          updateSlideWidth();
          
          if (oldSlidesPerView !== slidesPerView) {
            // Adjust current position when layout changes
            goToSlide(Math.min(currentIndex, totalSlides - slidesPerView));
          }
        }, 250);
      });
      
      // Add keyboard navigation
      document.addEventListener('keydown', e => {
        if (e.key === 'ArrowRight') {
          goToSlide(currentIndex + 1);
        } else if (e.key === 'ArrowLeft') {
          goToSlide(currentIndex - 1);
        }
      });
      
      // Add smooth transition
      track.style.transition = 'transform 500ms ease-out';
    });
  </script>
</section>