{#
/**
 * @file
 * Template for FAQ Page.
 *
 * Available variables:
 * - faqs: Array of FAQ items with 'question' and 'answer' keys.
 */
#}
<div class="faq-page py-16 lg:py-24 3xl:py-32 4xl:py-40">
  <div class="max-w-7xl 3xl:max-w-8xl 4xl:max-w-9xl mx-auto px-4 sm:px-6 lg:px-8 3xl:px-12">
    {# Header #}
    <div class="text-center mb-12">
      <span class="text-sm font-medium text-blue-500 uppercase tracking-wider mb-4 block">{{ 'FAQs'|t }}</span>
      <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
        {{ 'Frequently Asked Questions'|t }}
      </h1>
      <p class="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
        {{ 'Find answers to commonly asked questions about our services and products.'|t }}
      </p>
    </div>

    {# FAQ Accordion #}
    <div class="space-y-4">
      {% for faq in faqs %}
        <div class="faq-accordion bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-gray-100 dark:border-slate-700 overflow-hidden">
          <button class="faq-accordion-btn w-full flex items-center justify-between p-6 text-left cursor-pointer hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors"{% if loop.first %} data-active="true"{% endif %}>
            <span class="font-semibold text-gray-900 dark:text-white pr-4 text-lg">{{ faq.question }}</span>
            <svg class="w-6 h-6 text-gray-500 transition-transform{% if loop.first %} rotate-180{% endif %} flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              {% if loop.first %}
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
              {% else %}
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
              {% endif %}
            </svg>
          </button>
          <div class="faq-accordion-content{% if not loop.first %} hidden{% endif %} px-6 pb-6">
            <div class="text-gray-600 dark:text-gray-400 leading-relaxed prose dark:prose-invert max-w-none">
              {{ faq.answer|raw }}
            </div>
          </div>
        </div>
      {% else %}
        <div class="text-center py-12">
          <svg class="w-16 h-16 text-gray-300 dark:text-gray-600 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
          </svg>
          <p class="text-gray-500 dark:text-gray-400 text-lg">{{ 'No FAQs available yet.'|t }}</p>
        </div>
      {% endfor %}
    </div>

    {# Contact CTA #}
    <div class="mt-16 text-center bg-gray-50 dark:bg-slate-800 rounded-2xl p-8 lg:p-12">
      <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
        {{ "Still have questions?"|t }}
      </h3>
      <p class="text-gray-600 dark:text-gray-400 mb-6">
        {{ "Can't find what you're looking for? Get in touch with our team."|t }}
      </p>
      <a href="{{ lang_path('/contact') }}" class="inline-flex items-center justify-center px-6 py-3 bg-blue-500 text-white font-medium rounded-lg hover:bg-blue-600 transition-colors">
        {{ 'Contact Us'|t }}
        <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
        </svg>
      </a>
    </div>
  </div>
</div>
