<footer data-component-type="Footer" class="w-full bg-black text-white pt-20 pb-10" data-component-slug="clothing-template-footer">
  <div class="w-full px-6 lg:px-[100px]">
    <div class="max-w-[1728px] mx-auto">
      <div class="flex flex-col lg:flex-row justify-between items-start gap-16 lg:gap-24">
        <!-- ============ BRAND COLUMN ============ -->
        <div class="flex flex-col gap-6 max-w-[420px]">
          {{#if show_footer_logo}}
          <img src="{{footer_logo}}" class="w-[200px]" data-node="footer_logo" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767002386/seltrix/templates/clothing-template/Footer%20logo.svg">
          {{/if}} {{#if show_footer_desc}}
          <p class="font-['Michroma'] text-[20px] leading-[23px] tracking-[-1%]" data-node="footer_desc" data-node-type="text" data-node-default="Crafted for the streets. Built for real fits. Wear it, live it, make it yours.">
            {{footer_desc}}
          </p>
          {{/if}}

          <!-- SOCIAL ICONS -->
          <div class="flex items-center gap-6 mt-16">
            {{#if show_footer_twitter}}
            <img src="{{footer_icon_twitter}}" class="w-[28px]" data-node="footer_icon_twitter" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767002394/seltrix/templates/clothing-template/icon%20_twitter.svg">
            {{/if}} {{#if show_footer_facebook}}
            <img src="{{footer_icon_facebook}}" class="w-[28px]" data-node="footer_icon_facebook" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767002381/seltrix/templates/clothing-template/facebook%20%282%29.svg">
            {{/if}} {{#if show_footer_pinterest}}
            <img src="{{footer_icon_pinterest}}" class="w-[28px]" data-node="footer_icon_pinterest" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766994435/seltrix/templates/clothing-template/pinterest_%20%281%29.svg">
            {{/if}} {{#if show_footer_discord}}
            <img src="{{footer_icon_discord}}" class="w-[28px]" data-node="footer_icon_discord" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767002376/seltrix/templates/clothing-template/discord_%20%281%29.svg">
            {{/if}}
          </div>
        </div>

        <!-- ============ LINKS GRID ============ -->
        <div class="grid grid-cols-3 gap-20 w-full max-w-[900px] max-md:grid-cols-1 max-md:gap-12">
          <!-- QUICK LINKS -->

          <div>
            <h3 class="font-['Michroma'] text-[24px] mb-6" data-node="footer_quick_links_title" data-node-type="text" data-node-default="Quick Links">
              {{footer_quick_links_title}}
            </h3>

            <ul class="space-y-4">
              {{#if show_ql_home}}
              <li>
                <a class="footer-link" href="{{ql_home}}" data-node="ql_home" data-node-type="page_links" data-node-default="#"><span data-node="ql_home_txt" data-node-type="text" data-node-default="Home">{{ql_home_txt}}</span></a>
              </li>
              {{/if}} {{#if show_ql_services}}
              <li>
                <a class="footer-link" href="{{ql_services}}" data-node="ql_services" data-node-type="page_links" data-node-default="#"><span data-node="ql_services_txt" data-node-type="text" data-node-default="Services">{{ql_services_txt}}</span></a>
              </li>
              {{/if}} {{#if show_ql_about}}
              <li>
                <a class="footer-link" href="{{ql_about}}" data-node="ql_about" data-node-type="page_links" data-node-default="#"><span data-node="ql_about_txt" data-node-type="text" data-node-default="About Us">{{ql_about_txt}}</span></a>
              </li>
              {{/if}} {{#if show_ql_works}}
              <li>
                <a class="footer-link" href="{{ql_works}}" data-node="ql_works" data-node-type="page_links" data-node-default="#"><span data-node="ql_works_txt" data-node-type="text" data-node-default="Works">{{ql_works_txt}}</span></a>
              </li>
              {{/if}} {{#if show_ql_blogs}}
              <li>
                <a class="footer-link" href="{{ql_blogs}}" data-node="ql_blogs" data-node-type="page_links" data-node-default="#"><span data-node="ql_blogs_txt" data-node-type="text" data-node-default="Blogs">{{ql_blogs_txt}}</span></a>
              </li>
              {{/if}}
            </ul>
          </div>

          <!-- FEATURED -->

          <div>
            <h3 class="font-['Michroma'] text-[24px] mb-6" data-node="footer_featured_title" data-node-type="text" data-node-default="Featured">
              {{footer_featured_title}}
            </h3>

            <ul class="space-y-4">
              {{#if show_featured_new}}
              <li>
                <a class="footer-link" href="{{featured_new}}" data-node="featured_new" data-node-type="page_links" data-node-default="#"><span data-node="featured_new_txt" data-node-type="text" data-node-default="New Arrivals">{{featured_new_txt}}</span></a>
              </li>
              {{/if}} {{#if show_featured_best}}
              <li>
                <a class="footer-link" href="{{featured_best}}" data-node="featured_best" data-node-type="page_links" data-node-default="#"><span data-node="featured_best_txt" data-node-type="text" data-node-default="Bestsellers">{{featured_best_txt}}</span></a>
              </li>
              {{/if}} {{#if show_featured_essentials}}
              <li>
                <a class="footer-link" href="{{featured_essentials}}" data-node="featured_essentials" data-node-type="page_links" data-node-default="#"><span data-node="featured_essentials_txt" data-node-type="text" data-node-default="Essentials">{{featured_essentials_txt}}</span></a>
              </li>
              {{/if}} {{#if show_featured_limited}}
              <li>
                <a class="footer-link" href="{{featured_limited}}" data-node="featured_limited" data-node-type="page_links" data-node-default="#"><span data-node="featured_limited_txt" data-node-type="text" data-node-default="Limited Drops">{{featured_limited_txt}}</span></a>
              </li>
              {{/if}} {{#if show_featured_gift}}
              <li>
                <a class="footer-link" href="{{featured_gift}}" data-node="featured_gift" data-node-type="page_links" data-node-default="#"><span data-node="featured_gift_txt" data-node-type="text" data-node-default="Gift Cards">{{featured_gift_txt}}</span></a>
              </li>
              {{/if}}
            </ul>
          </div>

          <!-- INFO -->
          <div>
            <h3 class="font-['Michroma'] text-[24px] mb-6" data-node="footer_info_title" data-node-type="text" data-node-default="Info">
              {{footer_info_title}}
            </h3>

            <ul class="space-y-4">
              {{#if show_info_policies}}
              <li>
                <a class="footer-link" href="{{info_policies}}" data-node="info_policies" data-node-type="page_links" data-node-default="#"><span data-node="info_policies_txt" data-node-type="text" data-node-default="Policies">{{info_policies_txt}}</span></a>
              </li>
              {{/if}} {{#if show_info_exchanges}}
              <li>
                <a class="footer-link" href="{{info_exchanges}}" data-node="info_exchanges" data-node-type="page_links" data-node-default="#"><span data-node="info_exchanges_txt" data-node-type="text" data-node-default="Exchanges">{{info_exchanges_txt}}</span></a>
              </li>
              {{/if}} {{#if show_info_fabric}}
              <li>
                <a class="footer-link" href="{{info_fabric}}" data-node="info_fabric" data-node-type="page_links" data-node-default="#"><span data-node="info_fabric_txt" data-node-type="text" data-node-default="Fabric Care">{{info_fabric_txt}}</span></a>
              </li>
              {{/if}} {{#if show_info_faq}}
              <li>
                <a class="footer-link" href="{{info_faq}}" data-node="info_faq" data-node-type="page_links" data-node-default="#"><span data-node="info_faq_txt" data-node-type="text" data-node-default="FAQs">{{info_faq_txt}}</span></a>
              </li>
              {{/if}} {{#if show_info_contact}}
              <li>
                <a class="footer-link" href="{{info_contact}}" data-node="info_contact" data-node-type="page_links" data-node-default="#"><span data-node="info_contact_txt" data-node-type="text" data-node-default="Contact Us">{{info_contact_txt}}</span></a>
              </li>
              {{/if}}
            </ul>
          </div>
        </div>
      </div>

      <div class="w-full border-t border-white mt-16"></div>

      {{#if show_footer_copyright}}
      <p class="font-['Michroma'] text-[20px] leading-[23px] tracking-[-1%] text-[#8E8E8E] mt-6" data-node="footer_copyright" data-node-type="text" data-node-default="© 2025 All Rights Reserved.">
        {{footer_copyright}}
      </p>
      {{/if}}
    </div>
  </div>
  
</footer>