<section id="product_grid" 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="product-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(#product-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.product_grid.badge %}
      <span class="inline-block px-4 py-1 rounded-full text-sm font-medium bg-indigo-100 text-indigo-700 mb-4">
        {{ sections.product_grid.badge }}
      </span>
      {% endif %}
      <h2 class="text-4xl font-bold text-gray-900 mb-4">
        {{ sections.product_grid.title }}
      </h2>
      <p class="text-lg text-gray-600 max-w-2xl mx-auto">
        {{ sections.product_grid.subtitle }}
      </p>
    </div>
    
    <!-- Filter categories if available -->
    {% if sections.product_grid.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 Products
      </button>
      {% for category in sections.product_grid.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 %}
    
    <!-- Sort options if available -->
    {% if sections.product_grid.sort_options %}
    <div class="flex justify-end mb-8" data-aos="fade-up" data-aos-delay="150">
      <div class="relative">
        <select id="product-sort" class="appearance-none bg-white border border-gray-300 rounded-lg px-4 py-2 pr-8 text-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
          {% for option in sections.product_grid.sort_options %}
          <option value="{{ option.value }}">{{ option.label }}</option>
          {% endfor %}
        </select>
        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
          <svg class="w-4 h-4" 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>
        </div>
      </div>
    </div>
    {% endif %}
    
    <!-- Products grid -->
    <div class="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8" id="products-container">
      {% for product in sections.product_grid.items %}
      <div 
        class="product-item bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 transition-all duration-300 hover:shadow-lg hover:border-indigo-200 group"
        data-category="{{ product.category|default('') }}"
        data-price="{{ product.price_value|default(0) }}"
        data-aos="fade-up" 
        data-aos-delay="{{ loop.index0 * 50 }}"
      >
        <!-- Product image -->
        <div class="aspect-[4/3] w-full relative overflow-hidden">
          <img 
            src="{{ product.image }}" 
            alt="{{ product.title }}" 
            class="w-full h-full object-cover transition-transform duration-500 ease-out group-hover:scale-105"
            loading="lazy"
          >
          
          <!-- Product badges -->
          {% if product.badges %}
          <div class="absolute top-4 left-4 flex flex-col gap-2">
            {% for badge in product.badges %}
            <span class="inline-block px-3 py-1 text-xs font-medium rounded-full {% if badge.type == 'sale' %}bg-red-500 text-white{% elif badge.type == 'new' %}bg-green-500 text-white{% else %}bg-indigo-100 text-indigo-700{% endif %}">
              {{ badge.text }}
            </span>
            {% endfor %}
          </div>
          {% endif %}
          
          <!-- Quick actions -->
          <div class="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <button class="w-10 h-10 rounded-full bg-white shadow-md flex items-center justify-center text-gray-600 hover:text-indigo-600 transition-colors duration-300 mb-2" aria-label="Add to wishlist">
              <i class="ri-heart-line" aria-hidden="true"></i>
            </button>
            <button class="w-10 h-10 rounded-full bg-white shadow-md flex items-center justify-center text-gray-600 hover:text-indigo-600 transition-colors duration-300" aria-label="Quick view">
              <i class="ri-eye-line" aria-hidden="true"></i>
            </button>
          </div>
        </div>
        
        <!-- Product info -->
        <div class="p-6">
          <!-- Category -->
          {% if product.category_label %}
          <div class="text-sm text-indigo-600 mb-1">{{ product.category_label }}</div>
          {% endif %}
          
          <!-- Title -->
          <h3 class="text-lg font-semibold text-gray-900 mb-2 group-hover:text-indigo-600 transition-colors duration-300">
            <a href="{{ product.url }}">{{ product.title }}</a>
          </h3>
          
          <!-- Rating if available -->
          {% if product.rating %}
          <div class="flex items-center mb-2">
            <div class="flex">
              {% for i in range(1, 6) %}
              <svg class="w-4 h-4 {% if i <= product.rating %}text-yellow-400{% else %}text-gray-300{% endif %}" fill="currentColor" viewBox="0 0 20 20">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
              </svg>
              {% endfor %}
            </div>
            <span class="text-sm text-gray-500 ml-2">({{ product.review_count }})</span>
          </div>
          {% endif %}
          
          <!-- Price -->
          <div class="flex items-center justify-between mt-4">
            <div>
              {% if product.original_price %}
              <span class="text-gray-400 line-through mr-2">{{ product.original_price }}</span>
              {% endif %}
              <span class="text-xl font-bold text-gray-900">{{ product.price }}</span>
            </div>
            
            <!-- Add to cart button -->
            <button 
              class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 hover:bg-indigo-600 hover:text-white transition-colors duration-300"
              aria-label="Add to cart"
              data-product-id="{{ product.id }}"
            >
              <i class="ri-shopping-cart-line" aria-hidden="true"></i>
            </button>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
    
    <!-- Pagination if available -->
    {% if sections.product_grid.pagination %}
    <div class="mt-16 flex justify-center" data-aos="fade-up" data-aos-delay="300">
      <nav class="inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
          <span class="sr-only">Previous</span>
          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
          </svg>
        </a>
        {% for page in sections.product_grid.pagination.pages %}
        <a 
          href="#" 
          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium {% if page.active %}text-indigo-600 border-indigo-500{% else %}text-gray-700 hover:bg-gray-50{% endif %}"
        >
          {{ page.number }}
        </a>
        {% endfor %}
        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
          <span class="sr-only">Next</span>
          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
          </svg>
        </a>
      </nav>
    </div>
    {% endif %}
    
    <!-- Load more button if available -->
    {% if sections.product_grid.load_more %}
    <div class="mt-16 text-center" 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="load-more-products"
      >
        {{ sections.product_grid.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>
</section>
