<footer data-component-type="Footer" class data-component-slug="ss-dental-footer">
  <div class="max-w-[1920px] mx-auto px-8 lg:px-16 xl:px-24 py-12 md:py-16">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-12">
      <!-- Brand Column -->
      <div>
        <img data-node="footer_logo" data-node-type="file" data-node-label="Footer Logo" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053580/seltrix/templates/ss-dental-template/logo.svg" src="{{footer_logo}}" alt="Logo" class="h-8 mb-4">
        <p data-node="footer_tagline" data-node-type="textarea" data-node-label="Tagline" data-node-default="Delivering trusted healthcare through expertise, compassion, and innovation." class="text-gray-500 text-sm leading-relaxed mb-6">
          {{footer_tagline}}
        </p>

        <!-- Footer Nav Links (Inline) -->
        <div class="flex flex-wrap gap-4 md:gap-6">
          <a data-node="footer_nav_1_url" data-node-type="page_links" data-node-label="Footer Nav 1 URL" data-node-default="home" href="{{footer_nav_1_url}}" class="text-gray-900 font-medium text-sm hover:text-[#007C8A] transition-colors">
            <span data-node="footer_nav_1_text" data-node-type="text" data-node-label="Footer Nav 1 Text" data-node-default="Home">{{footer_nav_1_text}}</span>
          </a>
          <a data-node="footer_nav_2_url" data-node-type="page_links" data-node-label="Footer Nav 2 URL" data-node-default="services" href="{{footer_nav_2_url}}" class="text-gray-900 font-medium text-sm hover:text-[#007C8A] transition-colors">
            <span data-node="footer_nav_2_text" data-node-type="text" data-node-label="Footer Nav 2 Text" data-node-default="Service">{{footer_nav_2_text}}</span>
          </a>
          <a data-node="footer_nav_3_url" data-node-type="page_links" data-node-label="Footer Nav 3 URL" data-node-default="properties" href="{{footer_nav_3_url}}" class="text-gray-900 font-medium text-sm hover:text-[#007C8A] transition-colors">
            <span data-node="footer_nav_3_text" data-node-type="text" data-node-label="Footer Nav 3 Text" data-node-default="Appointment">{{footer_nav_3_text}}</span>
          </a>
          <a data-node="footer_nav_4_url" data-node-type="page_links" data-node-label="Footer Nav 4 URL" data-node-default="about" href="{{footer_nav_4_url}}" class="text-gray-900 font-medium text-sm hover:text-[#007C8A] transition-colors">
            <span data-node="footer_nav_4_text" data-node-type="text" data-node-label="Footer Nav 4 Text" data-node-default="About">{{footer_nav_4_text}}</span>
          </a>
        </div>
      </div>

      <!-- Help Column -->
      <div>
        <h4 data-node="help_heading" data-node-type="text" data-node-label="Help Section Heading" data-node-default="Help" class="text-gray-900 font-semibold mb-4">
          {{help_heading}}
        </h4>
        <nav class="flex flex-col gap-3">
          <a data-node="help_link_1_url" data-node-type="url" data-node-label="Help Link 1 URL" data-node-default="#" href="{{help_link_1_url}}" class="text-gray-500 text-sm hover:text-[#007C8A] transition-colors">
            <span data-node="help_link_1_text" data-node-type="text" data-node-label="Help Link 1 Text" data-node-default="Customer Support">{{help_link_1_text}}</span>
          </a>
          <a data-node="help_link_2_url" data-node-type="url" data-node-label="Help Link 2 URL" data-node-default="#" href="{{help_link_2_url}}" class="text-gray-500 text-sm hover:text-[#007C8A] transition-colors">
            <span data-node="help_link_2_text" data-node-type="text" data-node-label="Help Link 2 Text" data-node-default="Terms & Conditions">{{help_link_2_text}}</span>
          </a>
          <a data-node="help_link_3_url" data-node-type="url" data-node-label="Help Link 3 URL" data-node-default="#" href="{{help_link_3_url}}" class="text-gray-500 text-sm hover:text-[#007C8A] transition-colors">
            <span data-node="help_link_3_text" data-node-type="text" data-node-label="Help Link 3 Text" data-node-default="Privacy Policy">{{help_link_3_text}}</span>
          </a>
        </nav>
      </div>

      <!-- Newsletter Column -->
      <div>
        <h4 data-node="newsletter_heading" data-node-type="text" data-node-label="Newsletter Heading" data-node-default="Subscribe to our Newsletter" class="text-gray-900 font-semibold mb-4">
          {{newsletter_heading}}
        </h4>
        <form class="mb-6" data-newsletter-form>
          <div class="flex gap-2">
            <input type="email" name="email" data-node="newsletter_placeholder" data-node-type="text" data-node-label="Newsletter Placeholder" data-node-default="Enter your mail address" placeholder="{{newsletter_placeholder}}" class="flex-1 py-3 border-b border-gray-200 bg-transparent text-sm focus:outline-none focus:border-[#007C8A] transition-colors" required>
            <button type="submit" class="px-4 py-2 bg-[#007C8A] text-white text-sm font-medium rounded-lg hover:bg-[#006670] transition-colors">
              <span data-node="newsletter_button_text" data-node-type="text" data-node-label="Newsletter Button Text" data-node-default="Subscribe">{{newsletter_button_text}}</span>
            </button>
          </div>
          <!-- Status Message -->
          <div id="newsletter-status" class="hidden mt-3 py-2 px-3 rounded text-center text-sm font-medium"></div>
        </form>

        <!-- Social Icons -->
        <div class="flex items-center gap-4">
          <span data-node="social_label" data-node-type="text" data-node-label="Social Label" data-node-default="Follow us:" class="text-gray-500 text-sm">{{social_label}}</span>
          <div class="flex items-center gap-3">
            <a data-node="social_twitter_url" data-node-type="url" data-node-label="Twitter URL" data-node-default="#" href="{{social_twitter_url}}" class="text-gray-900 hover:text-[#007C8A] transition-colors">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"/>
              </svg>
            </a>
            <a data-node="social_facebook_url" data-node-type="url" data-node-label="Facebook URL" data-node-default="#" href="{{social_facebook_url}}" class="text-gray-900 hover:text-[#007C8A] transition-colors">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
              </svg>
            </a>
            <a data-node="social_pinterest_url" data-node-type="url" data-node-label="Pinterest URL" data-node-default="#" href="{{social_pinterest_url}}" class="text-gray-900 hover:text-[#007C8A] transition-colors">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 0C5.373 0 0 5.373 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.406.042-3.442.218-.936 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.208 0 1.031.397 2.137.893 2.739.098.119.112.223.083.344l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.608 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0z"/>
              </svg>
            </a>
            <a data-node="social_discord_url" data-node-type="url" data-node-label="Discord URL" data-node-default="#" href="{{social_discord_url}}" class="text-gray-900 hover:text-[#007C8A] transition-colors">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                <path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- Copyright -->
    <div class="border-t border-gray-200 mt-12 pt-8 text-center">
      <p data-node="copyright_text" data-node-type="text" data-node-label="Copyright Text" data-node-default="2023 Brand name All Rights Reserved" class="text-gray-500 text-sm">
        {{copyright_text}}
      </p>
    </div>
  </div>
</footer>