@extends('layouts.public')

@section('content')
    @php
        $pageSections = $pageSections ?? $page->sectionMap();
        $heroContent = $pageSections['hero'] ?? [];
        $featuresSection = $pageSections['features_section'] ?? [];
        $treatmentsSection = $pageSections['treatments_section'] ?? [];
        $stepsSection = $pageSections['steps_section'] ?? [];
        $reasonsSection = $pageSections['reasons_section'] ?? [];
        $therapistsSection = $pageSections['therapists_section'] ?? [];
        $testimonialsSection = $pageSections['testimonials_section'] ?? [];

        $defaultHeroSlides = [
            ['image' => asset('images/hero-bg.jpg'), 'label' => 'Luxury Arrival'],
            ['image' => asset('images/about-bg.jpg'), 'label' => 'Sanctuary Mood'],
            ['image' => asset('images/treatment-oil.jpg'), 'label' => 'Wellness Ritual'],
        ];
        $heroSlides = $pageSections['hero_slides'] ?? $defaultHeroSlides;

        $defaultFeatures = [
            ['icon' => 'home', 'title' => 'At Your Doorstep', 'text' => 'Spa-quality massage delivered to your home or hotel'],
            ['icon' => 'shield', 'title' => 'Trusted Therapists', 'text' => 'Trained, handpicked professionals ensuring safe service'],
            ['icon' => 'clock', 'title' => 'Save Time', 'text' => 'No travel needed—relax where you are most comfortable'],
            ['icon' => 'sparkles', 'title' => 'Pure Pampering', 'text' => 'Perfect for stress relief, muscle tension, or relaxation'],
            ['icon' => 'calendar', 'title' => 'Flexible Booking', 'text' => 'Scheduling that fits your plans'],
            ['icon' => 'lock', 'title' => 'Total Privacy', 'text' => 'Complete comfort in your own space'],
        ];
        $features = $pageSections['features_items'] ?? $defaultFeatures;

        $featureTherapists = ! empty($dbFeaturedTherapists ?? []) ? $dbFeaturedTherapists : ($pageSections['featured_therapist_cards'] ?? []);

        $treatments = ! empty($dbTreatments ?? []) ? $dbTreatments : ($pageSections['treatments_items'] ?? []);

        $defaultSteps = [
            ['icon' => 'message-circle', 'title' => 'WhatsApp / Line Message', 'desc' => 'Send us a "Hi" on WhatsApp or Line to get started.'],
            ['icon' => 'user-check', 'title' => 'Connect with Our Coordinator', 'desc' => 'Our client coordinator will connect with you instantly.'],
            ['icon' => 'map-pin', 'title' => 'Select Treatment & Therapist', 'desc' => 'Choose from our treatments and browse our skilled therapists.'],
            ['icon' => 'clock', 'title' => 'Therapist Arrives On Time', 'desc' => 'Your therapist arrives at your location at the agreed time.'],
            ['icon' => 'credit-card', 'title' => 'Easy Payment', 'desc' => 'Pay directly to the therapist by cash. Simple and hassle-free.'],
        ];
        $steps = $pageSections['steps_items'] ?? $defaultSteps;

        $defaultReasons = [
            ['icon' => 'award', 'text' => 'Expert therapists selected for exceptional quality'],
            ['icon' => 'heart', 'text' => 'Intimate, soothing experiences you will always remember'],
            ['icon' => 'zap', 'text' => 'Quick, hassle-free booking with trusted service'],
            ['icon' => 'shield', 'text' => 'Confidential, professional care available daily'],
            ['icon' => 'palette', 'text' => 'Therapies personalized to suit your desires and comfort'],
        ];
        $reasons = $pageSections['reasons_items'] ?? $defaultReasons;

        $therapists = ! empty($dbTherapists ?? []) ? $dbTherapists : ($pageSections['therapists_items'] ?? []);

        $testimonials = ! empty($dbTestimonials ?? []) ? $dbTestimonials : ($pageSections['testimonials_items'] ?? []);
    @endphp

    <section
        x-data="{ current: 0, slides: @js($heroSlides) }"
        x-init="setInterval(() => current = (current + 1) % slides.length, 5000)"
        class="relative flex min-h-screen items-center justify-center overflow-hidden"
    >
        <template x-for="(slide, index) in slides" :key="index">
            <div
                x-show="current === index"
                x-transition:enter="transition ease-out duration-700"
                x-transition:enter-start="opacity-0 scale-105"
                x-transition:enter-end="opacity-100 scale-100"
                x-transition:leave="transition ease-in duration-500"
                x-transition:leave-start="opacity-100 scale-100"
                x-transition:leave-end="opacity-0 scale-105"
                class="absolute inset-0 bg-cover bg-center"
                :style="`background-image:url('${slide.image}')`"
            ></div>
        </template>

        <div class="absolute inset-0 bg-[linear-gradient(180deg,rgba(13,7,12,0.42),rgba(13,7,12,0.62))]"></div>
        <div class="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(20,10,16,0.14),rgba(20,10,16,0.36)_58%,rgba(20,10,16,0.56)_100%)]"></div>

        <button @click="current = (current - 1 + slides.length) % slides.length" class="lunara-hover-soft absolute left-3 top-1/2 z-20 hidden h-14 w-14 -translate-y-1/2 items-center justify-center rounded-full border border-accent/45 bg-dark/35 text-accent backdrop-blur transition hover:bg-dark/55 md:flex" aria-label="Previous slide">‹</button>
        <button @click="current = (current + 1) % slides.length" class="lunara-hover-soft absolute right-3 top-1/2 z-20 hidden h-14 w-14 -translate-y-1/2 items-center justify-center rounded-full border border-accent/45 bg-dark/35 text-accent backdrop-blur transition hover:bg-dark/55 md:flex" aria-label="Next slide">›</button>

        <div class="absolute bottom-8 left-1/2 z-20 flex -translate-x-1/2 gap-3 md:bottom-10">
            <template x-for="(slide, index) in slides" :key="index">
                <button @click="current = index" class="h-3 rounded-full transition-all duration-300" :class="current === index ? 'w-14 bg-accent shadow-[0_0_24px_rgba(255,47,158,0.42)]' : 'w-3 bg-white/45 hover:bg-white/75'" :aria-label="`Show slide ${index + 1}: ${slide.label}`"></button>
            </template>
        </div>

        <div class="relative z-10 mx-auto max-w-5xl px-4 text-center">
            <p class="mb-6 text-base uppercase tracking-[0.35em] text-white/90">{{ $heroContent['eyebrow'] ?? 'Welcome to Lunara' }}</p>
            <div class="mb-8 flex items-center justify-center gap-6">
                <span class="h-px w-24 bg-accent/60"></span>
                <span class="h-px w-24 bg-accent/60"></span>
            </div>
            <h1 class="mb-6 font-display text-4xl font-bold uppercase tracking-wider text-accent drop-shadow-[0_8px_30px_rgba(0,0,0,0.35)] md:text-5xl lg:text-6xl">
                {{ $heroContent['headline'] ?? 'Lunara Massage' }}
            </h1>
            <div class="mb-10 flex items-center justify-center gap-6">
                <span class="h-px w-24 bg-accent/60"></span>
                <span class="h-px w-24 bg-accent/60"></span>
            </div>
            <p class="mb-12 text-xl tracking-wide text-white drop-shadow-[0_6px_20px_rgba(0,0,0,0.35)] md:text-2xl">
                {{ $heroContent['subheadline'] ?? 'The Best Outcall Massage Experience In Phuket' }}
            </p>

            <div class="flex flex-col justify-center gap-4 sm:flex-row">
                <a href="{{ route('pages.show', ['slug' => 'therapists']) }}" class="lunara-button-secondary lunara-hover-soft">{{ $heroContent['secondary_label'] ?? 'Check Out Our Therapists' }}</a>
                <a href="{{ route('pages.show', ['slug' => 'book-now']) }}" class="lunara-button-primary lunara-hover-soft">{{ $heroContent['primary_label'] ?? 'Book Now' }}</a>
            </div>
        </div>
    </section>

    <section x-data="{ current: 0, cards: @js($featureTherapists) }" x-init="setInterval(() => current = (current + 1) % cards.length, 4000)" class="bg-secondary py-24 text-foreground">
        <div class="lunara-shell">
            <h2 class="mb-16 text-center text-4xl uppercase tracking-wider text-accent md:text-5xl">{{ $featuresSection['title'] ?? 'Our Features' }}</h2>

            <div class="grid items-center gap-12 lg:grid-cols-2">
                <div class="grid gap-5 sm:grid-cols-2">
                    @foreach ($features as $feature)
                        <div class="lunara-hover-rise rounded-xl border border-border/30 bg-card p-5">
                            <div class="flex items-start gap-3">
                            <div class="mt-0.5 text-accent">
                                @if ($feature['icon'] === 'home')
                                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M3 11.5 12 4l9 7.5"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M5 10.5V20h14v-9.5"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M10 20v-5h4v5"/></svg>
                                @elseif ($feature['icon'] === 'shield')
                                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 3 5 6v6c0 5 3.4 8.74 7 9.94 3.6-1.2 7-4.94 7-9.94V6l-7-3Z"/></svg>
                                @elseif ($feature['icon'] === 'clock')
                                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="9" stroke-width="1.8"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 7v5l3 2"/></svg>
                                @elseif ($feature['icon'] === 'sparkles')
                                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="m12 3 1.8 4.2L18 9l-4.2 1.8L12 15l-1.8-4.2L6 9l4.2-1.8L12 3Zm7 12 1 2.5L22.5 19 20 20l-1 2.5L18 20l-2.5-1 2.5-1.5L19 15Zm-14 0 1 2.5L8.5 19 6 20l-1 2.5L4 20l-2.5-1L4 17.5 5 15Z"/></svg>
                                @elseif ($feature['icon'] === 'calendar')
                                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="3" y="5" width="18" height="16" rx="2" stroke-width="1.8"/><path stroke-linecap="round" stroke-width="1.8" d="M16 3v4M8 3v4M3 10h18"/></svg>
                                @else
                                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="5" y="11" width="14" height="10" rx="2" stroke-width="1.8"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M8 11V8a4 4 0 1 1 8 0v3"/></svg>
                                @endif
                            </div>
                            <div>
                                <h3 class="mb-1 text-sm font-semibold text-foreground">{{ $feature['title'] }}</h3>
                                <p class="text-xs leading-relaxed text-muted-foreground">{{ $feature['text'] }}</p>
                            </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="relative">
                    <div class="lunara-hover-rise lunara-hover-scale relative mx-auto aspect-[3/4] max-w-md overflow-hidden rounded-2xl border border-white/10">
                        <template x-for="(card, index) in cards" :key="index">
                            <img
                                x-show="current === index"
                                x-transition:enter="transition ease-out duration-500"
                                x-transition:enter-start="opacity-0 translate-x-8"
                                x-transition:enter-end="opacity-100 translate-x-0"
                                x-transition:leave="transition ease-in duration-500"
                                x-transition:leave-start="opacity-100 translate-x-0"
                                x-transition:leave-end="opacity-0 -translate-x-8"
                                :src="card.src"
                                :alt="card.name"
                                class="absolute inset-0 h-full w-full object-cover"
                            >
                        </template>
                        <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent p-6">
                            <p class="text-2xl font-bold text-white" x-text="cards[current].name"></p>
                        </div>
                        <button @click="current = (current - 1 + cards.length) % cards.length" class="lunara-hover-soft absolute left-3 top-1/2 flex h-9 w-9 -translate-y-1/2 items-center justify-center rounded-full bg-white/80 text-foreground transition hover:bg-accent hover:text-white">‹</button>
                        <button @click="current = (current + 1) % cards.length" class="lunara-hover-soft absolute right-3 top-1/2 flex h-9 w-9 -translate-y-1/2 items-center justify-center rounded-full bg-white/80 text-foreground transition hover:bg-accent hover:text-white">›</button>
                    </div>

                    <div class="mt-4 flex justify-center gap-2">
                        <template x-for="(card, index) in cards" :key="index">
                            <button @click="current = index" class="h-2 rounded-full transition-all" :class="current === index ? 'w-6 bg-accent' : 'w-2 bg-muted-foreground/40'"></button>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="bg-dark py-24">
        <div class="lunara-shell">
            <div class="mb-16 text-center">
                <p class="mb-3 text-xs uppercase tracking-[0.25em] text-[#d48db7]">{{ $treatmentsSection['eyebrow'] ?? 'Our Services' }}</p>
                <h2 class="text-4xl text-cream md:text-5xl">{{ $treatmentsSection['title'] ?? 'Treatments' }}</h2>
            </div>
            <div class="mx-auto grid max-w-5xl gap-8 md:grid-cols-2 lg:grid-cols-3">
                @foreach ($treatments as $treatment)
                    <div class="lunara-hover-rise rounded-[1.75rem] border border-white/10 bg-dark-card/35 p-8 text-center backdrop-blur">
                        <div class="mx-auto mb-5 flex h-12 w-12 items-center justify-center text-accent">
                            @if ($treatment['icon'] === 'leaf')
                                <svg class="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 20c8 0 12-6 12-14-8 0-14 4-14 12 0 1 .67 2 2 2Z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 16c1.5-2 4.5-4 8-5"/></svg>
                            @elseif ($treatment['icon'] === 'droplets')
                                <svg class="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 3s-5 5.33-5 9a5 5 0 0 0 10 0c0-3.67-5-9-5-9Z"/></svg>
                            @elseif ($treatment['icon'] === 'flame')
                                <svg class="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 3s4 3 4 7a4 4 0 1 1-8 0c0-2 1-4 4-7Zm0 18a5 5 0 0 0 5-5c0-3-2-4-3-6 0 2-2 3-2 5-1-1-3-2-3-5-1 2-2 3-2 6a5 5 0 0 0 5 5Z"/></svg>
                            @elseif ($treatment['icon'] === 'wind')
                                <svg class="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 8h10a3 3 0 1 0-3-3"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 12h14a3 3 0 1 1-3 3"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 16h7"/></svg>
                            @elseif ($treatment['icon'] === 'heart')
                                <svg class="h-8 w-8" viewBox="0 0 24 24" fill="currentColor"><path d="m12 21-1.45-1.32C5.4 15.03 2 11.95 2 8.17 2 5.1 4.42 3 7.2 3c1.57 0 3.09.74 4.05 1.91C12.21 3.74 13.73 3 15.3 3 18.08 3 20.5 5.1 20.5 8.17c0 3.78-3.4 6.86-8.55 11.51L12 21Z"/></svg>
                            @else
                                <svg class="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 18c2.5-1 3.5-5 3.5-9"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 18c-2.5-1-3.5-5-3.5-9"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 14h14"/></svg>
                            @endif
                        </div>
                        <h3 class="text-lg text-cream">{{ $treatment['title'] }}</h3>
                        <p class="mb-1 mt-1 text-xs uppercase tracking-wider text-[#d48db7]">{{ $treatment['duration'] }}</p>
                        <p class="mb-4 text-base text-accent">{{ $treatment['price'] }}</p>
                        <p class="text-sm leading-relaxed text-cream/50">{{ $treatment['desc'] }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section class="bg-dark-card py-24">
        <div class="lunara-shell">
            <div class="mb-16 text-center">
                <p class="mb-3 text-sm uppercase tracking-[0.2em] text-accent">{{ $stepsSection['eyebrow'] ?? 'It Is Easy' }}</p>
                <h2 class="text-4xl text-cream md:text-5xl">{{ $stepsSection['title'] ?? 'How To Book' }}</h2>
            </div>
            <div class="mx-auto grid max-w-6xl gap-6 md:grid-cols-5">
                @foreach ($steps as $index => $step)
                    <div class="lunara-hover-rise rounded-[1.75rem] border border-white/10 bg-dark/20 p-6 text-center backdrop-blur">
                        <div class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-accent text-white">
                            @if ($step['icon'] === 'message-circle')
                                <svg class="h-7 w-7" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M7 10h10M7 14h6"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M5 19.5 6.7 16H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4h12a4 4 0 0 1 4 4v4a4 4 0 0 1-4 4H11l-6 3.5Z"/></svg>
                            @elseif ($step['icon'] === 'user-check')
                                <svg class="h-7 w-7" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="m16 11 2 2 4-4"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 13a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M5 21a7 7 0 0 1 10.74-5.9"/></svg>
                            @elseif ($step['icon'] === 'map-pin')
                                <svg class="h-7 w-7" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 21s-6-4.35-6-10a6 6 0 1 1 12 0c0 5.65-6 10-6 10Z"/><circle cx="12" cy="11" r="2.5" stroke-width="1.8"/></svg>
                            @elseif ($step['icon'] === 'clock')
                                <svg class="h-7 w-7" viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="9" stroke-width="1.8"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 7v5l3 2"/></svg>
                            @else
                                <svg class="h-7 w-7" viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="3" y="5" width="18" height="14" rx="2" stroke-width="1.8"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M3 10h18"/></svg>
                            @endif
                        </div>
                        <h3 class="mb-2 text-lg text-cream">{{ $step['title'] }}</h3>
                        <p class="text-sm leading-relaxed text-cream/60">{{ $step['desc'] }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section class="relative overflow-hidden py-24">
        <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('{{ asset('images/about-bg.jpg') }}')"></div>
        <div class="absolute inset-0 bg-dark/85"></div>
        <div class="relative z-10 lunara-shell">
                <div class="mb-14 text-center">
                    <h2 class="text-4xl text-cream md:text-5xl">{{ $reasonsSection['title'] ?? 'Why Choose Lunara?' }}</h2>
                </div>
                <div class="mx-auto max-w-4xl space-y-5">
                    @foreach ($reasons as $reason)
                        <div class="lunara-hover-rise lunara-glass-panel flex items-center justify-center gap-4 p-5 text-center">
                            @if ($reason['icon'] === 'award')
                                <svg class="h-5 w-5 flex-shrink-0 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 17.25 6.75 20l1-5.75-4.25-4.14 5.87-.85L12 4l2.63 5.26 5.87.85-4.25 4.14 1 5.75L12 17.25Z"/></svg>
                            @elseif ($reason['icon'] === 'heart')
                                <svg class="h-5 w-5 flex-shrink-0 text-accent" viewBox="0 0 24 24" fill="currentColor"><path d="m12 21-1.45-1.32C5.4 15.03 2 11.95 2 8.17 2 5.1 4.42 3 7.2 3c1.57 0 3.09.74 4.05 1.91C12.21 3.74 13.73 3 15.3 3 18.08 3 20.5 5.1 20.5 8.17c0 3.78-3.4 6.86-8.55 11.51L12 21Z"/></svg>
                            @elseif ($reason['icon'] === 'zap')
                                <svg class="h-5 w-5 flex-shrink-0 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M13 2 4 14h6l-1 8 9-12h-6l1-8Z"/></svg>
                            @elseif ($reason['icon'] === 'shield')
                                <svg class="h-5 w-5 flex-shrink-0 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 3 5 6v6c0 5 3.4 8.74 7 9.94 3.6-1.2 7-4.94 7-9.94V6l-7-3Z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="m9.5 12 1.75 1.75L14.5 10.5"/></svg>
                            @else
                                <svg class="h-5 w-5 flex-shrink-0 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 3v18M3 12h18M5.5 5.5l13 13M18.5 5.5l-13 13"/></svg>
                            @endif
                            <p class="text-lg text-cream/90">{{ $reason['text'] }}</p>
                        </div>
                    @endforeach
                </div>
            <div class="mt-12 text-center">
                <a href="https://wa.me/{{ $siteSettings->whatsapp_number }}" target="_blank" rel="noopener noreferrer" class="lunara-button-primary lunara-hover-soft">Book Now</a>
            </div>
        </div>
    </section>

    <section class="bg-dark py-24">
        <div class="lunara-shell">
            <div class="mb-16 text-center">
                <h2 class="text-4xl uppercase tracking-wider text-accent md:text-5xl">{{ $therapistsSection['title'] ?? 'Meet Our Therapists' }}</h2>
                <p class="mx-auto mt-4 max-w-xl text-lg text-cream/70">{{ $therapistsSection['subtitle'] ?? 'Handpicked professionals dedicated to your comfort and well-being' }}</p>
            </div>

            <div class="relative mx-auto max-w-6xl">
                <button
                    type="button"
                    @click="$refs.homeTherapists.scrollBy({ left: -320, behavior: 'smooth' })"
                    class="lunara-hover-soft absolute -left-4 top-1/2 z-10 hidden h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full border border-border/30 bg-dark-card text-cream transition-colors hover:border-accent hover:text-accent md:flex"
                    aria-label="Scroll therapists left"
                >
                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="m15 18-6-6 6-6"/></svg>
                </button>
                <button
                    type="button"
                    @click="$refs.homeTherapists.scrollBy({ left: 320, behavior: 'smooth' })"
                    class="lunara-hover-soft absolute -right-4 top-1/2 z-10 hidden h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full border border-border/30 bg-dark-card text-cream transition-colors hover:border-accent hover:text-accent md:flex"
                    aria-label="Scroll therapists right"
                >
                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="m9 18 6-6-6-6"/></svg>
                </button>

                <div x-ref="homeTherapists" class="flex snap-x snap-mandatory gap-6 overflow-x-auto pb-4 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
                @foreach ($therapists as $therapist)
                    <div class="w-72 flex-shrink-0 snap-center">
                    <div class="lunara-hover-rise lunara-hover-scale overflow-hidden rounded-xl border border-border/20 bg-dark-card">
                        <div class="aspect-[3/4] overflow-hidden">
                            <img src="{{ $therapist['img'] }}" alt="{{ $therapist['name'] }}" class="h-full w-full object-cover transition duration-500 hover:scale-105">
                        </div>
                        <div class="p-5">
                            <h3 class="text-xl font-bold uppercase text-cream">{{ $therapist['name'] }}</h3>
                            <p class="mt-1 text-sm text-cream/60">No: {{ $therapist['id'] }}</p>
                            <p class="mb-4 text-sm text-cream/60">Age: {{ $therapist['age'] }}</p>
                            <a href="https://wa.me/{{ $siteSettings->whatsapp_number }}" target="_blank" rel="noopener noreferrer" class="block rounded-full bg-accent px-6 py-2.5 text-center text-sm font-medium text-white transition hover:bg-accent/90">
                                Book Now
                            </a>
                        </div>
                    </div>
                    </div>
                @endforeach
                </div>
            </div>

            <div class="mt-10 text-center">
                <a href="{{ route('pages.show', ['slug' => 'therapists']) }}" class="lunara-button-secondary lunara-hover-soft">View All Therapists</a>
            </div>
        </div>
    </section>

    <section x-data="{ current: 0, testimonials: @js($testimonials) }" class="bg-dark-card py-24">
        <div class="lunara-shell">
            <div class="mb-14 text-center">
                <p class="mb-3 text-sm uppercase tracking-[0.2em] text-accent">{{ $testimonialsSection['eyebrow'] ?? 'Testimonials' }}</p>
                <h2 class="text-4xl text-cream md:text-5xl">{{ $testimonialsSection['title'] ?? 'Our Clients Say' }}</h2>
            </div>

            <div class="lunara-hover-rise lunara-glass-panel relative mx-auto max-w-2xl p-8 text-center md:p-10">
                <div class="mx-auto mb-6 text-5xl text-accent/30">“</div>
                <div class="flex min-h-[140px] items-center justify-center">
                    <template x-for="(testimonial, index) in testimonials" :key="index">
                        <div x-show="current === index" x-transition:enter="transition ease-out duration-400" x-transition:enter-start="opacity-0 translate-y-5" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-5">
                            <p class="mb-6 text-lg italic leading-relaxed text-cream/80 md:text-xl" x-text="`&quot;${testimonial.text}&quot;`"></p>
                            <p class="text-base text-accent" x-text="`— ${testimonial.author}`"></p>
                        </div>
                    </template>
                </div>
                <div class="mt-10 flex justify-center gap-4">
                    <button @click="current = (current - 1 + testimonials.length) % testimonials.length" class="lunara-hover-soft flex h-10 w-10 items-center justify-center rounded-full border border-border/30 text-cream/60 transition hover:border-accent hover:text-accent">‹</button>
                    <button @click="current = (current + 1) % testimonials.length" class="lunara-hover-soft flex h-10 w-10 items-center justify-center rounded-full border border-border/30 text-cream/60 transition hover:border-accent hover:text-accent">›</button>
                </div>
            </div>
        </div>
    </section>
@endsection