<section id="gallery" class="py-24 bg-white relative overflow-hidden">
  <!-- Background elements -->
  <div class="absolute inset-0 bg-gradient-to-br from-blue-50 to-indigo-50 opacity-30"></div>
  <div class="absolute inset-0 overflow-hidden">
    <div class="absolute inset-0 opacity-[0.03]" aria-hidden="true">
      <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <pattern id="gallery-grid" width="40" height="40" patternUnits="userSpaceOnUse">
            <path d="M0 0h40v40H0z" fill="none" />
            <path d="M0 0h1v40H0zm40 0v1H0V0zm0 40h-1V0h1zM0 40v-1h40v1z" fill="currentColor" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#gallery-grid)" />
      </svg>
    </div>
  </div>
  
  <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Section header -->
    <div class="text-center max-w-3xl mx-auto mb-16" data-aos="fade-up">
      {% if sections.gallery.badge %}
      <span class="inline-block px-4 py-1 rounded-full text-sm font-medium bg-indigo-100 text-indigo-700 mb-4">
        {{ sections.gallery.badge }}
      </span>
      {% endif %}
      <h2 class="text-4xl font-bold text-gray-900 mb-4">
        {{ sections.gallery.title }}
      </h2>
      <p class="text-lg text-gray-600 max-w-2xl mx-auto">
        {{ sections.gallery.subtitle }}
      </p>
    </div>
    
    <!-- Filter categories if available -->
    {% if sections.gallery.categories %}
    <div class="flex flex-wrap justify-center gap-4 mb-12" data-aos="fade-up" data-aos-delay="100">
      <button class="px-6 py-2 rounded-full text-sm font-medium bg-indigo-600 text-white" data-filter="all">
        All
      </button>
      {% for category in sections.gallery.categories %}
      <button class="px-6 py-2 rounded-full text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors duration-300" data-filter="{{ category.value }}">
        {{ category.label }}
      </button>
      {% endfor %}
    </div>
    {% endif %}
    
    <!-- Gallery grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8" data-gallery-container>
      {% for item in sections.gallery.items %}
      <div 
        class="gallery-item group"
        data-category="{{ item.category|default('') }}"
        data-aos="fade-up" 
        data-aos-delay="{{ loop.index0 * 50 }}"
      >
        <div class="relative overflow-hidden rounded-xl shadow-md">
          <!-- Image with aspect ratio -->
          <div class="aspect-[4/3] w-full">
            <img 
              src="{{ item.image }}" 
              alt="{{ item.title }}" 
              class="w-full h-full object-cover transition-transform duration-500 ease-out group-hover:scale-110"
              loading="lazy"
            >
          </div>
          
          <!-- Overlay with details -->
          <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
            <h3 class="text-xl font-semibold text-white mb-2">{{ item.title }}</h3>
            {% if item.subtitle %}
            <p class="text-white/80">{{ item.subtitle }}</p>
            {% endif %}
            
            <!-- Action buttons if available -->
            {% if item.actions %}
            <div class="flex gap-3 mt-4">
              {% for action in item.actions %}
              <a 
                href="{{ action.url }}" 
                class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/20 text-white hover:bg-white/30 transition-colors duration-300"
                {% if action.modal %}data-modal-trigger="{{ action.modal }}"{% endif %}
                aria-label="{{ action.label }}"
              >
                <i class="{{ action.icon }}" aria-hidden="true"></i>
              </a>
              {% endfor %}
            </div>
            {% endif %}
          </div>
        </div>
        
        <!-- Caption if layout is 'with-caption' -->
        {% if sections.gallery.layout == 'with-caption' %}
        <div class="mt-4">
          <h3 class="text-lg font-medium text-gray-900">{{ item.title }}</h3>
          {% if item.subtitle %}
          <p class="text-gray-600">{{ item.subtitle }}</p>
          {% endif %}
        </div>
        {% endif %}
      </div>
      {% endfor %}
    </div>
    
    <!-- Load more button if available -->
    {% if sections.gallery.load_more %}
    <div class="text-center mt-12" data-aos="fade-up" data-aos-delay="300">
      <button 
        class="inline-flex items-center px-8 py-3 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition-colors duration-300"
        id="gallery-load-more"
      >
        {{ sections.gallery.load_more.label }}
        <svg class="w-4 h-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
        </svg>
      </button>
    </div>
    {% endif %}
  </div>
  
  <!-- Lightbox modal -->
  <div id="gallery-lightbox" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/90 opacity-0 invisible transition-all duration-300">
    <button class="absolute top-4 right-4 z-10 w-10 h-10 rounded-full bg-black/50 text-white flex items-center justify-center hover:bg-black/70 transition-colors duration-300" data-lightbox-close>
      <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>
    
    <div class="relative max-w-5xl w-full max-h-[80vh]">
      <img id="lightbox-image" class="w-full h-full object-contain" src="" alt="">
      <div id="lightbox-caption" class="absolute bottom-0 left-0 right-0 bg-black/50 text-white p-4 opacity-0 transition-opacity duration-300"></div>
    </div>
    
    <!-- Navigation buttons -->
    <button class="absolute top-1/2 left-4 transform -translate-y-1/2 w-12 h-12 rounded-full bg-black/30 flex items-center justify-center text-white hover:bg-black/50 focus:outline-none" id="lightbox-prev">
      <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
      </svg>
    </button>
    <button class="absolute top-1/2 right-4 transform -translate-y-1/2 w-12 h-12 rounded-full bg-black/30 flex items-center justify-center text-white hover:bg-black/50 focus:outline-none" id="lightbox-next">
      <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
      </svg>
    </button>
  </div>
</section>
