{#
/**
 * @file
 * Template for FAQ Block.
 *
 * Available variables:
 * - faqs: Array of FAQ items with 'question' and 'answer' keys.
 * - title: Block title.
 * - subtitle: Block subtitle.
 * - button_text: CTA button text.
 * - button_url: CTA button URL.
 */
#}
<section class="py-16 lg:py-24 3xl:py-32 4xl:py-40 bg-white dark:bg-slate-900 transition-colors" data-block-type="faq">
  <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">
    <div class="grid lg:grid-cols-2 gap-12 3xl:gap-16 4xl:gap-20">
      <!-- Left Side -->
      <div>
        <span class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4 block">{{ subtitle }}</span>
        <h2 class="text-3xl sm:text-4xl 3xl:text-5xl font-bold text-gray-900 dark:text-white mb-8">{{ title|raw }}</h2>
        {% if button_text and button_url %}
          <a href="{{ button_url }}" class="inline-block px-6 py-3 border border-gray-300 dark:border-slate-600 text-gray-900 dark:text-white font-medium rounded-lg hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors">
            {{ button_text }}
          </a>
        {% endif %}
      </div>

      <!-- Right Side - FAQ Accordion -->
      <div class="space-y-4">
        {% for faq in faqs %}
          <div class="faq-accordion border-b border-gray-200 dark:border-slate-600 pb-4">
            <button class="faq-accordion-btn w-full flex items-center justify-between py-3 text-left cursor-pointer"{% if loop.first %} data-active="true"{% endif %}>
              <span class="font-semibold text-gray-900 dark:text-white pr-4">{{ faq.question }}</span>
              <svg class="w-5 h-5 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 %} pr-8">
              <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">{{ faq.answer }}</p>
            </div>
          </div>
        {% else %}
          <p class="text-gray-500 dark:text-gray-400">{{ 'No FAQs available.'|t }}</p>
        {% endfor %}
      </div>
    </div>
  </div>
</section>
