<section
  id="faq"
  class="py-24 bg-gray-100 font-inter"
  aria-labelledby="faq-heading"
>
  <div class="max-w-7xl 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="grid md:grid-cols-4 gap-8">
      <div class="md:col-span-1 sticky top-24">
        <ul class="space-y-2">
          {% for item in sections.faq.items %}
          <li>
            <button
              class="w-full text-left text-gray-900 font-medium py-2 px-4 rounded-md hover:bg-gray-50 transition-all duration-600 ease-out focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 faq-button {% if loop.index == 1 %}border-l-4 border-indigo-300{% endif %}"
              onclick="document.querySelectorAll('.faq-content').forEach(el => el.classList.add('hidden')); document.getElementById('faq-content-{{ loop.index }}').classList.remove('hidden'); document.querySelectorAll('.faq-button').forEach(btn => btn.classList.remove('border-indigo-300')); this.classList.add('border-l-4', 'border-indigo-300');"
              aria-controls="faq-content-{{ loop.index }}"
            >
              {{ item.question }}
            </button>
          </li>
          {% endfor %}
        </ul>
      </div>
      <div class="md:col-span-3 bg-white rounded-xl shadow-sm p-8">
        {% for item in sections.faq.items %}
        <div
          id="faq-content-{{ loop.index }}"
          class="faq-content {% if loop.index != 1 %}hidden{% endif %}"
        >
          <h3 class="text-xl font-bold text-gray-900 mb-4">
            {{ item.question }}
          </h3>
          <p class="text-gray-500 text-sm">{{ item.answer }}</p>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</section>
