<section
  id="faq"
  class="py-24 bg-gray-100 font-inter"
  aria-labelledby="faq-heading"
>
  <div class="max-w-4xl mx-auto px-6 lg:px-8">
    <div class="text-center mb-16">
      <h2 id="faq-heading" class="text-3xl lg:text-4xl font-bold text-gray-900">
        {{ sections.faq.title }}
      </h2>
    </div>
    <div class="space-y-4" id="faq-list">
      {% for item in sections.faq.items %}
      <div class="bg-white rounded-xl shadow-sm overflow-hidden">
        <button
          class="w-full px-6 py-4 flex justify-between items-center text-left text-gray-900 font-medium bg-gray-50 transition-all duration-600 ease-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
          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');"
        >
          {{ item.question }}
          <svg
            class="h-5 w-5 text-gray-500 transition-transform duration-600 ease-out"
            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-6 py-4 text-gray-500 text-sm bg-white {% if not item.expanded %}hidden{% endif %} transition-all duration-600 ease-out"
        >
          {{ item.answer }}
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
