<footer data-component-type="Footer" class="relative" data-component-slug="marathon-footer">
  <!-- Background Image -->
  <div class="absolute inset-0 overflow-hidden">
    <img data-node="footer_bg" data-node-type="file" data-node-label="Footer Background" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768024169/seltrix/templates/marathon-template/footer-bg.png" src="{{footer_bg}}" alt="Footer background" class="w-full h-full object-cover object-center">
  </div>

  <!-- Main Footer Content -->
  <div class="relative z-10">
    <div class="max-w-[1920px] mx-auto px-6 lg:px-16 xl:px-[95px] py-12 xl:py-16">
      <!-- Left Column - Branding and Description -->
      <div class="max-w-sm">
        <img data-node="footer_logo" data-node-type="file" data-node-label="Footer Logo" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053052/seltrix/templates/marathon-template/logo.svg" src="{{footer_logo}}" alt="Logo" class="h-16 xl:h-20 w-auto mb-6">
        <p data-node="footer_description" data-node-type="textarea" data-node-label="Footer Description" data-node-default="Made for runners, powered by community, and open to anyone ready to move forward." class="text-white leading-relaxed mb-6 text-base xl:text-base">
          {{footer_description}}
        </p>

        <!-- Contact Info -->
        <div class="space-y-3">
          <div class="flex items-center gap-3">
            <img data-node="footer_email_icon" data-node-type="file" data-node-label="Email Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053038/seltrix/templates/marathon-template/email-icon.svg" src="{{footer_email_icon}}" alt="Email" class="w-6 h-6">
            <a data-node="footer_email" data-node-type="text" data-node-label="Email" data-node-default="support@yourmail.tld" href="mailto:{{footer_email}}" class="text-white hover:text-lime-400 transition-colors text-base">{{footer_email}}</a>
          </div>

          <div 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/v1768053059/seltrix/templates/marathon-template/phone-icon.svg" src="{{footer_phone_icon}}" alt="Phone" class="w-6 h-6">
            <a data-node="footer_phone" data-node-type="text" data-node-label="Phone" data-node-default="+6221.2002.2012" href="tel:{{footer_phone}}" class="text-white hover:text-lime-400 transition-colors text-base">{{footer_phone}}</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Bottom Bar - Copyright, Nav, Social -->
  <div class="relative z-10">
    <div class="max-w-[1920px] mx-auto px-6 lg:px-16 xl:px-[95px] py-5">
      <div class="flex flex-col lg:flex-row items-center justify-between gap-6 lg:gap-0">
        <!-- Copyright -->
        <p data-node="footer_copyright" data-node-type="text" data-node-label="Copyright" data-node-default="Copyrights © 2025" class="text-white text-sm md:text-base order-3 lg:order-1">
          {{footer_copyright}}
        </p>

        <!-- Nav and Social Group -->
        <div class="flex flex-col lg:flex-row items-center gap-6 lg:gap-12 order-1 lg:order-2">
          <!-- Navigation Links -->
          <nav class="flex flex-wrap items-center justify-center gap-4 md:gap-8 xl:gap-12">
            <a data-node="footer_link_1" data-node-type="page_links" data-node-label="Footer Link 1" data-node-default="#" href="{{footer_link_1}}" class="text-white hover:text-lime-400 transition-colors text-sm md:text-base">
              <span data-node="footer_link_1_text" data-node-type="text" data-node-label="Footer Link 1 Text" data-node-default="Home">{{footer_link_1_text}}</span>
            </a>
            <a data-node="footer_link_2" data-node-type="page_links" data-node-label="Footer Link 2" data-node-default="#" href="{{footer_link_2}}" class="text-white hover:text-lime-400 transition-colors text-sm md:text-base">
              <span data-node="footer_link_2_text" data-node-type="text" data-node-label="Footer Link 2 Text" data-node-default="About Us">{{footer_link_2_text}}</span>
            </a>
            <a data-node="footer_link_3" data-node-type="page_links" data-node-label="Footer Link 3" data-node-default="#" href="{{footer_link_3}}" class="text-white hover:text-lime-400 transition-colors text-sm md:text-base">
              <span data-node="footer_link_3_text" data-node-type="text" data-node-label="Footer Link 3 Text" data-node-default="Programs">{{footer_link_3_text}}</span>
            </a>
            <a data-node="footer_link_4" data-node-type="page_links" data-node-label="Footer Link 4" data-node-default="#" href="{{footer_link_4}}" class="text-white hover:text-lime-400 transition-colors text-sm md:text-base">
              <span data-node="footer_link_4_text" data-node-type="text" data-node-label="Footer Link 4 Text" data-node-default="Events">{{footer_link_4_text}}</span>
            </a>
          </nav>

          <!-- Social Icons -->
          <div class="flex items-center gap-2">
            <a data-node="facebook_link" data-node-type="url" data-node-label="Facebook Link" data-node-default="https://facebook.com" href="{{facebook_link}}" target="_blank" rel="noopener noreferrer" class="w-10 h-10 xl:w-[42px] xl:h-[42px] flex items-center justify-center bg-lime-400 hover:bg-lime-500 transition-colors">
              <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1768053045/seltrix/templates/marathon-template/facebook.svg" alt="Facebook">
            </a>
            <a data-node="twitter_link" data-node-type="url" data-node-label="Twitter Link" data-node-default="https://twitter.com" href="{{twitter_link}}" target="_blank" rel="noopener noreferrer" class="w-10 h-10 xl:w-[42px] xl:h-[42px] flex items-center justify-center bg-lime-400 hover:bg-lime-500 transition-colors">
              <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1768053099/seltrix/templates/marathon-template/twitter.svg" alt="Twitter">
            </a>
            <a data-node="instagram_link" data-node-type="url" data-node-label="Instagram Link" data-node-default="https://instagram.com" href="{{instagram_link}}" target="_blank" rel="noopener noreferrer" class="w-10 h-10 xl:w-[42px] xl:h-[42px] flex items-center justify-center bg-lime-400 hover:bg-lime-500 transition-colors">
              <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1768053049/seltrix/templates/marathon-template/instagram.svg" alt="Instagram">
            </a>
            <a data-node="linkedin_link" data-node-type="url" data-node-label="LinkedIn Link" data-node-default="https://linkedin.com" href="{{linkedin_link}}" target="_blank" rel="noopener noreferrer" class="w-10 h-10 xl:w-[42px] xl:h-[42px] flex items-center justify-center bg-lime-400 hover:bg-lime-500 transition-colors">
              <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1768053050/seltrix/templates/marathon-template/linkedin.svg" alt="LinkedIn">
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</footer>