@php
    $isTh = app()->getLocale() === 'th';
@endphp
<section class="relative isolate overflow-hidden bg-gradient-to-b from-white via-lux-cream to-lux-blush/25 py-20 md:py-28" aria-labelledby="therapists-list-heading">
    <div class="pointer-events-none absolute -left-16 top-12 h-[200px] w-[200px] lux-dot-overlay opacity-50" aria-hidden="true"></div>

    <div class="relative mx-auto max-w-6xl px-4 md:px-6">
        <h2 id="therapists-list-heading" class="sr-only">{{ __('frontend::messages.page_therapists_title') }}</h2>
        <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($therapists as $t)
                <article class="scroll-reveal group flex h-full flex-col overflow-hidden rounded-2xl border border-lux-ink/10 bg-white shadow-[0_18px_50px_-28px_rgba(74,74,78,0.35)] transition-[transform,box-shadow] hover:-translate-y-1 hover:border-tsb-primary/25 hover:shadow-[0_24px_60px_-24px_rgba(183,51,101,0.22)]" data-scroll-reveal>
                    <div class="relative aspect-[4/5] w-full overflow-hidden bg-lux-cream">
                        <img
                            src="{{ asset('modules/frontend/images/'.$t['image']) }}"
                            alt="{{ $t['name'] }}"
                            class="h-full w-full object-cover object-center transition duration-700 group-hover:scale-[1.04]"
                            width="640"
                            height="800"
                            loading="lazy"
                            decoding="async"
                        />
                        <span class="absolute right-4 top-4 inline-flex items-center gap-1.5 rounded-full bg-white/95 px-3 py-1 font-sans text-[0.6rem] font-semibold uppercase tracking-[0.18em] text-tsb-primary shadow-sm">
                            <iconify-icon icon="lucide:badge-check" class="h-3 w-3" aria-hidden="true"></iconify-icon>
                            {{ __('frontend::messages.therapist_years_exp', ['years' => $t['years']]) }}
                        </span>
                    </div>
                    <div class="flex min-h-0 flex-1 flex-col px-5 py-6 sm:px-6">
                        <h3 class="font-script text-3xl leading-none text-tsb-primary">{{ $t['name'] }}</h3>
                        <p class="mt-2 text-sm leading-relaxed text-lux-ink-muted">
                            {{ $t['tagline'] }}
                        </p>
                        {{--
                        <!-- <ul class="mt-5 flex flex-wrap gap-2" role="list">
                            @foreach ($t['specialties'] as $sp)
                                <li class="rounded-full border border-tsb-primary/20 bg-tsb-primary/5 px-3 py-1 font-sans text-[0.62rem] font-semibold uppercase tracking-[0.14em] text-tsb-primary">{{ $sp }}</li>
                            @endforeach
                        </ul> -->
                        --}}
                        <div class="mt-auto flex w-full flex-col gap-2 pt-6">
                            <a href="{{ route('frontend.booking', ['therapist' => $t['slug']]) }}" class="lux-btn w-full justify-center !min-h-0 !px-5 !py-2.5">
                                {{ __('frontend::messages.nav_book') }}
                            </a>
                            <a href="{{ route('frontend.therapists.show', $t['slug']) }}" class="inline-flex w-full items-center justify-center rounded-full border border-tsb-primary/45 bg-white px-5 py-2.5 font-sans text-[0.7rem] font-semibold uppercase tracking-[0.14em] text-tsb-primary transition hover:border-tsb-primary hover:bg-tsb-primary/5">
                                {{ __('frontend::messages.therapist_view_profile') }}
                            </a>
                        </div>
                    </div>
                </article>
            @endforeach
        </div>
    </div>
</section>