{{-- * ADMIN FOOTER --}}
<footer class="bg-white border-t border-gray-200 mt-auto">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            {{-- Informations --}}
            <div>
                <h3 class="text-sm font-semibold text-gray-900 mb-3 flex items-center gap-2">
                    <i data-lucide="info" class="w-4 h-4 text-purple-600"></i>
                    Administration
                </h3>
                <p class="text-xs text-gray-600 leading-relaxed">
                    Panel d'administration pour gérer les utilisateurs, magasins et contenus de la plateforme AnimationVendeurs.
                </p>
            </div>

            {{-- Liens rapides --}}
            <div>
                <h3 class="text-sm font-semibold text-gray-900 mb-3 flex items-center gap-2">
                    <i data-lucide="zap" class="w-4 h-4 text-purple-600"></i>
                    Accès rapide
                </h3>
                <div class="space-y-2">
                    <a href="{{ route('admin.dashboard') }}" class="block text-xs text-gray-600 hover:text-purple-600 transition">
                        → Dashboard
                    </a>
                    <a href="{{ route('admin.users.view') }}" class="block text-xs text-gray-600 hover:text-purple-600 transition">
                        → Gestion utilisateurs
                    </a>
                    <a href="{{ route('admin.stores.view') }}" class="block text-xs text-gray-600 hover:text-purple-600 transition">
                        → Gestion magasins
                    </a>
                    <a href="{{ route('admin.feedbacks.index') }}" class="block text-xs text-gray-600 hover:text-purple-600 transition">
                        → Feedbacks utilisateurs
                    </a>
                    <a href="{{ route('home') }}" class="block text-xs text-gray-600 hover:text-boulanger-orange transition">
                        → Retour au site
                    </a>
                </div>
            </div>

            {{-- Stats temps réel --}}
            <div>
                <h3 class="text-sm font-semibold text-gray-900 mb-3 flex items-center gap-2">
                    <i data-lucide="activity" class="w-4 h-4 text-purple-600"></i>
                    Statistiques
                </h3>
                <div class="grid grid-cols-2 gap-3" x-data="{ stats: { users: '-', stores: '-', posts: '-', feedbacks: '-' } }" x-init="
                    Promise.all([
                        fetch('/api/users').then(r => r.json()).catch(() => []),
                        fetch('/api/stores').then(r => r.json()).catch(() => []),
                        fetch('/api/posts').then(r => r.json()).then(d => d.data || []).catch(() => []),
                        fetch('/api/feedback?status=pending').then(r => r.json()).catch(() => ({ total: 0 }))
                    ]).then(([users, stores, posts, feedbacks]) => {
                        stats.users = users.length;
                        stats.feedbacks = feedbacks.total || 0;
                        stats.stores = stores.length;
                        stats.posts = posts.length;
                        stats.activity = users.filter(u => u.is_active).length;
                    })
                ">
                    <div class="bg-purple-50 rounded-lg p-2">
                        <p class="text-xs text-gray-600">Utilisateurs</p>
                        <p class="text-lg font-bold text-purple-700" x-text="stats.users">-</p>
                    </div>
                    <div class="bg-green-50 rounded-lg p-2">
                        <p class="text-xs text-gray-600">Magasins</p>
                        <p class="text-lg font-bold text-green-700" x-text="stats.stores">-</p>
                    </div>
                    <div class="bg-orange-50 rounded-lg p-2">
                        <p class="text-xs text-gray-600">Posts</p>
                        <p class="text-lg font-bold text-orange-700" x-text="stats.posts">-</p>
                    </div>
                    <div class="bg-indigo-50 rounded-lg p-2">
                        <p class="text-xs text-gray-600">Feedbacks</p>
                        <p class="text-lg font-bold text-indigo-700" x-text="stats.feedbacks">-</p>
                    </div>
                </div>
            </div>
        </div>

        {{-- Copyright --}}
        <div class="mt-6 pt-6 border-t border-gray-200 flex flex-col md:flex-row justify-between items-center gap-4">
            <p class="text-xs text-gray-500">
                © {{ date('Y') }} <span class="font-semibold text-boulanger-orange">Boulanger</span> - Panel d'administration
            </p>
            <div class="flex items-center gap-4 text-xs text-gray-500">
                <span class="flex items-center gap-1">
                    <i data-lucide="shield-check" class="w-3 h-3 text-purple-600"></i>
                    Accès sécurisé
                </span>
                <span class="flex items-center gap-1">
                    <i data-lucide="clock" class="w-3 h-3"></i>
                    {{ now()->format('H:i') }}
                </span>
                <span class="flex items-center gap-1">
                    <i data-lucide="server" class="w-3 h-3"></i>
                    Laravel {{ app()->version() }}
                </span>
            </div>
        </div>
    </div>
</footer>