@extends('layouts.app')

@section('seo_head')
    <x-seo.home-meta :seo="$seo" />
    <x-seo.json-ld :graph="$seo->jsonLdGraph()" />
@endsection

@push('mobile')
    @if ($site['homepage']['show_hero'])
        <x-mobile-filter-panel>
            <x-filter-form
                :filters="$filters"
                :regions="$regions"
                :genders="$genders"
                :has-active-filters="$hasActiveFilters"
                compact
            />
        </x-mobile-filter-panel>
    @endif
@endpush

@section('content')
    @php($modules = $site['homepage'])

    <p class="sr-only" id="page-summary">{{ $seo->crawlerSummary($featuredTrainers) }}</p>

    @if ($modules['show_hero'])
        <x-hero-search
            :filters="$filters"
            :regions="$regions"
            :genders="$genders"
            :site="$site"
            :published-count="$publishedCount"
        />
    @endif

    @if ($hasActiveFilters)
        <div class="filter-chip-bar" aria-live="polite">
            <span class="type-label mb-0">نتایج</span>
            <span class="type-meta">{{ fa_digits($trainers->total()) }} مربی</span>
            <span class="mx-1 text-[var(--color-disabled)]" aria-hidden="true">|</span>
            @if ($filters['q'])
                <span class="site-badge-brand">«{{ $filters['q'] }}»</span>
            @endif
            @if ($filters['district'])
                <span class="site-badge-brand">{{ $filters['district'] }}</span>
            @endif
            @if ($filters['gender'])
                <span class="site-badge-brand">{{ $genders[$filters['gender']] ?? $filters['gender'] }}</span>
            @endif
        </div>
    @endif

    @if ($modules['show_clubs'])
        <section id="clubs" class="mb-8 md:mb-10 scroll-mt-20">
            <x-section-heading
                title="باشگاه‌های برتر"
                subtitle="زمین‌ها و باشگاه‌های تنیس با مربیان فعال"
            />
            @if ($featuredCourts->isNotEmpty())
                <div class="carousel-track -mx-1 px-1">
                    @foreach ($featuredCourts as $court)
                        <x-club-card :court="$court" />
                    @endforeach
                </div>
            @else
                <div id="courts" class="portal-section scroll-mt-20">
                    <div class="flex flex-col items-start gap-4 sm:flex-row sm:items-center sm:justify-between">
                        <div>
                            <span class="coming-soon-strip">Coming Soon</span>
                            <p class="type-body mt-3 max-w-xl">فهرست باشگاه‌ها و زمین‌های تنیس به‌زودی با اطلاعات تماس، نقشه و امکان رزرو اضافه می‌شود.</p>
                        </div>
                        @if ($modules['show_featured_coaches'] || $modules['show_trainer_directory'])
                            <a href="{{ route('trainers.index') }}#coaches" class="site-btn-secondary shrink-0">مشاهده مربیان</a>
                        @endif
                    </div>
                </div>
            @endif
        </section>
    @endif

    @if ($modules['show_featured_coaches'])
        <section id="coaches" class="mb-8 md:mb-10 scroll-mt-20">
            <x-section-heading
                title="یافتن مربی"
                subtitle="مربیان منتخب با سابقه، گواهینامه و اطلاعات تماس"
                :count="$featuredTrainers->count() ?: null"
            />
            @if ($featuredTrainers->isNotEmpty())
                <div class="carousel-track -mx-1 px-1">
                    @foreach ($featuredTrainers as $trainer)
                        <div class="w-[min(100%,300px)] shrink-0">
                            <x-trainer-card :trainer="$trainer" />
                        </div>
                    @endforeach
                </div>
            @endif
        </section>
    @endif

    @if ($modules['show_tournaments'])
        <section id="tournaments" class="portal-section portal-section--clay mb-8 md:mb-10 scroll-mt-20">
            <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
                <div class="max-w-xl">
                    <span class="site-badge-clay">Tournaments</span>
                    <h2 class="type-h2 mt-2">تقویم مسابقات</h2>
                    <p class="type-body mt-1">رویدادهای آینده، ثبت‌نام و دسته‌بندی مسابقات تنیس در ایران — به‌زودی.</p>
                </div>
                <div class="w-full max-w-md space-y-2">
                    @foreach ([
                        ['date' => '۱۴۰۵/۰۴/۱۲', 'title' => 'Open Spring Tehran', 'status' => 'ثبت‌نام باز', 'location' => 'تهران'],
                        ['date' => '۱۴۰۵/۰۵/۰۳', 'title' => 'Junior Clay Cup', 'status' => 'به‌زودی', 'location' => 'اصفهان'],
                    ] as $event)
                        <div class="flex items-center gap-3 rounded-xl border border-[var(--color-border)] bg-white/80 p-3">
                            <div class="shrink-0 text-center">
                                <p class="font-en text-xs font-semibold text-[var(--color-clay)]">{{ $event['date'] }}</p>
                            </div>
                            <div class="min-w-0 flex-1">
                                <p class="font-en text-sm font-semibold text-[var(--color-text)]">{{ $event['title'] }}</p>
                                <p class="type-caption">{{ $event['location'] }} · {{ $event['status'] }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    @if ($modules['show_magazine'])
        <section id="learn" class="mb-8 md:mb-10 scroll-mt-20">
            <x-section-heading title="آموزش تنیس" subtitle="مقالات آموزشی و راهنمای انتخاب برای والدین و بازیکنان" />
            <div id="magazine" class="grid gap-3 scroll-mt-20 lg:grid-cols-3 md:gap-4">
                <article class="editorial-card editorial-card--featured lg:flex lg:flex-col">
                    <div class="editorial-card__media flex items-center justify-center bg-gradient-to-br from-[var(--color-surface)] to-white">
                        <x-icons.tennis class="size-20 text-[var(--color-tennis)]/30" />
                    </div>
                    <div class="editorial-card__body flex flex-1 flex-col">
                        <span class="coming-soon-strip w-fit">Magazine</span>
                        <h3 class="type-h3 mt-2">چگونه مربی مناسب برای فرزندمان انتخاب کنیم؟</h3>
                        <p class="type-body mt-1 flex-1">راهنمای جامع برای والدین — معیارهای سابقه، گواهینامه، محیط تمرین و سطح بازی.</p>
                        <p class="type-caption mt-2">به‌زودی</p>
                    </div>
                </article>
                @foreach ([
                    'اصول انتخاب راکت تنیس برای مبتدیان',
                    'تفاوت زمین خاکی و سخت در تمرین',
                    'برنامه هفتگی برای آماتورها',
                ] as $title)
                    <article class="editorial-card">
                        <div class="editorial-card__body">
                            <h3 class="type-card-title">{{ $title }}</h3>
                            <p class="type-caption mt-2">به‌زودی</p>
                        </div>
                    </article>
                @endforeach
            </div>
        </section>
    @endif

    @if ($modules['show_shops'])
        <section id="shops" class="portal-section mb-8 md:mb-10 scroll-mt-20">
            <x-section-heading title="فروشگاه‌های تجهیزات" subtitle="کشف فروشگاه‌های معتبر — نه فروش آنلاین، بلکه راهنمای انتخاب" />
            <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                @foreach (['راکت و لوازم حرفه‌ای', 'کفش و پوشاک تنیس', 'تجهیزات باشگاهی'] as $category)
                    <div class="directory-card p-4">
                        <p class="type-label">Equipment</p>
                        <h3 class="type-card-title mt-1">{{ $category }}</h3>
                        <p class="type-caption mt-2">فهرست فروشگاه‌ها به‌زودی</p>
                    </div>
                @endforeach
            </div>
        </section>
    @endif

    @if ($modules['show_trainer_directory'])
        @if ($trainers->isEmpty())
            <div class="content-section border-dashed text-center">
                <div class="mx-auto flex size-20 items-center justify-center rounded-full bg-[var(--color-surface)]">
                    <x-icons.tennis class="size-10 text-[var(--color-disabled)]" />
                </div>
                <p class="type-h3 mt-5">مربی‌ای با این مشخصات یافت نشد</p>
                <p class="type-caption mt-2">فیلترها را تغییر دهید یا همه مربیان را ببینید.</p>
                @if ($hasActiveFilters)
                    <a href="{{ route('trainers.index') }}" class="site-btn-secondary mt-6 inline-flex">نمایش همه مربیان</a>
                @endif
            </div>
        @else
            <section aria-labelledby="trainer-list-heading" class="mb-8" @unless($modules['show_featured_coaches']) id="coaches" @endunless>
                <x-section-heading
                    id="trainer-list-heading"
                    title="فهرست مربیان"
                    :subtitle="$hasActiveFilters ? 'نتایج فیلترشده بر اساس معیارهای انتخابی شما' : 'همه مربیان منتشرشده'"
                    :count="$trainers->total()"
                />

                <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4 xl:grid-cols-3">
                    @foreach ($trainers as $trainer)
                        <x-trainer-card :trainer="$trainer" />
                    @endforeach
                </div>

                <div class="mt-6 flex justify-center">{{ $trainers->links() }}</div>
            </section>
        @endif
    @endif

    @if ($modules['show_about'])
        <section class="content-section mt-4" aria-labelledby="about-directory">
            <x-section-heading
                id="about-directory"
                title="درباره فهرست"
                subtitle="راهنمای انتخاب مربی تنیس در تهران"
            />
            <div class="grid gap-4 md:grid-cols-2">
                <p class="type-lead">{{ $site['branding']['site_name'] }} مرجع جامع تنیس ایران است — از مربیان و باشگاه‌ها تا مسابقات و آموزش. اطلاعات هر مربی شامل معرفی، مناطق، زمین، زمان‌ها و راه‌های ارتباطی است.</p>
                <div class="rounded-[var(--radius-card)] bg-[var(--color-surface)] p-4 ring-1 ring-[var(--color-border)]">
                    <p class="type-label mb-2">وضعیت فهرست</p>
                    <p class="type-lead mb-0"><strong class="text-[var(--color-tennis)]">{{ fa_digits($publishedCount) }}</strong> مربی منتشرشده
                        @if ($featuredTrainers->isNotEmpty())
                            <span class="type-caption mt-2 block">مربیان ویژه: {{ $featuredTrainers->pluck('name')->take(4)->join('، ') }}</span>
                        @endif
                    </p>
                </div>
            </div>
        </section>
    @endif

    @if ($modules['show_faq'])
        <section class="content-section mt-4" aria-labelledby="faq-heading">
            <x-section-heading id="faq-heading" title="سوالات متداول" />
            <dl class="grid gap-3 md:grid-cols-2">
                <div class="faq-item">
                    <dt class="font-bold text-[var(--color-text)]">چطور مربی مناسب پیدا کنم؟</dt>
                    <dd class="type-caption mt-2 mb-0">از جستجو و فیلتر منطقه و جنسیت استفاده کنید، سپس پروفایل هر مربی را بررسی کنید.</dd>
                </div>
                <div class="faq-item">
                    <dt class="font-bold text-[var(--color-text)]">چه اطلاعاتی در هر پروفایل هست؟</dt>
                    <dd class="type-caption mt-2 mb-0">نام، معرفی، مناطق، زمین، روزهای در دسترس، ترجیحات شاگرد، سابقه، شهریه و تماس.</dd>
                </div>
            </dl>
        </section>
    @endif

    @if ($modules['show_regions'])
        <section class="content-section mt-4" aria-labelledby="district-links-heading">
            <x-section-heading
                id="district-links-heading"
                title="مربیان بر اساس منطقه"
                subtitle="۲۲ منطقه شهرداری تهران"
            />
            <nav class="grid grid-cols-2 gap-1.5 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6" aria-label="فیلتر منطقه‌ای">
                @foreach ($regions as $region)
                    <a href="{{ route('trainers.index', ['district' => $region->name]) }}" class="region-pill">
                        {{ $region->name }}
                    </a>
                @endforeach
            </nav>
        </section>
    @endif
@endsection