<section data-component-type="Content" class="bg-[#0019BA] py-12 lg:py-0 overflow-hidden  relative" data-component-slug="ss-interior-kitchen-flash_banner">
  <div class="max-w-[90%] mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex flex-col lg:flex-row items-center justify-between gap-12 lg:gap-20">

      <!-- Left Content -->
      <div class="w-full lg:w-1/2 text-white py-12">
        <h2 data-node="flash_heading" data-node-type="textarea" data-node-label="Heading" data-node-default="Flash Sale is on live!" class="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
          {{flash_heading}}
        </h2>

        <p data-node="flash_description" data-node-type="textarea" data-node-label="Description" data-node-default="Discover premium appliances at irresistible prices, giving your kitchen more style, power, and innovation, only for a limited time." class="text-lg text-gray-200 mb-10 max-w-xl leading-relaxed">
          {{flash_description}}
        </p>


        <div class="mb-12" data-countdown-container>
          <div class="flex flex-wrap items-baseline gap-2 sm:gap-6 text-4xl sm:text-5xl lg:text-6xl font-mono mb-10 tracking-widest">
            <div class="flex items-baseline">
              <span data-countdown="days" class="text-[18px] md:text-4xl font-bold text-white">00</span>
              <p class="text-white mt-2 text-[18px] md:text-4xl font-bold text-white ml-1">d</p>
            </div>
            <span class="opacity-50 text-[18px] md:text-4xl">:</span>
            <div class="flex items-baseline ">

              <span data-countdown="hours" class="text-[18px] md:text-4xl font-bold text-white">00</span>

              <p class="text-white mt-2 text-[18px] md:text-4xl font-bold text-white ml-1">h</p>
            </div>
            <span class="opacity-50 text-[18px] md:text-4xl">:</span>
            <div class="flex items-baseline">

              <span data-countdown="minutes" class="text-[18px] md:text-4xl font-bold text-white">00</span>

              <p class="text-white mt-2 text-[18px] md:text-4xl font-bold text-white ml-1">m</p>
            </div>
            <span class="opacity-50 text-[18px] md:text-4xl ">:</span>
            <div class="flex items-baseline">

              <span data-countdown="seconds" class="text-[18px] md:text-4xl font-bold text-white">00</span>

              <p class="text-white mt-2 text-[18px] md:text-4xl font-bold text-white ml-1">s</p>
            </div>
          </div>
        </div>

        <!-- Hidden data-node for date configuration -->

        <a data-node="flash_cta_link" data-node-default="#" data-node-type="text" data-node-label="CTA Link" href="{{flash_cta_link}}" class="inline-block">
          <span data-node="flash_cta_text" data-node-type="text" data-node-label="CTA Text" data-node-default="Shop Now" class="bg-white text-gray-900 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors duration-300">
            {{flash_cta_text}}
          </span>
        </a>
      </div>

      <!-- Right Image -->
      <div class="w-full lg:w-1/2 relative lg:h-[600px] flex items-center justify-center">
        <div class="lg:p-8 p-1 bg-[#0019BA] rounded-[40px] backdrop-blur-sm w-full h-full flex items-center justify-center">
          <img data-node="flash_image" data-node-type="file" data-node-label="Product Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767779878/seltrix/templates/ss-interior-kitchen/time1.png" src="{{flash_image}}" alt="Flash Sale Product" class="w-full h-full object-contain rounded-[20px]">
        </div>
      </div>

    </div>
  </div>

</section>