<footer
  class="py-16 px-4 sm:px-6 lg:px-8 text-white relative overflow-hidden"
  id="footer"
  aria-label="Footer"
>
  <!-- Background image from hero -->
  <div class="absolute inset-0 z-0">
    <div
      class="absolute inset-0 bg-cover bg-center"
      style="background-image: url('{{ sections.hero.heroImage.src }}');"
    ></div>
    <div class="absolute inset-0 bg-gradient-to-br from-gray-900/90 via-gray-800/80 to-gray-900/70"></div>
  </div>
  
  <!-- Subtle background elements -->
  <div class="absolute inset-0 pointer-events-none opacity-30 z-1">
    <div class="absolute -top-24 -right-24 w-96 h-96 bg-blue-500/20 rounded-full blur-3xl"></div>
    <div class="absolute -bottom-24 -left-24 w-96 h-96 bg-indigo-500/20 rounded-full blur-3xl"></div>
  </div>
  
  <div class="max-w-7xl mx-auto relative z-10">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
      <!-- Brand -->
      <div class="md:col-span-1 transform transition-all duration-500 hover:translate-y-[-8px]">
        <a
          href="{{ sections.footer.brand.href | default('#') }}"
          class="text-2xl font-light text-white mb-6 block transition-colors duration-300 hover:text-gray-200"
          style="font-family: {{settings.fonts.heading}}"
        >{{ sections.footer.brand.name }}</a>
        
        <div class="w-12 h-px bg-white/30 mb-6 transition-all duration-300 group-hover:w-20 group-hover:bg-white/50"></div>
        
        <p class="text-gray-300 text-sm font-light mb-8"
           style="font-family: {{settings.fonts.body}}">
          {{ sections.footer.brand.description.text }}
        </p>
        
        {% if sections.footer.brand.socialLinks is defined %}
        <div class="flex space-x-4">
          {% for social in sections.footer.brand.socialLinks.links %}
          <a
            href="{{ social.url }}"
            class="text-gray-400 hover:text-white transition-all duration-300 hover:scale-110 transform"
            aria-label="{{ social.platform }}"
          >
            <i class="{{ social.icon }} text-lg"></i>
          </a>
          {% endfor %}
        </div>
        {% endif %}
      </div>

      <!-- Navigation Columns -->
      {% for column in sections.footer.navigation %}
      <div class="transform transition-all duration-500 hover:translate-y-[-8px]" style="transition-delay: {{ loop.index * 100 }}ms">
        <h3 class="text-sm uppercase tracking-widest text-gray-300 mb-6 relative"
            style="font-family: {{settings.fonts.body}}">
          {{ column.title }}
          <span class="absolute -bottom-2 left-0 w-8 h-0.5 bg-white/30 transition-all duration-300 group-hover:w-full"></span>
        </h3>
        
        <ul class="space-y-4">
          {% for link in column.links %}
          <li>
            <a
              href="{{ link.url }}"
              class="text-gray-400 font-light hover:text-white transition-colors duration-300 flex items-center group"
              aria-label="{{ link.ariaLabel | default(link.label) }}"
              style="font-family: {{settings.fonts.body}}"
            >
              <span class="inline-block w-0 group-hover:w-2 h-px bg-gray-400 mr-0 group-hover:mr-2 transition-all duration-300"></span>
              {{ link.label }}
            </a>
          </li>
          {% endfor %}
        </ul>
      </div>
      {% endfor %}

      <!-- Subscribe -->
      {% if sections.footer.subscribe is defined %}
      <div class="transform transition-all duration-500 hover:translate-y-[-8px]" style="transition-delay: 400ms">
        <h3 class="text-sm uppercase tracking-widest text-gray-300 mb-6 relative"
            style="font-family: {{settings.fonts.body}}">
          {{ sections.footer.subscribe.title }}
          <span class="absolute -bottom-2 left-0 w-8 h-0.5 bg-white/30 transition-all duration-300 group-hover:w-full"></span>
        </h3>
        
        <form class="space-y-4" id="footerSubscribeForm">
          <div class="relative overflow-hidden">
            <input
              type="email"
              placeholder="{{ sections.footer.subscribe.input.placeholder }}"
              class="w-full px-4 py-3 bg-white/10 backdrop-blur-sm border border-white/20 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none text-white transition-all duration-300 ease-out"
              style="font-family: {{settings.fonts.body}}"
              required
            />
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-white/50 transition-all duration-500 input-focus-indicator"></span>
          </div>
          
          <div class="overflow-hidden">
            <button
              type="submit"
              class="w-full px-4 py-3 bg-white text-gray-900 font-light tracking-wide uppercase text-sm hover:bg-gray-200 transition-all duration-300 ease-out focus:outline-none focus:ring-1 focus:ring-white focus:ring-offset-2 relative overflow-hidden group"
              style="font-family: {{settings.fonts.body}}"
            >
              <span class="absolute inset-0 w-0 bg-gray-100 transition-all duration-500 ease-out group-hover:w-full"></span>
              <span class="relative">{{ sections.footer.subscribe.button.text }}</span>
            </button>
          </div>
          
          <div id="footerSubscribeMsg" class="hidden">
            <div class="w-full text-center py-2 text-green-400 font-light text-xs animate-fadeIn" style="font-family: {{settings.fonts.body}}">
              <svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
              Thank you for subscribing!
            </div>
          </div>
        </form>
        
        <p class="text-gray-400 text-xs font-light mt-4"
           style="font-family: {{settings.fonts.body}}">
          {{ sections.footer.subscribe.description.text }}
        </p>
      </div>
      {% endif %}
    </div>

    <!-- Bottom Footer -->
    <div class="border-t border-white/10 mt-16 pt-8 relative">
      <!-- Animated border gradient -->
      <div class="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/30 to-transparent transform translate-y-0"></div>
      
      <div class="flex flex-col md:flex-row justify-between items-center gap-6">
        <p class="text-gray-400 text-sm font-light order-2 md:order-1"
           style="font-family: {{settings.fonts.body}}">
          {{ sections.footer.bottom.copyright }}
        </p>
        
        {% if sections.footer.paymentMethods is defined %}
        <div class="flex items-center gap-6 order-1 md:order-2">
          {% for payment in sections.footer.paymentMethods %}
          <span class="text-gray-400 transition-all duration-300 hover:text-white hover:scale-110 transform">
            <i
              class="{{ payment.icon }} text-xl"
              aria-label="{{ payment.name }}"
            ></i>
          </span>
          {% endfor %}
        </div>
        {% endif %}
      </div>
    </div>
    
    <!-- Back to top button -->
    <div class="absolute bottom-8 right-8 opacity-0 transition-all duration-500" id="backToTopBtn">
      <a href="#" class="w-12 h-12 bg-white/10 backdrop-blur-sm border border-white/20 rounded-full flex items-center justify-center text-white shadow-lg hover:bg-white/20 transition-all duration-300 hover:scale-110 transform">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
        </svg>
      </a>
    </div>
  </div>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Subscribe form functionality
      document
        .getElementById("footerSubscribeForm")
        ?.addEventListener("submit", function (e) {
          e.preventDefault();
          const emailInput = this.querySelector('input[type="email"]');
          const email = emailInput.value.trim();
          const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
          if (email && emailRegex.test(email)) {
            document.getElementById("footerSubscribeMsg").classList.remove("hidden");
            this.reset();
            
            // Hide success message after 3 seconds
            setTimeout(() => {
              document.getElementById("footerSubscribeMsg").classList.add("hidden");
            }, 3000);
          }
        });
      
      // Input focus effect
      const inputs = document.querySelectorAll('input[type="email"]');
      inputs.forEach(input => {
        input.addEventListener('focus', function() {
          const indicator = this.parentNode.querySelector('.input-focus-indicator');
          indicator.style.width = '100%';
        });
        
        input.addEventListener('blur', function() {
          const indicator = this.parentNode.querySelector('.input-focus-indicator');
          if (!this.value) {
            indicator.style.width = '0';
          }
        });
      });
      
      // Back to top button
      const backToTopBtn = document.getElementById('backToTopBtn');
      
      window.addEventListener('scroll', function() {
        if (window.pageYOffset > 300) {
          backToTopBtn.style.opacity = '1';
        } else {
          backToTopBtn.style.opacity = '0';
        }
      });
      
      // Reveal animations on scroll
      const footerSections = document.querySelectorAll('#footer > div > div > div');
      
      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            entry.target.classList.add('animate-fadeInUp');
            observer.unobserve(entry.target);
          }
        });
      }, { threshold: 0.1 });
      
      footerSections.forEach(section => {
        observer.observe(section);
      });
    });
  </script>
  
  <style>
    /* Animations */
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    .animate-fadeIn {
      animation: fadeIn 0.5s ease-out forwards;
    }
    
    .animate-fadeInUp {
      animation: fadeInUp 0.6s ease-out forwards;
    }
    
    /* Staggered animation delay for children */
    #footer > div > div > div:nth-child(1) {
      opacity: 0;
      animation-delay: 0.1s;
    }
    
    #footer > div > div > div:nth-child(2) {
      opacity: 0;
      animation-delay: 0.2s;
    }
    
    #footer > div > div > div:nth-child(3) {
      opacity: 0;
      animation-delay: 0.3s;
    }
    
    #footer > div > div > div:nth-child(4) {
      opacity: 0;
      animation-delay: 0.4s;
    }
  </style>
</footer>