<footer
  data-component-type="Footer"
  class="w-full bg-black text-white pt-20 pb-10"
>
  <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="../assets/Footer logo.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 -->
          {{#if show_footer_socials}}
          <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="../assets/icon _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="../assets/facebook (2).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="../assets/pinterest_ (1).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="../assets/discord_ (1).svg" />
            {{/if}}
          </div>
          {{/if}}

        </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 -->
          {{#if show_footer_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>
          {{/if}}

          <!-- FEATURED -->
          {{#if show_footer_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>
          {{/if}}

          <!-- INFO -->
          {{#if show_footer_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>
          {{/if}}

        </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>
    <style>
    .footer-link {
      font-family: 'Michroma', sans-serif;
      font-size: 18px;
      line-height: 100%;
      color: #7E7E7E;
      text-decoration: none;
    }
    .footer-link:hover {
      color: #ffffff;
    }
  </style>
</footer>

