<section id="faq" class="py-24 bg-gradient-to-br from-rose-50 via-amber-50 to-yellow-50 relative overflow-hidden">
  <!-- Background elements -->
  <div class="absolute inset-0 overflow-hidden">
    <!-- Honeycomb pattern -->
    <div class="absolute inset-0 opacity-10">
      <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <pattern id="honeycomb-faq-v6" width="56" height="100" patternUnits="userSpaceOnUse" patternTransform="scale(2) rotate(0)">
            <path d="M28 66L0 50L0 16L28 0L56 16L56 50L28 66Z M28 33L56 16L56 50L28 66L0 50L0 16L28 0L56 16L28 33Z" stroke="rgba(245, 158, 11, 0.3)" fill="none"/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#honeycomb-faq-v6)"/>
      </svg>
    </div>
    
    <!-- Floating elements -->
    <div class="absolute top-1/4 left-1/5 w-64 h-64 bg-gradient-to-br from-amber-200/30 to-rose-200/30 rounded-full mix-blend-multiply filter blur-3xl opacity-50 animate-float"></div>
    <div class="absolute bottom-1/3 right-1/4 w-80 h-80 bg-gradient-to-br from-rose-200/30 to-yellow-200/30 rounded-full mix-blend-multiply filter blur-3xl opacity-50 animate-float animation-delay-4000"></div>
  </div>
  
  <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Section header -->
    <div class="text-center mb-16" data-animate="init">
      <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-amber-100 text-amber-800 mb-4">
        <span class="w-2 h-2 rounded-full mr-2 bg-amber-500 animate-pulse"></span>
        {{ sections.faq.badge | default('FAQ') }}
      </span>
      <h2 id="faq-heading-v6" class="text-4xl font-bold text-slate-800 mb-6">{{ sections.faq.title }}</h2>
      <div class="w-24 h-1 bg-gradient-to-r from-amber-400 to-rose-400 mx-auto mb-6 rounded-full" data-animate="underline"></div>
      <p class="text-xl text-slate-600">{{ sections.faq.subtitle }}</p>
    </div>
    
    <!-- FAQ accordion -->
    <div class="space-y-6">
      {% for item in sections.faq.items %}
      <div class="faq-item bg-white/80 backdrop-blur-sm rounded-xl shadow-lg border border-amber-100/50 overflow-hidden hover:shadow-xl transition-all duration-300 hover:border-amber-300/50 group" data-animate="feature" data-delay="{{ loop.index * 100 }}">
        <button class="faq-question w-full text-left px-6 py-4 flex justify-between items-center focus:outline-none focus:ring-2 focus:ring-inset focus:ring-amber-400">
          <div class="flex items-center">
            <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-amber-100 to-rose-100 flex items-center justify-center text-amber-700 mr-4 flex-shrink-0 group-hover:from-amber-200 group-hover:to-rose-200 transition-all duration-300">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
            <span class="text-lg font-medium text-slate-800">{{ item.question }}</span>
          </div>
          <svg class="faq-icon w-6 h-6 text-amber-500 transform transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
          </svg>
        </button>
        <div class="faq-answer px-6 pb-6 hidden">
          <div class="pt-2 pb-3 border-t border-amber-100"></div>
          <div class="pl-14">
            <p class="text-slate-600">{{ item.answer }}</p>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
    
    <!-- CTA section -->
    <div class="mt-16 bg-white/80 backdrop-blur-sm rounded-xl shadow-lg border border-amber-100/50 p-8 text-center" data-animate="feature" data-delay="600">
      <h3 class="text-2xl font-bold text-slate-800 mb-4">{{ sections.faq.cta.title | default('Still have questions?') }}</h3>
      <p class="text-slate-600 mb-6">{{ sections.faq.cta.description | default('Our team is here to help you with any additional questions you might have.') }}</p>
     
    </div>
  </div>
  
  <style>
    /* Animations matching about v5 */
    @keyframes fade-in-up {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes float {
      0% { transform: translate(0px, 0px) scale(1); }
      33% { transform: translate(20px, -30px) scale(1.05); }
      66% { transform: translate(-10px, 20px) scale(0.95); }
      100% { transform: translate(0px, 0px) scale(1); }
    }
    
    .animate-float {
      animation: float 15s ease-in-out infinite;
    }
    
    .animation-delay-4000 {
      animation-delay: 4000ms;
    }
    
    [data-animate="init"] {
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    
    [data-animate="underline"] {
      transform: scaleX(0);
      transform-origin: center;
      transition: transform 0.6s ease-out;
    }
    
    [data-animate="feature"] {
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }
  </style>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Typing effect for heading matching about v5
      const heading = document.getElementById('faq-heading-v6');
      if (heading) {
        const text = heading.textContent.trim();
        heading.textContent = '';
        let i = 0;
        
        function typeWriter() {
          if (i < text.length) {
            heading.textContent += text.charAt(i);
            i++;
            setTimeout(typeWriter, 50);
          }
        }
        
        // Start typing after a short delay
        setTimeout(typeWriter, 800);
      }
      
      // Custom animation system
      const animateElements = document.querySelectorAll('[data-animate]');
      
      // Initial animation for header
      setTimeout(() => {
        const headerElement = document.querySelector('[data-animate="init"]');
        if (headerElement) {
          headerElement.style.opacity = '1';
          headerElement.style.transform = 'translateY(0)';
        }
        
        // Animate underline after header appears
        setTimeout(() => {
          const underlineElement = document.querySelector('[data-animate="underline"]');
          if (underlineElement) {
            underlineElement.style.transform = 'scaleX(1)';
          }
        }, 500);
      }, 300);
      
      // Intersection Observer for scroll-triggered animations
      const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            const delay = entry.target.dataset.delay || 0;
            setTimeout(() => {
              entry.target.style.opacity = '1';
              entry.target.style.transform = 'translateY(0)';
            }, delay);
            observer.unobserve(entry.target);
          }
        });
      }, { threshold: 0.1 });
      
      // Observe all feature elements
      document.querySelectorAll('[data-animate="feature"]').forEach(el => {
        observer.observe(el);
      });
      
      // FAQ accordion functionality
      const faqItems = document.querySelectorAll('.faq-item');
      
      faqItems.forEach(item => {
        const question = item.querySelector('.faq-question');
        const answer = item.querySelector('.faq-answer');
        const icon = item.querySelector('.faq-icon');
        
        // Set initial state based on expanded property
        if (item.dataset.expanded === 'true') {
          answer.classList.remove('hidden');
          icon.classList.add('rotate-180');
        }
        
        question.addEventListener('click', () => {
          // Toggle current item
          answer.classList.toggle('hidden');
          icon.classList.toggle('rotate-180');
          
          // Optional: Close other items
          faqItems.forEach(otherItem => {
            if (otherItem !== item) {
              const otherAnswer = otherItem.querySelector('.faq-answer');
              const otherIcon = otherItem.querySelector('.faq-icon');
              otherAnswer.classList.add('hidden');
              otherIcon.classList.remove('rotate-180');
            }
          });
        });
      });
      
      // Parallax effect on scroll matching about v5
      window.addEventListener('scroll', function() {
        const scrollY = window.pageYOffset;
        const faqSection = document.getElementById('faq');
        if (!faqSection) return;
        
        // Apply parallax to floating elements
        const floatingElements = faqSection.querySelectorAll('.absolute.rounded-full');
        floatingElements.forEach((el, index) => {
          const speed = 0.05 + (index * 0.02);
          const yPos = scrollY * speed;
          el.style.transform = `translate3d(0, ${yPos}px, 0)`;
        });
      });
    });
  </script>
</section>
