{% load traduction_tags cms_tags %}
{% get_menu 'front-menu' as footer_menu %}

<!-- Footer -->
<footer class="bg-dark text-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <!-- Logo et description -->
            <div class="lg:col-span-1">
                <div class="flex items-center space-x-3 mb-4">
                    <a href="/" class="flex items-center space-x-3">
                        {% if settings.logo_menu %}
                        <img src="{{ settings.logo_menu }}" alt="{{ settings.site_name }}" class="h-10 w-auto">
                        {% else %}
                        <div class="w-10 h-10 bg-accent rounded-full flex items-center justify-center font-bold text-primary">EU</div>
                        {% endif %}
                        <span class="font-bold text-xl">{{ settings.site_name }}</span>
                    </a>
                </div>
                <p class="text-gray-400 text-sm mb-4">{{ settings.tagline }}</p>
                <div class="flex space-x-4">
                    {% for link in social_links %}
                    <a href="{{ link.url }}" target="_blank" class="text-gray-400 hover:text-accent transition">
                        {% if link.platform == 'facebook' %}
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"/></svg>
                        {% elif link.platform == 'twitter' %}
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"/></svg>
                        {% elif link.platform == 'linkedin' %}
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
                        {% elif link.platform == 'youtube' %}
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
                        {% endif %}
                    </a>
                    {% endfor %}
                </div>
            </div>

            <!-- Navigation -->
            <div>
                <h4 class="font-semibold text-lg mb-4">{% trans_text 'Navigation' 'Navigation' 'Navigation' %}</h4>
                <ul class="space-y-2 text-gray-400">
                    {% if footer_menu %}
                        {% for item in footer_menu.get_root_items %}
                        <li>
                            <a href="{{ item.get_url }}" class="hover:text-accent transition"
                               {% if item.open_in_new_tab %}target="_blank" rel="noopener noreferrer"{% endif %}>
                                {% if item.icon %}<i class="{{ item.icon.group.libelle }} {{ item.icon.libelle }} mr-1"></i>{% endif %}
                                {{ item.title }}
                            </a>
                        </li>
                        {% endfor %}
                    {% else %}
                        <li><a href="/" class="hover:text-accent transition">{% trans_text 'Accueil' 'Home' 'Startseite' %}</a></li>
                    {% endif %}
                </ul>
            </div>

            <!-- Contact -->
            <div>
                <h4 class="font-semibold text-lg mb-4">{% trans_text 'Contact' 'Contact' 'Kontakt' %}</h4>
                <ul class="space-y-2 text-gray-400">
                    <li class="flex items-center">
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
                        <a href="mailto:{{ settings.email }}" class="hover:text-accent transition">{{ settings.email }}</a>
                    </li>
                    <li class="flex items-center">
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                        </svg>
                        <a href="tel:{{ settings.phone }}" class="hover:text-accent transition">{{ settings.phone }}</a>
                    </li>
                </ul>
            </div>

            <!-- Newsletter -->
            <div>
                <h4 class="font-semibold text-lg mb-4">Newsletter</h4>
                <p class="text-gray-400 text-sm mb-4">{% trans_text 'Restez informé de nos actualités' 'Stay informed about our news' 'Bleiben Sie über unsere Neuigkeiten informiert' %}</p>
                <form action="{% url 'contact:newsletter' %}" method="post" class="flex gap-2">
                    {% csrf_token %}
                    <input type="email" name="email" placeholder="{% trans_text 'Votre email' 'Your email' 'Ihre E-Mail' %}" required
                           class="flex-1 px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-sm focus:outline-none focus:border-accent">
                    <button type="submit" class="px-4 py-2 bg-accent text-primary font-medium rounded-lg hover:bg-yellow-400 transition">
                        OK
                    </button>
                </form>
            </div>
        </div>

        <div class="border-t border-white/10 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center text-gray-400 text-sm">
            <p>&copy; {% now "Y" %} {{ settings.site_name }}. {% trans_text 'Tous droits réservés.' 'All rights reserved.' 'Alle Rechte vorbehalten.' %}</p>
            {% if main_partner %}
            <div class="flex items-center mt-4 md:mt-0">
                <span class="mr-2">{% trans_text 'Co-financé par' 'Co-funded by' 'Kofinanziert von' %}</span>
                {% if main_partner.logo %}
                <img src="{{ main_partner.logo.url }}" alt="{{ main_partner.name }}" class="h-6 object-contain">
                {% else %}
                <span class="font-medium text-white">{{ main_partner.name }}</span>
                {% endif %}
            </div>
            {% endif %}
        </div>
    </div>
</footer>