<section class="relative bg-white bg-cover bg-center overflow-hidden" data-component-type="Content" style="background-image: url('https://res.cloudinary.com/duukclzsd/image/upload/v1767337992/seltrix/templates/sports-template/CHLT/plain.jpg')" data-component-slug="sports-template-champion-league">
  <!-- Background overlay image -->
  <div class="hidden md:block absolute inset-0 bg-cover bg-center opacity-50 bg-[url('https://res.cloudinary.com/duukclzsd/image/upload/v1767337990/seltrix/templates/sports-template/CHLT/above.png')] translate-x-[-300px] translate-y-[20px] z-0"></div>

  <div class="relative z-10 max-w-[90%] mx-auto px-4 py-16">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-10 items-start pt-[50px]">

      <!-- LEFT CONTENT -->
      <div class="flex flex-col gap-8">

        <!-- YEAR BUTTONS -->
        <div class="flex flex-wrap gap-4">
          <button class="year-btn active" data-index="0"><span data-node="tab_1" data-node-type="text" data-node-label="modern tabs1" data-node-default="1990">{{tab_1}}</span></button>
          <button class="year-btn" data-node="tab_2" data-node-type="text" data-node-label="modern tabs2" data-node-default="2010" data-index="1">{{tab_2}}</button>
          <button class="year-btn" data-node="tab_3" data-node-type="text" data-node-label="modern tabs3" data-node-default="2012" data-index="2">{{tab_3}}</button>
          <button class="year-btn" data-node="tab_4" data-node-type="text" data-node-label="modern tabs4" data-node-default="2015" data-index="3">{{tab_4}}</button>
          <button class="year-btn" data-index="4" data-node="tab_5" data-node-type="text" data-node-label="modern tabs5" data-node-default="2025">{{tab_5}}</button>
        </div>

        <!-- YEAR CONTENT -->
        <div>
          <div class="year-content" data-index="0">
            <h2 class="text-3xl md:text-4xl font-bold text-black mb-4" data-node="bottom_heading1" data-node-type="text" data-node-label="bottom heading 1" data-node-default="The Champions League Trophy — 1990."> 
            {{bottom_heading1}}
            </h2>
            <p class="text-[#777777] text-[16px]  mb-[20px] mt-[20px]" data-node="bottom_description" data-node-type="text" data-node-label="bottom description" data-node-default=" Lorem ipsum dolor sit amet consectetur. Blandit vivamus est lorem commodo maecenas facilisis porttitor ullamcorper. 
             Nunc volutpat tellus pharetra sit lectus morbi accumsan quam. Volutpat sit praesent tortor vitae elementum tortor at neque.">{{bottom_description}}
            </p>
             <p class="text-[#777777] text-[16px] " data-node="bottom_description2" data-node-type="text" data-node-label="bottom description2" data-node-default="Lorem ipsum dolor sit amet consectetur. Blandit vivamus est lorem commodo maecenas facilisis porttitor ullamcorper. ">
             {{bottom_description2}}
            </p>
          </div>

          <div class="year-content hidden" data-index="1">
             <h2 class="text-3xl md:text-4xl font-bold text-black mb-4" data-node="bottom2_heading1" data-node-type="text" data-node-label="bottom2 heading 1" data-node-default="The Champions League Trophy — 2010."> 
            {{bottom2_heading1}}
            </h2>
            <p class="text-[#777777] text-[16px]  mb-[20px] mt-[20px]" data-node="bottom2_description" data-node-type="text" data-node-label="bottom2 description" data-node-default=" Lorem ipsum dolor sit amet consectetur. Blandit vivamus est lorem commodo maecenas facilisis porttitor ullamcorper. 
             Nunc volutpat tellus pharetra sit lectus morbi accumsan quam. Volutpat sit praesent tortor vitae elementum tortor at neque.">{{bottom2_description}}
            </p>
             <p class="text-[#777777] text-[16px] " data-node="bottom2_description2" data-node-type="text" data-node-label="bottom2 description2" data-node-default="Lorem ipsum dolor sit amet consectetur. Blandit vivamus est lorem commodo maecenas facilisis porttitor ullamcorper. ">
             {{bottom2_description2}}
            </p>
          </div>

          <div class="year-content hidden" data-index="2">
            <h2 class="text-3xl md:text-4xl font-bold text-black mb-4" data-node="bottom3_heading1" data-node-type="text" data-node-label="bottom3 heading 1" data-node-default="The Champions League Trophy — 2012."> 
            {{bottom3_heading1}}
            </h2>
            <p class="text-[#777777] text-[16px]  mb-[20px] mt-[20px]" data-node="bottom3_description" data-node-type="text" data-node-label="bottom3 description" data-node-default=" Lorem ipsum dolor sit amet consectetur. Blandit vivamus est lorem commodo maecenas facilisis porttitor ullamcorper. 
             Nunc volutpat tellus pharetra sit lectus morbi accumsan quam. Volutpat sit praesent tortor vitae elementum tortor at neque.">{{bottom3_description}}
            </p>
             <p class="text-[#777777] text-[16px] " data-node="bottom3_description2" data-node-type="text" data-node-label="bottom3 description2" data-node-default="Lorem ipsum dolor sit amet consectetur. Blandit vivamus est lorem commodo maecenas facilisis porttitor ullamcorper. ">
             {{bottom3_description2}}
            </p>
          </div>

          <div class="year-content hidden" data-index="3">
            <h2 class="text-3xl md:text-4xl font-bold text-black mb-4" data-node="bottom4_heading1" data-node-type="text" data-node-label="bottom4 heading 1" data-node-default="The Champions League Trophy — 2015."> 
            {{bottom4_heading1}}
            </h2>
            <p class="text-[#777777] text-[16px]  mb-[20px] mt-[20px]" data-node="bottom4_description" data-node-type="text" data-node-label="bottom4 description" data-node-default=" Lorem ipsum dolor sit amet consectetur. Blandit vivamus est lorem commodo maecenas facilisis porttitor ullamcorper. 
             Nunc volutpat tellus pharetra sit lectus morbi accumsan quam. Volutpat sit praesent tortor vitae elementum tortor at neque.">{{bottom4_description}}
            </p>
             <p class="text-[#777777] text-[16px] " data-node="bottom4_description2" data-node-type="text" data-node-label="bottom4 description2" data-node-default="Lorem ipsum dolor sit amet consectetur. Blandit vivamus est lorem commodo maecenas facilisis porttitor ullamcorper. ">
             {{bottom4_description2}}
            </p>
          </div>

          <div class="year-content hidden" data-index="4">
           <h2 class="text-3xl md:text-4xl font-bold text-black mb-4" data-node="bottom5_heading1" data-node-type="text" data-node-label="bottom5 heading 1" data-node-default="The Champions League Trophy — 2025."> 
            {{bottom5_heading1}}
            </h2>
            <p class="text-[#777777] text-[16px]  mb-[20px] mt-[20px]" data-node="bottom5_description" data-node-type="text" data-node-label="bottom5 description" data-node-default=" Lorem ipsum dolor sit amet consectetur. Blandit vivamus est lorem commodo maecenas facilisis porttitor ullamcorper. 
             Nunc volutpat tellus pharetra sit lectus morbi accumsan quam. Volutpat sit praesent tortor vitae elementum tortor at neque.">{{bottom5_description}}
            </p>
             <p class="text-[#777777] text-[16px] " data-node="bottom5_description2" data-node-type="text" data-node-label="bottom5 description2" data-node-default="Lorem ipsum dolor sit amet consectetur. Blandit vivamus est lorem commodo maecenas facilisis porttitor ullamcorper. ">
             {{bottom5_description2}}
            </p>
          </div>
        </div>
      </div>

      <!-- RIGHT VIDEO -->
      <div class="relative w-fit">
        <video id="myVideo" class="w-full h-auto rounded-xl" poster="https://res.cloudinary.com/duukclzsd/image/upload/v1767337995/seltrix/templates/sports-template/CHLT/videp%20image.jpg">
          <source src="../assets/CHLT/vedio.mp4" type="video/mp4">
        </video>

        <img id="playButton" src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337993/seltrix/templates/sports-template/CHLT/Playicon.png" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-24 h-24 cursor-pointer" alt="Play">
      </div>

    </div>
  </div>
</section>