{% load static %}
<!DOCTYPE html>
<html lang="fr" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes, viewport-fit=cover">
    <title>{% block title %}{{ site_config.nom_plateforme }}{% endblock %}</title>

    {# Google Fonts : Cinzel pour la marque, Montserrat pour le contenu #}
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">

    {# Tailwind CSS via CDN #}
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        // Configuration Tailwind personnalisée (optionnelle)
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        'cinzel': ['Cinzel', 'serif'],
                        'montserrat': ['Montserrat', 'sans-serif'],
                    },
                    colors: {
                        'gold': '#D4AF37',
                        'dark': '#050505',
                        'light': '#F5F5F5',
                    }
                }
            }
        }
    </script>

    {# FingerprintJS (pour la sécurité des votes, chargé partout) #}
    <script src="https://cdn.jsdelivr.net/npm/@fingerprintjs/fingerprintjs@3/dist/fp.min.js"></script>

    {# Styles globaux inlined #}
    <style>
        /* Barre de progression dorée (animée au changement de page) */
        #page-progress-bar {
            position: fixed;
            top: 0;
            left: 0;
            height: 3px;
            width: 0%;
            background: linear-gradient(90deg, #D4AF37, #F9D976, #D4AF37);
            box-shadow: 0 0 8px rgba(212, 175, 55, 0.7);
            z-index: 100;
            transition: width 0.4s cubic-bezier(0.2, 0.9, 0.1, 1);
            pointer-events: none;
        }

        /* Effet de flou pour la navbar */
        .nav-blur {
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            background-color: rgba(5, 5, 5, 0.75);
        }

        /* Liens avec animation discrète */
        .nav-link {
            position: relative;
            font-family: 'Montserrat', sans-serif;
            font-weight: 500;
            transition: color 0.2s;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0%;
            height: 2px;
            background: #D4AF37;
            transition: width 0.3s ease;
        }
        .nav-link:hover::after {
            width: 100%;
        }

        /* Bouton doré */
        .btn-gold {
            background: transparent;
            border: 1.5px solid #D4AF37;
            color: #D4AF37;
            padding: 0.5rem 1.25rem;
            border-radius: 9999px;
            font-weight: 600;
            transition: all 0.25s;
            font-family: 'Montserrat', sans-serif;
        }
        .btn-gold:hover {
            background: #D4AF37;
            color: #050505;
            box-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
        }

        /* Titres de marque */
        .brand-font {
            font-family: 'Cinzel', serif;
            font-weight: 700;
            background: linear-gradient(135deg, #F9D976 0%, #E5B84B 40%, #F3E2A7 70%, #C59B3C 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            letter-spacing: 0.05em;
        }

        /* Menu mobile */
        #mobile-menu {
            max-height: 0;
            opacity: 0;
            visibility: hidden;
            transition: max-height 0.4s ease, opacity 0.3s ease, visibility 0.3s;
            overflow: hidden;
            background: rgba(10, 10, 10, 0.95);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(212, 175, 55, 0.3);
        }
        #mobile-menu.open {
            max-height: 300px;
            opacity: 1;
            visibility: visible;
        }

        body {
            font-family: 'Montserrat', sans-serif;
            background-color: #050505;
            color: #F5F5F5;
        }

        /* Animation fade-in pour le contenu */
        .fade-in {
            animation: fadeIn 0.5s ease-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>

    {# Bloc pour styles supplémentaires des enfants #}
    {% block extra_head %}{% endblock %}
</head>
<body class="min-h-screen flex flex-col antialiased">

    {# Barre de progression #}
    <div id="page-progress-bar"></div>

    {# NAVBAR (sticky, glass) #}
    <header class="sticky top-0 z-50 nav-blur border-b border-gold/20 shadow-lg">
        <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16 md:h-20">
                {# Logo / Nom du site #}
                <div class="flex items-center">
                    <a href="/" class="brand-font text-xl md:text-2xl hover:opacity-90 transition">
                        {{ site_config.nom_plateforme }}
                    </a>
                </div>

                {# Desktop Navigation #}
                <div class="hidden md:flex items-center space-x-8">
                    <a href="/" class="nav-link text-light/90 hover:text-gold">Accueil</a>
                    
                    
                    {% if user.is_authenticated %}
                        <div class="flex items-center space-x-4">
                            <span class="text-sm text-light/70">{{ user.email|truncatechars:20 }}</span>
                            <a href="{% url 'account_logout' %}" class="btn-gold text-sm">Déconnexion</a>
                        </div>
                    {% else %}
                        <a href="{% url 'account_login' %}" class="btn-gold">Voter</a>
                    {% endif %}
                </div>

                {# Mobile menu button #}
                <div class="md:hidden">
                    <button id="menu-toggle" class="text-gold focus:outline-none p-2" aria-label="Menu">
                        <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                        </svg>
                    </button>
                </div>
            </div>

            {# Mobile Menu (collapsible) #}
            <div id="mobile-menu" class="md:hidden">
                <div class="px-2 pt-2 pb-4 space-y-3">
                    <a href="/" class="block px-3 py-2 rounded-md text-base font-medium text-light hover:text-gold hover:bg-white/5 transition">Accueil</a>
                    
                    
                    {% if user.is_authenticated %}
                        <div class="px-3 py-2 text-sm text-light/70 border-t border-gold/20 mt-2 pt-3">
                            Connecté en tant que<br><span class="text-gold">{{ user.email }}</span>
                        </div>
                        <a href="{% url 'account_logout' %}" class="block w-full text-center btn-gold py-2 mt-2">Déconnexion</a>
                    {% else %}
                        <a href="{% url 'account_login' %}" class="block w-full text-center btn-gold py-2 mt-2">Voter</a>
                    {% endif %}
                </div>
            </div>
        </nav>
    </header>

    {# CONTENU PRINCIPAL #}
    <main class="flex-1 flex flex-col fade-in">
        {% block content %}
        {# Le contenu spécifique de chaque page viendra ici #}
        {% endblock %}
    </main>

    {# FOOTER #}
    <footer class="border-t border-gold/20 mt-12 py-6">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center text-sm text-light/60">
                <div class="mb-3 md:mb-0">
                    &copy; <span id="current-year"></span> {{ site_config.nom_plateforme }}. Tous droits réservés.
                </div>
                <div class="flex flex-wrap justify-center gap-x-6 gap-y-2">
                    <a href="{% url 'awards_vitrine:legal' %}" class="hover:text-gold transition">Mentions légales</a>
                    <span class="hidden sm:inline text-gold/30">|</span>
                    <a href="mailto:{{ site_config.contact_email }}" class="hover:text-gold transition">
                        <i class="far fa-envelope mr-1"></i>{{ site_config.contact_email }}
                    </a>
                </div>
            </div>
        </div>
    </footer>

    {# SCRIPTS GLOBAUX #}
    <script>
        (function() {
            // 1. Année dynamique dans le footer
            document.getElementById('current-year').textContent = new Date().getFullYear();

            // 2. Barre de progression dorée (au changement de page)
            const progressBar = document.getElementById('page-progress-bar');
            
            function startProgress(e) {
                // On ignore les liens externes, les ancres, les téléchargements, ou les liens avec target _blank
                const link = e.currentTarget;
                const href = link.getAttribute('href');
                if (!href || href.startsWith('#') || link.target === '_blank' || link.hostname !== window.location.hostname) {
                    return;
                }
                // Lancer l'animation de la barre
                progressBar.style.width = '80%';
                // Après un court délai, on passe à 100% (la page va se recharger)
                setTimeout(() => {
                    progressBar.style.width = '100%';
                }, 150);
            }

            // Attacher l'événement à tous les liens internes (à l'exception de ceux ayant data-no-progress)
            document.querySelectorAll('a[href]:not([data-no-progress])').forEach(link => {
                // Ne pas interférer avec les liens déjà gérés par d'autres scripts (ex: menu mobile)
                link.addEventListener('click', startProgress);
            });

            // 3. Menu mobile toggle
            const menuToggle = document.getElementById('menu-toggle');
            const mobileMenu = document.getElementById('mobile-menu');
            if (menuToggle && mobileMenu) {
                menuToggle.addEventListener('click', () => {
                    mobileMenu.classList.toggle('open');
                });
                
                // Fermer le menu si on clique sur un lien à l'intérieur
                mobileMenu.querySelectorAll('a').forEach(link => {
                    link.addEventListener('click', () => {
                        mobileMenu.classList.remove('open');
                    });
                });
            }

            // 4. FingerprintJS : initialisation silencieuse (pour utilisation ultérieure dans les pages de vote)
            // On l'expose globalement si nécessaire
            if (typeof FingerprintJS !== 'undefined') {
                window.fpPromise = FingerprintJS.load();
            }

            // 5. Réinitialiser la barre de progression si la page est chargée depuis le cache (bfcache)
            window.addEventListener('pageshow', () => {
                progressBar.style.width = '0%';
            });
            // Au chargement complet, on remet à zéro
            window.addEventListener('load', () => {
                progressBar.style.width = '0%';
            });
        })();
    </script>

    {# Bloc pour scripts additionnels des enfants #}
    {% block extra_js %}{% endblock %}
</body>
</html>