<section
  id="challenges"
  class="relative py-32 bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 overflow-hidden"
>
  <!-- Subtle background patterns -->
  <div class="absolute inset-0 opacity-10">
    <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiMzMDgyZWMiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDM0aDZ2NmgtNnpNNDIgNDBoNnY2aC02ek0zMCA0MGg2djZoLTZ6TTQyIDM0aDZ2NmgtNnoiLz48L2c+PC9nPjwvc3ZnPg==')]"></div>
  </div>
  
  <!-- Subtle floating elements -->
  <div class="absolute top-1/4 left-10 w-32 h-32 bg-gradient-to-r from-blue-300 to-indigo-300 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-float"></div>
  <div class="absolute top-1/3 right-10 w-40 h-40 bg-gradient-to-r from-indigo-300 to-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-float animation-delay-2000"></div>
  <div class="absolute bottom-1/4 left-1/3 w-36 h-36 bg-gradient-to-r from-sky-300 to-blue-300 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-float animation-delay-4000"></div>
  
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <!-- Section header with modern design -->
    <div class="text-center mb-20">
      <span class="inline-flex items-center px-4 py-1.5 rounded-full bg-blue-100 text-blue-800 text-sm font-medium mb-6 ring-1 ring-blue-200">
        <span class="w-2 h-2 bg-blue-500 rounded-full mr-2 animate-pulse"></span>
        Remarkable Achievements
      </span>
      <h2 class="text-5xl font-bold mb-8 text-slate-800 tracking-tight">
        {{ sections.challenges.title }}
      </h2>
      <p class="text-xl text-slate-600 max-w-3xl mx-auto leading-relaxed">
        {{ sections.challenges.subtitle }}
      </p>
    </div>

    <!-- Modern horizontal scrolling achievements -->
    <div class="relative">
      <!-- Achievement timeline -->
      <div class="absolute top-1/2 left-0 right-0 h-0.5 bg-gradient-to-r from-blue-200 via-indigo-300 to-blue-200 transform -translate-y-1/2"></div>
      
      <!-- Achievement items -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-16 relative">
        {% for item in sections.challenges.items %}
        <div class="relative group">
          <!-- Connection to timeline -->
          <div class="absolute top-0 left-1/2 h-16 w-0.5 bg-blue-200 transform -translate-x-1/2 -translate-y-full"></div>
          
          <!-- Achievement marker -->
          <div class="absolute top-0 left-1/2 w-8 h-8 bg-white rounded-full border-4 border-blue-500 transform -translate-x-1/2 -translate-y-1/2 z-10 group-hover:scale-125 transition-transform duration-300"></div>
          
          <!-- Achievement card -->
          <div class="pt-10 h-full">
            <!-- Icon with gradient background -->
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-600 text-white mb-6 transform transition-transform duration-300 group-hover:rotate-6 group-hover:scale-110">
              <i class="{{ item.icon }} text-3xl"></i>
            </div>
            
            <!-- Achievement value with animated counting -->
            <h3 class="text-5xl font-extrabold text-slate-800 mb-4 counter-value">
              {{ item.value }}
            </h3>
            
            <!-- Achievement label -->
            <p class="text-lg text-slate-600">
              {{ item.label }}
            </p>
            
            <!-- Decorative line -->
            <div class="w-16 h-1 bg-gradient-to-r from-blue-500 to-indigo-500 mt-6 group-hover:w-24 transition-all duration-300"></div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
    
    <!-- Testimonial section -->
    <div class="mt-32 bg-white rounded-2xl shadow-xl p-8 md:p-12 relative overflow-hidden">
      <!-- Decorative elements -->
      <div class="absolute top-0 right-0 w-64 h-64 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-full opacity-70 transform translate-x-1/3 -translate-y-1/3"></div>
      <div class="absolute bottom-0 left-0 w-64 h-64 bg-gradient-to-tr from-blue-100 to-indigo-100 rounded-full opacity-70 transform -translate-x-1/3 translate-y-1/3"></div>
      
      <!-- Content -->
      <div class="relative">
        <!-- Quote icon -->
        <div class="w-16 h-16 mx-auto mb-8 text-blue-500 opacity-20">
          <svg xmlns="http://www.w3.org/2000/svg" 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 -->
        <blockquote class="text-2xl text-center text-slate-700 font-light italic mb-8 max-w-3xl mx-auto">
          "Our team has achieved remarkable results by focusing on innovation and customer satisfaction. The numbers speak for themselves."
        </blockquote>
        
        <!-- Author -->
        <div class="flex items-center justify-center">
          <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="CEO" class="w-full h-full object-cover" />
          </div>
          <div>
            <p class="font-medium text-slate-800">John Doe</p>
            <p class="text-slate-500 text-sm">CEO & Founder</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- CTA section -->
    <div class="mt-20 text-center">
      <a href="#contact" class="inline-flex items-center px-8 py-4 rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-medium shadow-lg hover:shadow-xl transform transition-all duration-300 hover:-translate-y-1">
        <span>Start Your Journey</span>
        <svg class="ml-2 w-5 h-5" 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>
      </a>
    </div>
  </div>
  
  <style>
    /* Custom animations */
    @keyframes float {
      0%, 100% { transform: translate(0, 0) scale(1); }
      25% { transform: translate(15px, -15px) scale(1.05); }
      50% { transform: translate(-10px, 10px) scale(0.95); }
      75% { transform: translate(10px, 15px) scale(1.02); }
    }
    
    .animate-float {
      animation: float 18s ease-in-out infinite;
    }
    
    .animation-delay-2000 {
      animation-delay: 2s;
    }
    
    .animation-delay-4000 {
      animation-delay: 4s;
    }
  </style>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Counter animation
      const counters = document.querySelectorAll('.counter-value');
      
      const observerOptions = {
        threshold: 0.5,
        rootMargin: '0px'
      };
      
      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const counter = entry.target;
            const value = counter.innerText;
            
            if (!isNaN(parseInt(value.replace(/,/g, '')))) {
              const target = parseInt(value.replace(/,/g, ''));
              const duration = 2000;
              const frameDuration = 1000/60;
              const totalFrames = Math.round(duration / frameDuration);
              const easeOutQuad = t => t * (2 - t);
              
              let frame = 0;
              counter.innerText = '0';
              
              const animate = () => {
                frame++;
                const progress = easeOutQuad(frame / totalFrames);
                const currentCount = Math.round(target * progress);
                
                if (currentCount === target) {
                  counter.innerText = target.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                  observer.unobserve(counter);
                } else {
                  counter.innerText = currentCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                  requestAnimationFrame(animate);
                }
              };
              
              requestAnimationFrame(animate);
            }
          }
        });
      }, observerOptions);
      
      counters.forEach(counter => {
        observer.observe(counter);
      });
      
      // Parallax effect on scroll
      window.addEventListener('scroll', function() {
        const scrollY = window.scrollY;
        const section = document.getElementById('challenges');
        const sectionTop = section.offsetTop;
        const sectionHeight = section.offsetHeight;
        
        if (scrollY > sectionTop - window.innerHeight && scrollY < sectionTop + sectionHeight) {
          const parallaxElements = section.querySelectorAll('.animate-float');
          parallaxElements.forEach((el, index) => {
            const speed = 0.05 + (index * 0.02);
            const yPos = (scrollY - sectionTop) * speed;
            el.style.transform = `translateY(${yPos}px) ${el.style.transform}`;
          });
        }
      });
    });
  </script>
</section>