<footer data-component-type="Footer" class="w-full bg-black text-white pt-20 pb-10 border-t border-[#313131]">
  <!-- OUTER CONTAINER -->
  <div class="w-full px-4 md:px-12 lg:px-24">
    <!-- CENTERED INNER WRAPPER -->
    <div class="max-w-[1650px] mx-auto">
      <!-- FLEX COLUMNS -->
      <div
        class="flex flex-col lg:flex-row justify-between items-center lg:items-start gap-10 lg:gap-24 text-center lg:text-left"
      >
        <!-- ============ LOGO COLUMN ============ -->
        <div class="flex-shrink-0">
          <img
            src="{{footer_logo}}"
            class="w-[78px] mx-auto lg:mx-0"
            data-node="footer_logo"
            data-node-type="file"
            data-node-label="Footer Logo"
            data-node-default="./assets/Logo.svg"
          />
        </div>

        <!-- ============ MIDDLE NAVIGATION BLOCK ============ -->
        <div class="flex flex-col lg:flex-row gap-10 lg:gap-24 mx-auto">
          <!-- QUICK LINKS -->
          <div>
            <h3
              class="font-['Cabin'] text-[24px] md:text-[28px] lg:text-[32px] 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">
              <li>
                <a
                  class="text-[#7E7E7E] text-[16px] md:text-[20px] lg:text-[24px]"
                  data-node="footer_ql_link_1"
                  data-node-type="page_links"
                  data-node-default="home"
                  data-node-label="Quick Link 1 Link"
                  href="{{footer_ql_link_1}}"
                  ><span
                    data-node="footer_ql_txt_1"
                    data-node-type="text"
                    data-node-default="Home"
                    data-node-label="Quick Link 1 Text"
                    >{{footer_ql_txt_1}}</span
                  ></a
                >
              </li>

              <li>
                <a
                  class="text-[#7E7E7E] text-[16px] md:text-[20px] lg:text-[24px]"
                  data-node="footer_ql_link_2"
                  data-node-type="page_links"
                  data-node-default="Services"
                  href="{{footer_ql_link_2}}"
                  ><span
                    data-node="footer_ql_txt_2"
                    data-node-type="text"
                    data-node-default="Services"
                    data-node-label="Quick Link 2 Text"
                    >{{footer_ql_txt_2}}</span
                  ></a
                >
              </li>

              <li>
                <a
                  class="text-[#7E7E7E] text-[16px] md:text-[20px] lg:text-[24px]"
                  data-node="footer_ql_link_3"
                  data-node-type="page_links"
                  data-node-default="About Us"
                  href="{{footer_ql_link_3}}"
                  ><span
                    data-node="footer_ql_txt_3"
                    data-node-type="text"
                    data-node-default="About Us"
                    data-node-label="Quick Link 3 Text"
                    >{{footer_ql_txt_3}}</span
                  ></a
                >
              </li>

              <li>
                <a
                  class="text-[#7E7E7E] text-[16px] md:text-[20px] lg:text-[24px]"
                  data-node="footer_ql_link_4"
                  data-node-type="page_links"
                  data-node-default="Works"
                  href="{{footer_ql_link_4}}"
                  ><span
                    data-node="footer_ql_txt_4"
                    data-node-type="text"
                    data-node-default="Works"
                    data-node-label="Quick Link 4 Text"
                    >{{footer_ql_txt_4}}</span
                  ></a
                >
              </li>

              <li>
                <a
                  class="text-[#7E7E7E] text-[16px] md:text-[20px] lg:text-[24px]"
                  data-node="footer_ql_link_5"
                  data-node-type="page_links"
                  data-node-default="Blogs"
                  href="{{footer_ql_link_5}}"
                  ><span
                    data-node="footer_ql_txt_5"
                    data-node-type="text"
                    data-node-default="Blogs"
                    data-node-label="Quick Link 5 Text"
                    >{{footer_ql_txt_5}}</span
                  ></a
                >
              </li>
            </ul>
          </div>

          <!-- RESOURCES -->
          <div>
            <h3
              class="font-['Cabin'] text-[24px] md:text-[28px] lg:text-[32px] mb-6"
              data-node="footer_resources_title"
              data-node-type="text"
              data-node-default="Resources"
              data-node-label="Resources Title"
            >
              {{footer_resources_title}}
            </h3>

            <ul class="space-y-4">
              <li>
                <a
                  class="text-[#7E7E7E] text-[16px] md:text-[20px] lg:text-[24px]"
                  data-node="footer_resource_case"
                  data-node-type="page_links"
                  data-node-default="Case Studies"
                  href="{{footer_resource_case}}"
                  ><span
                    data-node="footer_resource_case_txt"
                    data-node-type="text"
                    data-node-default="Case Studies"
                    data-node-label="Resource Case Text"
                    >{{footer_resource_case_txt}}</span
                  ></a
                >
              </li>

              <li>
                <a
                  class="text-[#7E7E7E] text-[16px] md:text-[20px] lg:text-[24px]"
                  data-node="footer_resource_testimonials"
                  data-node-type="page_links"
                  data-node-default="Testimonials"
                  href="{{footer_resource_testimonials}}"
                  ><span
                    data-node="footer_resource_testimonials_txt"
                    data-node-type="text"
                    data-node-default="Testimonials"
                    data-node-label="Resource Testimonials Text"
                    >{{footer_resource_testimonials_txt}}</span
                  ></a
                >
              </li>

              <li>
                <a
                  class="text-[#7E7E7E] text-[16px] md:text-[20px] lg:text-[24px]"
                  data-node="footer_resource_insights"
                  data-node-type="page_links"
                  data-node-default="Insights"
                  href="{{footer_resource_insights}}"
                  ><span
                    data-node="footer_resource_insights_txt"
                    data-node-type="text"
                    data-node-default="Insights"
                    data-node-label="Resource Insights Text"
                    >{{footer_resource_insights_txt}}</span
                  ></a
                >
              </li>

              <li>
                <a
                  class="text-[#7E7E7E] text-[16px] md:text-[20px] lg:text-[24px]"
                  data-node="footer_resource_results"
                  data-node-type="page_links"
                  data-node-default="Results"
                  href="{{footer_resource_results}}"
                  ><span
                    data-node="footer_resource_results_txt"
                    data-node-type="text"
                    data-node-default="Results"
                    data-node-label="Resource Results Text"
                    >{{footer_resource_results_txt}}</span
                  ></a
                >
              </li>

              <li>
                <a
                  class="text-[#7E7E7E] text-[16px] md:text-[20px] lg:text-[24px]"
                  data-node="footer_resource_courses"
                  data-node-type="page_links"
                  data-node-default="Courses"
                  href="{{footer_resource_courses}}"
                  ><span
                    data-node="footer_resource_courses_txt"
                    data-node-type="text"
                    data-node-default="Courses"
                    data-node-label="Resource Courses Text"
                    >{{footer_resource_courses_txt}}</span
                  ></a
                >
              </li>
            </ul>
          </div>

          <!-- SOLUTIONS -->
          <div>
            <h3
              class="font-['Cabin'] text-[24px] md:text-[28px] lg:text-[32px] mb-6"
              data-node="footer_solutions_title"
              data-node-type="text"
              data-node-default="Solutions"
              data-node-label="Solutions Title"
            >
              {{footer_solutions_title}}
            </h3>

            <ul class="space-y-4">
              <li>
                <a
                  class="text-[#7E7E7E] text-[16px] md:text-[20px] lg:text-[24px]"
                  data-node="footer_solution_brand"
                  data-node-type="page_links"
                  data-node-default="Brand Strategy"
                  href="{{footer_solution_brand}}"
                  ><span
                    data-node="footer_solution_brand_txt"
                    data-node-type="text"
                    data-node-default="Brand Strategy"
                    data-node-label="Solution Brand Text"
                    >{{footer_solution_brand_txt}}</span
                  ></a
                >
              </li>

              <li>
                <a
                  class="text-[#7E7E7E] text-[16px] md:text-[20px] lg:text-[24px]"
                  data-node="footer_solution_copy"
                  data-node-type="page_links"
                  data-node-default="Web Copywriting"
                  href="{{footer_solution_copy}}"
                  ><span
                    data-node="footer_solution_copy_txt"
                    data-node-type="text"
                    data-node-default="Web Copywriting"
                    data-node-label="Solution Copy Text"
                    >{{footer_solution_copy_txt}}</span
                  ></a
                >
              </li>

              <li>
                <a
                  class="text-[#7E7E7E] text-[16px] md:text-[20px] lg:text-[24px]"
                  data-node="footer_solution_content"
                  data-node-type="page_links"
                  data-node-default="Content Marketing"
                  href="{{footer_solution_content}}"
                  ><span
                    data-node="footer_solution_content_txt"
                    data-node-type="text"
                    data-node-default="Content Marketing"
                    data-node-label="Solution Content Text"
                    >{{footer_solution_content_txt}}</span
                  ></a
                >
              </li>

              <li>
                <a
                  class="text-[#7E7E7E] text-[16px] md:text-[20px] lg:text-[24px]"
                  data-node="footer_solution_performance"
                  data-node-type="page_links"
                  data-node-default="Performance Marketing"
                  href="{{footer_solution_performance}}"
                  ><span
                    data-node="footer_solution_performance_txt"
                    data-node-type="text"
                    data-node-default="Performance Marketing"
                    data-node-label="Solution Performance Text"
                    >{{footer_solution_performance_txt}}</span
                  ></a
                >
              </li>

              <li>
                <a
                  class="text-[#7E7E7E] text-[16px] md:text-[20px] lg:text-[24px]"
                  data-node="footer_solution_social"
                  data-node-type="page_links"
                  data-node-default="Social Media Strategy"
                  href="{{footer_solution_social}}"
                  ><span
                    data-node="footer_solution_social_txt"
                    data-node-type="text"
                    data-node-default="Social Media Strategy"
                    data-node-label="Solution Social Text"
                    >{{footer_solution_social_txt}}</span
                  ></a
                >
              </li>
            </ul>
          </div>
        </div>

        <!-- ============ NEWSLETTER COLUMN ============ -->
        <div class="flex flex-col w-full lg:max-w-[440px]">
          <h3 class="font-['Cabin'] text-[24px] md:text-[28px] lg:text-[32px] mb-6">
            <span
              data-node="footer_newsletter_title_txt"
              data-node-type="text"
              data-node-default="Subscribe to Newsletter"
              data-node-label="Newsletter Title Text"
              >{{footer_newsletter_title_txt}}</span
            >
          </h3>

          <div class="flex w-full mb-8">
            <input
              type="email"
              placeholder="{{footer_email_placeholder}}"
              class="bg-[#0E0E0E] text-white text-[16px] md:text-[20px] lg:text-[24px] font-['Cabin'] px-3 md:px-4 py-3 md:py-4 rounded-l-[14px] md:rounded-l-[16px] w-full bg-gradient-to-b from-white/5 to-transparent border border-white/20 backdrop-blur-[10px] placeholder-white/70 outline-none h-12 md:h-auto"
              data-node="footer_email_placeholder"
              data-node-type="text"
              data-node-default="Enter your email here"
              data-node-label="Newsletter Email Placeholder"
            />

            <button
              class="bg-[#D3FF5B] text-black text-[16px] md:text-[20px] lg:text-[24px] font-['Cabin'] px-3 md:px-[19px] py-3 md:py-[16px] rounded-r-[14px] md:rounded-r-[16px] h-12 md:h-auto"
            >
              <span
                data-node="footer_submit_btn_txt"
                data-node-type="text"
                data-node-default="Submit"
                data-node-label="Newsletter Submit Button Text"
                >{{footer_submit_btn_txt}}</span
              >
            </button>
          </div>

          <h3 class="font-['Cabin'] text-[24px] md:text-[28px] lg:text-[32px] mb-4">
            <span
              data-node="footer_follow_us_title_txt"
              data-node-type="text"
              data-node-default="Follow us on"
              data-node-label="Follow Us Title Text"
              >{{footer_follow_us_title_txt}}</span
            >
          </h3>

          <div class="flex items-center gap-4 md:gap-6 justify-center lg:justify-start mt-3 lg:mt-0">
            <img
              src="{{footer_icon_twitter}}"
              class="w-[30px] md:w-[38px] lg:w-[45px]"
              data-node="footer_icon_twitter"
              data-node-type="file"
              data-node-default="./assets/icon twitter.svg"
              data-node-label="Twitter Icon"
            />

            <img
              src="{{footer_icon_facebook}}"
              class="w-[30px] md:w-[38px] lg:w-[45px]"
              data-node="footer_icon_facebook"
              data-node-type="file"
              data-node-default="./assets/icon facebook.svg"
              data-node-label="Facebook Icon"
            />

            <img
              src="{{footer_icon_pinterest}}"
              class="w-[30px] md:w-[38px] lg:w-[45px]"
              data-node="footer_icon_pinterest"
              data-node-type="file"
              data-node-default="./assets/icon pinterest.svg"
              data-node-label="Pinterest Icon"
            />

            <img
              src="{{footer_icon_discord}}"
              class="w-[30px] md:w-[38px] lg:w-[45px]"
              data-node="footer_icon_discord"
              data-node-type="file"
              data-node-default="./assets/icon discord.svg"
              data-node-label="Discord Icon"
            />
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- COPYRIGHT WRAPPER -->
  <div class="w-full">
    <!-- INSET BORDER CONTAINER -->
    <div class="mx-4 md:mx-12 lg:mx-24">
      <!-- COPYRIGHT -->
      <div class="w-full border-t border-white/20 mt-10 lg:mt-16 pt-5 lg:pt-6 text-center">
        <p class="text-[16px] md:text-[20px] lg:text-[24px] text-white">
          <span
            data-node="footer_copyright_txt"
            data-node-type="text"
            data-node-default="Logo Copyright 2025"
            data-node-label="Copyright Text"
            >{{footer_copyright_txt}}</span
          >
        </p>
      </div>
    </div>
  </div>
</footer>
