@props(['site'])

@if ($site['mobile']['show_bottom_nav'])
@php
    $aboutHref = ($site['homepage']['show_about'] ?? true)
        ? route('trainers.index').'#about-directory'
        : route('trainers.index').'#coaches';
    $aboutLabel = ($site['homepage']['show_about'] ?? true) ? 'درباره' : 'مربیان';
@endphp
<nav class="fixed inset-x-0 bottom-0 z-50 border-t border-gray-200 bg-white/95 backdrop-blur md:hidden safe-bottom" aria-label="منوی موبایل">
    <div class="grid grid-cols-3 gap-1 px-2 py-2">
        <a href="{{ route('trainers.index') }}" class="mobile-nav-item {{ request()->routeIs('trainers.index') && ! request()->has('district') ? 'mobile-nav-item-active' : '' }}">
            <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1v-9.5Z"/></svg>
            <span>خانه</span>
        </a>
        @if ($site['header']['show_filter_link'] && ($site['homepage']['show_hero'] ?? true))
            <button type="button" class="mobile-nav-item" data-mobile-filter-open aria-controls="mobile-filter-panel" aria-expanded="false">
                <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M4 7h16M7 12h10M10 17h4" stroke-linecap="round"/></svg>
                <span>فیلتر</span>
            </button>
        @else
            <a href="{{ route('trainers.index') }}#coaches" class="mobile-nav-item">
                <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4Z"/><path d="M6 20c0-3.3 2.7-6 6-6s6 2.7 6 6" stroke-linecap="round"/></svg>
                <span>مربیان</span>
            </a>
        @endif
        <a href="{{ $aboutHref }}" class="mobile-nav-item">
            <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 10v6M12 7h.01"/></svg>
            <span>{{ $aboutLabel }}</span>
        </a>
    </div>
</nav>
@endif