<footer data-component-type="Footer" class="bg-black text-white py-12 md:py-16" data-component-slug="ss-sports-running-footer">
  <div class="container mx-auto px-4">
    <!-- Top Section -->
    <div class="flex flex-col lg:flex-row justify-between gap-8 mb-12 border-b border-gray-700 pb-12">
      <!-- Logo & Description -->
      <div class="lg:w-1/3">
        <img data-node="footer_logo" data-node-type="file" data-node-label="Footer Logo" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765526996/seltrix/templates/ss-sports-running/Logo-white.png" src="{{footer_logo}}" alt="Logo" class="h-10 mb-6">
        <p data-node="footer_description" data-node-type="textarea" data-node-label="Footer Description" data-node-default="Join our community for updates, training tips, event announcements, and stories from runners just like you." class="text-gray-300 text-lg max-w-md">
          {{footer_description}}
        </p>
      </div>

      <!-- Navigation Columns -->
      <div class="flex flex-wrap gap-12 md:gap-16 lg:gap-24">
        <!-- Column 1 -->
        {{#if show_footer_navigation_1}}
        <div>
          <h3 data-node="footer_navigation1_title" data-node-type="text" data-node-label="Navigation 1 Title" data-node-default="Navigation" class="font-semibold text-xl mb-4">
            {{footer_navigation1_title}}
          </h3>
          <ul class="space-y-3">
            <li>
              <a data-node="footer_navigation1_link1" data-node-type="url" data-node-label="Navigation 1 Link 1" data-node-default="#" href="{{footer_navigation1_link1}}" class="text-gray-300 hover:text-white transition-colors text-lg"><span data-node="footer_navigation1_text1" data-node-type="text" data-node-label="Text 1" data-node-default="Home">{{footer_navigation1_text1}}</span></a>
            </li>
            <li>
              <a data-node="footer_navigation1_link2" data-node-type="url" data-node-label="Navigation 1 Link 2" data-node-default="#" href="{{footer_navigation1_link2}}" class="text-gray-300 hover:text-white transition-colors text-lg"><span data-node="footer_navigation1_text2" data-node-type="text" data-node-label="Navigation 1 Text 2" data-node-default="About Us">{{footer_navigation1_text2}}</span></a>
            </li>
            <li>
              <a data-node="footer_navigation1_link3" data-node-type="url" data-node-label="Navigation 1 Link 3" data-node-default="#" href="{{footer_navigation1_link3}}" class="text-gray-300 hover:text-white transition-colors text-lg"><span data-node="footer_navigation1_text3" data-node-type="text" data-node-label="Navigation 1 Text 3" data-node-default="Events">{{footer_navigation1_text3}}</span></a>
            </li>
            <li>
              <a data-node="footer_navigation1_link4" data-node-type="url" data-node-label="Navigation 1 Link 4" data-node-default="#" href="{{footer_navigation1_link4}}" class="text-gray-300 hover:text-white transition-colors text-lg"><span data-node="footer_navigation1_text4" data-node-type="text" data-node-label="Navigation 1 Text 4" data-node-default="Club">{{footer_navigation1_text4}}</span></a>
            </li>
          </ul>
        </div>
        {{/if}}

        <!-- Column 2 -->
        {{#if show_footer_navigation_2}}
        <div>
          <h3 data-node="footer_navigation2_title" data-node-type="text" data-node-label="Navigation 2 Title" data-node-default="Navigation" class="font-semibold text-xl mb-4">
            {{footer_navigation2_title}}
          </h3>
          <ul class="space-y-3">
            <li>
              <a data-node="footer_navigation2_link1" data-node-type="url" data-node-label="Navigation 2 Link 1" data-node-default="#" href="{{footer_navigation2_link1}}" class="text-gray-300 hover:text-white transition-colors text-lg"><span data-node="footer_navigation2_text1" data-node-type="text" data-node-label="Navigation 2 Text 1" data-node-default="Training Guides">{{footer_navigation2_text1}}</span></a>
            </li>
            <li>
              <a data-node="footer_navigation2_link2" data-node-type="url" data-node-label="Navigation 2 Link 2" data-node-default="#" href="{{footer_navigation2_link2}}" class="text-gray-300 hover:text-white transition-colors text-lg"><span data-node="footer_navigation2_text2" data-node-type="text" data-node-label="Navigation 2 Text 2" data-node-default="Membership">{{footer_navigation2_text2}}</span></a>
            </li>
            <li>
              <a data-node="footer_navigation2_link3" data-node-type="url" data-node-label="Navigation 2 Link 3" data-node-default="#" href="{{footer_navigation2_link3}}" class="text-gray-300 hover:text-white transition-colors text-lg"><span data-node="footer_navigation2_text3" data-node-type="text" data-node-label="Navigation 2 Text 3" data-node-default="Support">{{footer_navigation2_text3}}</span></a>
            </li>
            <li>
              <a data-node="footer_navigation2_link4" data-node-type="url" data-node-label="Navigation 2 Link 4" data-node-default="#" href="{{footer_navigation2_link4}}" class="text-gray-300 hover:text-white transition-colors text-lg"><span data-node="footer_navigation2_text4" data-node-type="text" data-node-label="Navigation 2 Text 4" data-node-default="Contact">{{footer_navigation2_text4}}</span></a>
            </li>
          </ul>
        </div>
        {{/if}}

        <!-- Newsletter & Social -->

        <div class="w-full md:w-auto">
          <h3 data-node="footer_newsletter_title" data-node-type="text" data-node-label="Newsletter Title" data-node-default="Newsletter" class="font-normal text-lg mb-4">
            {{footer_newsletter_title}}
          </h3>
          <div class="flex gap-4 mb-8">
            {{#if show_footer_icon1}}
            <a data-node="footer_icon1_link" data-node-type="url" data-node-label="Icon 1 Link" data-node-default="https://twitter.com/" href="{{footer_icon1_link}}" data-node-for="footer_icon1" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gray-700 transition-colors">
              <img src="{{footer_icon1}}" alt="Icon 1" class="w-5 h-5" data-node="footer_icon1" data-node-type="file" data-node-label="Icon 1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767348233/seltrix/templates/ss-sports-running/twitter.svg">
            </a>
            {{/if}} {{#if show_footer_icon2}}
            <a data-node="footer_icon2_link" data-node-type="url" data-node-label="Icon 2 Link" data-node-default="https://facebook.com/" data-node-for="footer_icon2" href="{{footer_icon2_link}}" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gray-700 transition-colors">
              <img src="{{footer_icon2}}" alt="Icon 2" class="w-5 h-5" data-node="footer_icon2" data-node-type="file" data-node-label="Icon 2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767348217/seltrix/templates/ss-sports-running/facebook.svg">
            </a>
            {{/if}} {{#if show_footer_icon3}}
            <a data-node="footer_icon3_link" data-node-type="url" data-node-label="Icon 3 Link" data-node-default="https://discord.com/" href="{{footer_icon3_link}}" data-node-for="footer_icon3" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gray-700 transition-colors">
              <img src="{{footer_icon3}}" alt="Icon 3" class="w-5 h-5" data-node="footer_icon3" data-node-type="file" data-node-label="Icon 3" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767348213/seltrix/templates/ss-sports-running/discord.svg">
            </a>
            {{/if}} {{#if show_footer_icon4}}
            <a data-node="footer_icon4_link" data-node-type="url" data-node-label="Icon 4 Link" data-node-default="https://pinterest.com/" data-node-for="footer_icon4" href="{{footer_icon4_link}}" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gray-700 transition-colors">
              <img src="{{footer_icon4}}" alt="Icon 4" class="w-5 h-5" data-node="footer_icon4" data-node-type="file" data-node-label="Icon 4" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767348229/seltrix/templates/ss-sports-running/pintrest.svg">
            </a>
            {{/if}}
          </div>
          {{#if show_footer_newsletter}}
          <h3 data-node="footer_newsletter_title" data-node-type="text" data-node-label="Newsletter Title" data-node-default="Newsletter" class="font-normal text-lg mb-3">
            {{footer_newsletter_title}}
          </h3>
          <div class="flex">
            <input data-node="footer_newsletter_email" data-node-type="text" data-node-label="Input Placeholder" data-node-default="Enter your email" type="email" placeholder="{{footer_newsletter_email}}" class="bg-transparent border border-white px-4 py-3 text-white placeholder-gray-400 flex-1 focus:outline-none focus:border-red-600">
            <button data-node="footer_newsletter_button" data-node-type="text" data-node-label="Subscribe Button" data-node-default="Subscribe" class="bg-red-600 text-white px-6 py-3 font-medium hover:bg-red-700 transition-colors">
              {{footer_newsletter_button}}
            </button>
          </div>
          {{/if}}
        </div>
      </div>
    </div>

    <!-- Copyright -->
    <div class="text-center">
      <p data-node="footer_copyright" data-node-label="Copyright" data-node-type="text" data-node-default="2025 All Rights are Reserved" class="text-gray-400 text-lg">
        {{footer_copyright}}
      </p>
    </div>
  </div>
</footer>