<section
  id="faq"
  class="py-32 bg-[#F9F9F9] relative overflow-hidden"
  aria-labelledby="faq-heading"
>
  <!-- Subtle background elements -->
  <div class="absolute inset-0 bg-gradient-to-br from-white via-[#F9F9F9] to-gray-100"></div>
  <div class="absolute top-0 right-0 w-1/3 h-1/3 bg-gradient-to-bl from-gray-100 to-transparent opacity-70"></div>
  
  <div class="max-w-4xl mx-auto px-6 lg:px-8 relative z-10">
    <!-- Section header with elegant typography -->
    <div class="text-center mb-20">
      <span class="inline-block text-xs uppercase tracking-widest text-gray-500 mb-3">Questions & Answers</span>
      <h2 id="faq-heading" class="text-3xl lg:text-4xl font-light text-gray-900 mb-4" style="font-family: {{settings.fonts.heading}}">
        {{ sections.faq.title }}
      </h2>
      <div class="w-16 h-px bg-gray-300 mx-auto mb-6"></div>
      <p class="text-gray-600 font-light max-w-2xl mx-auto" style="font-family: {{settings.fonts.body}}">
        {{ sections.faq.description | default('Find answers to the most common questions about our products and services.') }}
      </p>
    </div>
    
    <!-- Elegant FAQ accordion -->
    <div class="space-y-5" id="faq-list">
      {% for item in sections.faq.items %}
      <div class="group">
        <div class="bg-white border border-gray-100 shadow-sm overflow-hidden transition-all duration-300 hover:border-gray-200 hover:shadow">
          <button
            class="w-full px-8 py-5 flex justify-between items-center text-left text-gray-900 font-light transition-all duration-300 focus:outline-none focus:ring-1 focus:ring-gray-300 focus:ring-inset"
            type="button"
            aria-expanded="{% if item.expanded %}true{% else %}false{% endif %}"
            aria-controls="faq-answer-{{ loop.index }}"
            onclick="const answer = this.nextElementSibling; const isHidden = answer.classList.contains('hidden'); answer.classList.toggle('hidden'); this.setAttribute('aria-expanded', isHidden ? 'true' : 'false'); this.querySelector('svg').classList.toggle('rotate-180'); this.parentElement.classList.toggle('shadow-md');"
            style="font-family: {{settings.fonts.heading}}"
          >
            <span class="flex items-center">
              <span class="w-6 h-px bg-gray-300 mr-4 transition-all duration-300 group-hover:w-8 group-hover:bg-gray-400"></span>
              {{ item.question }}
            </span>
            <svg
              class="h-5 w-5 text-gray-400 transition-transform duration-300 ease-out flex-shrink-0 ml-4"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                fill-rule="evenodd"
                d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.08 1.04l-4.25 4.25a.75.75 0 01-1.08 0l-4.25-4.25a.75.75 0 01.02-1.06z"
                clip-rule="evenodd"
              />
            </svg>
          </button>
          <div
            id="faq-answer-{{ loop.index }}"
            class="px-8 py-6 text-gray-600 text-sm font-light leading-relaxed bg-white border-t border-gray-50 {% if not item.expanded %}hidden{% endif %} transition-all duration-300 ease-out"
            style="font-family: {{settings.fonts.body}}"
          >
            <div class="pl-10">
              {{ item.answer }}
              
              {% if item.links %}
              <div class="mt-4 pt-4 border-t border-gray-100">
                <div class="flex flex-wrap gap-4">
                  {% for link in item.links %}
                  <a href="{{ link.url }}" class="inline-flex items-center text-sm text-gray-500 hover:text-gray-900 transition-colors duration-300 group/link" style="font-family: {{settings.fonts.body}}">
                    <span>{{ link.label }}</span>
                    <svg class="ml-1 w-3 h-3 transform transition-transform duration-300 group-hover/link:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14 5l7 7m0 0l-7 7m7-7H3" />
                    </svg>
                  </a>
                  {% endfor %}
                </div>
              </div>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
    
    <!-- Elegant CTA section -->
    <div class="mt-20 text-center">
      <div class="inline-block mx-auto mb-8">
        <div class="flex items-center justify-center">
          <div class="w-12 h-px bg-gray-300"></div>
          <span class="mx-4 text-xs uppercase tracking-widest text-gray-500" style="font-family: {{settings.fonts.body}}">Need More Help?</span>
          <div class="w-12 h-px bg-gray-300"></div>
        </div>
      </div>
      
      <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
        <a 
          href="{{ sections.faq.ctaButtons.primary.url | default('#contact') }}" 
          class="inline-flex items-center px-8 py-3 border border-gray-900 text-gray-900 font-light text-sm tracking-widest uppercase hover:bg-gray-900 hover:text-white transition-colors duration-300"
          style="font-family: {{settings.fonts.body}}"
        >
          {{ sections.faq.ctaButtons.primary.label | default('Contact Support') }}
        </a>
        
        <a 
          href="{{ sections.faq.ctaButtons.secondary.url | default('#documentation') }}" 
          class="inline-flex items-center px-8 py-3 border border-gray-200 text-gray-500 font-light text-sm tracking-widest uppercase hover:border-gray-300 hover:text-gray-700 transition-colors duration-300"
          style="font-family: {{settings.fonts.body}}"
        >
          {{ sections.faq.ctaButtons.secondary.label | default('Browse Documentation') }}
        </a>
      </div>
    </div>
  </div>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Enhanced FAQ accordion functionality
      const faqButtons = document.querySelectorAll('#faq-list button');
      
      faqButtons.forEach(button => {
        button.addEventListener('click', () => {
          const expanded = button.getAttribute('aria-expanded') === 'true';
          const answerId = button.getAttribute('aria-controls');
          const answerEl = document.getElementById(answerId);
          
          // Close all other FAQs first
          if (!expanded) {
            faqButtons.forEach(otherButton => {
              if (otherButton !== button && otherButton.getAttribute('aria-expanded') === 'true') {
                const otherAnswerId = otherButton.getAttribute('aria-controls');
                const otherAnswerEl = document.getElementById(otherAnswerId);
                
                otherButton.setAttribute('aria-expanded', 'false');
                otherButton.querySelector('svg').classList.remove('rotate-180');
                otherAnswerEl.classList.add('hidden');
                otherButton.parentElement.classList.remove('shadow-md');
              }
            });
          }
        });
      });
      
      // Add subtle hover effect to FAQ items
      const faqItems = document.querySelectorAll('#faq-list .group');
      faqItems.forEach(item => {
        const button = item.querySelector('button');
        const line = button.querySelector('.w-6');
        
        item.addEventListener('mouseenter', () => {
          if (button.getAttribute('aria-expanded') !== 'true') {
            line.classList.add('w-8', 'bg-gray-400');
            line.classList.remove('w-6', 'bg-gray-300');
          }
        });
        
        item.addEventListener('mouseleave', () => {
          if (button.getAttribute('aria-expanded') !== 'true') {
            line.classList.remove('w-8', 'bg-gray-400');
            line.classList.add('w-6', 'bg-gray-300');
          }
        });
      });
    });
  </script>
</section>