<footer class="bg-white z-10 rounded-xl shadow-lg dark:bg-neutral-950 m-4 mb-0 mt-auto">
    <div class="w-full max-w-7xl mx-auto px-4 py-6">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 items-center">
            <!-- Logo -->
            <div class="flex items-center justify-center md:justify-start">
                <a href="https://hstream.moe/" class="flex items-center">
                    <img src="/images/cropped-HS-1-192x192.webp" 
                         class="h-10 w-10 mr-3 rounded-lg object-cover" 
                         alt="hstream.moe Logo" />
                    <span class="text-xl font-bold whitespace-nowrap text-gray-600 dark:text-white">hstream.moe</span>
                </a>
            </div>

            <!-- Main Navigation -->
            <div class="flex justify-center">
                <ul class="flex flex-wrap items-center gap-4 text-sm font-medium text-gray-600 dark:text-gray-300">
                    <li>
                        <a href="{{ route('contact.index') }}" 
                           class="flex items-center gap-1 hover:text-blue-600 transition-colors">
                            <i class="fa-solid fa-message"></i> Contact
                        </a>
                    </li>
                    <li>
                        <a href="{{ config('discord.invite_link') }}" 
                           class="flex items-center gap-1 hover:text-blue-600 transition-colors">
                            <i class="fa-brands fa-discord"></i> Discord
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('home.stats') }}" 
                           class="flex items-center gap-1 hover:text-blue-600 transition-colors">
                            <i class="fa-solid fa-chart-simple"></i> Stats
                        </a>
                    </li>
                </ul>
            </div>

            <!-- Language Selector -->
            <div class="flex justify-center md:justify-end">
                <button data-te-toggle="modal" 
                        data-te-target="#modalLanguage"
                        class="flex items-center gap-1 text-sm font-medium text-gray-600 hover:text-blue-600 transition-colors dark:text-gray-300">
                    <i class="fa-solid fa-globe"></i> Language
                </button>
            </div>
        </div>

        <!-- Friendly Sites -->
        <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
            <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 mb-3 text-center">Friendly Sites</h3>
            <div class="flex flex-wrap justify-center gap-3">
                @foreach([
                    'everythingmoe.com' => 'https://everythingmoe.com/',
                    'theindex.moe' => 'https://theindex.moe/',
                    'squidboard.org' => 'https://www.squid-board.org/',
                    'hentaizilla.com' => 'https://hentaizilla.com/',
                    'hentaipulse.com' => 'https://hentaipulse.com/',
                    'hentaisites.com' => 'https://hentaisites.com/',
                    'zhentube.com' => 'https://zhentube.com/'
                ] as $name => $url)
                    <a href="{{ $url }}" 
                       target="_blank" 
                       class="text-sm text-gray-600 hover:text-blue-600 transition-colors dark:text-gray-300">
                        {{ $name }}
                    </a>
                @endforeach
            </div>
        </div>
    </div>
</footer>

<!-- Footer Info -->
<div class="m-4 w-full max-w-7xl mx-auto">
    <div class="text-xs text-gray-500 text-center dark:text-gray-400">
        <p>Render time: {{ number_format(microtime(true) - (defined('LARAVEL_START') ? LARAVEL_START : request()->server('REQUEST_TIME_FLOAT')), 3) }} seconds | 
           Memory usage: {{ number_format(memory_get_peak_usage(true) / 1048576, 2) }} MB | 
           Git: <a href="https://gitea.hstream.moe/w33b/hstream/commits/branch/main" 
                   target="_blank" 
                   class="hover:text-blue-600 transition-colors">
                   {{ \App\Helpers\GitHelper::shortCommit() }}
               </a>
        </p>
    </div>
</div>

<!-- SweetAlert Scripts -->
@if (!Session::has('alert.config'))
    <script src="{{ asset('vendor/sweetalert/sweetalert.all.js') }}"></script>
@endif
@if (config('sweetalert.theme') != 'default')
    <link href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-{{ config('sweetalert.theme') }}" rel="stylesheet">
@endif
@include('sweetalert::alert')

<!-- Modals -->
@include('modals.language-selector')

<!-- Thumbnail hover -->
@vite(['resources/js/preview.js'])