@props([
    'footerShops' => collect(),
    'siteStats' => [
        'shops' => 0,
        'products' => 0,
        'orders' => 0,
        'reels' => 0,
    ],
])

<footer class="mt-5" id="about" style="background:#151515;color:#aaa;">
    <div class="container py-5">
        <div class="row g-4 align-items-start">
            <div class="col-lg-5">
                <h6 class="mb-1 fw-bold text-white">ShopSphere</h6>
                <p class="mb-2 small text-secondary">A marketplace where local shops can sell directly through COD orders.
                </p>
                <div class="d-flex gap-2 flex-wrap mt-2">
                    <span class="badge bg-dark border">{{ $siteStats['shops'] }} shops</span>
                    <span class="badge bg-dark border">{{ $siteStats['products'] }} products</span>
                    <span class="badge bg-dark border">{{ $siteStats['orders'] }} orders</span>
                    <span class="badge bg-dark border">{{ $siteStats['reels'] }} reels</span>
                </div>
            </div>

            <div class="col-lg-4">
                <h6 class="fw-semibold small text-uppercase text-secondary mb-2">Featured Shops</h6>
                @if ($footerShops->isNotEmpty())
                    <ul class="list-unstyled mb-0 small">
                        @foreach ($footerShops as $shop)
                            <li class="mb-1">
                                <a href="{{ route('storefront.shops.show', $shop) }}"
                                    class="text-decoration-none text-light">
                                    {{ $shop->name }}
                                </a>
                            </li>
                        @endforeach
                    </ul>
                @else
                    <p class="small text-secondary mb-0">No shops available right now.</p>
                @endif
            </div>

            <div class="col-lg-3 text-lg-end">
                <h6 class="fw-semibold small text-uppercase text-secondary mb-2">Explore</h6>
                <p class="small mb-1"><a href="{{ route('storefront.home') }}" class="text-light text-decoration-none">Home</a></p>
                <p class="small mb-1"><a href="{{ route('storefront.about') }}" class="text-light text-decoration-none">About</a></p>
                <p class="small mb-1"><a href="{{ route('storefront.contact') }}" class="text-light text-decoration-none">Contact</a></p>
                <p class="small text-secondary mb-0 mt-2">&copy; {{ now()->year }} ShopSphere</p>
            </div>
        </div>
    </div>
</footer>
