<section id="gallery" class="py-24 bg-gradient-to-b from-white to-gray-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-20" data-aos="zoom-in">
      <h2 class="text-5xl md:text-6xl font-black text-gray-900 mb-6">
        {{ sections.gallery.title }}
      </h2>
      <div
        class="w-32 h-2 bg-gradient-to-r from-primary to-secondary rounded-full mx-auto mt-8"
      ></div>
    </div>

    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
      {% for item in sections.gallery.items %}
      <div
        class="group relative"
        data-aos="flip-up"
        data-aos-delay="{{ loop.index0 * 100 }}"
      >
        <div
          class="absolute -inset-4 bg-gradient-to-r from-primary/20 to-secondary/20 rounded-3xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"
        ></div>

        <div
          class="relative overflow-hidden rounded-3xl shadow-2xl border-4 border-white transform group-hover:scale-105 transition-all duration-500"
        >
          <img
            src="{{ item.src }}"
            alt="{{ item.alt }}"
            class="w-full h-80 object-cover group-hover:scale-110 transition-transform duration-700"
          />

          <div
            class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"
          >
            <div
              class="absolute bottom-0 left-0 right-0 p-8 text-white transform translate-y-8 group-hover:translate-y-0 transition-transform duration-500"
            >
              {% if item.caption %}
              <h3 class="text-xl font-bold mb-2">{{ item.caption }}</h3>
              {% endif %} {% if item.lightbox %}
              <div class="flex items-center gap-2">
                <i class="ri-zoom-in-line text-xl"></i>
                <span class="font-medium">Click to view</span>
              </div>
              {% endif %}
            </div>
          </div>

          {% if item.lightbox %}
          <div
            class="absolute top-4 right-4 w-12 h-12 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-500"
          >
            <i class="ri-fullscreen-line text-xl"></i>
          </div>
          {% endif %}
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
