<?php
// Pied de page global
?>
    <!-- FOOTER -->
    <footer id="contact" class="bg-alsace-red-dark text-white relative mt-12">
        <!-- Forme décorative optionnelle en haut du footer (vague/courbe) -->
        <div class="absolute top-0 left-0 w-full overflow-hidden leading-none transform -translate-y-full">
            <svg class="relative block w-full h-[50px]" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
                <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V120H0V95.8C50.23,89.5,100.95,78.29,151.7,71.1,208.57,63.14,266.39,64.22,321.39,56.44Z" fill="#5c1a1b"></path>
            </svg>
        </div>

        <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">
                
                <!-- Contact -->
                <div>
                    <h5 class="font-serif text-xl font-bold mb-4 text-alsace-cream">Contact</h5>
                    <p class="mb-2 text-gray-300">Mairie de Kutzenhausen<br>1 Place de la Mairie<br>67250 Kutzenhausen</p>
                    <p class="mb-1 text-gray-300"><i data-lucide="phone" class="inline w-4 h-4 mr-2"></i>Tél : 03 88 80 71 58</p>
                    <p class="text-gray-300"><i data-lucide="mail" class="inline w-4 h-4 mr-2"></i>mairie@kutzenhausen.fr</p>
                </div>

                <!-- Horaires -->
                <div>
                    <h5 class="font-serif text-xl font-bold mb-4 text-alsace-cream">Horaires d'ouverture</h5>
                    <ul class="text-gray-300 space-y-2">
                        <?php 
                        $days = [
                            'Lundi' => 'opening_hours_mon',
                            'Mardi' => 'opening_hours_tue',
                            'Mercredi' => 'opening_hours_wed',
                            'Jeudi' => 'opening_hours_thu',
                            'Vendredi' => 'opening_hours_fri',
                            'Samedi' => 'opening_hours_sat',
                            'Dimanche' => 'opening_hours_sun'
                        ];
                        foreach($days as $label => $key): 
                            $val = $site_settings[$key] ?? 'Fermé';
                            if($val !== 'Fermé'):
                        ?>
                            <li><span class="w-20 inline-block font-medium"><?php echo $label; ?> :</span> <?php echo htmlspecialchars($val); ?></li>
                        <?php 
                            endif;
                        endforeach; 
                        ?>
                    </ul>
                </div>

                <!-- Réseaux Sociaux -->
                <div>
                    <h5 class="font-serif text-xl font-bold mb-4 text-alsace-cream">Suivez-nous</h5>
                    <div class="flex space-x-4">
                        <a href="https://app.panneaupocket.com/ville/1579338183-kutzenhausen-67250" target="_blank" rel="noopener noreferrer" class="bg-white/10 w-11 h-11 flex items-center justify-center rounded-full hover:bg-alsace-red transition cursor-pointer" title="Panneau Pocket">
                            <img src="images/logo-panneau-pocket-new.png" alt="Panneau Pocket" class="w-6 h-6 object-contain">
                        </a>
                    </div>
                </div>

                <!-- Liens Utiles / Sitemap -->
                <div>
                    <h5 class="font-serif text-xl font-bold mb-4 text-alsace-cream">Liens Utiles</h5>
                    <ul class="text-gray-300 space-y-2">
                        <li><a href="contact.php" class="hover:text-white hover:underline transition">Contactez-nous</a></li>
                        <li><a href="mentions-legales.php" class="hover:text-white hover:underline transition">Mentions légales</a></li>
                        <li><a href="plan-du-site.php" class="hover:text-white hover:underline transition">Plan du site</a></li>
                        <li><a href="accessibilite.php" class="hover:text-white hover:underline transition">Accessibilité</a></li>
                        <li><a href="politique-confidentialite.php" class="hover:text-white hover:underline transition">Politique de confidentialité</a></li>
                    </ul>
                </div>

            </div>

            <div class="border-t border-white/20 mt-12 pt-8 flex flex-col md:flex-row items-center justify-between gap-6">
                <div class="flex flex-wrap justify-center gap-6 grayscale opacity-70 hover:grayscale-0 hover:opacity-100 transition duration-500">
                    <a href="https://www.alsace.eu/" target="_blank" rel="noopener noreferrer">
                        <img src="images/logo-cea.png" alt="Collectivité européenne d'Alsace" class="h-10 w-auto object-contain">
                    </a>
                    <a href="https://www.visit.alsace/alsace-du-nord/" target="_blank" rel="noopener noreferrer">
                        <img src="images/logo-tourisme.png" alt="Tourisme Alsace" class="h-10 w-auto object-contain">
                    </a>
                    <a href="https://www.alsace-verte.com/" target="_blank" rel="noopener noreferrer">
                        <img src="images/logo-alsace-verte.jpg" alt="L'Alsace Verte" class="h-10 w-auto object-contain">
                    </a>
                </div>
                <div class="text-center md:text-right text-sm text-gray-400">
                    <p>&copy; <?php echo date('Y'); ?> Commune de Kutzenhausen. Tous droits réservés.</p>
                </div>
            </div>
        </div>
    </footer>

<?php
// Fetch site settings
try {
    $keys = ['cookie_banner_text', 'cookie_banner_active', 'opening_hours_mon', 'opening_hours_tue', 'opening_hours_wed', 'opening_hours_thu', 'opening_hours_fri', 'opening_hours_sat', 'opening_hours_sun'];
    $placeholders = str_repeat('?,', count($keys) - 1) . '?';
    $stmt_settings = $pdo->prepare("SELECT `key`, `value` FROM site_settings WHERE `key` IN ($placeholders)");
    $stmt_settings->execute($keys);
    $site_settings = $stmt_settings->fetchAll(PDO::FETCH_KEY_PAIR);
} catch (Exception $e) {
    $site_settings = [];
}

// Default values if missing
$defaults = [
    'cookie_banner_active' => '0',
    'cookie_banner_text' => '',
    'opening_hours_mon' => '10:00 - 12:00',
    'opening_hours_tue' => '15:00 - 19:00',
    'opening_hours_wed' => 'Fermé',
    'opening_hours_thu' => '10:00 - 12:00',
    'opening_hours_fri' => '10:00 - 12:00',
    'opening_hours_sat' => 'Fermé',
    'opening_hours_sun' => 'Fermé'
];
$site_settings = array_merge($defaults, $site_settings);
?>

    <!-- COOKIE BANNER -->
    <?php if($site_settings['cookie_banner_active'] == '1'): ?>
    <div id="cookie-banner" class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-2xl z-[100] transform translate-y-full transition-transform duration-500">
        <div class="max-w-7xl mx-auto px-6 py-6 md:py-4 flex flex-col md:flex-row items-center justify-between gap-4">
            <div class="flex items-center">
                <div class="p-3 bg-red-50 rounded-full mr-4 hidden md:block">
                    <i data-lucide="shield-check" class="w-6 h-6 text-alsace-red"></i>
                </div>
                <p class="text-sm text-gray-600 leading-relaxed">
                    <?php echo htmlspecialchars($site_settings['cookie_banner_text']); ?>
                    <a href="politique-confidentialite.php" class="text-alsace-red font-bold hover:underline ml-1">En savoir plus</a>
                </p>
            </div>
            <div class="flex items-center space-x-4 shrink-0">
                <button id="accept-cookies" class="bg-alsace-red text-white px-8 py-2.5 rounded-lg font-bold text-sm hover:bg-alsace-red-dark transition shadow-md">
                    Accepter
                </button>
            </div>
        </div>
    </div>
    <?php endif; ?>

    <!-- Scripts -->
    <script>
        // Cookie Management
        const cookieBanner = document.getElementById('cookie-banner');
        const acceptBtn = document.getElementById('accept-cookies');

        if (cookieBanner && !localStorage.getItem('cookies-accepted')) {
            setTimeout(() => {
                cookieBanner.classList.remove('translate-y-full');
            }, 1000);
        }

        if (acceptBtn) {
            acceptBtn.addEventListener('click', () => {
                localStorage.setItem('cookies-accepted', 'true');
                cookieBanner.classList.add('translate-y-full');
            });
        }

        // Initialisation des icônes
        lucide.createIcons();

        // Menu mobile toggle
        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
        const mobileMenu = document.getElementById('mobile-menu');
        const menuIcon = document.getElementById('menu-icon');
        let isMenuOpen = false;

        if (mobileMenuBtn) {
            mobileMenuBtn.addEventListener('click', () => {
                isMenuOpen = !isMenuOpen;
                mobileMenu.classList.toggle('hidden');
                
                // Change icon
                if (isMenuOpen) {
                    menuIcon.setAttribute('data-lucide', 'x');
                } else {
                    menuIcon.setAttribute('data-lucide', 'menu');
                }
                lucide.createIcons();
            });
        }

        // Toggle Sous-menus Mobile
        const mobileSubmenuToggles = document.querySelectorAll('.mobile-submenu-toggle');
        mobileSubmenuToggles.forEach(toggle => {
            toggle.addEventListener('click', function(e) {
                e.preventDefault();
                const submenu = this.nextElementSibling;
                const icon = this.querySelector('i');
                
                // Toggle le sous-menu actuel
                submenu.classList.toggle('hidden');
                
                // Rotation de l'icône
                if(submenu.classList.contains('hidden')) {
                    icon.style.transform = 'rotate(0deg)';
                } else {
                    icon.style.transform = 'rotate(180deg)';
                }
            });
        });

        // Fermer le menu mobile quand on clique sur un lien final
        if(mobileMenu) {
            mobileMenu.querySelectorAll('a').forEach(link => {
                link.addEventListener('click', () => {
                    isMenuOpen = false;
                    mobileMenu.classList.add('hidden');
                    if(menuIcon) menuIcon.setAttribute('data-lucide', 'menu');
                    lucide.createIcons();
                });
            });
        }

        // Smooth scroll pour les ancres
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                if (this.getAttribute('href') !== '#') {
                    e.preventDefault();
                    const target = document.querySelector(this.getAttribute('href'));
                    if (target) {
                        target.scrollIntoView({
                            behavior: 'smooth',
                            block: 'start'
                        });
                    }
                }
            });
        });
    </script>
</body>
</html>
