<!-- 
  Footer Component
  Site footer with logo, navigation, social links, and copyright
-->
<footer data-component-type="Footer" class="bg-[#0E0E0E] text-white pt-16 pb-6">
  <div class="max-w-[80%] mx-auto">
    <!-- MAIN GRID -->
    <div class="grid gap-12 md:gap-0 md:grid-cols-2 lg:grid-cols-5">
      <!-- BRAND + DESCRIPTION -->
      <div class="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="../assets/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">Follow Us</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="../assets/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="../assets/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="../assets/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="../assets/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">Navigation</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">Quick Links</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">Top Pages</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>
