@php
    $testimonialCount = count($reviews);
    $visibleSlides = 3;
    $carouselLabel = 'Guest review slides';
    $prevLabel = 'Show previous reviews';
    $nextLabel = 'Show next reviews';
    $dotLabel = 'Go to position';
@endphp

<section class="relative isolate scroll-mt-24 overflow-hidden bg-gradient-to-b from-lux-blush/30 via-lux-cream/80 to-white py-20 md:py-28" id="our-therapists" aria-labelledby="reviews-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="pointer-events-none absolute -left-16 top-32 h-[200px] w-[200px] lux-dot-overlay opacity-60 md:left-6" aria-hidden="true"></div>
    <div class="pointer-events-none absolute -right-20 bottom-16 h-[240px] w-[240px] lux-dot-overlay opacity-45 md:right-4 md:bottom-24" aria-hidden="true"></div>

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

        <div class="mt-14" data-testimonials-carousel data-visible-slides="{{ $visibleSlides }}" data-slide-count="{{ $testimonialCount }}" data-testimonials-dot-aria-prefix="{{ $dotLabel }}" role="region" aria-roledescription="carousel" aria-label="{{ $carouselLabel }}">
            <div class="relative">
                <div class="overflow-hidden mx-10 min-[380px]:mx-11 sm:mx-12 md:mx-14 py-10 sm:py-12 md:pt-[1rem] md:pb-[3rem]" data-testimonials-viewport tabindex="0">
                    <div class="flex gap-5 md:gap-6 motion-safe:transition-transform motion-safe:duration-500 motion-safe:ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none" data-testimonials-track style="transform: translateX(0)">
                        @foreach ($reviews as $ti => $t)
                            <div class="scroll-reveal flex min-w-0 shrink-0 justify-center" id="testimonial-slide-{{ $ti }}" data-scroll-reveal data-testimonial-slide role="group" aria-roledescription="slide" aria-label="">
                                <figure class="group relative flex h-full w-full min-w-0 flex-col overflow-hidden rounded-[1.15rem] border border-lux-ink/[0.07] bg-white/85 shadow-[0_22px_55px_-32px_rgba(74,74,78,0.45)] backdrop-blur-sm transition-[border-color,box-shadow,transform] duration-500 ease-out md:rounded-[1.35rem]">
                                    <div class="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-tsb-primary/35 to-transparent opacity-90" aria-hidden="true"></div>
                                    <span class="pointer-events-none absolute -right-1 top-10 font-serif text-[4.25rem] leading-none text-tsb-primary/[0.06] transition-colors duration-500 group-hover:text-tsb-primary/[0.09] md:top-14 md:text-[5.5rem] lg:text-[6.25rem]" aria-hidden="true">&ldquo;</span>

                                    <div class="relative flex flex-1 flex-col p-5 pt-6 md:p-6 md:pt-7 lg:p-7 lg:pt-8">
                                        <div class="mb-3 flex gap-0.5 md:mb-4 md:gap-1" aria-hidden="true">
                                            @for ($s = 0; $s < 5; $s++)
                                                <svg class="h-3 w-3 shrink-0 {{ $s < $t['time'] ? ' text-tsb-primary' : 'text-tsb-primary/35' }} md:h-3.5 md:w-3.5" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
                                                </svg>
                                            @endfor
                                        </div>

                                        <blockquote class="flex-1">
                                            <p class="font-serif text-[0.8125rem] font-normal italic leading-[1.75] tracking-wide text-lux-ink md:text-[0.875rem] md:leading-[1.85] lg:text-[0.9375rem]">
                                                {{ $t['detail'] ?? '' }}
                                            </p>
                                        </blockquote>

                                        <figcaption class="mt-5 flex items-center gap-3 border-t border-lux-ink/[0.06] pt-4 md:mt-6 md:gap-4 md:pt-5">
                                            <img class="h-10 w-10 shrink-0 rounded-full border border-tsb-primary/12 object-cover object-center shadow-inner shadow-white/90 md:h-11 md:w-11 lg:h-12 lg:w-12" src="{{ asset('modules/frontend/images/testimonials/guest-01.jpg') }}" alt="{{ $t['name'] ?? '' }}" width="48" height="48" loading="lazy" decoding="async" />
                                            <div class="min-w-0">
                                                <p class="font-serif text-xs font-medium tracking-wide text-lux-ink md:text-sm">{{ $t['name'] ?? '' }}</p>
                                                <p class="mt-0.5 font-sans text-[0.6rem] uppercase tracking-[0.18em] text-lux-ink-muted md:mt-1 md:text-[0.65rem] md:tracking-[0.2em]">{{ $t['desc'] ?? '' }}</p>
                                            </div>
                                        </figcaption>
                                    </div>
                                </figure>
                            </div>
                        @endforeach
                    </div>
                </div>

                <button class="absolute left-0 top-1/2 z-10 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full border border-tsb-primary/15 bg-white/95 text-tsb-primary shadow-md shadow-lux-ink/10 transition hover:border-tsb-primary/30 hover:bg-white hover:shadow-lg disabled:cursor-not-allowed disabled:opacity-35 md:h-11 md:w-11" data-testimonials-prev type="button" aria-label="{{ $prevLabel }}">
                    <svg class="h-5 w-5" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="m15 18-6-6 6-6" />
                    </svg>
                </button>
                <button class="absolute right-0 top-1/2 z-10 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full border border-tsb-primary/15 bg-white/95 text-tsb-primary shadow-md shadow-lux-ink/10 transition hover:border-tsb-primary/30 hover:bg-white hover:shadow-lg disabled:cursor-not-allowed disabled:opacity-35 md:h-11 md:w-11" data-testimonials-next type="button" aria-label="{{ $nextLabel }}">
                    <svg class="h-5 w-5" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="m9 18 6-6-6-6" />
                    </svg>
                </button>
            </div>

            <div class="mt-6 flex min-h-[0.625rem] flex-wrap items-center justify-center gap-2 sm:mt-8" data-testimonials-dots aria-label="Slide position"></div>
        </div>
    </div>
</section>