@php
    $therapistMediaSlides = $therapist['gallery'] ?? [];
    $therapistMediaCount = count($therapistMediaSlides);
@endphp
<section class="relative isolate overflow-hidden bg-white pb-20 pt-10 md:pb-28 md:pt-12" aria-labelledby="therapist-detail-heading">
    <div class="mx-auto max-w-6xl px-4 md:px-6">
        <nav class="font-sans text-[0.65rem] font-semibold uppercase tracking-[0.22em] text-lux-ink-muted" aria-label="Breadcrumb">
            <ol class="flex flex-wrap items-center gap-2">
                <li><a class="transition-colors hover:text-tsb-primary" href="{{ mwz_route('frontend.index') }}">{{ __('frontend::messages.crumb_home') }}</a></li>
                <li class="text-lux-ink/30" aria-hidden="true">/</li>
                <li><a class="transition-colors hover:text-tsb-primary" href="{{ $breadcrumb_main['url'] }}">{{ $breadcrumb_main['name'] ?? '' }}</a></li>
                <li class="text-lux-ink/30" aria-hidden="true">/</li>
                <li><span class="text-tsb-primary" aria-current="page">{{ $therapist['name'] ?? '' }}</span></li>
            </ol>
        </nav>

        <div class="mt-8 grid gap-10 lg:grid-cols-12 lg:gap-14 md:mt-12">
            <div class="lg:col-span-5">
                @if (!empty($therapistMediaCount))
                    <div class="scroll-reveal scroll-reveal--left lux-arch-frame relative overflow-hidden border border-lux-ink/10 bg-lux-blush/40 p-2 shadow-[0_28px_70px_-32px_rgba(74,74,78,0.45)]" data-scroll-reveal>
                        <div class="relative" data-therapist-media-carousel role="region" aria-roledescription="{{ __('frontend::messages.therapist_media_carousel_role') }}" aria-label="{{ __('frontend::messages.therapist_media_gallery_aria') }}">
                            <div class="lux-arch-frame relative flex aspect-[4/5] w-full min-h-0 touch-pan-x overflow-x-auto overflow-y-hidden [-ms-overflow-style:none] [scrollbar-width:none] snap-x snap-mandatory scroll-smooth motion-reduce:scroll-auto [&::-webkit-scrollbar]:hidden" data-therapist-media-viewport tabindex="{{ $therapistMediaCount > 1 ? '0' : '-1' }}">
                                @foreach ($therapistMediaSlides as $mi => $slide)
                                    <div class="relative isolate min-h-0 w-full shrink-0 grow-0 basis-full snap-start snap-always" data-therapist-media-slide role="group" aria-roledescription="{{ __('frontend::messages.therapist_media_slide_role') }}" aria-label="{{ __('frontend::messages.therapist_media_slide_n_of', ['current' => $mi + 1, 'total' => $therapistMediaCount]) }}">
                                        @if ($slide['type'] === 'video')
                                            @php
                                                $videoUrl = asset($slide['image'] ?? '');
                                            @endphp
                                            @if ($videoUrl !== '')
                                                <video class="absolute inset-0 h-full w-full object-cover object-center" data-therapist-media-video aria-label="{{ $slide['name'] ?? '' }}" controls playsinline preload="metadata">
                                                    <source src="{{ $videoUrl }}" />
                                                </video>
                                            @endif
                                        @else
                                            <img class="pointer-events-none absolute inset-0 h-full w-full object-cover object-center select-none" src="{{ asset($slide['image'] ?? '') }}" alt="{{ $slide['name'] ?? '' }}" width="800" height="1000" decoding="async" draggable="false" />
                                        @endif
                                    </div>
                                @endforeach
                            </div>

                            @if ($therapistMediaCount > 1)
                                <button class="pointer-events-auto absolute left-1.5 top-1/2 z-30 inline-flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full border border-white/80 bg-white/90 text-tsb-primary shadow-[0_12px_30px_-8px_rgba(74,74,78,0.45)] transition hover:bg-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tsb-primary/50 disabled:pointer-events-none disabled:opacity-35 md:left-2 md:h-11 md:w-11" data-therapist-media-prev type="button" aria-label="{{ __('frontend::messages.therapist_media_prev') }}">
                                    <iconify-icon class="pointer-events-none h-[1rem] w-5 md:w-6" aria-hidden="true" icon="lucide:chevron-left"></iconify-icon>
                                </button>
                                <button class="pointer-events-auto absolute right-1.5 top-1/2 z-30 inline-flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full border border-white/80 bg-white/90 text-tsb-primary shadow-[0_12px_30px_-8px_rgba(74,74,78,0.45)] transition hover:bg-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tsb-primary/50 disabled:pointer-events-none disabled:opacity-35 md:right-2 md:h-11 md:w-11" data-therapist-media-next type="button" aria-label="{{ __('frontend::messages.therapist_media_next') }}">
                                    <iconify-icon class="pointer-events-none h-[1rem] w-5 md:w-6" aria-hidden="true" icon="lucide:chevron-right"></iconify-icon>
                                </button>
                                <div class="pointer-events-auto absolute bottom-3 left-0 right-0 z-20 flex justify-center gap-2 px-4" data-therapist-media-dots aria-label="{{ __('frontend::messages.therapist_media_dots_label') }}">
                                    @for ($di = 0; $di < $therapistMediaCount; $di++)
                                        <button class="h-2.5 w-2.5 rounded-full border border-tsb-primary/25 bg-tsb-primary/15 transition hover:bg-tsb-primary/35 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tsb-primary/40 aria-[current=true]:border-tsb-primary/40 aria-[current=true]:bg-tsb-primary" data-therapist-media-dot="{{ $di }}" type="button" aria-label="{{ __('frontend::messages.therapist_media_slide_n_of', ['current' => $di + 1, 'total' => $therapistMediaCount]) }}" aria-current="{{ $di === 0 ? 'true' : 'false' }}"></button>
                                    @endfor
                                </div>
                            @endif
                        </div>
                    </div>
                @endif
            </div>

            <div class="lg:col-span-7">
                <p class="scroll-reveal font-sans text-[0.65rem] font-semibold uppercase tracking-[0.22em] text-lux-ink-muted" data-scroll-reveal>
                    {{ __('frontend::messages.page_therapists_title') }}
                </p>
                <h1 class="scroll-reveal lux-section-title mt-2" id="therapist-detail-heading" data-scroll-reveal>
                    {{ $therapist['name'] ?? '' }}
                </h1>

                @if (!empty($therapist['time']))
                    <div class="scroll-reveal mt-4 flex flex-wrap gap-2 font-sans text-[0.65rem] font-semibold uppercase tracking-[0.18em]" data-scroll-reveal>
                        <span class="inline-flex items-center gap-1.5 rounded-full bg-tsb-primary/10 px-3 py-1 text-tsb-primary">
                            <iconify-icon class="h-3 w-3" aria-hidden="true" icon="lucide:badge-check"></iconify-icon>
                            {{ __('frontend::messages.therapist_years_exp', ['years' => $therapist['time']]) }}
                        </span>
                    </div>
                @endif

                @if (!empty($therapist['desc']))
                    <p class="scroll-reveal mt-6 font-serif text-lg italic leading-snug text-lux-ink md:text-xl" data-scroll-reveal>
                        “{{ $therapist['desc'] }}”
                    </p>
                @endif

                @if (!empty($therapist['detail']))
                    <div class="scroll-reveal mt-6 space-y-4 text-sm leading-[1.85] text-lux-ink-muted md:text-base" data-scroll-reveal>
                        <p>{{ $therapist['detail'] ?? '' }}</p>
                    </div>
                @endif

                <div class="scroll-reveal mt-8 flex max-w-full flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center" data-scroll-reveal>
                    <a class="lux-btn w-full max-w-full whitespace-normal text-center sm:w-auto" href="#booking-form">
                        {{ __('frontend::messages.therapist_book_with', ['name' => $therapist['name'] ?? '']) }}
                    </a>
                    <a class="inline-flex w-full max-w-full min-h-[3rem] items-center justify-center gap-2 whitespace-normal rounded-full border border-tsb-primary/45 bg-white/90 px-7 py-3 text-center font-sans uppercase tracking-[0.1em] text-tsb-primary shadow-sm transition hover:border-tsb-primary hover:bg-tsb-primary/10 sm:w-auto" href="{{ $breadcrumb_main['url'] }}">
                        <iconify-icon class="h-4 w-4" aria-hidden="true" icon="lucide:arrow-left"></iconify-icon>
                        {{ __('frontend::messages.therapist_back_to_list') }}
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>