@props(['site'])

@php
    $modules = $site['homepage'];

    $navItems = collect([
        ['label' => 'باشگاه‌ها', 'href' => route('trainers.index').'#clubs', 'module' => 'show_clubs', 'active' => false],
        ['label' => 'مربیان', 'href' => route('trainers.index').'#coaches', 'module' => 'show_coaches', 'active' => request()->routeIs('trainers.*')],
        ['label' => 'زمین‌ها', 'href' => route('trainers.index').'#courts', 'module' => 'show_clubs', 'active' => false],
        ['label' => 'مسابقات', 'href' => route('trainers.index').'#tournaments', 'module' => 'show_tournaments', 'active' => false],
        ['label' => 'آموزش', 'href' => route('trainers.index').'#learn', 'module' => 'show_magazine', 'active' => false],
        ['label' => 'فروشگاه‌ها', 'href' => route('trainers.index').'#shops', 'module' => 'show_shops', 'active' => false],
        ['label' => 'مجله تنیس', 'href' => route('trainers.index').'#magazine', 'module' => 'show_magazine', 'active' => false],
    ])->filter(function (array $item) use ($modules) {
        if ($item['module'] === 'show_coaches') {
            return $modules['show_featured_coaches'] || $modules['show_trainer_directory'];
        }

        return $modules[$item['module']] ?? true;
    })->values()->all();
@endphp

<header class="site-header">
    <div class="site-shell">
        <div class="site-container site-header__inner">
            <a href="{{ route('trainers.index') }}" class="site-header__brand group">
                <span class="site-header__logo">
                    <x-branding-logo :branding="$site['branding']" class="size-6 object-contain text-white" />
                </span>
                <span class="min-w-0 hidden sm:block">
                    <span class="block truncate text-sm font-bold text-white md:text-base">{{ $site['header']['title'] }}</span>
                    <span class="block truncate text-[11px] text-white/60">{{ $site['header']['subtitle'] }}</span>
                </span>
            </a>

            @if ($navItems !== [])
                <nav class="site-header__nav" aria-label="ناوبری اصلی">
                    @foreach ($navItems as $item)
                        <a href="{{ $item['href'] }}" @class(['site-header__link', 'site-header__link--active' => $item['active']])>
                            {{ $item['label'] }}
                        </a>
                    @endforeach
                </nav>
            @endif

            <form method="GET" action="{{ route('trainers.index') }}" class="site-header__search" role="search">
                <label for="header-search" class="sr-only">جستجو</label>
                <svg class="pointer-events-none absolute start-3 top-1/2 size-4 -translate-y-1/2 text-white/50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                    <circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5" stroke-linecap="round"/>
                </svg>
                <input
                    id="header-search"
                    type="search"
                    name="q"
                    value="{{ request('q') }}"
                    placeholder="جستجو…"
                    class="site-header__search-input"
                    autocomplete="off"
                >
            </form>

            <div class="site-header__actions">
                <button type="button" class="site-header__menu-btn md:hidden" data-mobile-nav-open aria-label="باز کردن منو" aria-expanded="false">
                    <svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                        <path d="M4 7h16M4 12h16M4 17h16" stroke-linecap="round"/>
                    </svg>
                </button>
                @if ($site['header']['show_filter_link'] && ($modules['show_hero'] ?? true))
                    <button type="button" class="site-header__menu-btn md:hidden" data-mobile-filter-open aria-label="باز کردن فیلتر">
                        <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                            <path d="M4 7h16M7 12h10M10 17h4" stroke-linecap="round"/>
                        </svg>
                    </button>
                    <a href="{{ route('trainers.index') }}#hero-search" class="site-btn-secondary hidden border-white/25 text-white hover:bg-white/10 md:inline-flex">
                        فیلتر پیشرفته
                    </a>
                @endif
            </div>
        </div>
    </div>
</header>

<div id="mobile-nav-drawer" class="site-mobile-drawer" hidden aria-hidden="true">
    <div class="site-mobile-drawer__backdrop" data-mobile-nav-close></div>
    <div class="site-mobile-drawer__panel" role="dialog" aria-label="منوی موبایل">
        <div class="mb-6 flex items-center justify-between">
            <p class="font-bold text-white">{{ $site['header']['title'] }}</p>
            <button type="button" class="site-header__menu-btn" data-mobile-nav-close aria-label="بستن منو">
                <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 6l12 12M18 6 6 18" stroke-linecap="round"/></svg>
            </button>
        </div>
        <form method="GET" action="{{ route('trainers.index') }}" class="mb-4" role="search">
            <input type="search" name="q" value="{{ request('q') }}" placeholder="جستجو…" class="site-input text-[var(--color-text)]">
        </form>
        @if ($navItems !== [])
            <nav class="flex flex-col gap-1">
                @foreach ($navItems as $item)
                    <a href="{{ $item['href'] }}" class="site-mobile-drawer__link" data-mobile-nav-close>{{ $item['label'] }}</a>
                @endforeach
            </nav>
        @endif
    </div>
</div>