<footer id="footer" class="bg-gray-900 text-white pt-16 pb-8">
  <div class="container mx-auto px-4">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
      <div class="md:col-span-1">
        <a href="#" class="text-3xl font-['Dancing Script'] text-white mb-4 inline-block">{{ sections.footer.brand.name }}</a>
        <p class="text-gray-400 mb-6">{{ sections.footer.brand.description.text }}</p>
        <div class="flex space-x-4">
          {% for social in sections.footer.brand.socialLinks.links %}
            <a href="{{ social.url }}" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors">
              <span class="w-5 h-5 flex items-center justify-center"><i class="{{ social.icon }}-line"></i></span>
            </a>
          {% endfor %}
          
          
        </div>
      </div>
      {% for navGroup in sections.footer.navigation %}
      <div class="md:col-span-1">
        <h4 class="text-lg font-semibold mb-4">{{ navGroup.title }}</h4>
        <ul class="space-y-3">
          {% for link in navGroup.links %}
            <li><a href="{{ link.url }}" class="text-gray-400 hover:text-white transition-colors" onclick="#{{ link.url }}">{{ link.label }}</a></li>
          {% endfor %}
        </ul>
      </div>
      {% endfor %}
      
      {% if sections.footer.contact %}
      <div class="md:col-span-1">
        <h4 class="text-lg font-semibold mb-4">Contact</h4>
        <ul class="space-y-3">
          <li class="flex items-start">
            <span class="w-5 h-5 flex items-center justify-center text-gray-400 mr-2 mt-1"><i class="ri-map-pin-line"></i></span>
            <span class="text-gray-400">{{ sections.footer.contact.address }}</span>
          </li>
          <li class="flex items-start">
            <span class="w-5 h-5 flex items-center justify-center text-gray-400 mr-2 mt-1"><i class="ri-mail-line"></i></span>
            <a href="mailto:{{ sections.footer.contact.email }}" class="text-gray-400 hover:text-white transition-colors">{{ sections.footer.contact.email }}</a>
          </li>
          <li class="flex items-start">
            <span class="w-5 h-5 flex items-center justify-center text-gray-400 mr-2 mt-1"><i class="ri-phone-line"></i></span>
            <a href="tel:{{ sections.footer.contact.phone }}" class="text-gray-400 hover:text-white transition-colors">{{ sections.footer.contact.phone }}</a>
          </li>
        </ul>
      </div>
      {% endif %}
    </div>
    <div class="border-t border-gray-800 pt-8 mt-8">
      <div class="flex flex-col md:flex-row justify-between items-center">
        <p class="text-gray-400 text-sm">&copy; 2025 {{ sections.footer.brand.name }}. All rights reserved.</p>
      </div>
    </div>
  </div>
</footer>