<!-- 
  Footer Component
  Dark footer with navigation, newsletter, and social links
-->
<footer data-component-type="Footer" class="bg-black text-white py-12 md:py-16">
  <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="../assets/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_navigation_title"
            data-node-type="text"
            data-node-label="Navigation Title"
            data-node-default="Navigation"
            class="font-semibold text-xl mb-4"
          >
            {{footer_navigation_title}}
          </h3>
          <ul class="space-y-3">
            <li>
              <a
                data-node="footer_link1"
                data-node-type="url"
                data-node-label="Link 1"
                data-node-default="#"
                href="{{footer_link1}}"
                class="text-gray-300 hover:text-white transition-colors text-lg"
                ><span data-node="footer_text1" data-node-type="text" data-node-label="Text 1" data-node-default="Home"
                  >{{footer_text1}}</span
                ></a
              >
            </li>
            <li>
              <a
                data-node="footer_link2"
                data-node-type="url"
                data-node-label="Link 2"
                data-node-default="#"
                href="{{footer_link2}}"
                class="text-gray-300 hover:text-white transition-colors text-lg"
                ><span
                  data-node="footer_text2"
                  data-node-type="text"
                  data-node-label="Text 2"
                  data-node-default="About Us"
                  >{{footer_text2}}</span
                ></a
              >
            </li>
            <li>
              <a
                data-node="footer_link3"
                data-node-type="url"
                data-node-label="Link 3"
                data-node-default="#"
                href="{{footer_link3}}"
                class="text-gray-300 hover:text-white transition-colors text-lg"
                ><span
                  data-node="footer_text3"
                  data-node-type="text"
                  data-node-label="Text 3"
                  data-node-default="Events"
                  >{{footer_text3}}</span
                ></a
              >
            </li>
            <li>
              <a
                data-node="footer_link4"
                data-node-type="url"
                data-node-label="Link 4"
                data-node-default="#"
                href="{{footer_link4}}"
                class="text-gray-300 hover:text-white transition-colors text-lg"
                ><span data-node="footer_text4" data-node-type="text" data-node-label="Text 4" data-node-default="Club"
                  >{{footer_text4}}</span
                ></a
              >
            </li>
          </ul>
        </div>
        {{/if}}

        <!-- Column 2 -->
        {{#if show_footer_navigation_2}}
        <div>
          <h3
            data-node="footer_navigation_title"
            data-node-type="text"
            data-node-label="Navigation Title"
            data-node-default="Navigation"
            class="font-semibold text-xl mb-4"
          >
            {{footer_navigation_title}}
          </h3>
          <ul class="space-y-3">
            <li>
              <a
                data-node="footer_link5"
                data-node-type="url"
                data-node-label="Link 5"
                data-node-default="#"
                href="{{footer_link5}}"
                class="text-gray-300 hover:text-white transition-colors text-lg"
                ><span
                  data-node="footer_text5"
                  data-node-type="text"
                  data-node-label="Text 5"
                  data-node-default="Training Guides"
                  >{{footer_text5}}</span
                ></a
              >
            </li>
            <li>
              <a
                data-node="footer_link6"
                data-node-type="url"
                data-node-label="Link 6"
                data-node-default="#"
                href="{{footer_link6}}"
                class="text-gray-300 hover:text-white transition-colors text-lg"
                ><span
                  data-node="footer_text6"
                  data-node-type="text"
                  data-node-label="Text 6"
                  data-node-default="Membership"
                  >{{footer_text6}}</span
                ></a
              >
            </li>
            <li>
              <a
                data-node="footer_link7"
                data-node-type="url"
                data-node-label="Link 7"
                data-node-default="#"
                href="{{footer_link7}}"
                class="text-gray-300 hover:text-white transition-colors text-lg"
                ><span
                  data-node="footer_text7"
                  data-node-type="text"
                  data-node-label="Text 7"
                  data-node-default="Support"
                  >{{footer_text7}}</span
                ></a
              >
            </li>
            <li>
              <a
                data-node="footer_link8"
                data-node-type="url"
                data-node-label="Link 8"
                data-node-default="#"
                href="{{footer_link8}}"
                class="text-gray-300 hover:text-white transition-colors text-lg"
                ><span
                  data-node="footer_text8"
                  data-node-type="text"
                  data-node-label="Text 8"
                  data-node-default="Contact"
                  >{{footer_text8}}</span
                ></a
              >
            </li>
          </ul>
        </div>
        {{/if}}

        <!-- Newsletter & Social -->

        <div class="w-full md:w-auto">
          <h3
            data-node="footer_social_title"
            data-node-type="text"
            data-node-label="Social Title"
            data-node-default="Social"
            class="font-normal text-lg mb-4"
          >
            {{footer_social_title}}
          </h3>
          <div class="flex gap-4 mb-8">
            {{#if show_footer_twitter}}
            <a
              data-node="footer_twitter_link"
              data-node-type="url"
              data-node-label="Twitter Link"
              data-node-default="https://twitter.com/"
              href="{{footer_twitter_link}}"
              class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gray-700 transition-colors"
            >
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                <path
                  d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
                />
              </svg>
            </a>
            {{/if}} {{#if show_footer_facebook}}
            <a
              data-node="footer_facebook_link"
              data-node-type="url"
              data-node-label="Facebook Link"
              data-node-default="https://facebook.com/"
              href="{{footer_facebook_link}}"
              class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gray-700 transition-colors"
            >
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                <path
                  d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"
                />
              </svg>
            </a>
            {{/if}} {{#if show_footer_instagram}}
            <a
              data-node="footer_instagram_link"
              data-node-type="url"
              data-node-label="Instagram Link"
              data-node-default="https://instagram.com/"
              href="{{footer_instagram_link}}"
              class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gray-700 transition-colors"
            >
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                <path
                  d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"
                />
              </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="Newsletter Email"
              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>
