@php
    $isTh = app()->getLocale() === 'th';
    $featured = collect($therapists ?? [])->take(3);
@endphp
<section id="our-therapists" class="relative isolate scroll-mt-24 overflow-hidden bg-white py-20 md:py-28" aria-labelledby="about-therapists-heading">
    <div class="pointer-events-none absolute left-1/2 top-0 h-[320px] w-[min(100%,48rem)] -translate-x-1/2 bg-[radial-gradient(ellipse_80%_60%_at_50%_0%,rgb(228_71_124/0.08),transparent_70%)]" aria-hidden="true"></div>

    <div class="relative mx-auto max-w-6xl px-4 md:px-6">
        <div class="mx-auto max-w-2xl text-center">
            <p class="scroll-reveal font-script text-3xl text-tsb-primary md:text-4xl" data-scroll-reveal>
                {{ __('frontend::messages.page_therapists_eyebrow') }}
            </p>
            <h2 id="about-therapists-heading" class="scroll-reveal lux-section-title mt-2" data-scroll-reveal>
                {{ __('frontend::messages.page_therapists_title') }}
            </h2>
            <p class="scroll-reveal mt-5 text-sm leading-relaxed text-lux-ink-muted md:text-base" data-scroll-reveal>
                {{ __('frontend::messages.page_therapists_lead') }}
            </p>
        </div>

        <div class="mt-14 grid gap-8 sm:grid-cols-2 lg:grid-cols-3 md:mt-16">
            @foreach ($featured as $t)
                <article class="scroll-reveal 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-[box-shadow,transform] hover:-translate-y-0.5 hover:shadow-[0_22px_55px_-24px_rgba(183,51,101,0.18)]" 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"
                            width="640"
                            height="800"
                            loading="lazy"
                            decoding="async"
                        />
                        <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-lux-ink/70 via-lux-ink/10 to-transparent px-5 py-5 text-white">
                            <p class="font-script text-2xl leading-none text-lux-blush">{{ $t['name'] }}</p>
                            <p class="mt-1 font-sans text-[0.7rem] uppercase tracking-[0.18em] text-white/90">{{ $t['role'] }}</p>
                        </div>
                    </div>
                    <div class="flex flex-1 flex-col px-5 py-5 sm:px-6 sm:py-6">
                        <p class="text-sm leading-relaxed text-lux-ink-muted">
                            {{ $t['tagline'] }}
                        </p>
                        <a href="{{ route('frontend.therapists.show', $t['slug']) }}" class="mt-6 inline-flex items-center gap-2 self-start font-sans text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-tsb-primary transition hover:gap-3 hover:text-[#8f5346]">
                            {{ __('frontend::messages.therapist_view_profile') }}
                            <iconify-icon icon="lucide:arrow-right" class="h-4 w-4" aria-hidden="true"></iconify-icon>
                        </a>
                    </div>
                </article>
            @endforeach
        </div>

        <div class="mt-12 flex justify-center md:mt-14">
            <a href="{{ route('frontend.therapists.index') }}" class="lux-btn">
                {{ __('frontend::messages.nav_our_therapists') }}
            </a>
        </div>
    </div>
</section>