<footer class="bg-[#FDFDF9] pt-20 pb-10 px-5 border-t border-[#E5E5E5]" data-component-type="Footer" data-component-slug="ss-photography-footer">
  <div class="max-w-[1400px] mx-auto">
    <!-- Top Section: Heading & Decorative Element -->
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-16 md:mb-24 gap-8">
      <h2 class="font-['Cormorant',_serif] text-5xl md:text-7xl lg:text-8xl text-[#1A1A1A] leading-[1.1] uppercase max-w-5xl">
        <span class="block" data-node="footer_heading_line_1" data-node-type="text" data-node-label="Heading Line 1" data-node-default="LET’S TAKE A MOMENT">{{footer_heading_line_1}}</span>
        <span class="block" data-node="footer_heading_line_2" data-node-type="text" data-node-label="Heading Line 2" data-node-default="THAT LAST FOREVER">{{footer_heading_line_2}}</span>
      </h2>

      <!-- Decorative Circle -->
      <div class="hidden w-24 h-24 md:flex items-center justify-center">
        <img src="{{footer_icon}}" alt data-node="footer_icon" data-node-type="file" data-node-label="Footer Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767438695/seltrix/templates/ss-photography/Decorative_Circle.png" class="w-full">
      </div>
    </div>

    <!-- Divider -->
    <div class="w-full h-px bg-[#D4D4D4] mb-10"></div>

    <!-- Bottom Section: Info & Logo -->
    <div class="flex flex-col md:flex-row justify-between items-center gap-8 text-center md:text-left">
      <!-- Social Links -->
      <div class="flex items-center gap-6 text-xs font-sans text-[#666666] tracking-widest uppercase">
        <a href="{{social_1_link}}" class="hover:text-[#1A1A1A] transition-colors" data-node="social_1_link" data-node-type="url" data-node-label="Social 1 Link" data-node-default="#">
          <span data-node="social_1_text" data-node-type="text" data-node-label="Social 1 Text" data-node-default="FB">{{social_1_text}}</span>
        </a>
        <a href="{{social_2_link}}" class="hover:text-[#1A1A1A] transition-colors" data-node="social_2_link" data-node-type="url" data-node-label="Social 2 Link" data-node-default="#">
          <span data-node="social_2_text" data-node-type="text" data-node-label="Social 2 Text" data-node-default="TW">{{social_2_text}}</span>
        </a>
        <a href="{{social_3_link}}" class="hover:text-[#1A1A1A] transition-colors" data-node="social_3_link" data-node-type="url" data-node-label="Social 3 Link" data-node-default="#">
          <span data-node="social_3_text" data-node-type="text" data-node-label="Social 3 Text" data-node-default="IG">{{social_3_text}}</span>
        </a>
      </div>

      <!-- Contact Info -->
      <div class="flex flex-col items-center md:items-start lg:items-center">
        <span class="text-xs font-sans text-[#666666] mb-1" data-node="contact_label" data-node-type="text" data-node-label="Contact Label" data-node-default="Drop me an email at :">
          {{contact_label}}
        </span>
        <a href="{{contact_email_link}}" class="text-base font-sans text-[#1A1A1A] hover:underline" data-node="contact_email_link" data-node-type="url" data-node-label="Email Link (mailto:)" data-node-default="mailto:hello@focalspot.com">
          <span data-node="contact_email" data-node-type="text" data-node-label="Email Address" data-node-default="hello@focalspot.com">{{contact_email}}</span>
        </a>
      </div>

      <!-- Logo -->
      <div>
        <img src="{{footer_logo}}" class="h-8 md:h-10 w-auto" alt="Logo" data-node="footer_logo" data-node-type="file" data-node-label="Footer Logo" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767440964/seltrix/templates/ss-photography/Logo.svg">
      </div>
    </div>
  </div>
</footer>