{#
/**
 * @file
 * Template for Products List Block.
 *
 * Available variables:
 * - hero_title: Hero banner title.
 * - hero_subtitle: Hero banner subtitle.
 * - hero_image: Hero banner image URL.
 * - hero_cta_text: Hero CTA button text.
 * - hero_cta_url: Hero CTA URL.
 * - feature_cards: Array of feature cards.
 * - products_title: Products section title.
 * - categories: Array of category filters.
 * - products: Array of products.
 * - currency_symbol: Currency symbol.
 */
#}
<section class="py-16 lg:py-24 3xl:py-32 4xl:py-40 bg-white dark:bg-slate-900 transition-colors" data-block-type="products_list">
  <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">
    <!-- Hero Banner -->
    <div class="relative rounded-3xl overflow-hidden mb-8 bg-gradient-to-r from-slate-100 to-slate-200 dark:from-slate-800 dark:to-slate-700">
      <div class="grid lg:grid-cols-2 items-center">
        <div class="p-8 lg:p-12">
          <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 leading-tight">{{ hero_title|nl2br }}</h2>
          {% if hero_subtitle %}
            <p class="text-gray-600 dark:text-gray-300 mb-6">{{ hero_subtitle }}</p>
          {% endif %}
          <a href="{{ hero_cta_url }}" class="inline-block px-6 py-3 bg-blue-500 text-white font-medium rounded-lg hover:bg-blue-600 transition-colors">
            {{ hero_cta_text }}
          </a>
        </div>
        <div class="relative h-64 lg:h-80">
          <img src="{{ hero_image }}" alt="{{ hero_title }}" class="absolute inset-0 w-full h-full object-cover object-top">
        </div>
      </div>
    </div>

    <!-- Feature Cards -->
    {% if feature_cards|length > 0 %}
      <div class="grid md:grid-cols-2 gap-6 mb-16">
        {% for card in feature_cards %}
          <a href="{{ card.url }}" class="group relative rounded-2xl overflow-hidden bg-gradient-to-br {{ card.gradient }} p-6 lg:p-8 flex items-end min-h-[280px]">
            <img src="{{ card.image }}" alt="{{ card.title }}" class="absolute right-0 bottom-0 h-full w-1/2 object-cover object-top">
            <div class="relative z-10 max-w-[50%]">
              <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">{{ card.title }}</h3>
              <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">{{ card.subtitle }}</p>
              <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white dark:bg-slate-800 text-gray-900 dark:text-white group-hover:bg-blue-500 group-hover:text-white transition-colors">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 17L17 7M17 7H7M17 7V17"/>
                </svg>
              </span>
            </div>
          </a>
        {% endfor %}
      </div>
    {% endif %}

    <!-- Products Section -->
    <div>
      <!-- Section Header with Filters -->
      <div class="text-center mb-8">
        <h2 class="text-2xl sm:text-3xl 3xl:text-4xl font-bold text-gray-900 dark:text-white mb-6">{{ products_title }}</h2>
        <!-- Filter Tabs -->
        <div class="flex flex-wrap items-center justify-center gap-2">
          <button class="product-filter-btn px-4 py-2 rounded-full text-sm font-medium bg-blue-500 text-white" data-filter="all">{{ 'All'|t }}</button>
          {% for category in categories %}
            <button class="product-filter-btn px-4 py-2 rounded-full text-sm font-medium bg-gray-100 dark:bg-slate-800 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-slate-700 transition-colors" data-filter="{{ category.slug }}">{{ category.name }}</button>
          {% endfor %}
        </div>
      </div>

      <!-- Products Grid -->
      <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6" id="products-grid">
        {% for product in products %}
          <div class="product-card group" data-category="{{ product.category_slug }}">
            <div class="relative rounded-2xl overflow-hidden bg-gray-100 dark:bg-slate-800 aspect-[3/4] mb-3">
              {% if product.image_uri %}
                {{ responsive_image(product.image_uri, 'product', product.title, 'w-full h-full object-cover') }}
              {% elseif product.image_url %}
                <img src="{{ product.image_url }}" alt="{{ product.title }}" class="w-full h-full object-cover" loading="lazy">
              {% else %}
                <div class="w-full h-full flex items-center justify-center">
                  <svg class="w-12 h-12 text-gray-300 dark:text-slate-600" 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 %}
              <button class="product-wishlist absolute top-3 right-3 w-8 h-8 rounded-full bg-white dark:bg-slate-900 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity shadow-sm">
                <svg class="w-4 h-4 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
                </svg>
              </button>
              <a href="{{ product.url }}" class="absolute bottom-3 left-3 right-3 py-2.5 bg-blue-500 text-white text-sm font-medium rounded-lg opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
                <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="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/>
                </svg>
                {{ 'View Product'|t }}
              </a>
            </div>
            {% if product.category %}
              <span class="text-xs font-medium text-blue-500 mb-1 block">{{ product.category }}</span>
            {% endif %}
            <h3 class="font-medium text-gray-900 dark:text-white text-sm mb-1 line-clamp-1">{{ product.title }}</h3>
            <p class="text-gray-900 dark:text-white font-semibold text-sm">
              {% if product.formatted_sale_price %}
                {{ product.formatted_sale_price }}
                <span class="text-gray-400 line-through font-normal">{{ product.formatted_price }}</span>
              {% else %}
                {{ product.formatted_price }}
              {% endif %}
            </p>
          </div>
        {% endfor %}
      </div>
    </div>
  </div>
</section>
