{{-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    FOOTER — Hidden on mobile (bottom nav serves navigation)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --}}
<footer class="hidden md:block bg-gray-900 text-gray-400 mt-8">

    {{-- Trust badges --}}
    <div class="bg-gray-800 border-b border-gray-700">
        <div class="max-w-7xl mx-auto px-6 py-4 grid grid-cols-4 gap-4">
            @foreach([
                ['icon' => '🚚', 'title' => 'Free Delivery', 'sub' => 'On orders above ₦10,000'],
                ['icon' => '🔄', 'title' => 'Easy Returns', 'sub' => '7-day return policy'],
                ['icon' => '🔒', 'title' => 'Secure Payment', 'sub' => 'Paystack & Flutterwave'],
                ['icon' => '🎯', 'title' => '100% Genuine', 'sub' => 'Verified sellers only'],
            ] as $badge)
            <div class="flex items-center gap-3">
                <span class="text-2xl">{{ $badge['icon'] }}</span>
                <div>
                    <p class="text-white text-sm font-semibold">{{ $badge['title'] }}</p>
                    <p class="text-xs">{{ $badge['sub'] }}</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    {{-- Main footer --}}
    <div class="max-w-7xl mx-auto px-6 py-10 grid grid-cols-5 gap-8">

        {{-- Brand --}}
        <div class="col-span-2">
            <div class="flex items-center gap-2 mb-4">
                <div class="w-8 h-8 bg-orange-500 rounded-lg flex items-center justify-center">
                    <span class="text-white font-black text-base">J</span>
                </div>
                <span class="text-white font-black text-xl">Jumia Clone</span>
            </div>
            <p class="text-sm leading-relaxed mb-4">
                Nigeria's #1 online marketplace. Shop from millions of products with guaranteed delivery across all 36 states.
            </p>
            <div class="flex items-center gap-3">
                <a href="#" class="w-9 h-9 bg-gray-700 hover:bg-orange-500 rounded-full flex items-center justify-center transition-colors text-sm">f</a>
                <a href="#" class="w-9 h-9 bg-gray-700 hover:bg-orange-500 rounded-full flex items-center justify-center transition-colors text-sm">t</a>
                <a href="#" class="w-9 h-9 bg-gray-700 hover:bg-orange-500 rounded-full flex items-center justify-center transition-colors text-sm">in</a>
                <a href="#" class="w-9 h-9 bg-gray-700 hover:bg-orange-500 rounded-full flex items-center justify-center transition-colors text-sm">ig</a>
            </div>
        </div>

        {{-- Links --}}
        @foreach([
            ['title' => 'Buying', 'links' => [
                ['My Account', '/account'], ['My Orders', '/orders'],
                ['Track Order', '/orders'], ['Wishlist', '/wishlist'],
                ['Contact Us', '/contact'],
            ]],
            ['title' => 'Selling', 'links' => [
                ['Sell on Jumia', '/seller/register'], ['Seller Centre', '/seller/dashboard'],
                ['Seller Policy', '/seller/policy'], ['Advertise', '/ads'],
                ['Seller Blog', '/seller/blog'],
            ]],
            ['title' => 'Information', 'links' => [
                ['About Us', '/about'], ['Privacy Policy', '/privacy'],
                ['Terms of Service', '/terms'], ['Returns Policy', '/returns'],
                ['FAQs', '/faq'],
            ]],
        ] as $col)
        <div>
            <h4 class="text-white font-semibold text-sm mb-4">{{ $col['title'] }}</h4>
            <ul class="space-y-2">
                @foreach($col['links'] as $link)
                <li>
                    <a href="{{ $link[1] }}" class="text-sm hover:text-orange-400 transition-colors">
                        {{ $link[0] }}
                    </a>
                </li>
                @endforeach
            </ul>
        </div>
        @endforeach
    </div>

    {{-- Bottom bar --}}
    <div class="border-t border-gray-800">
        <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between text-xs">
            <p>© {{ date('Y') }} Jumia Clone. All rights reserved. Built on Laravel + Tailwind.</p>
            <div class="flex items-center gap-4">
                <span class="text-gray-600">Payment methods:</span>
                <div class="flex items-center gap-2">
                    <span class="bg-gray-700 px-2 py-1 rounded text-xs text-white font-medium">Paystack</span>
                    <span class="bg-gray-700 px-2 py-1 rounded text-xs text-white font-medium">Flutterwave</span>
                    <span class="bg-gray-700 px-2 py-1 rounded text-xs text-white font-medium">Bank Transfer</span>
                </div>
            </div>
        </div>
    </div>
</footer>