@props(['trainer'])

<article class="trainer-card group">
    @if ($trainer->is_featured)
        <span class="site-badge-featured absolute top-4 start-4 z-10">ویژه</span>
    @endif

    <a href="{{ route('trainers.show', $trainer) }}"
       class="flex h-full flex-col focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2"
       aria-label="مشاهده پروفایل {{ $trainer->name }}">
        <div class="trainer-card__media">
            @if ($trainer->photoUrl())
                <img src="{{ $trainer->photoUrl() }}" alt="تصویر {{ $trainer->name }}"
                     loading="lazy" decoding="async"
                     class="h-full w-full object-cover transition duration-500 group-hover:scale-[1.03]">
            @else
                <div class="flex h-full w-full items-center justify-center">
                    <div class="flex size-20 items-center justify-center rounded-full bg-white/80 shadow-inner ring-1 ring-[var(--color-border)]">
                        <x-icons.tennis class="size-10 text-[var(--color-tennis)]/70" />
                    </div>
                </div>
            @endif
        </div>

        <div class="trainer-card__body">
            <div class="space-y-1">
                <p class="type-label">مربی تنیس</p>
                <h2 class="text-lg font-bold tracking-tight text-[var(--color-text)] transition group-hover:text-[var(--color-tennis)] md:text-xl">
                    {{ $trainer->name }}
                </h2>
            </div>

            @if ($trainer->gender_label || $trainer->experience_years || $trainer->fee)
                <dl class="trainer-card__meta">
                    @if ($trainer->gender_label)
                        <div class="trainer-card__meta-row">
                            <dt class="trainer-card__meta-label">جنسیت</dt>
                            <dd class="trainer-card__meta-value">{{ $trainer->gender_label }}</dd>
                        </div>
                    @endif
                    @if ($trainer->experience_years)
                        <div class="trainer-card__meta-row">
                            <dt class="trainer-card__meta-label">سابقه</dt>
                            <dd class="trainer-card__meta-value">{{ fa_digits($trainer->experience_years) }} سال</dd>
                        </div>
                    @endif
                    @if ($trainer->fee)
                        <div class="trainer-card__meta-row">
                            <dt class="trainer-card__meta-label">شهریه</dt>
                            <dd class="trainer-card__meta-value">{{ $trainer->fee }}</dd>
                        </div>
                    @endif
                </dl>
            @endif

            @if (! empty($trainer->region_names))
                <div class="mt-3">
                    <p class="type-label mb-1.5">مناطق فعالیت</p>
                    <ul class="flex flex-wrap gap-1.5" aria-label="مناطق فعالیت">
                        @foreach (array_slice($trainer->region_names, 0, 3) as $district)
                            <li class="site-badge-neutral">{{ $district }}</li>
                        @endforeach
                        @if (count($trainer->region_names) > 3)
                            <li class="site-badge-neutral">+{{ count($trainer->region_names) - 3 }}</li>
                        @endif
                    </ul>
                </div>
            @endif

            @if ($trainer->bio)
                <p class="type-caption mt-3 line-clamp-2">{{ $trainer->bio }}</p>
            @elseif ($trainer->venue_label)
                <div class="mt-3">
                    <p class="type-label mb-1">محل تمرین</p>
                    <p class="type-caption line-clamp-1">{{ $trainer->venue_label }}</p>
                </div>
            @endif

            <div class="trainer-card__footer">
                <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>