<?php
// En-tête global du site
require_once __DIR__ . '/../config/database.php';
?>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kutzenhausen - Commune de l'Outre-Forêt</title>
    <!-- Tailwind CSS -->
    <script src="js/tailwind.min.js"></script>
    <!-- Configuration des couleurs personnalisées -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'alsace-cream': '#fdfaf5',
                        'alsace-cream-dark': '#f5ede0',
                        'alsace-red': '#7b2c2d',
                        'alsace-red-dark': '#5c1a1b',
                        'text-main': '#333333',
                    },
                    fontFamily: {
                        'serif': ['Merriweather', 'serif'],
                        'sans': ['Inter', 'sans-serif'],
                    }
                }
            }
        }
    </script>
    <!-- Polices Local -->
    <link href="css/fonts.css" rel="stylesheet">
    <!-- Icônes Lucide -->
    <script src="js/lucide.min.js"></script>
    <style>
        body { background-color: #fcf9f2; }
        .hero-section {
            background-image: url('images/mairie.jpg');
            background-size: cover;
            background-position: center;
        }
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #fdfaf5; }
        ::-webkit-scrollbar-thumb { background: #7b2c2d; border-radius: 4px; }
    </style>
    <!-- Custom Extra Head -->
    <?php if (isset($extra_head)) echo $extra_head; ?>
    
</head>
<body class="font-sans text-text-main antialiased selection:bg-alsace-red selection:text-white">

    <!-- HEADER -->
    <header class="bg-alsace-cream sticky top-0 z-50 shadow-sm">
        <div class="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-24">
                
                <!-- Logo & Blason -->
                <div class="flex-shrink-0 flex items-center pr-4">
                    <a href="index.php" class="flex items-center space-x-3">
                        <img src="images/blason.png" alt="Blason Kutzenhausen" class="h-14 w-14 lg:h-16 lg:w-16 object-contain">
                        <div>
                            <h1 class="font-serif text-2xl lg:text-3xl font-bold text-alsace-red leading-tight">Kutzenhausen</h1>
                            <p class="text-xs lg:text-sm font-medium text-gray-600">Commune de l'Outre-Forêt</p>
                        </div>
                    </a>
                </div>

                <!-- Navigation Desktop (Option 1) -->
                <nav class="hidden lg:flex space-x-6 xl:space-x-8 items-center">
                    
                    <!-- Menu Mairie & Démarches -->
                    <div class="relative group">
                        <button class="text-gray-800 hover:text-alsace-red font-medium transition duration-150 flex items-center whitespace-nowrap">
                            Mairie & Démarches <i data-lucide="chevron-down" class="w-4 h-4 ml-1"></i>
                        </button>
                        <div class="absolute left-0 mt-2 w-64 bg-white border border-gray-100 rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="mot-du-maire.php" class="block px-4 py-2 text-sm text-gray-700 hover:bg-alsace-cream hover:text-alsace-red">Le mot du Maire</a>
                                <a href="conseil-municipal.php" class="block px-4 py-2 text-sm text-gray-700 hover:bg-alsace-cream hover:text-alsace-red">Le conseil municipal</a>
                                <a href="demarches.php" class="block px-4 py-2 text-sm text-gray-700 hover:bg-alsace-cream hover:text-alsace-red">Démarches administratives</a>
                                <a href="publications.php" class="block px-4 py-2 text-sm text-gray-700 hover:bg-alsace-cream hover:text-alsace-red">Publications officielles</a>
                                <a href="personnel.php" class="block px-4 py-2 text-sm text-gray-700 hover:bg-alsace-cream hover:text-alsace-red">Personnel communal</a>
                            </div>
                        </div>
                    </div>

                    <!-- Menu Vivre au Village -->
                    <div class="relative group">
                        <button class="text-gray-800 hover:text-alsace-red font-medium transition duration-150 flex items-center whitespace-nowrap">
                            Vivre au Village <i data-lucide="chevron-down" class="w-4 h-4 ml-1"></i>
                        </button>
                        <div class="absolute left-0 mt-2 w-64 bg-white border border-gray-100 rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="https://animation.sauer-pechelbronn.fr/relais-assistantes-maternelles/" target="_blank" class="block px-4 py-2 text-sm text-gray-700 hover:bg-alsace-cream hover:text-alsace-red flex items-center justify-between">Relais Petite Enfance <i data-lucide="external-link" class="w-3 h-3 ml-2"></i></a>
                                <a href="https://ee-merkwiller-pechelbronn.site.ac-strasbourg.fr/Admin/" target="_blank" class="block px-4 py-2 text-sm text-gray-700 hover:bg-alsace-cream hover:text-alsace-red flex items-center justify-between">RPI (Écoles) <i data-lucide="external-link" class="w-3 h-3 ml-2"></i></a>
                                <a href="environnement.php" class="block px-4 py-2 text-sm text-gray-700 hover:bg-alsace-cream hover:text-alsace-red">Environnement & Déchets</a>
                                <a href="salles.php" class="block px-4 py-2 text-sm text-gray-700 hover:bg-alsace-cream hover:text-alsace-red">Salles communales</a>
                            </div>
                        </div>
                    </div>

                    <!-- Menu Loisirs & Sorties -->
                    <div class="relative group">
                        <button class="text-gray-800 hover:text-alsace-red font-medium transition duration-150 flex items-center whitespace-nowrap">
                            Loisirs & Sorties <i data-lucide="chevron-down" class="w-4 h-4 ml-1"></i>
                        </button>
                        <div class="absolute left-0 mt-2 w-64 bg-white border border-gray-100 rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="associations.php" class="block px-4 py-2 text-sm text-gray-700 hover:bg-alsace-cream hover:text-alsace-red">Annuaire des associations</a>
                                <a href="agenda.php" class="block px-4 py-2 text-sm text-gray-700 hover:bg-alsace-cream hover:text-alsace-red">Agenda des manifestations</a>
                                <a href="cultes.php" class="block px-4 py-2 text-sm text-gray-700 hover:bg-alsace-cream hover:text-alsace-red">Cultes et Paroisses</a>
                            </div>
                        </div>
                    </div>

                    <!-- Menu Découvrir Kutzenhausen -->
                    <div class="relative group">
                        <button class="text-gray-800 hover:text-alsace-red font-medium transition duration-150 flex items-center whitespace-nowrap">
                            Découvrir <i data-lucide="chevron-down" class="w-4 h-4 ml-1"></i>
                        </button>
                        <div class="absolute right-0 mt-2 w-64 bg-white border border-gray-100 rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="histoire-patrimoine.php" class="block px-4 py-2 text-sm text-gray-700 hover:bg-alsace-cream hover:text-alsace-red">Histoire et Patrimoine</a>
                                <a href="https://www.maison-rurale.fr/" target="_blank" class="block px-4 py-2 text-sm text-gray-700 hover:bg-alsace-cream hover:text-alsace-red flex items-center justify-between">La Maison Rurale <i data-lucide="external-link" class="w-3 h-3 ml-2"></i></a>
                            </div>
                        </div>
                    </div>

                    <!-- Barre de Recherche -->
                    <div class="relative flex items-center ml-2">
                        <form action="recherche.php" method="GET" class="flex items-center bg-gray-100 rounded-full px-3 py-1 overflow-hidden focus-within:ring-2 focus-within:ring-alsace-red focus-within:bg-white transition-all w-48 xl:w-64">
                            <i data-lucide="search" class="w-4 h-4 text-gray-500 flex-shrink-0"></i>
                            <input type="text" name="q" placeholder="Rechercher..." class="bg-transparent border-none outline-none text-sm w-full py-1 pl-2 text-gray-700 placeholder-gray-500">
                        </form>
                    </div>
                </nav>

                <!-- Bouton Menu Mobile -->
                <div class="lg:hidden flex items-center">
                    <button id="mobile-menu-btn" class="text-gray-600 hover:text-alsace-red p-2" aria-label="Menu">
                        <i data-lucide="menu" id="menu-icon" class="w-6 h-6"></i>
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- Menu Mobile -->
    <div id="mobile-menu" class="hidden lg:hidden bg-alsace-cream border-t border-gray-200 shadow-md absolute w-full z-40 max-h-[80vh] overflow-y-auto">
        <!-- Recherche Mobile -->
        <div class="px-4 pt-4 pb-2 border-b border-gray-200">
            <form action="recherche.php" method="GET" class="flex items-center bg-white border border-gray-300 rounded-md px-3 py-2 focus-within:border-alsace-red focus-within:ring-1 focus-within:ring-alsace-red">
                <i data-lucide="search" class="w-5 h-5 text-gray-500"></i>
                <input type="text" name="q" placeholder="Rechercher..." class="bg-transparent border-none outline-none text-base w-full py-1 pl-2 text-gray-800">
            </form>
        </div>
        
        <div class="px-2 py-2 space-y-1">
            <!-- Mobile Mairie & Démarches -->
            <div class="mobile-menu-item">
                <button class="w-full flex justify-between items-center px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:bg-gray-100 hover:text-alsace-red mobile-submenu-toggle">
                    Mairie & Démarches <i data-lucide="chevron-down" class="w-5 h-5 transition-transform duration-200"></i>
                </button>
                <div class="hidden pl-6 space-y-1 pb-2">
                    <a href="mot-du-maire.php" class="block px-3 py-2 rounded-md text-sm text-gray-700 hover:bg-gray-100 hover:text-alsace-red">Le mot du Maire</a>
                    <a href="conseil-municipal.php" class="block px-3 py-2 rounded-md text-sm text-gray-700 hover:bg-gray-100 hover:text-alsace-red">Le conseil municipal</a>
                    <a href="demarches.php" class="block px-3 py-2 rounded-md text-sm text-gray-700 hover:bg-gray-100 hover:text-alsace-red">Démarches administratives</a>
                    <a href="publications.php" class="block px-3 py-2 rounded-md text-sm text-gray-700 hover:bg-gray-100 hover:text-alsace-red">Publications officielles</a>
                    <a href="personnel.php" class="block px-3 py-2 rounded-md text-sm text-gray-700 hover:bg-gray-100 hover:text-alsace-red">Personnel communal</a>
                </div>
            </div>

            <!-- Mobile Vivre au Village -->
            <div class="mobile-menu-item">
                <button class="w-full flex justify-between items-center px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:bg-gray-100 hover:text-alsace-red mobile-submenu-toggle">
                    Vivre au Village <i data-lucide="chevron-down" class="w-5 h-5 transition-transform duration-200"></i>
                </button>
                <div class="hidden pl-6 space-y-1 pb-2">
                    <a href="https://animation.sauer-pechelbronn.fr/relais-assistantes-maternelles/" target="_blank" class="block px-3 py-2 rounded-md text-sm text-gray-700 hover:bg-gray-100 hover:text-alsace-red flex items-center justify-between pr-4">Relais Petite Enfance <i data-lucide="external-link" class="w-3 h-3 ml-2"></i></a>
                    <a href="https://ee-merkwiller-pechelbronn.site.ac-strasbourg.fr/Admin/" target="_blank" class="block px-3 py-2 rounded-md text-sm text-gray-700 hover:bg-gray-100 hover:text-alsace-red flex items-center justify-between pr-4">RPI (Écoles) <i data-lucide="external-link" class="w-3 h-3 ml-2"></i></a>
                    <a href="environnement.php" class="block px-3 py-2 rounded-md text-sm text-gray-700 hover:bg-gray-100 hover:text-alsace-red">Environnement & Déchets</a>
                    <a href="salles.php" class="block px-3 py-2 rounded-md text-sm text-gray-700 hover:bg-gray-100 hover:text-alsace-red">Salles communales</a>
                </div>
            </div>

            <!-- Mobile Loisirs & Sorties -->
            <div class="mobile-menu-item">
                <button class="w-full flex justify-between items-center px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:bg-gray-100 hover:text-alsace-red mobile-submenu-toggle">
                    Loisirs & Sorties <i data-lucide="chevron-down" class="w-5 h-5 transition-transform duration-200"></i>
                </button>
                <div class="hidden pl-6 space-y-1 pb-2">
                    <a href="associations.php" class="block px-3 py-2 rounded-md text-sm text-gray-700 hover:bg-gray-100 hover:text-alsace-red">Annuaire des associations</a>
                    <a href="agenda.php" class="block px-3 py-2 rounded-md text-sm text-gray-700 hover:bg-gray-100 hover:text-alsace-red">Agenda des manifestations</a>
                    <a href="cultes.php" class="block px-3 py-2 rounded-md text-sm text-gray-700 hover:bg-gray-100 hover:text-alsace-red">Cultes et Paroisses</a>
                </div>
            </div>

            <!-- Mobile Découvrir -->
            <div class="mobile-menu-item">
                <button class="w-full flex justify-between items-center px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:bg-gray-100 hover:text-alsace-red mobile-submenu-toggle">
                    Découvrir <i data-lucide="chevron-down" class="w-5 h-5 transition-transform duration-200"></i>
                </button>
                <div class="hidden pl-6 space-y-1 pb-2">
                    <a href="histoire-patrimoine.php" class="block px-3 py-2 rounded-md text-sm text-gray-700 hover:bg-gray-100 hover:text-alsace-red">Histoire et Patrimoine</a>
                    <a href="https://www.maison-rurale.fr/" target="_blank" class="block px-3 py-2 rounded-md text-sm text-gray-700 hover:bg-gray-100 hover:text-alsace-red flex items-center justify-between pr-4">La Maison Rurale <i data-lucide="external-link" class="w-3 h-3 ml-2"></i></a>
                </div>
            </div>

            <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:bg-gray-100 hover:text-alsace-red">Contact</a>
        </div>
    </div>
