{#
/**
 * @file
 * Template for Service Methods Block with accordion.
 *
 * Available variables:
 * - title: Block title.
 * - subtitle: Block subtitle.
 * - image_url: Left side image URL.
 * - methods: Array of service items with 'title', 'description', and 'url'.
 */
#}
<section class="py-16 lg:py-24 3xl:py-32 4xl:py-40 bg-gray-50 dark:bg-slate-800 transition-colors" data-block-type="methods">
  <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">
    <!-- Section Header -->
    <div class="text-center max-w-2xl mx-auto mb-12">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl 3xl:text-5xl font-bold text-gray-900 dark:text-white mb-4">{{ title }}</h2>
      <p class="text-gray-600 dark:text-gray-300">{{ subtitle }}</p>
    </div>

    <div class="grid lg:grid-cols-2 gap-12 3xl:gap-16 4xl:gap-20 items-center">
      <!-- Left Image -->
      <div class="rounded-3xl overflow-hidden aspect-[4/3]">
        {% if image_uri %}
          {{ responsive_image(image_uri, 'service', title, 'w-full h-full object-cover') }}
        {% elseif image_url %}
          <img src="{{ image_url }}" alt="{{ title }}" class="w-full h-full object-cover">
        {% else %}
          {# Placeholder #}
          <div class="w-full h-full bg-gradient-to-br from-emerald-500 to-teal-600 flex items-center justify-center">
            <svg class="w-24 h-24 text-white/30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
            </svg>
          </div>
        {% endif %}
      </div>

      <!-- Right Accordion -->
      <div class="space-y-4">
        {% for method in methods %}
          <div class="methods-accordion border-b border-gray-200 dark:border-slate-600 pb-4">
            <button class="methods-accordion-btn w-full flex items-center justify-between py-3 text-left cursor-pointer"{{ loop.first ? ' data-active="true"' : '' }}>
              <span class="flex items-center gap-3">
                <span class="w-8 h-8 {{ loop.first ? 'bg-blue-500 text-white' : 'bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-gray-400' }} rounded-full flex items-center justify-center font-semibold text-sm">{{ loop.index }}</span>
                <span class="font-semibold text-gray-900 dark:text-white">{{ method.title }}</span>
              </span>
              <svg class="w-5 h-5 text-gray-500 transition-transform{{ loop.first ? ' rotate-180' : '' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
              </svg>
            </button>
            <div class="methods-accordion-content pl-11 pr-4 pb-2{{ loop.first ? '' : ' hidden' }}">
              <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-3">{{ method.description }}</p>
              {% if method.url %}
                <a href="{{ method.url }}" class="inline-flex items-center text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 text-sm font-medium transition-colors">
                  {{ 'Learn more'|t }}
                  <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                  </svg>
                </a>
              {% endif %}
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
  </div>
</section>
