<section id="testimonials" class="relative py-24 bg-slate-950 overflow-hidden" data-aos="fade-up">
  <!-- Decorative background elements -->
  <div class="absolute inset-0 pointer-events-none">
    <!-- Gradient background -->
    <div class="absolute inset-0 bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950">
      <div class="absolute inset-0 opacity-30">
        <div class="absolute top-0 -left-40 w-80 h-80 bg-blue-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob"></div>
        <div class="absolute -bottom-40 right-20 w-80 h-80 bg-cyan-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000"></div>
        <div class="absolute top-40 right-0 w-80 h-80 bg-indigo-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000"></div>
      </div>
    </div>
    
    <!-- Grid pattern -->
    <div class="absolute inset-0 opacity-10" style="background-size: 40px 40px; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);"></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">
      <div class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-slate-800 text-slate-200 border border-slate-700 mb-4">
        <span class="flex h-2 w-2 rounded-full bg-blue-500 mr-2"></span>
        <span>Client Success Stories</span>
      </div>
      
      <h2 class="text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-blue-100 to-blue-200 mb-6">
        {{ sections.testimonials.title }}
      </h2>
      
      <p class="text-xl text-slate-300">
        {{ sections.testimonials.description | default('Hear what our clients have to say about their experience working with us.') }}
      </p>
    </div>
    
    <!-- Testimonial carousel -->
    <div class="testimonial-carousel relative">
      <!-- Controls -->
      <div class="flex justify-between items-center mb-8">
        <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-blue-500 scale-125{% else %}bg-slate-700{% endif %}" data-index="{{ loop.index0 }}"></button>
          {%- endfor %}
        </div>
        
        <div class="flex space-x-3">
          <button class="prev-button p-3 bg-slate-800/80 hover:bg-gradient-to-r hover:from-blue-600 hover:to-indigo-600 rounded-full transition-all duration-300 border border-slate-700 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500/50 group">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-slate-300 group-hover:text-white" 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>
          
          <button class="next-button p-3 bg-slate-800/80 hover:bg-gradient-to-r hover:from-blue-600 hover:to-indigo-600 rounded-full transition-all duration-300 border border-slate-700 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500/50 group">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-slate-300 group-hover:text-white" 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>
      
      <!-- Testimonial cards -->
      <div class="testimonial-track flex transition-transform duration-700 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="testimonial-card group h-full">
            <!-- Card with perspective effect -->
            <div class="card-3d-container h-full perspective-1000">
              <div class="card-3d-wrapper h-full relative transition-transform duration-700 preserve-3d">
                <!-- Card front -->
                <div class="card-front absolute inset-0 backface-hidden">
                  <div class="h-full bg-slate-900/50 backdrop-blur-sm rounded-2xl p-8 border border-slate-800 overflow-hidden transition-all duration-300 group-hover:border-blue-500/30 group-hover:shadow-lg group-hover:shadow-blue-500/10">
                    <!-- Subtle grid overlay -->
                    <div class="absolute inset-0 opacity-10" style="background-size: 20px 20px; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);"></div>
                    
                    <!-- Decorative elements -->
                    <div class="absolute top-0 right-0 w-40 h-40 bg-blue-500/5 rounded-full filter blur-2xl transform translate-x-20 -translate-y-20"></div>
                    
                    <!-- Quote icon -->
                    <div class="text-blue-500/20 mb-6">
                      <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>
                    
                    <!-- Rating stars -->
                    <div class="flex text-yellow-400 mb-4 transform group-hover:scale-105 transition-transform duration-300 origin-left">
                      {% for _ in range(t.rating | default(5)) %}
                      <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 %}
                      
                      {% for _ in range(5 - (t.rating | default(5))) %}
                      <svg class="w-5 h-5 text-slate-700" 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>
                    
                    <!-- Testimonial text -->
                    <p class="text-slate-300 mb-8 relative z-10 line-clamp-4 group-hover:line-clamp-none transition-all duration-300">
                      "{{ t.quote }}"
                    </p>
                    
                    <!-- Author info -->
                    <div class="flex items-center mt-auto">
                      <div class="relative mr-4">
                        {%- if t.avatar %}
                        <div class="w-14 h-14 rounded-xl overflow-hidden border-2 border-blue-500/20 p-0.5 bg-gradient-to-br from-blue-500/20 to-indigo-500/20 group-hover:from-blue-500/40 group-hover:to-indigo-500/40 transition-all duration-300">
                          <img
                            src="{{ t.avatar }}"
                            alt="{{ t.author }}"
                            class="w-full h-full object-cover rounded-lg"
                          />
                        </div>
                        {%- else %}
                        {# Fallback to initials #}
                        {% set parts = t.author.split(' ') %}
                        <div class="w-14 h-14 rounded-xl overflow-hidden border-2 border-blue-500/20 p-0.5 bg-gradient-to-br from-blue-500/20 to-indigo-500/20 group-hover:from-blue-500/40 group-hover:to-indigo-500/40 transition-all duration-300">
                          <div class="w-full h-full rounded-lg bg-gradient-to-br from-blue-500/10 to-indigo-500/10 flex items-center justify-center">
                            <span class="text-xl font-semibold text-blue-400">
                              {{ parts[0][0] }}{{ parts[1][0] if parts|length > 1 else '' }}
                            </span>
                          </div>
                        </div>
                        {%- endif %}
                        
                        <!-- Verification badge -->
                        <div class="absolute -bottom-1 -right-1 bg-blue-500 text-white rounded-full w-6 h-6 flex items-center justify-center border-2 border-slate-900 group-hover:scale-110 transition-transform duration-300">
                          <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                          </svg>
                        </div>
                      </div>
                      
                      <div>
                        <h4 class="font-semibold text-white">{{ t.author }}</h4>
                        <p class="text-sm text-slate-400">{{ t.role }}</p>
                      </div>
                      
                      <!-- Flip card indicator -->
                      <div class="ml-auto text-slate-400 group-hover:text-blue-400 transition-colors duration-300">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 group-hover:rotate-180 transition-transform duration-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16" />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                
                <!-- Card back -->
                <div class="card-back absolute inset-0 backface-hidden rotate-y-180">
                  <div class="h-full bg-slate-900/50 backdrop-blur-sm rounded-2xl p-8 border border-slate-800 overflow-hidden transition-all duration-300 group-hover:border-blue-500/30 group-hover:shadow-lg group-hover:shadow-blue-500/10 flex flex-col">
                    <!-- Subtle grid overlay -->
                    <div class="absolute inset-0 opacity-10" style="background-size: 20px 20px; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);"></div>
                    
                    <!-- Decorative elements -->
                    <div class="absolute bottom-0 left-0 w-40 h-40 bg-indigo-500/5 rounded-full filter blur-2xl transform translate-x-20 translate-y-20"></div>
                    
                    <!-- Company logo or project info -->
                    <div class="mb-6">
                      <div class="inline-block px-3 py-1 rounded-lg bg-slate-800 text-slate-300 text-sm border border-slate-700">
                        <span>{{ t.company | default('Verified Client') }}</span>
                      </div>
                    </div>
                    
                    <!-- Project details -->
                    <div class="space-y-4 flex-grow">
                      <h4 class="text-lg font-semibold text-white">Project Overview</h4>
                      <p class="text-slate-300 text-sm">
                        {{ t.projectDetails | default('We worked with ' + t.author + ' to deliver a comprehensive solution that addressed their specific needs and challenges.') }}
                      </p>
                      
                      <!-- Results or metrics -->
                      <div class="grid grid-cols-2 gap-4 my-6">
                        <div class="bg-slate-800/50 rounded-lg p-4 border border-slate-700">
                          <div class="text-2xl font-bold text-blue-400">{{ t.metrics.improvement | default('85%') }}</div>
                          <div class="text-xs text-slate-400">Improvement</div>
                        </div>
                        <div class="bg-slate-800/50 rounded-lg p-4 border border-slate-700">
                          <div class="text-2xl font-bold text-indigo-400">{{ t.metrics.timeframe | default('3 mo') }}</div>
                          <div class="text-xs text-slate-400">Timeframe</div>
                        </div>
                      </div>
                    </div>
                    
                    <!-- Contact or CTA -->
                    <div class="mt-auto flex items-center justify-between">
                      <a href="{{ t.caseStudyUrl | default('#') }}" class="text-sm text-blue-400 hover:text-blue-300 transition-colors duration-300 flex items-center">
                        View Case Study
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
                        </svg>
                      </a>
                      
                      <!-- Flip back indicator -->
                      <div class="text-slate-400 group-hover:text-blue-400 transition-colors duration-300">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 group-hover:rotate-180 transition-transform duration-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16" />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        {%- endfor %}
      </div>
    </div>
    
    <!-- CTA section -->
    <div class="mt-20 text-center">
      <a href="{{ sections.testimonials.ctaButton.url | default('#contact') }}" class="group relative inline-flex items-center justify-center px-8 py-4 text-base font-medium text-white bg-gradient-to-r from-blue-600 to-indigo-600 rounded-md shadow-lg hover:shadow-blue-500/20 hover:shadow-xl transition-all duration-300">
        <span class="relative flex items-center">
          {{ sections.testimonials.ctaButton.label | default('Get Started Today') }}
          <svg class="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
          </svg>
        </span>
      </a>
    </div>
  </div>
  
  <style>
    /* Animation keyframes */
    @keyframes blob {
      0% {
        transform: translate(0px, 0px) scale(1);
      }
      33% {
        transform: translate(30px, -50px) scale(1.1);
      }
      66% {
        transform: translate(-20px, 20px) scale(0.9);
      }
      100% {
        transform: translate(0px, 0px) scale(1);
      }
    }
    
    .animate-blob {
      animation: blob 7s infinite;
    }
    
    .animation-delay-2000 {
      animation-delay: 2s;
    }
    
    .animation-delay-4000 {
      animation-delay: 4s;
    }
    
    /* 3D card effects */
    .perspective-1000 {
      perspective: 1000px;
    }
    
    .preserve-3d {
      transform-style: preserve-3d;
    }
    
    .backface-hidden {
      backface-visibility: hidden;
    }
    
    .rotate-y-180 {
      transform: rotateY(180deg);
    }
    
    .testimonial-card:hover .card-3d-wrapper {
      transform: rotateY(180deg);
    }
    
    /* Line clamp for testimonial text */
    .line-clamp-4 {
      display: -webkit-box;
      -webkit-line-clamp: 4;
      line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  </style>
  
  <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 slideWidth = 100; // percentage
      let slidesPerView = getSlidesPerView();
      const totalSlides = slides.length;
      let autoplayInterval;
      let autoplaySpeed = 5000; // 5 seconds
      
      // 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
      }
      
      // Set initial width
      function updateSlideWidth() {
        slidesPerView = getSlidesPerView();
        slides.forEach(slide => {
          slide.style.minWidth = `${slideWidth / 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 * (slideWidth / slidesPerView)}%)`;
        
        // Update active dot
        dots.forEach((dot, i) => {
          dot.classList.toggle('bg-blue-500', i === currentIndex);
          dot.classList.toggle('scale-125', i === currentIndex);
          dot.classList.toggle('bg-slate-700', i !== currentIndex);
        });
        
        // Reset all card rotations when changing slides
        slides.forEach(slide => {
          const wrapper = slide.querySelector('.card-3d-wrapper');
          if (wrapper) {
            wrapper.style.transform = '';
          }
        });
      }
      
      // Event listeners for navigation
      nextButton.addEventListener('click', () => {
        goToSlide(currentIndex + 1);
        resetAutoplay();
      });
      
      prevButton.addEventListener('click', () => {
        goToSlide(currentIndex - 1);
        resetAutoplay();
      });
      
      // Dot navigation
      dots.forEach((dot, i) => {
        dot.addEventListener('click', () => {
          goToSlide(i);
          resetAutoplay();
        });
      });
      
      // Autoplay functionality
      function startAutoplay() {
        autoplayInterval = setInterval(() => {
          goToSlide(currentIndex + 1);
        }, autoplaySpeed);
      }
      
      function resetAutoplay() {
        clearInterval(autoplayInterval);
        startAutoplay();
      }
      
      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 3D tilt effect to cards
      const cards = document.querySelectorAll('.testimonial-card');
      
      cards.forEach(card => {
        const cardFront = card.querySelector('.card-front');
        const cardBack = card.querySelector('.card-back');
        
        card.addEventListener('mousemove', e => {
          if (card.querySelector('.card-3d-wrapper').style.transform !== '') return;
          
          const rect = card.getBoundingClientRect();
          const x = e.clientX - rect.left;
          const y = e.clientY - rect.top;
          
          const centerX = rect.width / 2;
          const centerY = rect.height / 2;
          
          const rotateX = (y - centerY) / 20;
          const rotateY = (centerX - x) / 20;
          
          cardFront.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateZ(10px)`;
          cardBack.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateZ(10px) rotateY(180deg)`;
        });
        
        card.addEventListener('mouseleave', () => {
          if (card.querySelector('.card-3d-wrapper').style.transform !== '') return;
          
          cardFront.style.transform = '';
          cardBack.style.transform = 'rotateY(180deg)';
        });
        
        // Toggle card flip on click for mobile
        card.addEventListener('click', e => {
          // Only flip on mobile or when clicking the flip indicator
          if (window.innerWidth <= 768 || e.target.closest('svg')) {
            const wrapper = card.querySelector('.card-3d-wrapper');
            if (wrapper.style.transform === 'rotateY(180deg)') {
              wrapper.style.transform = '';
            } else {
              wrapper.style.transform = 'rotateY(180deg)';
            }
          }
        });
      });
      
      // Initialize first slide
      goToSlide(0);
    });
  </script>
</section>