@props(['court'])

<article class="club-card group">
    <a href="{{ route('trainers.index', ['q' => $court->name]) }}" class="flex h-full flex-col focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-tennis)] focus-visible:ring-offset-2">
        <div class="club-card__media">
            @if ($court->photoUrl())
                <img src="{{ $court->photoUrl() }}" alt="{{ $court->name }}"
                     loading="lazy" decoding="async"
                     class="h-full w-full object-cover transition duration-200 group-hover:scale-[1.02]">
            @else
                <div class="flex h-full w-full items-center justify-center bg-gradient-to-br from-[var(--color-surface)] to-white">
                    <div class="flex size-16 items-center justify-center rounded-full bg-white ring-1 ring-[var(--color-border)]">
                        <x-icons.tennis class="size-8 text-[var(--color-tennis)]/70" />
                    </div>
                </div>
            @endif
        </div>

        <div class="club-card__body">
            <div class="flex items-start justify-between gap-2">
                <div class="min-w-0">
                    <p class="type-label">باشگاه / زمین</p>
                    <h3 class="type-card-title truncate transition group-hover:text-[var(--color-tennis)]">{{ $court->name }}</h3>
                </div>
                @if ($court->trainers_count ?? 0)
                    <span class="site-badge-verified shrink-0">{{ fa_digits($court->trainers_count) }} مربی</span>
                @endif
            </div>

            @if ($court->region)
                <p class="type-meta flex items-center gap-1.5">
                    <svg class="size-4 shrink-0 text-[var(--color-disabled)]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                        <path d="M12 21s7-4.5 7-10a7 7 0 1 0-14 0c0 5.5 7 10 7 10Z"/><circle cx="12" cy="11" r="2.5"/>
                    </svg>
                    {{ $court->region->name }}، تهران
                </p>
            @endif

            @if ($court->address)
                <p class="type-caption line-clamp-2">{{ $court->address }}</p>
            @endif

            <div class="mt-auto flex items-center justify-between pt-2 text-sm font-semibold text-[var(--color-tennis)]">
                <span>مشاهده مربیان</span>
                <svg class="size-4 transition group-hover:-translate-x-0.5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.56 9.5H16a.75.75 0 0 1 0 1.5H8.56l3.22 3.22a.75.75 0 1 1-1.06 1.06l-4.5-4.5a.75.75 0 0 1 0-1.06l4.5-4.5a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd"/>
                </svg>
            </div>
        </div>
    </a>
</article>