<footer class="bg-[#F6FBFF] pt-20 pb-6" data-component-type="Footer" data-component-slug="real-estate-template-footer">
  <div class="max-w-[90%] mx-auto">
    <!-- TOP FOOTER -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
      <!-- LOGO + DESCRIPTION -->
      <div class="space-y-4">
        <!-- LOGO -->
        <img src="{{footer_logo}}" data-node="footer_logo" data-node-type="file" data-node-label="Footer Logo" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767358821/seltrix/templates/real-estate-template/logo.png" alt="Logo" class="h-10 w-auto">

        <!-- DESCRIPTION -->
        <p class="text-sm text-[#636363] max-w-xs" data-node="footer_description" data-node-type="text" data-node-label="Footer Description" data-node-default="Building premium living experiences.">
          {{footer_description}}
        </p>

        <!-- PRIMARY LINKS -->
        <div class="pt-[50px]">
          <ul class="flex gap-[20px] text-sm text-[#010609]">
            <li>
              <a href="{{footer_link_1_url}}" data-node="footer_link_1_url" data-node-type="page_links" data-node-label="Footer Link 1 URL" data-node-default="#">
                <span data-node="footer_link_1_text" data-node-type="text" data-node-label="Footer Link 1 Text" data-node-default="Home">
                  {{footer_link_1_text}}
                </span>
              </a>
            </li>

            <li>
              <a href="{{footer_link_2_url}}" data-node="footer_link_2_url" data-node-type="page_links" data-node-default="#">
                <span data-node="footer_link_2_text" data-node-type="text" data-node-default="Service">
                  {{footer_link_2_text}}
                </span>
              </a>
            </li>

            <li>
              <a href="{{footer_link_3_url}}" data-node="footer_link_3_url" data-node-type="page_links" data-node-default="#">
                <span data-node="footer_link_3_text" data-node-type="text" data-node-default="Properties">
                  {{footer_link_3_text}}
                </span>
              </a>
            </li>

            <li>
              <a href="{{footer_link_4_url}}" data-node="footer_link_4_url" data-node-type="page_links" data-node-default="#">
                <span data-node="footer_link_4_text" data-node-type="text" data-node-default="About">
                  {{footer_link_4_text}}
                </span>
              </a>
            </li>
          </ul>
        </div>
      </div>

      <!-- HELP -->
      <div class="space-y-3">
        <p class="font-medium text-black" data-node="footer_help_title" data-node-type="text" data-node-label="Help Title" data-node-default="Help">
          {{footer_help_title}}
        </p>

        <ul class="space-y-2 text-sm text-[#636363]">
          <li>
            <a href="{{help_link_1_url}}" data-node="help_link_1_url" data-node-type="page_links" data-node-default="#">
              <span data-node="help_link_1_text" data-node-type="text" data-node-default="Customer Support">
                {{help_link_1_text}}
              </span>
            </a>
          </li>

          <li>
            <a href="{{help_link_2_url}}" data-node="help_link_2_url" data-node-type="page_links" data-node-default="#">
              <span data-node="help_link_2_text" data-node-type="text" data-node-default="Terms & Conditions">
                {{help_link_2_text}}
              </span>
            </a>
          </li>

          <li>
            <a href="{{help_link_3_url}}" data-node="help_link_3_url" data-node-type="page_links" data-node-default="#">
              <span data-node="help_link_3_text" data-node-type="text" data-node-default="Privacy Policy">
                {{help_link_3_text}}
              </span>
            </a>
          </li>
        </ul>
      </div>

      <!-- NEWSLETTER + SOCIAL -->
      <div class="space-y-6">
        <!-- EMAIL -->
        <div>
          <p class="text-sm text-[#000000] mb-2" data-node="newsletter_label" data-node-type="text" data-node-label="Newsletter Label" data-node-default="Enter your mail address">
            {{newsletter_label}}
          </p>

          <input type="email" placeholder="{{newsletter_placeholder}}" data-node="newsletter_placeholder" data-node-default="Enter your mail address" data-node-type="text" data-node-label="Newsletter Placeholder" class="w-full bg-transparent border-b border-gray-400 focus:outline-none focus:border-black text-sm py-2">
        </div>

        <!-- SOCIAL -->
        <div class="flex items-center gap-4">
          <span class="text-sm text-[#000000]" data-node="social_label" data-node-type="text" data-node-label="Social Label" data-node-default="Follow us:">
            {{social_label}}
          </span>

          <div class="flex gap-4">
            <a href="{{twitter_url}}" data-node="twitter_url" data-node-type="url" data-node-default="#">
              <img src="{{twitter_icon}}" data-node="twitter_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767362595/seltrix/templates/real-estate-template/twitter_.png" class="h-[25px] w-[25px]">
            </a>

            <a href="{{facebook_url}}" data-node="facebook_url" data-node-type="url" data-node-default="#">
              <img src="{{facebook_icon}}" data-node="facebook_icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767362560/seltrix/templates/real-estate-template/discord_.png" data-node-type="file" class="h-[25px] w-[25px]">
            </a>

            <a href="{{pinterest_url}}" data-node="pinterest_url" data-node-type="url" data-node-default="#">
              <img src="{{pinterest_icon}}" data-node="pinterest_icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359401/seltrix/templates/real-estate-template/Vector.png" data-node-type="file" class="h-[25px] w-[25px]">
            </a>

            <a href="{{discord_url}}" data-node="discord_url" data-node-type="url" data-node-default="#">
              <img src="{{discord_icon}}" data-node="discord_icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359400/seltrix/templates/real-estate-template/Vector%20%281%29.png" data-node-type="file" class="h-[25px] w-[25px]">
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- DIVIDER -->
    <div class="border-t border-gray-300 mt-16"></div>

    <!-- BOTTOM -->
    <p class="text-center text-sm text-gray-600 mt-6" data-node="footer_copyright" data-node-type="text" data-node-label="Copyright Text" data-node-default="2025 All Rights Reserved">
      {{footer_copyright}}
    </p>
  </div>
</footer>