<!-- Footer -->
<footer class="border-t border-neutral-800 bg-nova">
    <div class="px-6 md:px-10 py-8 flex flex-col md:flex-row md:items-center md:justify-between gap-2">
        <div class="text-xl font-semibold tracking-wide flex items-center gap-1">
            <img src="https://cdn.skinbase.org/images/skinbase_logo_64.webp" alt="" width="320" height="64" class="h-16 w-80 object-contain">
            <span class="sr-only">Skinbase</span>
        </div>

        <div class="flex flex-wrap gap-x-6 gap-y-2 text-sm text-neutral-400">
            <a class="hover:text-white" href="/contact">Contact / Apply</a>
            <a class="hover:text-white" href="/help">Help</a>
            <a class="hover:text-white" href="/rss-feeds">RSS Feeds</a>
            <a class="hover:text-white" href="/faq">FAQ</a>
            <a class="hover:text-white" href="/rules-and-guidelines">Rules and Guidelines</a>
            <a class="hover:text-white" href="/staff">Staff</a>
            <a class="hover:text-white" href="/privacy-policy">Privacy Policy</a>
            <a class="hover:text-white" href="/terms-of-service">Terms of Service</a>
            <button
                x-data
                @click="localStorage.removeItem('sb_cookie_consent'); window.location.reload()"
                class="hover:text-white cursor-pointer bg-transparent border-0 p-0 text-sm text-neutral-400"
            >Cookie Preferences</button>
        </div>

        <div class="text-xs text-neutral-400">© 2026 Skinbase.org</div>
    </div>
</footer>
