<footer class="footer py-12 ">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
        <div class="flex flex-col md:flex-row justify-between space-y-4 md:space-y-0">
            <!-- Logo -->
            <div class="flex-1">
                <div class="flex items-center space-x-3 mb-4">
                    <a href="{{ .Site.BaseURL }}" class="inline-block">
                        {{ with .Site.Params.logo }}
                            <img src="{{ . | relURL }}" alt="{{ $.Site.Title }}" class="h-6">
                        {{ end }}
                    </a>
                    <span class="text-xl font-bold text-gray-900">{{ .Site.Title }}</span>
                </div>
            </div>

            <!-- Column 1 -->
            <div class="flex-1">
                <h3 class="text-sm font-semibold uppercase tracking-wider text-gray-900 mb-4">{{ .Site.Params.footer.column_1_title }}</h3>
                <ul class="space-y-2">
                    {{ range .Site.Menus.footer_column_1 }}
                        <li><a href="{{ .URL }}" class="text-gray-600 hover:text-primary-600">{{ .Name }}</a></li>
                    {{ end }}
                </ul>
            </div>

            <!-- Column 2 -->
            <div class="flex-1">
                <h3 class="text-sm font-semibold uppercase tracking-wider text-gray-900 mb-4">{{ .Site.Params.footer.column_2_title }}</h3>
                <ul class="space-y-2">
                    {{ range .Site.Menus.footer_column_2 }}
                        <li><a href="{{ .URL }}" class="text-gray-600 hover:text-primary-600">{{ .Name }}</a></li>
                    {{ end }}
                </ul>
            </div>

            <!--  Social Media -->
            <div class="flex-1">
                <div class="flex justify-end space-x-3 p-2">
                    {{ with .Site.Params.social.linkedin }}
                    <a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
                        <span class="sr-only">LinkedIn</span>
                        <img src="/images/social/linkedin.svg" alt="LinkedIn"  class="h-5 w-5 brightness-0 invert">
                    </a>
                    {{ end }}
                    {{ with .Site.Params.social.bluesky }}
                    <a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
                        <span class="sr-only">Bluesky</span>
                        <img src="/images/social/bluesky.svg" alt="Bluesky"  class="h-5 w-5 brightness-0 invert">
                    </a>
                    {{ end }}
                    {{ with .Site.Params.social.twitter }}
                    <a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
                        <span class="sr-only">Twitter (X)</span>
                        <img src="/images/social/twitter.svg" alt="Twitter"  class="h-5 w-5 brightness-0 invert">
                    </a>
                    {{ end }}
                    {{ with .Site.Params.social.youtube }}
                    <a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
                        <span class="sr-only">YouTube</span>
                        <img src="/images/social/youtube.svg" alt="YouTube"  class="h-5 w-5 brightness-0 invert">
                    </a>
                    {{ end }}
                    {{ with .Site.Params.social.facebook }}
                    <a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
                        <span class="sr-only">Facebook</span>
                        <img src="/images/social/facebook.svg" alt="Facebook"  class="h-5 w-5 brightness-0 invert">
                    </a>
                    {{ end }}
                    {{ with .Site.Params.social.instagram }}
                    <a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
                        <span class="sr-only">Instagram</span>
                        <img src="/images/social/instagram.svg" alt="Instagram"  class="h-5 w-5 brightness-0 invert">
                    </a>
                    {{ end }}
                    {{ with .Site.Params.social.github }}
                    <a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
                        <span class="sr-only">GitHub</span>
                        <img src="/images/social/github.svg" alt="GitHub"  class="h-5 w-5 brightness-0 invert">
                    </a>
                    {{ end }}
                    {{ with .Site.Params.social.telegram }}
                    <a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
                        <span class="sr-only">Telegram</span>
                        <img src="/images/social/telegram.svg" alt="Telegram"  class="h-5 w-5 brightness-0 invert">
                    </a>
                    {{ end }}
                    {{ with .Site.Params.social.discord }}
                    <a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
                        <span class="sr-only">Discord</span>
                        <img src="/images/social/discord.svg" alt="Discord"  class="h-5 w-5 brightness-0 invert">
                    </a>
                    {{ end }}
                    {{ with .Site.Params.social.slack }}
                    <a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
                        <span class="sr-only">Slack</span>
                        <img src="/images/social/slack.svg" alt="Slack" class="h-5 w-5 brightness-0 invert">
                    </a>
                    {{ end }}
                    {{ with .Site.Params.social.medium }}
                    <a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
                        <span class="sr-only">Medium</span>
                        <img src="/images/social/medium.svg" alt="Medium" class="h-5 w-5 brightness-0 invert">
                    </a>
                    {{ end }}
                    {{ with .Site.Params.social.dribbble }}
                    <a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
                        <span class="sr-only">Dribbble</span>
                        <img src="/images/social/dribbble.svg" alt="Dribbble"  class="h-5 w-5 brightness-0 invert">
                    </a>
                    {{ end }}
                    {{ with .Site.Params.social.behance }}
                    <a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
                        <span class="sr-only">Behance</span>
                        <img src="/images/social/behance.svg" alt="Behance"  class="h-5 w-5 brightness-0 invert">
                    </a>
                    {{ end }}
                    {{ with .Site.Params.social.mastodon }}
                    <a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
                        <span class="sr-only">mastodon</span>
                        <img src="/images/social/mastodon.svg" alt="mastodon" class="h-5 w-5 brightness-0 invert">
                    </a>
                    {{ end }}
                    {{ with .Site.Params.social.gitlab }}
                    <a href="{{ . }}" class="text-gray-600 hover:text-gray-900" target="_blank" rel="noopener noreferrer">
                        <span class="sr-only">gitlab</span>
                        <img src="/images/social/gitlab.svg" alt="gitlab" class="h-5 w-5 brightness-0 invert">
                    </a>
                    {{ end }}
                </div>
            </div>

        </div>

        <!-- Bottom -->
        <div class="mt-6 pt-8 border-t border-gray-600">
            <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
                <p class="text-gray-600 text-sm">
                    © {{ now.Format "2006" }} {{ .Site.Title }}. All rights reserved.
                </p>
                <a href="https://www.champs-libres.coop/" class="text-sm text-gray-600 hover:text-primary-600" target="_blank" rel="noopener noreferrer">
                    Designed by Champs-Libres
                </a>
            </div>
        </div>
    </div>
</footer>
