{#
/**
 * @file
 * Template for Gallery Block.
 *
 * Available variables:
 * - label_text: Small label text above title.
 * - title: Block title.
 * - description: Block description.
 * - button_text: CTA button text.
 * - button_url: CTA button URL.
 * - images: Array of gallery images.
 */
#}
<section class="py-16 lg:py-24 3xl:py-32 4xl:py-40 bg-white dark:bg-slate-900 transition-colors" data-block-type="gallery">
  <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">
      {% if label_text %}
        <span class="text-sm font-medium text-blue-500 mb-4 block">{{ label_text }}</span>
      {% endif %}
      {% if title %}
        <h2 class="text-3xl sm:text-4xl lg:text-5xl 3xl:text-6xl 4xl:text-7xl font-bold text-gray-900 dark:text-white mb-4 3xl:mb-6">{{ title|nl2br }}</h2>
      {% endif %}
      {% if description %}
        <p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto mb-8">{{ description }}</p>
      {% endif %}
      {% if button_text and button_url %}
        <a href="{{ button_url }}" class="inline-block px-6 py-3 bg-gray-900 dark:bg-white text-white dark:text-gray-900 font-medium rounded-full hover:bg-gray-800 dark:hover:bg-gray-100 transition-colors">
          {{ button_text }}
        </a>
      {% endif %}
    </div>

    <!-- Gallery Grid -->
    {% if images|length > 0 %}
      <div class="pswp-gallery grid grid-cols-2 md:grid-cols-4 gap-3 lg:gap-4" id="gallery-block">
        {% for image in images %}
          {% set index = loop.index %}
          {% set is_bottom_row = index > 4 %}
          {% set aspect_class = is_bottom_row ? 'aspect-[4/3]' : 'aspect-square' %}

          <a href="{{ image.url }}"
             data-pswp-width="{{ image.width|default(1200) }}"
             data-pswp-height="{{ image.height|default(1200) }}"
             class="gallery-item block rounded-2xl overflow-hidden {{ aspect_class }} group {{ is_bottom_row ? 'relative' : '' }}"
             target="_blank">
            {% if image.uri %}
              {{ responsive_image(image.uri, 'gallery', image.alt|default('Gallery image'), 'w-full h-full object-cover transition-transform duration-500 group-hover:scale-110') }}
            {% else %}
              <img src="{{ image.thumb|default(image.url) }}"
                   alt="{{ image.alt|default('Gallery image') }}"
                   class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
            {% endif %}
            {% if is_bottom_row %}
              <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/60 to-transparent">
                <div class="flex items-center justify-between">
                  <span class="text-white text-sm font-medium">{{ '%03d'|format(index - 4) }}</span>
                  <span class="text-white/80 text-sm flex items-center gap-1">
                    {{ 'Details'|t }}
                    <svg class="w-4 h-4" 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>
                  </span>
                </div>
              </div>
            {% endif %}
          </a>
        {% endfor %}
      </div>
    {% else %}
      <p class="text-center text-gray-500 dark:text-gray-400">{{ 'No gallery images available.'|t }}</p>
    {% endif %}
  </div>
</section>
