<footer id="footer" aria-label="Footer" class="relative pt-24 pb-16 bg-slate-950 text-white overflow-hidden">
  <!-- Decorative pattern background -->
  <div class="absolute inset-0 pointer-events-none">
    <!-- Gradient background -->
    <div class="absolute inset-0 bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950">
      <div class="absolute inset-0 opacity-30">
        <div class="absolute bottom-0 -left-40 w-80 h-80 bg-blue-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob"></div>
        <div class="absolute top-0 -right-40 w-80 h-80 bg-cyan-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000"></div>
        <div class="absolute -bottom-40 left-20 w-80 h-80 bg-indigo-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000"></div>
      </div>
    </div>
    
    <!-- Grid pattern -->
    <div class="absolute inset-0 opacity-10" style="background-size: 40px 40px; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);"></div>
  </div>

  <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Top section with logo and CTA -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 pb-16 border-b border-slate-800/50">
      <!-- Brand section -->
      <div class="lg:col-span-5 space-y-8">
        <!-- Logo -->
        <a href="{{ sections.footer.brand.href | default('#') }}" class="inline-block group">
          <div class="flex items-center space-x-3">
            <!-- Logo mark -->
            <div class="relative">
              <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-blue-600 to-indigo-600 flex items-center justify-center shadow-lg shadow-blue-500/20 group-hover:shadow-blue-500/30 transition-all duration-300 rotate-3 group-hover:rotate-0">
                <span class="text-2xl font-bold text-white">
                  {{ sections.footer.brand.name | slice(0, 1) }}
                </span>
              </div>
              <!-- Glow effect -->
              <div class="absolute -inset-2 rounded-xl bg-blue-400/20 blur-md opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
            </div>
            
            <!-- Logo text -->
            <div>
              <span class="block text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-blue-100 to-blue-200">
                {{ sections.footer.brand.name }}
              </span>
              <span class="text-xs text-blue-400 tracking-widest uppercase">Future Forward</span>
            </div>
          </div>
        </a>
        
        <!-- Description -->
        <p class="text-slate-300 leading-relaxed max-w-md">
          {{ sections.footer.brand.description.text }}
        </p>
        
        <!-- Social links -->
        {% if sections.footer.brand.socialLinks is defined %}
        <div class="flex flex-wrap gap-3">
          {% for social in sections.footer.brand.socialLinks.links %}
          <a
            href="{{ social.url }}"
            class="group relative w-10 h-10 flex items-center justify-center rounded-lg bg-slate-800/50 border border-slate-700 hover:border-blue-500/50 transition-all duration-300"
            aria-label="{{ social.platform }}"
          >
            <!-- Hover effect -->
            <span class="absolute inset-0 rounded-lg bg-gradient-to-r from-blue-600 to-indigo-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
            <i class="{{ social.icon }} text-slate-300 group-hover:text-white relative z-10 transition-colors duration-300"></i>
          </a>
          {% endfor %}
        </div>
        {% endif %}
      </div>
      
      <!-- Newsletter section -->
      <div class="lg:col-span-7">
        <div class="relative p-8 rounded-2xl overflow-hidden bg-slate-900/50 backdrop-blur-sm border border-slate-800">
          <!-- Subtle grid overlay -->
          <div class="absolute inset-0 opacity-10" style="background-size: 20px 20px; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);"></div>
          
          <!-- Content -->
          <div class="relative">
            <div class="flex items-center gap-4 mb-6">
              <div class="p-3 rounded-lg bg-gradient-to-br from-blue-600 to-indigo-600 text-white">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                </svg>
              </div>
              <div>
                <h3 class="text-xl font-bold text-white">{{ sections.footer.subscribe.title }}</h3>
                <p class="text-slate-300">{{ sections.footer.subscribe.description.text }}</p>
              </div>
            </div>
            
            <!-- Newsletter form -->
            <form class="space-y-4">
              <div class="flex flex-col sm:flex-row gap-3">
                <div class="relative flex-1">
                  <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                    </svg>
                  </div>
                  <input
                    type="email"
                    placeholder="{{ sections.footer.subscribe.input.placeholder }}"
                    class="w-full pl-12 pr-4 py-3 rounded-lg bg-slate-800 border border-slate-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none text-white placeholder-slate-400 transition-all duration-300"
                  />
                </div>
                
                <button
                  type="submit"
                  class="group relative px-6 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-medium rounded-lg overflow-hidden"
                >
                  <!-- Hover effect -->
                  <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-blue-500 to-indigo-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
                  <span class="relative flex items-center justify-center">
                    {{ sections.footer.subscribe.button.text }}
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2 group-hover:translate-x-1 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
                    </svg>
                  </span>
                </button>
              </div>
              
              <!-- Privacy note -->
              <p class="text-xs text-slate-400">
                By subscribing, you agree to our Privacy Policy and consent to receive updates.
              </p>
            </form>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Middle section with links -->
    <div class="py-16 grid grid-cols-2 md:grid-cols-4 lg:grid-cols-12 gap-8">
      <!-- Navigation Columns -->
      {% for column in sections.footer.navigation %}
      <div class="lg:col-span-3">
        <h3 class="text-lg font-bold text-white mb-6 relative inline-block">
          {{ column.title }}
          <!-- Decorative underline -->
          <span class="absolute -bottom-2 left-0 w-12 h-1 bg-gradient-to-r from-blue-500 to-indigo-500 rounded-full"></span>
        </h3>
        
        <ul class="space-y-4">
          {% for link in column.links %}
          <li>
            <a
              href="{{ link.url }}"
              class="text-slate-300 hover:text-white transition-colors duration-300 flex items-center group"
              aria-label="{{ link.ariaLabel | default(link.label) }}"
            >
              <!-- Hover indicator -->
              <div class="mr-3 w-0 group-hover:w-2 h-0.5 bg-blue-500 transition-all duration-300"></div>
              {{ link.label }}
            </a>
          </li>
          {% endfor %}
        </ul>
      </div>
      {% endfor %}
    </div>
    
    <!-- Bottom section -->
    <div class="pt-12 border-t border-slate-800/50">
      <div class="flex flex-col md:flex-row justify-between items-center gap-6">
        <!-- Copyright -->
        <p class="text-slate-400 text-sm order-2 md:order-1">
          {{ sections.footer.bottom.copyright }}
        </p>
        
        <!-- Payment methods -->
        {% if sections.footer.paymentMethods is defined %}
        <div class="flex flex-wrap items-center gap-3 order-1 md:order-2">
          {% for payment in sections.footer.paymentMethods %}
          <div class="group relative">
            <div class="p-2 rounded-lg bg-slate-800/80 border border-slate-700 hover:border-blue-500/50 transition-colors duration-300">
              <i class="{{ payment.icon }} text-lg text-slate-300 group-hover:text-white transition-colors duration-300" aria-label="{{ payment.name }}"></i>
            </div>
            <!-- Tooltip -->
            <span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-slate-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap border border-slate-700">
              {{ payment.name }}
            </span>
          </div>
          {% endfor %}
        </div>
        {% endif %}
      </div>
      
      <!-- Additional links -->
      <div class="mt-8 flex flex-wrap gap-x-8 gap-y-3 text-sm text-slate-400 justify-center md:justify-start">
        <a href="#" class="hover:text-blue-400 transition-colors duration-300">Privacy Policy</a>
        <a href="#" class="hover:text-blue-400 transition-colors duration-300">Terms of Service</a>
        <a href="#" class="hover:text-blue-400 transition-colors duration-300">Cookie Settings</a>
        <a href="#" class="hover:text-blue-400 transition-colors duration-300">Accessibility</a>
      </div>
      
      <!-- Back to top button -->
      <div class="mt-8 flex justify-center md:justify-end">
        <a href="#" class="group p-3 bg-slate-800/80 hover:bg-gradient-to-r hover:from-blue-600 hover:to-indigo-600 rounded-full transition-all duration-300 border border-slate-700 hover:border-transparent">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-slate-300 group-hover:text-white" 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>
  </div>
  
  <style>
    @keyframes blob {
      0% {
        transform: translate(0px, 0px) scale(1);
      }
      33% {
        transform: translate(30px, -50px) scale(1.1);
      }
      66% {
        transform: translate(-20px, 20px) scale(0.9);
      }
      100% {
        transform: translate(0px, 0px) scale(1);
      }
    }
    
    .animate-blob {
      animation: blob 7s infinite;
    }
    
    .animation-delay-2000 {
      animation-delay: 2s;
    }
    
    .animation-delay-4000 {
      animation-delay: 4s;
    }
  </style>
</footer>