<section id="faq" class="py-16 bg-white">
  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12" data-aos="fade-up">
      <h2 class="text-3xl font-bold text-gray-900 mb-4">
        {{ sections.faq.title }}
      </h2>
      <p class="text-lg text-gray-600">{{ sections.faq.subtitle }}</p>
      <div class="w-16 h-1 bg-primary rounded-full mx-auto mt-4"></div>
    </div>

    <div class="space-y-4">
      {% for item in sections.faq.items %}
      <div
        class="bg-gray-50 rounded-xl overflow-hidden"
        data-aos="fade-up"
        data-aos-delay="{{ loop.index0 * 100 }}"
      >
        <button
          class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-gray-100 transition-colors"
          onclick="toggleFaq({{ loop.index0 }})"
        >
          <span class="font-medium text-gray-900">{{ item.question }}</span>
          <i
            class="ri-add-line text-primary text-xl transform transition-transform"
            id="faq-icon-{{ loop.index0 }}"
          ></i>
        </button>
        <div
          class="px-6 pb-4 text-gray-600 {% if not item.expanded %}hidden{% endif %}"
          id="faq-content-{{ loop.index0 }}"
        >
          {{ item.answer }}
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
