<footer
  id="footer"
  class="bg-gray-900 text-white relative overflow-hidden pt-20 pb-10"
>
  <!-- Background pattern -->
  <div class="absolute inset-0 opacity-5">
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <pattern id="dots-footer" width="20" height="20" patternUnits="userSpaceOnUse">
          <circle cx="10" cy="10" r="1.5" fill="rgba(245, 158, 11, 0.5)" />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#dots-footer)" />
    </svg>
  </div>
  
  <!-- Floating elements -->
  <div class="absolute top-1/4 right-1/4 w-64 h-64 bg-gradient-to-br from-amber-500/10 to-rose-500/10 rounded-full mix-blend-overlay filter blur-3xl animate-float"></div>
  <div class="absolute bottom-1/3 left-1/4 w-80 h-80 bg-gradient-to-br from-rose-500/10 to-amber-500/10 rounded-full mix-blend-overlay filter blur-3xl animate-float animation-delay-4000"></div>
  
  <div
    class="max-w-{{ sections['footer']['maxWidth'] }} mx-auto px-{{ sections['footer']['padding']['x'] }} sm:px-{{ sections['footer']['padding']['smX'] }} lg:px-{{ sections['footer']['padding']['lgX'] }} relative z-10"
  >
    <!-- Responsive Grid -->
    <div
      class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-{{ sections['footer']['grid']['cols'] }} gap-{{ sections['footer']['grid']['gap'] }}"
      data-animate="section"
    >
      <!-- Brand Column -->
      <div data-animate="feature" data-delay="100">
        <div class="flex items-center space-x-3 mb-4">
          <!-- Logo mark -->
          <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-amber-500 to-rose-500 flex items-center justify-center text-white transform rotate-3 hover:rotate-0 transition-transform duration-300">
            <span class="text-xl font-bold">{{ sections['footer']['brand']['name'] | slice(0, 1) }}</span>
          </div>
          
          <!-- Logo text -->
          <span class="{{ sections['footer']['brand']['textClasses'] }} bg-clip-text text-transparent bg-gradient-to-r from-amber-400 to-rose-400">
            {{ sections['footer']['brand']['name'] }}
          </span>
        </div>
        
        <p
          class="mt-{{ sections['footer']['brand']['description']['marginTop'] }} text-{{ sections['footer']['brand']['description']['color'] }}"
        >
          {{ sections['footer']['brand']['description']['text'] }}
        </p>

        {% if sections['footer']['brand']['socialLinks']['links'] is defined %}
        <div
          class="flex flex-wrap gap-2 sm:gap-{{ sections['footer']['brand']['socialLinks']['spacing'] }} mt-{{ sections['footer']['brand']['socialLinks']['marginTop'] }}"
        >
          {% for social in sections['footer']['brand']['socialLinks']['links'] %}
          <a
            href="{{ social['url'] }}"
            class="w-9 h-9 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:bg-gradient-to-br hover:from-amber-500 hover:to-rose-500 hover:text-white transition-all duration-300 hover:-translate-y-1"
          >
            <i class="{{ social['icon'] }} text-{{ social['iconSize'] }}"></i>
          </a>
          {% endfor %}
        </div>
        {% endif %}
      </div>

      <!-- Navigation Columns -->
      {% for column in sections['footer']['navigation'] %}
      <div class="mt-8 sm:mt-0" data-animate="feature" data-delay="{{ loop.index * 100 + 200 }}">
        <h3 class="{{ column['titleClasses'] }} relative inline-block">
          {{ column['title'] }}
          <!-- Decorative underline -->
          <span class="absolute -bottom-2 left-0 w-8 h-0.5 bg-gradient-to-r from-amber-400 to-rose-400 rounded-full"></span>
        </h3>
        <ul
          class="space-y-{{ column['list']['spacing'] }} text-{{ column['list']['color'] }} mt-4"
        >
          {% for link in column['links'] %}
          <li>
            <a
              href="{{ link['url'] }}"
              class="hover:text-amber-400 transition-colors duration-300"
            >
              {{ link['label'] }}
            </a>
          </li>
          {% endfor %}
        </ul>
      </div>
      {% endfor %}

      <!-- Subscribe Column -->
      {% if sections['footer']['subscribe'] %}
      <div class="mt-8 sm:mt-0" data-animate="feature" data-delay="500">
        <h3 class="{{ sections['footer']['subscribe']['titleClasses'] }} relative inline-block">
          {{ sections['footer']['subscribe']['title'] }}
          <!-- Decorative underline -->
          <span class="absolute -bottom-2 left-0 w-8 h-0.5 bg-gradient-to-r from-amber-400 to-rose-400 rounded-full"></span>
        </h3>
        <form
          id="subscribeForm"
          class="flex flex-col sm:flex-row w-full max-w-xl gap-2 sm:gap-0 mt-4"
        >
          <div class="relative flex-1">
            <input
              type="email"
              placeholder="{{ sections['footer']['subscribe']['input']['placeholder'] }}"
              class="w-full flex-1 min-w-0 px-4 py-2 rounded-lg bg-gray-800 border border-gray-700 text-white focus:outline-none focus:border-amber-500"
            />
            <div class="input-focus-indicator absolute bottom-0 left-0 h-0.5 w-0 bg-gradient-to-r from-amber-400 to-rose-400 transition-all duration-300"></div>
          </div>
          <button type="submit" class="sm:ml-2 px-5 py-2 bg-gradient-to-r from-amber-500 to-rose-500 text-white rounded-lg hover:shadow-lg hover:shadow-amber-500/20 transition-all duration-300">
            {{ sections['footer']['subscribe']['button']['text'] }}
          </button>
        </form>

        <p
          class="text-{{ sections['footer']['subscribe']['description']['color'] }} mt-3 text-sm"
        >
          {{ sections['footer']['subscribe']['description']['text'] }}
        </p>
      </div>
      {% endif %}
    </div>

    <!-- Bottom Section -->
    <div
      class="mt-{{ sections['footer']['bottom']['marginTop'] }} pt-{{ sections['footer']['bottom']['paddingTop'] }} border-t border-gray-800 flex flex-col gap-4 sm:gap-0 sm:flex-row justify-between items-center text-{{ sections['footer']['bottom']['textColor'] }} text-{{ sections['footer']['bottom']['textSize'] }}"
      data-animate="feature" data-delay="600"
    >
      <p class="text-center sm:text-left">
        {{ sections['footer']['bottom']['copyright'] }}
      </p>

      {% if sections['footer']['bottom']['links']['items'] is defined %}
      <div
        class="flex flex-wrap justify-center sm:justify-end space-x-{{ sections['footer']['bottom']['links']['spacing'] }} mt-{{ sections['footer']['bottom']['links']['marginTop'] }} sm:mt-0"
      >
        {% for link in sections['footer']['bottom']['links']['items'] %}
        <a href="{{ link['url'] }}" class="hover:text-amber-400 transition-colors duration-300">
          {{ link['label'] }}
        </a>
        {% if not loop.last %}
        <span class="text-gray-600">•</span>
        {% endif %} {% endfor %}
      </div>
      {% endif %}
    </div>
  </div>

  <!-- Back to top button -->
  <button id="backToTopBtn" class="fixed bottom-8 right-8 w-10 h-10 rounded-full bg-gradient-to-br from-amber-500 to-rose-500 flex items-center justify-center text-white shadow-lg opacity-0 transition-opacity duration-300 hover:-translate-y-1 hover:shadow-xl z-50">
    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
    </svg>
  </button>

  <script>
    document
      .getElementById("subscribeForm")
      ?.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("subscribeDialog")
            ?.classList.remove("hidden");
          this.reset();
        }
      });
      
    // 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';
      }
    });
    
    backToTopBtn.addEventListener('click', function() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    });
    
    // 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';
        }
      });
    });
    
    // Reveal animations on scroll
    const animateElements = document.querySelectorAll('[data-animate]');
    
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const delay = entry.target.dataset.delay || 0;
          setTimeout(() => {
            entry.target.classList.add('animate-fadeIn');
          }, delay);
          observer.unobserve(entry.target);
        }
      });
    }, { threshold: 0.1 });
    
    animateElements.forEach(element => {
      observer.observe(element);
    });
  </script>
  
  <style>
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes float {
      0% { transform: translate(0px, 0px) scale(1); }
      33% { transform: translate(20px, -30px) scale(1.05); }
      66% { transform: translate(-10px, 20px) scale(0.95); }
      100% { transform: translate(0px, 0px) scale(1); }
    }
    
    .animate-float {
      animation: float 15s ease-in-out infinite;
    }
    
    .animation-delay-4000 {
      animation-delay: 4000ms;
    }
    
    .animate-fadeIn {
      animation: fadeIn 0.6s ease-out forwards;
    }
    
    [data-animate] {
      opacity: 0;
    }
  </style>
</footer>