<footer data-component-type="Footer" class="bg-[#0E0E0E] text-white pt-16 pb-6" data-component-slug="saas-template-footer">
  <div class="max-w-[80%] mx-auto">
    <!-- MAIN GRID -->
    <div class="grid gap-12 md:grid-cols-3 grid-cols-2 lg:grid-cols-5">
      <!-- BRAND + DESCRIPTION -->
      <div class="md:col-span-3 col-span-2">
        <div class="flex items-center gap-3 mb-4">
          <img data-node="footer_logo" data-node-type="file" data-node-label="Footer Logo" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765622611/seltrix/templates/saas-template/Logo.png" src="{{footer_logo}}" class="w-24" alt="logo">
        </div>

        <p data-node="footer_description" data-node-type="textarea" data-node-label="Footer Description" data-node-default="Empowering teams with tools that simplify work and accelerate progress. Reach out anytime, we're here to support your growth." class="text-[#CCCCCC] max-w-[450px] leading-relaxed">
          {{footer_description}}
        </p>

        <!-- SOCIAL MEDIA -->
        <div class="mt-6 mb-[10px]">
          <p class="mb-3 font-medium text-white" data-node="footer_nav4_text" data-node-type="text" data-node-label="Footer Nav 4 Text" data-node-default="Follow Us">{{footer_nav4_text}}</p>
          <div class="flex items-center gap-5">
            {{#if show_footer_twitter_url}}
            <a data-node="footer_twitter_url" data-node-type="url" data-node-label="Twitter URL" data-node-default="#" href="{{footer_twitter_url}}">
              <img data-node="footer_twitter_icon" data-node-type="file" data-node-label="Footer Twitter Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868903/seltrix/templates/saas-template/FooterImages/tw.png" src="{{footer_twitter_icon}}" class="w-6">
            </a>
            {{/if}} {{#if show_footer_facebook_url}}
            <a data-node="footer_facebook_url" data-node-type="url" data-node-label="Facebook URL" data-node-default="#" href="{{footer_facebook_url}}">
              <img data-node="footer_facebook_icon" data-node-type="file" data-node-label="Footer Facebook Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868901/seltrix/templates/saas-template/FooterImages/fac.png" src="{{footer_facebook_icon}}" class="w-6">
            </a>
            {{/if}} {{#if show_footer_pinterest_url}}
            <a data-node="footer_pinterest_url" data-node-type="url" data-node-label="Pinterest URL" data-node-default="#" href="{{footer_pinterest_url}}">
              <img data-node="footer_pinterest_icon" data-node-type="file" data-node-label="Footer Pinterest Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868902/seltrix/templates/saas-template/FooterImages/p.png" src="{{footer_pinterest_icon}}" class="w-6">
            </a>
            {{/if}} {{#if show_footer_dribbble_url}}
            <a data-node="footer_dribbble_url" data-node-type="url" data-node-label="Dribbble URL" data-node-default="#" href="{{footer_dribbble_url}}">
              <img data-node="footer_dribbble_icon" data-node-type="file" data-node-label="Footer Dribbble Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868900/seltrix/templates/saas-template/FooterImages/d.png" src="{{footer_dribbble_icon}}" class="w-6">
            </a>
            {{/if}}
          </div>
        </div>
      </div>

      <!-- NAVIGATION -->
      <div>
        <h4 class="font-semibold text-lg mb-5" data-node="footer_nav1_text" data-node-type="text" data-node-label="Footer Nav 1 Text" data-node-default="Navigation">{{footer_nav1_text}}</h4>
        <ul class="space-y-3 text-[#CCCCCC]">
          <li>
            <a data-node="footer_nav_link_1" data-node-type="page_links" data-node-label="Footer Nav Link 1" data-node-default="home" href="{{footer_nav_link_1}}" class="hover:text-white">
              <span data-node="footer_nav_link_1_text" data-node-type="text" data-node-label="Footer Nav Link 1 Text" data-node-default="Home">{{footer_nav_link_1_text}}</span>
            </a>
          </li>
          <li>
            <a data-node="footer_nav_link_2" data-node-type="page_links" data-node-label="Footer Nav Link 2" data-node-default="features" href="{{footer_nav_link_2}}" class="hover:text-white">
              <span data-node="footer_nav_link_2_text" data-node-type="text" data-node-label="Footer Nav Link 2 Text" data-node-default="Products">{{footer_nav_link_2_text}}</span>
            </a>
          </li>
          <li>
            <a data-node="footer_nav_link_3" data-node-type="page_links" data-node-label="Footer Nav Link 3" data-node-default="pricing" href="{{footer_nav_link_3}}" class="hover:text-white">
              <span data-node="footer_nav_link_3_text" data-node-type="text" data-node-label="Footer Nav Link 3 Text" data-node-default="Pricing">{{footer_nav_link_3_text}}</span>
            </a>
          </li>
          <li>
            <a data-node="footer_nav_link_4" data-node-type="page_links" data-node-label="Footer Nav Link 4" data-node-default="aboutus" href="{{footer_nav_link_4}}" class="hover:text-white">
              <span data-node="footer_nav_link_4_text" data-node-type="text" data-node-label="Footer Nav Link 4 Text" data-node-default="About Us">{{footer_nav_link_4_text}}</span>
            </a>
          </li>
          <li>
            <a data-node="footer_nav_link_5" data-node-type="page_links" data-node-label="Footer Nav Link 5" data-node-default="contactus" href="{{footer_nav_link_5}}" class="hover:text-white">
              <span data-node="footer_nav_link_5_text" data-node-type="text" data-node-label="Footer Nav Link 5 Text" data-node-default="Support">{{footer_nav_link_5_text}}</span>
            </a>
          </li>
        </ul>
      </div>

      <!-- QUICK LINKS -->
      <div>
        <h4 class="font-semibold text-lg mb-5" data-node="footer_nav2_text" data-node-type="text" data-node-label="Footer Nav 2 Text" data-node-default="Quick Links">{{footer_nav2_text}}</h4>
        <ul class="space-y-3 text-[#CCCCCC]">
          <li>
            <a data-node="footer_quick_link_1" data-node-type="page_links" data-node-label="Footer Quick Link 1" data-node-default="#" href="{{footer_quick_link_1}}" class="hover:text-white">
              <span data-node="footer_quick_link_1_text" data-node-type="text" data-node-label="Footer Quick Link 1 Text" data-node-default="Resources">{{footer_quick_link_1_text}}</span>
            </a>
          </li>
          <li>
            <a data-node="footer_quick_link_2" data-node-type="page_links" data-node-label="Footer Quick Link 2" data-node-default="#" href="{{footer_quick_link_2}}" class="hover:text-white">
              <span data-node="footer_quick_link_2_text" data-node-type="text" data-node-label="Footer Quick Link 2 Text" data-node-default="Blogs">{{footer_quick_link_2_text}}</span>
            </a>
          </li>
          <li>
            <a data-node="footer_quick_link_3" data-node-type="page_links" data-node-label="Footer Quick Link 3" data-node-default="#" href="{{footer_quick_link_3}}" class="hover:text-white">
              <span data-node="footer_quick_link_3_text" data-node-type="text" data-node-label="Footer Quick Link 3 Text" data-node-default="Help Centre">{{footer_quick_link_3_text}}</span>
            </a>
          </li>
          <li>
            <a data-node="footer_quick_link_4" data-node-type="page_links" data-node-label="Footer Quick Link 4" data-node-default="#" href="{{footer_quick_link_4}}" class="hover:text-white">
              <span data-node="footer_quick_link_4_text" data-node-type="text" data-node-label="Footer Quick Link 4 Text" data-node-default="Documentation">{{footer_quick_link_4_text}}</span>
            </a>
          </li>
        </ul>
      </div>

      <!-- TOP PAGES -->
      <div>
        <h4 class="font-semibold text-lg mb-5" data-node="footer_nav3_text" data-node-type="text" data-node-label="Footer Nav 3 Text" data-node-default="Top Pages">{{footer_nav3_text}}</h4>
        <ul class="space-y-3 text-[#CCCCCC]">
          <li>
            <a data-node="footer_top_page_1" data-node-type="page_links" data-node-label="Footer Top Page 1" data-node-default="#" href="{{footer_top_page_1}}" class="hover:text-white">
              <span data-node="footer_top_page_1_text" data-node-type="text" data-node-label="Footer Top Page 1 Text" data-node-default="For Agencies">{{footer_top_page_1_text}}</span>
            </a>
          </li>
          <li>
            <a data-node="footer_top_page_2" data-node-type="page_links" data-node-label="Footer Top Page 2" data-node-default="#" href="{{footer_top_page_2}}" class="hover:text-white">
              <span data-node="footer_top_page_2_text" data-node-type="text" data-node-label="Footer Top Page 2 Text" data-node-default="Integrations">{{footer_top_page_2_text}}</span>
            </a>
          </li>
          <li>
            <a data-node="footer_top_page_3" data-node-type="page_links" data-node-label="Footer Top Page 3" data-node-default="#" href="{{footer_top_page_3}}" class="hover:text-white">
              <span data-node="footer_top_page_3_text" data-node-type="text" data-node-label="Footer Top Page 3 Text" data-node-default="Product Tour">{{footer_top_page_3_text}}</span>
            </a>
          </li>
          <li>
            <a data-node="footer_top_page_4" data-node-type="page_links" data-node-label="Footer Top Page 4" data-node-default="#" href="{{footer_top_page_4}}" class="hover:text-white">
              <span data-node="footer_top_page_4_text" data-node-type="text" data-node-label="Footer Top Page 4 Text" data-node-default="Automation">{{footer_top_page_4_text}}</span>
            </a>
          </li>
        </ul>
      </div>
    </div>

    <!-- COPYRIGHT -->
    <div class="border-t border-[#EBEBEB] text-center mt-12 pt-5 text-[#CCCCCC]">
      <p data-node="footer_copyright" data-node-type="text" data-node-label="Copyright Text" data-node-default="2025 All Rights Reserved">
        {{footer_copyright}}
      </p>
    </div>
  </div>
</footer>