<footer class="bg-gray-900 text-white py-12">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
            <div class="col-span-1">
                <h3 class="uppercase tracking-wider text-xl font-bold">{{ .Site.Title }}</h3>
            </div>

            <div class="col-span-1">
                <h6 class="text-sm font-medium uppercase mb-4">Pages</h6>
                <ul class="list-none space-y-2">
                    <li><a href="/" class="text-gray-400 hover:text-white">Accueil</a></li>
                    {{ if .Site.Data.wordpress }}
                        {{ range $index, $element := .Site.Data.wordpress.navigation }}
                            <li>
                                <a href="/pages/{{ $element.slug }}" class="text-gray-400 hover:text-white">{{ $element.title }}</a>
                            </li>
                        {{ end }}
                    {{ end }}
                </ul>
            </div>

            <div class="col-span-1">
                <h6 class="text-sm font-medium uppercase mb-4">Toutes les catégories</h6>
                <ul class="list-none space-y-2">
                    {{ if .Site.Data.wordpress }}
                        {{ range $index, $element := .Site.Data.wordpress.categories }}
                            {{ if and (ne $element.name "Featured") (gt $element.count 0) }}
                            <li>
                                <a class="text-gray-400 hover:text-white" href="/{{ $element.slug }}">{{ $element.name }}</a>
                            </li>
                            {{ end }}
                        {{ end }}
                    {{ end }}
                </ul>
            </div>



        </div><!-- end grid -->
    </div><!-- end container -->
    <div class="bg-black py-4 mt-8">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row items-center justify-between gap-2 lg:gap-3">
                <div class="text-center md:text-start">
                    <p class="text-gray-400">&copy; {{ now.Format "2006" }} {{ .Site.Title }}, All Rights Reserved.</p>
                </div>
                <div class="text-center md:text-end">
                    <ul class="flex justify-center md:justify-end space-x-4">
                        <li><a class="w-8 h-8 rounded-full flex items-center justify-center bg-blue-600 hover:bg-blue-700 text-white" href="https://www.facebook.com/mistergeekfrance"><i class="bi bi-facebook"></i></a></li>
                        <!-- <li><a class="w-8 h-8 rounded-full flex items-center justify-center bg-blue-400 hover:bg-blue-500 text-white" href="#"><i class="bi bi-twitter-x"></i></a></li> -->
                        <!-- <li><a class="w-8 h-8 rounded-full flex items-center justify-center bg-red-600 hover:bg-red-700 text-white" href="#"><i class="bi bi-pinterest"></i></a></li> -->
                        <!-- <li><a class="w-8 h-8 rounded-full flex items-center justify-center bg-pink-600 hover:bg-pink-700 text-white" href="#"><i class="bi bi-instagram"></i></a></li> -->
                    </ul>
                </div>
            </div><!-- end flex -->
        </div><!-- end container -->
    </div>
</footer>
