{#
/**
 * @file
 * Template for Product Sale Hero Block.
 *
 * Available variables:
 * - badge_text: Sale badge text.
 * - product_title: Product title.
 * - product_description: Product description.
 * - original_price: Original price formatted.
 * - sale_price: Sale price formatted.
 * - image_url: Product image URL.
 * - product_url: Product page URL.
 * - cta_text: CTA button text.
 */
#}
<section class="py-16 lg:py-24 3xl:py-32 4xl:py-40 bg-gradient-to-br from-gray-50 to-white dark:from-slate-800 dark:to-slate-900 transition-colors overflow-hidden" data-block-type="hero_product_sale">
  <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">
    <div class="grid lg:grid-cols-2 gap-8 lg:gap-12 3xl:gap-16 4xl:gap-20 items-center">
      <!-- Left Content -->
      <div class="order-2 lg:order-1">
        <!-- Sale Badge -->
        <div class="inline-flex items-center gap-2 mb-6">
          <span class="w-2 h-2 bg-red-500 rounded-full animate-pulse"></span>
          <span class="text-red-500 font-semibold text-sm uppercase tracking-wide">{{ badge_text }}</span>
        </div>

        <!-- Product Title -->
        <h2 class="text-4xl sm:text-5xl lg:text-6xl 3xl:text-7xl 4xl:text-8xl font-bold text-gray-900 dark:text-white leading-tight mb-6 3xl:mb-8">
          {{ product_title|nl2br }}
        </h2>

        <!-- Price -->
        <div class="flex items-center gap-3 mb-6">
          {% if sale_price %}
            <span class="text-gray-400 line-through text-lg">{{ original_price }}</span>
            <span class="text-red-500 text-3xl font-bold">{{ sale_price }}</span>
          {% else %}
            <span class="text-gray-900 dark:text-white text-3xl font-bold">{{ original_price }}</span>
          {% endif %}
        </div>

        <!-- Description -->
        {% if product_description %}
          <p class="text-gray-600 dark:text-gray-300 mb-8 max-w-md leading-relaxed">
            {{ product_description|slice(0, 200) }}{% if product_description|length > 200 %}...{% endif %}
          </p>
        {% endif %}

        <!-- CTA Button -->
        <a href="{{ product_url }}" class="inline-flex items-center gap-3 px-8 py-4 3xl:px-10 3xl:py-5 3xl:text-lg bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg transition-colors shadow-lg shadow-blue-500/25">
          <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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
          </svg>
          {{ cta_text }}
        </a>
      </div>

      <!-- Right Image -->
      <div class="order-1 lg:order-2 relative">
        <div class="relative z-10">
          {% if image_url %}
            <img
              src="{{ image_url }}"
              alt="{{ product_title }}"
              class="w-full h-auto drop-shadow-2xl transform hover:scale-105 transition-transform duration-500"
            >
          {% else %}
            <div class="w-full aspect-square bg-gray-200 dark:bg-slate-700 rounded-2xl flex items-center justify-center">
              <svg class="w-24 h-24 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 %}
        </div>
        <!-- Background decoration -->
        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[120%] h-[120%] bg-gradient-to-br from-gray-100 to-gray-200 dark:from-slate-700 dark:to-slate-800 rounded-full opacity-50 -z-10"></div>
      </div>
    </div>
  </div>
</section>
