<footer id="footer" class="bg-gray-900 text-white relative overflow-hidden">
  <!-- Background elements -->
  <div class="absolute inset-0 overflow-hidden">
    <div class="absolute inset-0 opacity-[0.03]" aria-hidden="true">
      <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <pattern id="footer-dots" width="20" height="20" patternUnits="userSpaceOnUse">
            <circle cx="10" cy="10" r="1" fill="currentColor" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#footer-dots)" />
      </svg>
    </div>
  </div>
  
  <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-12">
    <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-12">
      <!-- Brand column -->
      <div class="space-y-6">
        <!-- Logo -->
        <div>
          {% if sections.footer.logo %}
          <img 
            src="{{ sections.footer.logo.src }}" 
            alt="{{ sections.footer.logo.alt }}" 
            class="h-10"
          >
          {% else %}
          <h2 class="text-2xl font-bold text-white">{{ sections.footer.brand_name }}</h2>
          {% endif %}
        </div>
        
        <!-- Description -->
        <p class="text-gray-400">
          {{ sections.footer.description }}
        </p>
        
        <!-- Social links -->
        {% if sections.footer.social_links %}
        <div class="flex gap-4">
          {% for social in sections.footer.social_links %}
          <a 
            href="{{ social.url }}" 
            class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:bg-indigo-600 hover:text-white transition-colors duration-300"
            aria-label="{{ social.platform }}"
            target="_blank"
            rel="noopener"
          >
            <i class="{{ social.icon }}" aria-hidden="true"></i>
          </a>
          {% endfor %}
        </div>
        {% endif %}
      </div>
      
      <!-- Navigation columns -->
      {% for nav in sections.footer.navigation %}
      <div>
        <h3 class="text-lg font-semibold text-white mb-6">{{ nav.title }}</h3>
        <ul class="space-y-4">
          {% for link in nav.links %}
          <li>
            <a 
              href="{{ link.url }}" 
              class="text-gray-400 hover:text-white transition-colors duration-300"
              {% if link.external %}target="_blank" rel="noopener"{% endif %}
            >
              {{ link.label }}
            </a>
          </li>
          {% endfor %}
        </ul>
      </div>
      {% endfor %}
      
      <!-- Newsletter column -->
      {% if sections.footer.newsletter %}
      <div>
        <h3 class="text-lg font-semibold text-white mb-6">{{ sections.footer.newsletter.title }}</h3>
        <p class="text-gray-400 mb-4">{{ sections.footer.newsletter.description }}</p>
        
        <form class="space-y-4">
          <div>
            <label for="email-address" class="sr-only">Email address</label>
            <input 
              id="email-address" 
              name="email" 
              type="email" 
              required 
              class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors duration-300"
              placeholder="{{ sections.footer.newsletter.placeholder }}"
            >
          </div>
          <div>
            <button 
              type="submit" 
              class="w-full px-4 py-3 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition-colors duration-300"
            >
              {{ sections.footer.newsletter.button_text }}
            </button>
          </div>
        </form>
      </div>
      {% endif %}
    </div>
    
    <!-- Bottom bar -->
    <div class="mt-16 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
      <!-- Copyright -->
      <div class="text-gray-400 mb-4 md:mb-0">
        {{ sections.footer.copyright }}
      </div>
      
      <!-- Legal links -->
      {% if sections.footer.legal_links %}
      <div class="flex flex-wrap gap-6">
        {% for link in sections.footer.legal_links %}
        <a 
          href="{{ link.url }}" 
          class="text-gray-400 hover:text-white transition-colors duration-300 text-sm"
        >
          {{ link.label }}
        </a>
        {% endfor %}
      </div>
      {% endif %}
    </div>
  </div>
</footer>
