{{-- Подвал (скрыт на мобильных, где есть нижний бар) --}}
<footer class="mt-16 hidden border-t border-gray-200 bg-white md:block">
    <div class="mx-auto grid max-w-[1320px] grid-cols-[1.4fr_1fr_1fr_1.8fr] gap-8 px-6 pb-10 pt-11">
        <div>
            <div class="mb-3 flex items-center gap-[9px]">
                <x-pin-mark :size="30" />
                <span class="font-display text-[21px] font-extrabold tracking-[-0.03em] text-ink">Placeo</span>
            </div>
            <p class="max-w-[280px] text-sm leading-relaxed text-muted">
                Покупайте и продавайте что угодно рядом с домом. Доска объявлений для всех.
            </p>
        </div>

        <div>
            <h3 class="mb-3.5 text-sm font-bold text-ink">Placeo</h3>
            <ul class="flex flex-col gap-2.5 text-sm text-muted">
                <li><a href="{{ route('page.show', 'about') }}" class="transition-colors hover:text-brand-700">О проекте</a></li>
                <li><a href="{{ route('blog.index') }}" class="transition-colors hover:text-brand-700">Блог</a></li>
                <li><a href="{{ route('external-app') }}" class="transition-colors hover:text-brand-700">Виджеты и Telegram</a></li>
                <li><a href="{{ route('page.show', 'vacancies') }}" class="transition-colors hover:text-brand-700">Вакансии</a></li>
                <li><a href="{{ route('page.show', 'advertising') }}" class="transition-colors hover:text-brand-700">Реклама</a></li>
                <li><a href="{{ route('page.show', 'contacts') }}" class="transition-colors hover:text-brand-700">Контакты</a></li>
            </ul>
        </div>

        <div>
            <h3 class="mb-3.5 text-sm font-bold text-ink">Помощь</h3>
            <ul class="flex flex-col gap-2.5 text-sm text-muted">
                <li><a href="{{ route('page.show', 'how-to-sell') }}" class="transition-colors hover:text-brand-700">Как продавать</a></li>
                <li><a href="{{ route('page.show', 'how-to-buy') }}" class="transition-colors hover:text-brand-700">Как покупать</a></li>
                <li><a href="{{ route('page.show', 'safety') }}" class="transition-colors hover:text-brand-700">Безопасность</a></li>
                <li><a href="{{ route('page.show', 'support') }}" class="transition-colors hover:text-brand-700">Поддержка</a></li>
            </ul>
        </div>

        <div>
            <h3 class="mb-3.5 text-sm font-bold text-ink">Разделы</h3>
            <ul class="grid grid-cols-2 gap-x-6 gap-y-2.5 text-sm text-muted">
                @foreach (($navCategories ?? collect())->take(8) as $cat)
                    <li><a href="{{ category_url($cat) }}" class="transition-colors hover:text-brand-700">{{ $cat->name }}</a></li>
                @endforeach
            </ul>
        </div>
    </div>
    @if (! empty($footerCities))
        <div class="border-t border-gray-200">
            <div class="mx-auto max-w-[1320px] px-6 py-5">
                <h3 class="mb-3 text-sm font-bold text-ink">Объявления по городам</h3>
                <ul class="flex flex-wrap gap-x-5 gap-y-2 text-sm text-muted">
                    @foreach ($footerCities as $c)
                        <li><a href="{{ route('city.home', ['city' => $c['slug']]) }}" class="transition-colors hover:text-brand-700">{{ $c['name'] }}</a></li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif

    <div class="border-t border-gray-200">
        <div class="mx-auto flex max-w-[1320px] flex-wrap items-center gap-x-5 gap-y-2 px-6 py-[18px] text-[13px] text-gray-400">
            <span>© {{ date('Y') }} Placeo — доска объявлений</span>
            <a href="{{ route('page.show', 'terms') }}" class="transition-colors hover:text-brand-700">Пользовательское соглашение</a>
            <a href="{{ route('page.show', 'privacy-policy') }}" class="transition-colors hover:text-brand-700">Политика конфиденциальности</a>
            <a href="{{ route('page.show', 'personal-data-consent') }}" class="transition-colors hover:text-brand-700">Согласие на обработку ПДн</a>
        </div>
    </div>
</footer>