<section
  id="faq"
  aria-labelledby="faq-title"
  class="relative overflow-hidden py-20 sm:py-32 bg-gradient-to-b from-white to-slate-100"
>
  <!-- Decorative background elements -->
  <div class="absolute inset-0 -z-10 overflow-hidden">
    <div
      class="absolute left-1/3 top-1/4 h-64 w-64 -translate-x-1/2 rounded-full bg-blue-500/10 blur-3xl"
    ></div>
    <div
      class="absolute right-1/3 bottom-1/4 h-64 w-64 translate-x-1/2 rounded-full bg-purple-500/10 blur-3xl"
    ></div>
  </div>

  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 relative">
    <div class="mx-auto max-w-2xl text-center">
      <h2
        id="faq-title"
        class="font-display text-3xl tracking-tight text-slate-900 sm:text-4xl"
      >
        {{ sections.faq.title | default('Frequently asked questions') }}
      </h2>
      <p class="mt-4 text-lg tracking-tight text-slate-700">
        {{ sections.faq.subtitle | default('If you can\'t find what you\'re
        looking for, email our support team.') }}
      </p>
    </div>
    <ul
      role="list"
      class="mx-auto mt-16 grid max-w-4xl grid-cols-1 gap-8 md:grid-cols-2 lg:max-w-none lg:grid-cols-3"
    >
      <li>
        <ul role="list" class="flex flex-col gap-y-8">
          {% for item in sections.faq.items %} {% if loop.index0 % 3 == 0 %}
          <li
            class="rounded-lg bg-white p-6 shadow-sm hover:shadow-md transition-shadow duration-200"
          >
            <h3 class="font-display text-lg font-medium text-slate-900">
              {{ item.question }}
            </h3>
            <p class="mt-3 text-sm text-slate-600">{{ item.answer }}</p>
          </li>
          {% endif %} {% endfor %}
        </ul>
      </li>
      <li>
        <ul role="list" class="flex flex-col gap-y-8">
          {% for item in sections.faq.items %} {% if loop.index0 % 3 == 1 %}
          <li
            class="rounded-lg bg-white p-6 shadow-sm hover:shadow-md transition-shadow duration-200"
          >
            <h3 class="font-display text-lg font-medium text-slate-900">
              {{ item.question }}
            </h3>
            <p class="mt-3 text-sm text-slate-600">{{ item.answer }}</p>
          </li>
          {% endif %} {% endfor %}
        </ul>
      </li>
      <li>
        <ul role="list" class="flex flex-col gap-y-8">
          {% for item in sections.faq.items %} {% if loop.index0 % 3 == 2 %}
          <li
            class="rounded-lg bg-white p-6 shadow-sm hover:shadow-md transition-shadow duration-200"
          >
            <h3 class="font-display text-lg font-medium text-slate-900">
              {{ item.question }}
            </h3>
            <p class="mt-3 text-sm text-slate-600">{{ item.answer }}</p>
          </li>
          {% endif %} {% endfor %}
        </ul>
      </li>
    </ul>
  </div>
</section>
