@props([
    'filters',
    'regions',
    'genders',
    'site',
    'publishedCount' => 0,
])

<section id="hero-search" class="hero-search mb-6 md:mb-8" aria-labelledby="home-title">
    <div class="hero-search__glow" aria-hidden="true"></div>

    <div class="relative grid gap-4 lg:grid-cols-[1fr_auto] lg:items-start">
        <div class="space-y-4">
            @if ($site['hero']['badge'])
                <p class="site-badge-accent w-fit">{{ $site['hero']['badge'] }}</p>
            @endif

            <div class="space-y-2">
                <h1 id="home-title" class="type-hero">{{ $site['hero']['title'] }}</h1>
                <p class="type-body max-w-2xl">{{ $site['hero']['subtitle'] }}</p>
            </div>

            <form method="GET" action="{{ route('trainers.index') }}" role="search" class="space-y-4">
                <div class="hero-search__field">
                    <svg class="hero-search__icon size-5" 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>
                    <label for="hero-q" class="sr-only">جستجو</label>
                    <input
                        id="hero-q"
                        type="search"
                        name="q"
                        value="{{ $filters['q'] }}"
                        placeholder="باشگاه، مربی یا شهر مورد نظر را جستجو کنید…"
                        class="hero-search__input"
                        autocomplete="off"
                    >
                </div>

                <div class="hero-search__filters">
                    <div>
                        <label for="hero-district" class="field-label">شهر / منطقه</label>
                        <select id="hero-district" name="district" class="site-select">
                            <option value="">همه مناطق</option>
                            @foreach ($regions as $region)
                                <option value="{{ $region->name }}" @selected($filters['district'] === $region->name)>{{ $region->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label for="hero-gender" class="field-label">نوع خدمات</label>
                        <select id="hero-gender" name="gender" class="site-select">
                            <option value="">همه</option>
                            @foreach ($genders as $value => $label)
                                <option value="{{ $value }}" @selected($filters['gender'] === $value)>مربی {{ $label }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label for="hero-level" class="field-label">سطح بازی</label>
                        <select id="hero-level" name="level" class="site-select" disabled title="به‌زودی">
                            <option value="">همه سطوح</option>
                            <option>مبتدی</option>
                            <option>آماتور</option>
                            <option>حرفه‌ای</option>
                        </select>
                    </div>

                    <div>
                        <label for="hero-court-type" class="field-label">سرپوشیده / روباز</label>
                        <select id="hero-court-type" name="court_type" class="site-select" disabled title="به‌زودی">
                            <option value="">همه</option>
                            <option>سرپوشیده</option>
                            <option>روباز</option>
                        </select>
                    </div>
                </div>

                <div class="flex flex-wrap items-center gap-3">
                    <button type="submit" class="site-btn-primary">
                        <svg class="size-5" 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>
                        یافتن مراکز تنیس
                    </button>
                    @if ($filters['q'] || $filters['district'] || $filters['gender'])
                        <a href="{{ route('trainers.index') }}" class="site-btn-ghost">پاک کردن فیلترها</a>
                    @endif
                </div>
            </form>
        </div>

        <div class="hero-stat self-start lg:min-w-[8rem]">
            <p class="font-en text-3xl font-bold tracking-tight text-[var(--color-tennis)]">{{ fa_digits($publishedCount) }}</p>
            <p class="type-meta mt-1">{{ $site['hero']['stat_label'] }}</p>
        </div>
    </div>
</section>