<section class="relative bg-cover bg-center bg-no-repeat  flex items-center" data-component-type="Content" data-node="upcoming_big_match_bg" data-node-type="file" data-node-label="upcoming_big_match Background file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338090/seltrix/templates/sports-template/Upcoming%20Section/background%20image.jpg" style="background-image: url('{{upcoming_big_match_bg}}')" data-component-slug="sports-template-upcoming-big-match">

 <div class="absolute inset-0 bg-black/60"></div>

  <div class="relative lg:max-w-[100%] max-w-full mx-auto px-4 py-12 text-center text-white">

    <!-- Section Title -->
    <h2 class="text-2xl md:text-4xl font-bold tracking-wide" data-node="upcoming_title" data-node-type="text" data-node-label="Upcoming Match Title" data-node-default="UPCOMING BIG MATCH">
      {{upcoming_title}}
    </h2>

    <!-- Date & Time -->
    <p class="mt-3 text-sm md:text-base text-gray-200 font-semibold transform translate-y-[180%]" data-node="upcoming_datetime" data-node-type="text" data-node-label="Upcoming Match Date & Time" data-node-default="AUGUST 26, 2025 • 5:45 PM">
      {{upcoming_datetime}}
    </p>

    <!-- Teams -->
    <div class="flex items-center justify-center gap-4 md:gap-10 mt-6 flex-wrap">

      <img data-node="upcoming_team1_image" data-node-type="file" data-node-label="Team 1 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338093/seltrix/templates/sports-template/Upcoming%20Section/football%20Image.png" src="{{upcoming_team1_image}}" class="h-16 w-16 md:h-24 md:w-24 object-contain">

      <p class="text-lg md:text-2xl font-semibold" data-node="upcoming_team1_vs_team2" data-node-type="text" data-node-label="Team VS Text" data-node-default="DRAGONS <span class='text-red-500'>VS</span> BULLS">
        {{upcoming_team1_vs_team2}}
      </p>

      <img data-node="upcoming_team2_image" data-node-type="file" data-node-label="Team 2 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338093/seltrix/templates/sports-template/Upcoming%20Section/football%20Image.png" src="{{upcoming_team2_image}}" class="h-16 w-16 md:h-24 md:w-24 object-contain">
    </div>

    <!-- Button -->

     <a data-node="upcoming_button_link" data-node-type="page_links" data-node-label="Upcoming Match Button Text" data-node-default="#" href="{{upcoming_button_link}}">
           <button data-node="upcoming_button_text" data-node-type="text" data-node-label="Upcoming Match Button Text" data-node-default="GET TICKET" class="mt-5 px-6 py-2 bg-red-600 hover:bg-red-700 text-sm font-bold rounded">
      {{upcoming_button_text}}
    </button>
      </a>

    <!-- Countdown -->
    <div class="mt-10 grid grid-cols-2 md:grid-cols-4 gap-5 max-w-xl mx-auto">

      <div class="border border-white/40 p-4 rounded">
        <div id="days" class="text-3xl md:text-4xl font-bold" data-node="upcoming_days" data-node-type="text" data-node-label="Countdown Days" data-node-default="00">
          {{upcoming_days}}
        </div>
        <div class="text-xs mt-1 tracking-wide">DAYS</div>
      </div>

      <div class="border border-white/40 p-4 rounded">
        <div id="hours" class="text-3xl md:text-4xl font-bold" data-node="upcoming_hours" data-node-type="text" data-node-label="Countdown Hours" data-node-default="00">
          {{upcoming_hours}}
        </div>
        <div class="text-xs mt-1 tracking-wide">HOURS</div>
      </div>

      <div class="border border-white/40 p-4 rounded">
        <div id="minutes" class="text-3xl md:text-4xl font-bold" data-node="upcoming_minutes" data-node-type="text" data-node-label="Countdown Minutes" data-node-default="00">
          {{upcoming_minutes}}
        </div>
        <div class="text-xs mt-1 tracking-wide">MINUTES</div>
      </div>

      <div class="border border-white/40 p-4 rounded">
        <div id="seconds" class="text-3xl md:text-4xl font-bold" data-node="upcoming_seconds" data-node-type="text" data-node-label="Countdown Seconds" data-node-default="00">
          {{upcoming_seconds}}
        </div>
        <div class="text-xs mt-1 tracking-wide">SECONDS</div>
      </div>

    </div>

  </div>
   </section>