<footer data-component-type="Footer" class="w-full bg-[#0E0E0E] text-white pt-16" data-component-slug="sports-template-footer">
  <div class="max-w-[90%] mx-auto px-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-14">
    <!-- =====================================================
          1. BRAND + LOGO + DESCRIPTION + SOCIAL LINKS
    ====================================================== -->
    <div class>
      <!-- LOGO -->
      <img data-node="footer_logo" data-node-type="file" data-node-label="Footer Logo" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338041/seltrix/templates/sports-template/Logo.png" src="{{footer_logo}}" class="w-[180px] mb-6" alt="Footer Logo">

      <!-- DESCRIPTION -->
      <p data-node="footer_desc" data-node-type="text" data-node-label="Footer Description" data-node-default="Lorem ipsum dolor sit amet consectetur. Enim vestibulum neque dui morbi. A ullamcorper." class="text-[#BCBCBC]">
        {{footer_desc}}
      </p>

      <!-- SOCIAL ICONS -->
      <div class="flex items-center gap-4 mt-6">
        <!-- Facebook -->
        <a data-node="footer_social1_link" data-node-type="page_links" data-node-label="Social Link 1" data-node-default="#" href="{{footer_social1_link}}">
          <img data-node="footer_social1_image" data-node-type="file" data-node-label="Social Icon 1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338001/seltrix/templates/sports-template/FooterImages/facebook.png" src="{{footer_social1_image}}" class="w-[40px] h-[40px]">
        </a>

        <!-- Twitter -->
        <a data-node="footer_social2_link" data-node-type="page_links" data-node-label="Social Link 2" data-node-default="#" href="{{footer_social2_link}}">
          <img data-node="footer_social2_image" data-node-type="file" data-node-label="Social Icon 2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338006/seltrix/templates/sports-template/FooterImages/t.png" src="{{footer_social2_image}}" class="w-[40px] h-[40px]">
        </a>

        <!-- Instagram -->
        <a data-node="footer_social3_link" data-node-type="page_links" data-node-label="Social Link 3" data-node-default="#" href="{{footer_social3_link}}">
          <img data-node="footer_social4_image" data-node-type="file" data-node-label="Social Icon 4" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338008/seltrix/templates/sports-template/FooterImages/y.png" src="{{footer_social4_image}}" class="w-[40px] h-[40px]">
        </a>

        <a data-node="footer_social4_link" data-node-type="page_links" data-node-label="Social Link 5" data-node-default="#" href="{{footer_social4_link}}">
          <img data-node="footer_social5_image" data-node-type="file" data-node-label="Social Icon 4" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767337998/seltrix/templates/sports-template/FooterImages/b.png" src="{{footer_social5_image}}" class="w-[40px] h-[40px]">
        </a>
      </div>
    </div>

    <!-- =====================================================
          2. QUICK LINKS
    ====================================================== -->
    <div>
      <h3 class="text-xl font-semibold mb-5" data-node="footer_head1" data-node-type="text" data-node-label="Footer footer_head 1" data-node-default="Quick Links">{{footer_head1}}</h3>

      <ul class="space-y-3">
        <!-- LINK 1 -->
        <li>
          <a data-node="footer_quicklink1" data-node-type="page_links" data-node-label="Footer Quick Link 1" data-node-default="#" href="{{footer_quicklink1}}" class="hover:underline text-[#BCBCBC] ">
            <span data-node="footer_quicktext1" data-node-type="text" data-node-label="Footer Quick Text 1" data-node-default="ABOUT CLUB">
              {{footer_quicktext1}}
            </span>
          </a>
        </li>

        <!-- LINK 2 -->
        <li>
          <a data-node="footer_quicklink2" data-node-type="page_links" data-node-label="Footer Quick Link 2" data-node-default="#" href="{{footer_quicklink2}}" class="hover:underline text-[#BCBCBC]">
            <span data-node="footer_quicktext2" data-node-type="text" data-node-label="Footer Quick Text 2" data-node-default="CONTACTUS">
              {{footer_quicktext2}}
            </span>
          </a>
        </li>

        <!-- LINK 3 -->
        <li>
          <a data-node="footer_quicklink3" data-node-type="page_links" data-node-label="Footer Quick Link 3" data-node-default="#" href="{{footer_quicklink3}}" class="hover:underline text-[#BCBCBC]">
            <span data-node="footer_quicktext3" data-node-type="text" data-node-label="Footer Quick Text 3" data-node-default="PRICE TABLE">
              {{footer_quicktext3}}
            </span>
          </a>
        </li>

        <!-- LINK 4 -->
        <li>
          <a data-node="footer_quicklink4" data-node-type="page_links" data-node-label="Footer Quick Link 4" data-node-default="#" href="{{footer_quicklink4}}" class="hover:underline text-[#BCBCBC] ">
            <span data-node="footer_quicktext4" data-node-type="text" data-node-label="Footer Quick Text 4" data-node-default="SHOP">
              {{footer_quicktext4}}
            </span>
          </a>
        </li>

        <!-- LINK 5 -->
        <li>
          <a data-node="footer_quicklink5" data-node-type="page_links" data-node-label="Footer Quick Link 5" data-node-default="#" href="{{footer_quicklink5}}" class="hover:underline text-[#BCBCBC] ">
            <span data-node="footer_quicktext5" data-node-type="text" data-node-label="Footer Quick Text 5" data-node-default="OUR PLAYERS">
              {{footer_quicktext5}}
            </span>
          </a>
        </li>
      </ul>
    </div>

    <!-- =====================================================
          3. GALLERY (EXACTLY 2 POSTS)
    ====================================================== -->
    <div>
      <h3 class="text-xl font-semibold mb-5" data-node="footer_head2" data-node-type="text" data-node-label="Footer footer_head 2" data-node-default="Post Gallery">{{footer_head2}}</h3>

      <div class="space-y-6">
        <!-- GALLERY ITEM 1 -->
        <div class="flex items-center gap-4">
          <img data-node="footer_gallery_image1" data-node-type="file" data-node-label="Gallery Image 1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767337999/seltrix/templates/sports-template/FooterImages/f1.png" src="{{footer_gallery_image1}}" class="w-[90px] h-[90px] rounded-lg object-cover" alt="Gallery Image 1">

          <div>
            <span data-node="footer_gallery_date1" data-node-type="text" data-node-default="12 Dec 2023" class="text-sm opacity-70">
              {{footer_gallery_date1}}
            </span>

            <p data-node="footer_gallery_title1" data-node-type="text" data-node-default="Lorem ipsum dolor sit amet consectetur" class="text-base">
              {{footer_gallery_title1}}
            </p>
          </div>
        </div>

        <!-- GALLERY ITEM 2 -->
        <div class="flex items-center gap-4">
          <img data-node="footer_gallery_image2" data-node-type="file" data-node-label="Gallery Image 2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338000/seltrix/templates/sports-template/FooterImages/f2.png" src="{{footer_gallery_image2}}" class="w-[90px] h-[90px] rounded-lg object-cover" alt="Gallery Image 2">

          <div>
            <span data-node="footer_gallery_date2" data-node-type="text" data-node-default="10 Dec 2023" class="text-sm opacity-70">
              {{footer_gallery_date2}}
            </span>

            <p data-node="footer_gallery_title2" data-node-type="text" data-node-default="Lorem ipsum dolor sit amet consectetur" class="text-base">
              {{footer_gallery_title2}}
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- =====================================================
          4. CONTACT INFO
    ====================================================== -->
    <div>
      <h3 class="text-xl font-semibold mb-5" data-node="footer_head3" data-node-type="text" data-node-label="Footer footer_head 3" data-node-default="Contact Info">{{footer_head3}}</h3>

      <ul class="space-y-4">
        <li class="flex items-center gap-3">
          <img data-node="footer_mail_icon" data-node-type="file" data-node-label="Mail Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338004/seltrix/templates/sports-template/FooterImages/mail.png" src="{{footer_mail_icon}}" class="w-[15px] h-[15px] mt-1">
          <span data-node="footer_mail" data-node-type="text" data-node-default="support@example.com">
            {{footer_mail}}
          </span>
        </li>

        <li class="flex items-center gap-3">
          <img data-node="footer_phone_icon" data-node-type="file" data-node-label="Phone Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338005/seltrix/templates/sports-template/FooterImages/phone.png" src="{{footer_phone_icon}}" class="w-[15px] h-[15px] mt-1">
          <span data-node="footer_phone" data-node-type="text" data-node-default="+91 98765 43210">
            {{footer_phone}}
          </span>
        </li>

        <li class="flex items-start gap-3">
          <img data-node="footer_location_icon" data-node-type="file" data-node-label="Location Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338003/seltrix/templates/sports-template/FooterImages/location.png" src="{{footer_location_icon}}" class="w-[15px] h-[15px] mt-1">
          <span data-node="footer_address" data-node-type="text" data-node-default="Chennai, India">
            {{footer_address}}
          </span>
        </li>
      </ul>
    </div>
  </div>

  <!-- =====================================================
        BOTTOM COPYRIGHT
  ====================================================== -->
  <div class="border-t border-[#333] mt-14  text-center text-sm bg-[#1A1A1A] max-w-[90%] mx-auto">
    <div class="flex md:justify-between  px-[50px] py-[30px]">
        <p data-node="footer_copyright" data-node-type="text" data-node-default="© 2025 All Rights Reserved.">
      {{footer_copyright}}
    </p>

    <div class="flex justify-center gap-6 ">
      <a data-node="footer_terms_link" data-node-type="page_links" href="{{footer_terms_link}}" data-node-default="/terms" class="hover:underline">
        <span data-node="footer_terms_text" data-node-type="text" data-node-default="Terms & Conditions">
          {{footer_terms_text}}
        </span>
      </a>

      <a data-node="footer_faq_link" data-node-type="page_links" href="{{footer_faq_link}}" data-node-default="/faq" class="hover:underline">
        <span data-node="footer_faq_text" data-node-type="text" data-node-default="FAQ">
          {{footer_faq_text}}
        </span>
      </a>
    </div>

    </div>
  
  </div>
</footer>