@extends('layouts.site')

@section('title', $page->meta_title ?: 'Home')
@section('meta_description', $page->meta_description ?? 'Home page for Hillcrest Living, a supported living provider for older adults aged 65+.')

@php
    use Illuminate\Support\Facades\Storage;

    $activeSections = $page->sections
        ->where('is_active', true)
        ->sortBy('sort_order')
        ->values();

    $heroFallbackImages = [
        asset('assets/images/hillcrest-hero-ai-1.png'),
        asset('assets/images/hillcrest-hero-ai-2.png'),
        asset('assets/images/hillcrest-hero-ai-3.png'),
    ];

    $heroSection = $activeSections->firstWhere('section_key', 'hero');
    $supportServicesSection = $activeSections->firstWhere('section_key', 'home_services');
    $approachSection = $activeSections->firstWhere('section_key', 'home_approach');
    $referralsSection = $activeSections->firstWhere('section_key', 'home_referrals');
    $whyChooseSection = $activeSections->firstWhere('section_key', 'home_why_choose');
    $testimonialSection = $activeSections->firstWhere('section_key', 'home_testimonials');
    $faqSection = $activeSections->firstWhere('section_key', 'home_faqs');
    $approachImage = $approachSection?->media
        ? Storage::disk($approachSection->media->disk)->url($approachSection->media->path)
        : asset('assets/images/hillcrest-about-story.png');
    $approachImageAlt = $approachSection?->media?->alt_text ?: 'A calm supported living environment at Hillcrest';
    $heroSlides = $activeSections
        ->filter(fn ($section) => in_array($section->section_key, ['hero', 'hero_slide']))
        ->values()
        ->map(function ($section, int $index) use ($heroFallbackImages) {
            return [
                'title' => $section->heading ?: 'Helping older adults live independently, safely, and with dignity',
                'description' => strip_tags((string) $section->body) ?: 'Supported living for older adults (65+) who value independence with day-to-day support.',
                'image' => $section->media
                    ? Storage::disk($section->media->disk)->url($section->media->path)
                    : $heroFallbackImages[$index % count($heroFallbackImages)],
                'alt' => $section->media?->alt_text ?: 'Supported living at Hillcrest',
                'cta_primary_label' => $section->cta_primary_label ?: 'Make a Referral',
                'cta_primary_url' => $section->cta_primary_url ?: route('referral.show'),
                'cta_secondary_label' => $section->cta_secondary_label ?: 'Speak to Our Team',
                'cta_secondary_url' => $section->cta_secondary_url ?: route('contact.show'),
            ];
        })
        ->values();

    if ($heroSlides->count() < 3) {
        $heroSlides = collect([
            [
                'title' => 'Helping older adults live independently, safely, and with dignity',
                'description' => 'At Hillcrest Living, we provide supported living for older adults aged 65+ who want to maintain their independence while receiving the right level of day-to-day support. We focus on low to moderate support needs, creating a safe, comfortable, and empowering environment—without intrusive care.',
                'image' => asset('assets/images/hillcrest-hero-ai-1.png'),
                'alt' => 'Supported living visual for older adults',
                'cta_primary_label' => 'Make a Referral',
                'cta_primary_url' => route('referral.show'),
                'cta_secondary_label' => 'Speak to Our Team',
                'cta_secondary_url' => route('contact.show'),
            ],
            [
                'title' => 'Supported Living That Promotes Independence',
                'description' => 'Supported living is about having your own space, your own routine, and your own life, with the reassurance that support is available when needed. We help individuals stay in control, build confidence, and remain part of their community.',
                'image' => asset('assets/images/hillcrest-hero-ai-2.png'),
                'alt' => 'Comfortable supported living accommodation',
                'cta_primary_label' => 'Make a Referral',
                'cta_primary_url' => route('referral.show'),
                'cta_secondary_label' => 'Speak to Our Team',
                'cta_secondary_url' => route('contact.show'),
            ],
            [
                'title' => 'Practical, non-intrusive support',
                'description' => 'We provide practical support including daily routine, medication prompting, shopping, errands, and social engagement. Our focus is helping individuals build confidence, routine, and independence.',
                'image' => asset('assets/images/hillcrest-hero-ai-3.png'),
                'alt' => 'Safe and comfortable community garden',
                'cta_primary_label' => 'Make a Referral',
                'cta_primary_url' => route('referral.show'),
                'cta_secondary_label' => 'Speak to Our Team',
                'cta_secondary_url' => route('contact.show'),
            ],
        ]);
    }

    $heroRotationMs = (int) ($heroSection?->rotation_interval_ms
        ?: $activeSections->firstWhere('section_key', 'hero_slide')?->rotation_interval_ms
        ?: 6000);
    if ($heroRotationMs < 2000) {
        $heroRotationMs = 2000;
    }

    $serviceIconMap = [
        'daily-routine-support' => 'calendar',
        'medication-prompting' => 'clock-3',
        'shopping-and-errands-support' => 'shopping-bag',
        'appointment-support' => 'clipboard-list',
        'light-domestic-support-and-organisation' => 'house',
        'social-engagement-and-companionship' => 'users',
        'community-access-and-activities' => 'map-pinned',
        'budgeting-and-basic-life-admin-support' => 'wallet',
    ];

    $featuredServiceSlugs = [
        'daily-routine-support',
        'medication-prompting',
        'social-engagement-and-companionship',
        'community-access-and-activities',
    ];

    $featuredServices = collect($featuredServiceSlugs)
        ->map(fn ($slug) => $services->firstWhere('slug', $slug))
        ->filter()
        ->values();

    if ($featuredServices->isEmpty()) {
        $featuredServices = $services->take(4)->values();
    }

    $galleryFallbackImages = collect([
        [
            'src' => asset('assets/images/hillcrest-gallery-photo-1.png'),
            'alt' => 'Comfortable supported living accommodation at Hillcrest',
            'label' => 'Comfortable spaces',
        ],
        [
            'src' => asset('assets/images/hillcrest-gallery-photo-2.png'),
            'alt' => 'Supported living service environment for older adults',
            'label' => 'Daily living support',
        ],
        [
            'src' => asset('assets/images/hillcrest-gallery-photo-3.png'),
            'alt' => 'Calm Hillcrest living space close to local community',
            'label' => 'Calm environments',
        ],
        [
            'src' => asset('assets/images/hillcrest-community-photo.png'),
            'alt' => 'Older adults supported to stay connected with the community',
            'label' => 'Community connection',
        ],
        [
            'src' => asset('assets/images/hillcrest-about-story.png'),
            'alt' => 'Hillcrest person-centred support in a homely setting',
            'label' => 'Person-centred care',
        ],
        [
            'src' => asset('assets/images/hillcrest-referral-photo.png'),
            'alt' => 'Friendly referral conversation for supported living',
            'label' => 'Clear referral pathway',
        ],
        [
            'src' => asset('assets/images/faq-support-conversation.png'),
            'alt' => 'Support coordinator answering questions with an older adult',
            'label' => 'Reassuring guidance',
        ],
        [
            'src' => asset('assets/images/faq-accommodation-support.png'),
            'alt' => 'Safe and comfortable supported living accommodation',
            'label' => 'Safe accommodation',
        ],
    ]);

    $cmsGalleryImages = $homeMedia
        ->map(fn ($media) => [
            'src' => Storage::disk($media->disk)->url($media->path),
            'alt' => $media->alt_text ?: 'Life at Hillcrest Living',
            'label' => $media->caption ?: 'Life at Hillcrest',
        ])
        ->values();

    $galleryImages = $cmsGalleryImages->isNotEmpty()
        ? $cmsGalleryImages
        : $galleryFallbackImages;
@endphp

@push('meta')
    @php
        $org = [
            '@context' => 'https://schema.org',
            '@type' => 'Organization',
            'name' => $siteSettings->site_name,
            'url' => url('/'),
        ];
        if (filled($siteSettings->contact_email)) {
            $org['email'] = $siteSettings->contact_email;
        }
        if (filled($siteSettings->contact_phone)) {
            $org['telephone'] = $siteSettings->contact_phone;
        }
        if (filled($siteSettings->contact_address)) {
            $org['address'] = [
                '@type' => 'PostalAddress',
                'streetAddress' => $siteSettings->contact_address,
                'addressCountry' => 'GB',
            ];
        }
    @endphp
    <script type="application/ld+json">{!! json_encode($org, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}</script>
@endpush

@section('content')
    <section
        class="floral-panel relative overflow-hidden"
        x-data="{
            active: 0,
            total: {{ $heroSlides->count() }},
            slides: @js($heroSlides),
            intervalMs: {{ $heroRotationMs }},
            timer: null,
            startTimer() {
                if (this.total <= 1) return;
                this.stopTimer();
                this.timer = setInterval(() => { this.active = (this.active + 1) % this.total }, this.intervalMs);
            },
            stopTimer() {
                clearInterval(this.timer);
                this.timer = null;
            }
        }"
        x-init="startTimer()"
        @mouseenter="stopTimer()"
        @mouseleave="startTimer()"
        @focusin="stopTimer()"
        @focusout="startTimer()"
    >
        <div class="ambient-blob ambient-blob-one"></div>
        <div class="ambient-blob ambient-blob-two"></div>
        <div class="section-shell relative section-gap grid gap-10 lg:grid-cols-2 lg:items-center">
            <div data-aos="fade-up" class="order-2 flex flex-col justify-center lg:order-1">
                <p class="text-sm font-semibold uppercase tracking-[0.16em] text-[var(--color-accent)]">{{ $siteSettings->site_tagline ?? 'Supported living for older adults (65+)' }}</p>
                <div class="relative min-h-[340px] mt-4">
                    <div
                        x-transition:enter="transition ease-out duration-700"
                        x-transition:enter-start="opacity-0 translate-y-4"
                        x-transition:enter-end="opacity-100 translate-y-0"
                    >
                        <h1 class="font-display text-4xl font-bold leading-tight text-[var(--color-heading)] md:text-5xl" style="font-family: var(--font-heading);" x-text="slides[active]?.title"></h1>
                        <p class="mt-6 max-w-2xl text-lg text-neutral-700" x-text="slides[active]?.description"></p>
                        <p class="mt-4 text-base font-semibold text-[var(--color-heading)]">Live independently. Stay supported. Feel at home.</p>
                        <div class="mt-8 flex flex-col gap-3 sm:flex-row">
                            <a :href="slides[active]?.cta_primary_url" class="hc-btn-primary" x-text="slides[active]?.cta_primary_label"></a>
                            <a :href="slides[active]?.cta_secondary_url" class="hc-btn-secondary" x-text="slides[active]?.cta_secondary_label"></a>
                        </div>
                    </div>
                </div>
                <div class="mt-6 flex gap-2" x-show="total > 1">
                    <template x-for="(_, idx) in Array.from({ length: total })" :key="idx">
                        <button
                            type="button"
                            @click="active = idx"
                            :aria-label="`Go to slide ${idx + 1}`"
                            :aria-current="active === idx ? 'true' : 'false'"
                            class="h-2.5 w-8 rounded-full transition-all duration-300"
                            :class="active === idx ? 'bg-[var(--color-accent)] w-10' : 'bg-neutral-300 hover:bg-neutral-400'"
                        ></button>
                    </template>
                </div>
            </div>
            <div class="micro-float relative order-1 min-h-[360px] overflow-hidden rounded-[2rem] border border-neutral-200 bg-white shadow-2xl shadow-neutral-900/10 lg:order-2 lg:min-h-[560px]" data-aos="fade-left">
                <img
                    x-transition:enter="transition ease-out duration-1000"
                    x-transition:enter-start="opacity-0 scale-105"
                    x-transition:enter-end="opacity-100 scale-100"
                    :src="slides[active]?.image"
                    :alt="slides[active]?.alt"
                    class="absolute inset-0 h-full w-full object-cover"
                >
                <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-[var(--color-primary)]/90 via-[var(--color-primary)]/50 to-transparent p-6 pt-16 text-white">
                    <p class="max-w-sm text-sm font-medium drop-shadow-md">Low to moderate support that feels calm, respectful, and close to home.</p>
                </div>
            </div>
        </div>
    </section>

    <section class="section-contrast-sage section-gap border-t border-neutral-100">
        <div class="section-shell grid gap-8 lg:grid-cols-2 lg:gap-14">
            <div data-aos="fade-up">
                <h2 class="font-display text-3xl font-bold text-[var(--color-heading)]" style="font-family: var(--font-heading);">Supported Living That Promotes Independence</h2>
                <p class="mt-4 text-neutral-700">
                    Supported living is about having your own space, your own routine, and your own life, with the reassurance that support is available when needed.
                </p>
                <p class="mt-4 text-neutral-700">
                    Unlike traditional care settings, our service helps individuals stay in control of daily life, build confidence and routine, and remain part of their community.
                </p>
            </div>
            <div class="hc-card floral-soft bg-[var(--color-surface-alt)]" data-aos="fade-up">
                <h3 class="font-display text-xl font-semibold text-[var(--color-heading)]" style="font-family: var(--font-heading);">Who We Support</h3>
                <ul class="mt-4 space-y-3 text-sm text-neutral-700">
                    <li class="leaf-accent">Older adults (65+) who are mostly independent but need some support.</li>
                    <li class="leaf-accent">People who may feel isolated or need regular companionship.</li>
                    <li class="leaf-accent">Individuals finding daily tasks and routines more challenging.</li>
                    <li class="leaf-accent">People stepping down from hospital or residential care settings.</li>
                    <li class="leaf-accent">Those wanting to avoid moving into a care home.</li>
                </ul>
                <p class="mt-4 text-sm font-medium text-[var(--color-primary)]">Ideal for individuals who do not require personal care, but benefit from structured support.</p>
            </div>
        </div>
    </section>

    <section class="section-contrast-gold section-gap border-t border-neutral-100">
        <div class="section-shell">
            <div class="rounded-3xl border border-[var(--color-primary)]/15 bg-[var(--color-surface)] p-6 shadow-sm md:p-8 xl:p-10">
                <div class="flex flex-wrap items-end justify-between gap-4">
                    <div class="max-w-3xl" data-aos="fade-up">
                        <p class="text-xs font-semibold uppercase tracking-[0.16em] text-[var(--color-accent)]">
                            {{ $supportServicesSection?->subheading ?: 'Person-Centred Support' }}
                        </p>
                        <h2 class="mt-3 font-display text-3xl font-bold text-[var(--color-heading)] md:text-4xl" style="font-family: var(--font-heading);">
                            {{ $supportServicesSection?->heading ?: 'Our Support Services' }}
                        </h2>
                        <p class="mt-4 text-[var(--color-body)]/90">
                            {{ $supportServicesSection?->body ? strip_tags($supportServicesSection->body) : 'We provide practical, non-intrusive support, including:' }}
                        </p>
                    </div>
                    <a class="hc-btn-secondary" href="{{ route('services.index') }}">View All Services</a>
                </div>

                <div class="mt-8 grid gap-4 md:grid-cols-2">
                    @foreach($featuredServices as $service)
                        @php $icon = $serviceIconMap[$service->slug] ?? 'circle-check'; @endphp
                        <article class="group relative overflow-hidden rounded-2xl border border-[var(--color-primary)]/15 bg-[var(--color-surface-alt)] p-5 shadow-sm transition-all duration-300 hover:-translate-y-0.5 hover:border-[#B99147] hover:bg-[#B99147] hover:shadow-md" data-aos="fade-up">
                            <span class="pointer-events-none absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-transparent transition duration-300 group-hover:from-white/5 group-hover:to-transparent"></span>
                            <div class="flex items-start gap-3">
                                <span class="relative inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-[var(--color-accent)]/12 text-[var(--color-primary)] transition-colors duration-300 group-hover:bg-white/20 group-hover:text-white">
                                    <i data-lucide="{{ $icon }}" class="h-5 w-5"></i>
                                </span>
                                <div class="relative">
                                    <h3 class="font-semibold text-[var(--color-heading)] transition-colors duration-300 group-hover:text-white">{{ $service->title }}</h3>
                                    @if($service->summary)
                                        <p class="mt-2 text-sm leading-relaxed text-[var(--color-body)]/85 transition-colors duration-300 group-hover:text-white/95">{{ $service->summary }}</p>
                                    @endif
                                </div>
                            </div>
                        </article>
                    @endforeach
                </div>

                <div class="mt-7 overflow-hidden rounded-3xl bg-[var(--color-primary)] text-white shadow-xl shadow-neutral-900/10">
                    <div class="relative p-6 md:p-8">
                        <div class="absolute -right-12 -top-16 h-40 w-40 rounded-full bg-[var(--color-accent)]/30 blur-2xl"></div>
                        <div class="absolute -bottom-20 left-10 h-44 w-44 rounded-full bg-white/10 blur-3xl"></div>

                        <div class="relative grid gap-6 lg:grid-cols-[1fr_auto] lg:items-center">
                            <div>
                                <p class="text-xs font-semibold uppercase tracking-[0.18em] text-white/70">Ready to discuss support?</p>
                                <h3 class="mt-3 font-display text-2xl font-bold leading-tight md:text-3xl" style="font-family: var(--font-heading);">
                                    Helping older adults stay independent, safe, and confident.
                                </h3>
                                <p class="mt-3 max-w-3xl text-sm leading-relaxed text-white/85 md:text-base">
                                    Hillcrest provides supported living for older adults who value their independence but need some level of day-to-day support to live safely and confidently.
                                </p>
                                <p class="mt-2 text-sm font-medium text-white/90">
                                    Our focus is helping individuals build confidence, routine, and independence.
                                </p>
                            </div>

                            <div class="flex flex-col gap-3 sm:flex-row lg:flex-col">
                                <a href="{{ route('referral.show') }}" class="inline-flex min-h-[44px] items-center justify-center rounded-full bg-[var(--color-accent)] px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-white hover:text-[var(--color-primary)]">
                                    Make a Referral
                                </a>
                                <a href="{{ route('services.index') }}" class="inline-flex min-h-[44px] items-center justify-center rounded-full border border-white/35 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-white hover:text-[var(--color-primary)]">
                                    Explore Services
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="section-contrast-gold section-gap">
        <div class="section-shell">
            <div class="grid gap-8 lg:grid-cols-[0.9fr_1.1fr] lg:items-stretch">
                <div class="relative overflow-hidden rounded-3xl border border-neutral-200 bg-white shadow-lg shadow-neutral-900/10" data-aos="fade-up">
                    <img src="{{ $approachImage }}" alt="{{ $approachImageAlt }}" class="h-full min-h-[420px] w-full object-cover">
                    <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-[var(--color-primary)]/95 via-[var(--color-primary)]/50 to-transparent p-6 pt-20 text-white">
                        <p class="text-xs font-semibold uppercase tracking-[0.18em] text-white/70">Accommodation</p>
                        <h3 class="mt-2 font-display text-2xl font-bold" style="font-family: var(--font-heading);">Safe, homely spaces that support independence.</h3>
                    </div>
                </div>

                <div class="rounded-3xl border border-[var(--color-primary)]/15 bg-[var(--color-surface)] p-6 shadow-sm md:p-8" data-aos="fade-up" x-data="{ activeTab: 'approach' }">
                    <p class="text-xs font-semibold uppercase tracking-[0.18em] text-[var(--color-accent)]">
                        {{ $approachSection?->subheading ?: 'Person-Centred. Respectful. Empowering.' }}
                    </p>
                    <h2 class="mt-3 font-display text-3xl font-bold text-[var(--color-heading)] md:text-4xl" style="font-family: var(--font-heading);">
                        {{ $approachSection?->heading ?: 'Our Approach' }}
                    </h2>

                    <div class="mt-6 inline-flex rounded-full border border-[var(--color-primary)]/15 bg-[var(--color-surface-alt)] p-1">
                        <button type="button" @click="activeTab = 'approach'" class="rounded-full px-4 py-2 text-sm font-semibold transition" :class="activeTab === 'approach' ? 'bg-[var(--color-primary)] text-white shadow-sm' : 'text-[var(--color-body)] hover:bg-white'">
                            Our Approach
                        </button>
                        <button type="button" @click="activeTab = 'accommodation'" class="rounded-full px-4 py-2 text-sm font-semibold transition" :class="activeTab === 'accommodation' ? 'bg-[var(--color-primary)] text-white shadow-sm' : 'text-[var(--color-body)] hover:bg-white'">
                            Accommodation
                        </button>
                    </div>

                    <div class="mt-6">
                        <div x-show="activeTab === 'approach'" x-transition>
                            <p class="text-[var(--color-body)]">
                                At Hillcrest, no two individuals are the same. We build support around each person so they can remain in control of daily life.
                            </p>
                            <div class="mt-5 grid gap-3 sm:grid-cols-2">
                                <div class="rounded-2xl border border-[var(--color-accent)]/20 bg-[var(--color-accent)]/8 p-4">
                                    <i data-lucide="user-check" class="h-5 w-5 text-[var(--color-accent)]"></i>
                                    <p class="mt-3 text-sm font-semibold text-[var(--color-heading)]">Personal support plans</p>
                                    <p class="mt-1 text-sm text-[var(--color-body)]/80">Support is built around each person, not a fixed routine.</p>
                                </div>
                                <div class="rounded-2xl border border-[var(--color-accent)]/20 bg-[var(--color-accent)]/8 p-4">
                                    <i data-lucide="heart-handshake" class="h-5 w-5 text-[var(--color-accent)]"></i>
                                    <p class="mt-3 text-sm font-semibold text-[var(--color-heading)]">Respect and choice</p>
                                    <p class="mt-1 text-sm text-[var(--color-body)]/80">We respect independence, preferences, and personal decisions.</p>
                                </div>
                                <div class="rounded-2xl border border-[var(--color-accent)]/20 bg-[var(--color-accent)]/8 p-4">
                                    <i data-lucide="sparkles" class="h-5 w-5 text-[var(--color-accent)]"></i>
                                    <p class="mt-3 text-sm font-semibold text-[var(--color-heading)]">Confidence building</p>
                                    <p class="mt-1 text-sm text-[var(--color-body)]/80">We encourage skills, routine, and confidence over time.</p>
                                </div>
                                <div class="rounded-2xl border border-[var(--color-accent)]/20 bg-[var(--color-accent)]/8 p-4">
                                    <i data-lucide="sofa" class="h-5 w-5 text-[var(--color-accent)]"></i>
                                    <p class="mt-3 text-sm font-semibold text-[var(--color-heading)]">Calm environment</p>
                                    <p class="mt-1 text-sm text-[var(--color-body)]/80">We create calm, homely environments that feel reassuring.</p>
                                </div>
                            </div>
                            <div class="mt-6 rounded-2xl bg-[var(--color-primary)] p-5 text-white">
                                <p class="text-sm font-medium leading-relaxed">
                                    Supported living works best when people feel in control of their lives, not managed. That is exactly how we operate.
                                </p>
                            </div>
                        </div>

                        <div x-show="activeTab === 'accommodation'" x-transition x-cloak>
                            <p class="text-[var(--color-body)]">
                                Our supported living environments are designed to feel safe, comfortable, well-located, and connected to the local community.
                            </p>
                            <div class="mt-5 grid gap-3 sm:grid-cols-2">
                                <div class="rounded-2xl border border-[var(--color-primary)]/15 bg-[var(--color-surface-alt)] p-4">
                                    <i data-lucide="shield-check" class="h-5 w-5 text-[var(--color-accent)]"></i>
                                    <p class="mt-3 text-sm font-semibold text-[var(--color-heading)]">Safe and comfortable</p>
                                    <p class="mt-1 text-sm text-[var(--color-body)]/80">Spaces that help residents feel settled and reassured.</p>
                                </div>
                                <div class="rounded-2xl border border-[var(--color-primary)]/15 bg-[var(--color-surface-alt)] p-4">
                                    <i data-lucide="map-pinned" class="h-5 w-5 text-[var(--color-accent)]"></i>
                                    <p class="mt-3 text-sm font-semibold text-[var(--color-heading)]">Well-located</p>
                                    <p class="mt-1 text-sm text-[var(--color-body)]/80">Close to community links, amenities, and transport.</p>
                                </div>
                                <div class="rounded-2xl border border-[var(--color-primary)]/15 bg-[var(--color-surface-alt)] p-4">
                                    <i data-lucide="key-round" class="h-5 w-5 text-[var(--color-accent)]"></i>
                                    <p class="mt-3 text-sm font-semibold text-[var(--color-heading)]">Private space</p>
                                    <p class="mt-1 text-sm text-[var(--color-body)]/80">Residents have their own private space and daily rhythm.</p>
                                </div>
                                <div class="rounded-2xl border border-[var(--color-primary)]/15 bg-[var(--color-surface-alt)] p-4">
                                    <i data-lucide="home" class="h-5 w-5 text-[var(--color-accent)]"></i>
                                    <p class="mt-3 text-sm font-semibold text-[var(--color-heading)]">Living options</p>
                                    <p class="mt-1 text-sm text-[var(--color-body)]/80">Shared or self-contained living options that promote independence.</p>
                                </div>
                            </div>
                            <div class="mt-6 rounded-2xl bg-[var(--color-primary)] p-5 text-white">
                                <p class="text-sm font-medium leading-relaxed">
                                    Supported living typically allows individuals to live in their own tenancy while receiving the right level of day-to-day support.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="section-contrast-sage section-gap border-t border-neutral-100">
        <div class="section-shell">
            <div class="grid gap-6 lg:grid-cols-2">
                <article class="group relative overflow-hidden rounded-3xl bg-[var(--color-primary)] p-6 text-white shadow-xl shadow-neutral-900/10 md:p-8" data-aos="fade-up">
                    <div class="absolute -right-12 -top-16 h-44 w-44 rounded-full bg-[var(--color-accent)]/35 blur-3xl"></div>
                    <div class="relative">
                        <span class="inline-flex h-11 w-11 items-center justify-center rounded-2xl bg-white/12 text-white">
                            <i data-lucide="file-heart" class="h-5 w-5"></i>
                        </span>
                        <p class="mt-5 text-xs font-semibold uppercase tracking-[0.18em] text-white/65">
                            {{ $referralsSection?->subheading ?: 'Referrals made simple' }}
                        </p>
                        <h2 class="mt-2 font-display text-2xl font-bold md:text-3xl" style="font-family: var(--font-heading);">
                            {{ $referralsSection?->heading ?: 'Referrals' }}
                        </h2>
                        <div class="prose prose-invert mt-4 max-w-none prose-p:text-white/85">
                            {!! $referralsSection?->body ?: '<p>We accept referrals from Local Authorities, Social Workers, Healthcare Professionals, and Families/private clients.</p><p>Our process is designed for fast response times, clear assessment steps, and smooth onboarding.</p>' !!}
                        </div>
                        <a href="{{ $referralsSection?->cta_primary_url ?: route('referral.show') }}" class="mt-6 inline-flex min-h-[44px] items-center justify-center rounded-full bg-[var(--color-accent)] px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-white hover:text-[var(--color-primary)]">
                            {{ $referralsSection?->cta_primary_label ?: 'Submit a Referral' }}
                        </a>
                    </div>
                </article>

                <article class="relative overflow-hidden rounded-3xl border border-[var(--color-primary)]/15 bg-[var(--color-surface)] p-6 shadow-sm transition hover:-translate-y-0.5 hover:shadow-xl md:p-8" data-aos="fade-up">
                    <div class="absolute right-0 top-0 h-28 w-28 rounded-bl-full bg-[var(--color-accent)]/10"></div>
                    <div class="relative">
                        <span class="inline-flex h-11 w-11 items-center justify-center rounded-2xl bg-[var(--color-accent)]/12 text-[var(--color-primary)]">
                            <i data-lucide="shield-check" class="h-5 w-5"></i>
                        </span>
                        <p class="mt-5 text-xs font-semibold uppercase tracking-[0.18em] text-[var(--color-accent)]">
                            {{ $whyChooseSection?->subheading ?: 'Why families choose us' }}
                        </p>
                        <h2 class="mt-2 font-display text-2xl font-bold text-[var(--color-heading)] md:text-3xl" style="font-family: var(--font-heading);">
                            {{ $whyChooseSection?->heading ?: 'Why Choose Hillcrest' }}
                        </h2>
                        <div class="prose prose-neutral mt-4 max-w-none prose-p:text-[var(--color-body)] prose-li:text-[var(--color-body)] marker:text-[var(--color-accent)]">
                            {!! $whyChooseSection?->body ?: '<ul><li>Focused on older adults aged 65+.</li><li>Clear model for low to moderate support needs.</li><li>Independence-first and culturally aware approach.</li><li>Flexible support designed for both families and professionals.</li></ul>' !!}
                        </div>
                        <a href="{{ $whyChooseSection?->cta_primary_url ?: route('contact.show') }}" class="mt-6 inline-flex min-h-[44px] items-center justify-center rounded-full border border-[var(--color-primary)]/20 px-5 py-2.5 text-sm font-semibold text-[var(--color-primary)] transition hover:border-[var(--color-accent)] hover:bg-[var(--color-accent)] hover:text-white">
                            {{ $whyChooseSection?->cta_primary_label ?: 'Get in Touch Today' }}
                        </a>
                    </div>
                </article>
            </div>
        </div>
    </section>

    @if($testimonials->isNotEmpty())
        <section class="section-gap border-t border-neutral-100 bg-white/90">
            <div
                class="section-shell"
                x-data="{ idx: 0, max: {{ $testimonials->count() }}, items: @js($testimonials->values()->map(fn ($t) => ['quote' => $t->quote, 'author' => $t->author_name ?: 'Family member', 'source' => ucfirst($t->source_type), 'rating' => $t->star_rating ?: 5])) }"
                x-init="setInterval(() => { idx = (idx + 1) % max }, 6500)"
            >
                <div class="grid gap-8 lg:grid-cols-[0.9fr_1.1fr] lg:items-center">
                    <div data-aos="fade-up">
                        <p class="text-xs font-semibold uppercase tracking-[0.18em] text-[var(--color-accent)]">
                            {{ $testimonialSection?->subheading ?: 'Real experiences' }}
                        </p>
                        <h2 class="mt-3 font-display text-3xl font-bold text-[var(--color-heading)] md:text-4xl" style="font-family: var(--font-heading);">
                            {{ $testimonialSection?->heading ?: 'Trusted by families and professionals' }}
                        </h2>
                        <div class="prose prose-neutral mt-4 max-w-none prose-p:text-[var(--color-body)]">
                            {!! $testimonialSection?->body ?: '<p>Kind words from residents, families, and referral partners who value calm, respectful support.</p>' !!}
                        </div>
                        <div class="mt-6 rounded-2xl border border-[var(--color-accent)]/25 bg-[var(--color-accent)]/10 p-5">
                            <div class="flex items-start gap-4">
                                <span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-[var(--color-accent)] text-white">
                                    <i data-lucide="messages-square" class="h-5 w-5"></i>
                                </span>
                                <div>
                                    <p class="text-base font-bold text-[var(--color-heading)]">Ready to feel confident about the next step?</p>
                                    <p class="mt-1 text-sm leading-relaxed text-[var(--color-body)]/85">Speak with our team and discover how calm, respectful support can help your loved one feel safe, independent, and at home.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="relative overflow-hidden rounded-3xl bg-[var(--color-primary)] p-6 text-white shadow-xl shadow-neutral-900/10 md:p-8" data-aos="fade-up">
                        <div class="absolute -right-12 -top-16 h-44 w-44 rounded-full bg-[var(--color-accent)]/35 blur-3xl"></div>
                        <template x-for="(item, i) in items" :key="i">
                            <figure x-show="idx === i" x-transition class="relative">
                                <div class="flex gap-1 text-[var(--color-accent)]">
                                    <template x-for="star in item.rating" :key="star">
                                        <i data-lucide="star" class="h-4 w-4 fill-current"></i>
                                    </template>
                                </div>
                                <blockquote class="mt-5 text-xl font-semibold leading-relaxed md:text-2xl" x-text="`“${item.quote}”`"></blockquote>
                                <figcaption class="mt-6">
                                    <p class="text-sm font-semibold uppercase tracking-[0.16em] text-white/70" x-text="item.source"></p>
                                    <p class="mt-1 text-base font-semibold" x-text="item.author"></p>
                                </figcaption>
                            </figure>
                        </template>
                        <div class="relative mt-8 flex gap-2">
                            <template x-for="(_, dotIndex) in Array.from({ length: max })" :key="dotIndex">
                                <button type="button" @click="idx = dotIndex" class="h-2.5 rounded-full transition-all" :class="idx === dotIndex ? 'w-10 bg-[var(--color-accent)]' : 'w-6 bg-white/35 hover:bg-white/60'"></button>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif

    @if($faqs->isNotEmpty())
        <section class="section-contrast-sage section-gap border-t border-neutral-100">
            <div class="section-shell">
                <div class="mx-auto max-w-3xl text-center" data-aos="fade-up">
                    <p class="text-xs font-semibold uppercase tracking-[0.18em] text-[var(--color-accent)]">
                        {{ $faqSection?->subheading ?: 'Frequently asked questions' }}
                    </p>
                    <h2 class="mt-3 font-display text-3xl font-bold text-[var(--color-heading)] md:text-4xl" style="font-family: var(--font-heading);">
                        {{ $faqSection?->heading ?: 'Questions families often ask' }}
                    </h2>
                    <div class="prose prose-neutral mx-auto mt-4 max-w-none prose-p:text-[var(--color-body)]">
                        {!! $faqSection?->body ?: '<p>Helpful answers about referrals, accommodation, and how supported living works at Hillcrest.</p>' !!}
                    </div>
                </div>

                <div class="mx-auto mt-10 max-w-6xl" x-data="{ open: {{ $faqs->first()?->id ?? 'null' }} }" data-aos="fade-up">
                    <div class="grid gap-6 lg:grid-cols-2">
                        @foreach($faqs->values()->split(2) as $columnIndex => $faqColumn)
                            <div class="space-y-3">
                                <figure class="overflow-hidden rounded-3xl border border-[var(--color-primary)]/15 bg-white shadow-lg shadow-neutral-900/10">
                                    <img
                                        src="{{ $columnIndex === 0 ? asset('assets/images/faq-support-conversation.png') : asset('assets/images/faq-accommodation-support.png') }}"
                                        alt="{{ $columnIndex === 0 ? 'Support coordinator answering questions with an older adult' : 'Comfortable supported living accommodation and lounge' }}"
                                        class="h-64 w-full object-cover transition duration-500 hover:scale-[1.03]"
                                        loading="lazy"
                                    >
                                </figure>

                                @foreach($faqColumn as $faq)
                                    <article class="overflow-hidden rounded-2xl border border-[var(--color-primary)]/15 bg-[var(--color-surface)] shadow-sm transition hover:border-[var(--color-accent)]/35 hover:shadow-md">
                                        <button type="button" class="flex w-full items-center justify-between gap-4 px-5 py-4 text-left" @click="open = open === {{ $faq->id }} ? null : {{ $faq->id }}">
                                            <span>
                                                @if($faq->category)
                                                    <span class="text-xs font-semibold uppercase tracking-[0.12em] text-[var(--color-accent)]">{{ $faq->category }}</span>
                                                @endif
                                                <span class="block font-semibold text-[var(--color-heading)]">{{ $faq->question }}</span>
                                            </span>
                                            <i data-lucide="chevron-down" class="h-5 w-5 shrink-0 text-[var(--color-primary)] transition" :class="open === {{ $faq->id }} ? 'rotate-180' : ''"></i>
                                        </button>
                                        <div x-show="open === {{ $faq->id }}" x-transition x-cloak class="border-t border-[var(--color-primary)]/10 px-5 py-4">
                                            <div class="prose prose-neutral max-w-none prose-sm prose-p:text-[var(--color-body)]">{!! $faq->answer !!}</div>
                                        </div>
                                    </article>
                                @endforeach
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>
    @endif

    <section class="floral-panel section-gap border-t border-neutral-100">
        <div class="section-shell">
            <div class="flex flex-wrap items-end justify-between gap-4">
                <div class="max-w-2xl" data-aos="fade-up">
                    <p class="text-xs font-semibold uppercase tracking-[0.18em] text-[var(--color-accent)]">Gallery</p>
                    <h2 class="mt-3 font-display text-3xl font-bold text-[var(--color-heading)] md:text-4xl" style="font-family: var(--font-heading);">Life at Hillcrest Living</h2>
                    <p class="mt-3 text-[var(--color-body)]/85">A glimpse of calm spaces, supportive conversations, and community-focused living for older adults in the UK.</p>
                </div>
                <a class="hc-btn-secondary" href="{{ route('gallery') }}">Open Gallery</a>
            </div>

            <div class="auto-gallery mt-8 rounded-[2rem] border border-[var(--color-primary)]/10 bg-white/70 py-4 shadow-sm" data-aos="fade-up">
                <div class="auto-gallery-track">
                    @foreach([0, 1] as $loopSet)
                        <div class="auto-gallery-set" aria-hidden="{{ $loopSet === 1 ? 'true' : 'false' }}">
                            @foreach($galleryImages as $image)
                                <figure class="auto-gallery-card group relative">
                                    <img
                                        src="{{ $image['src'] }}"
                                        alt="{{ $image['alt'] }}"
                                        class="transition duration-700 group-hover:scale-105"
                                        loading="lazy"
                                    >
                                    <figcaption class="absolute inset-x-4 bottom-4 rounded-2xl bg-[var(--color-primary)]/85 px-4 py-3 text-white backdrop-blur-sm">
                                        <p class="text-xs font-semibold uppercase tracking-[0.14em] text-white/70">Hillcrest Living</p>
                                        <p class="mt-1 text-sm font-semibold">{{ $image['label'] }}</p>
                                    </figcaption>
                                </figure>
                            @endforeach
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="mt-6 overflow-hidden rounded-3xl bg-[var(--color-primary)] p-5 text-white shadow-xl shadow-neutral-900/10">
                <div class="relative flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                    <div class="absolute -right-10 -top-14 h-32 w-32 rounded-full bg-[var(--color-accent)]/35 blur-2xl"></div>
                    <div class="relative max-w-2xl">
                        <p class="text-xs font-semibold uppercase tracking-[0.18em] text-white/65">Want to see more?</p>
                        <p class="mt-2 text-lg font-bold leading-snug">Explore our supportive environments, accommodation, and everyday life at Hillcrest Living.</p>
                    </div>
                    <a href="{{ route('contact.show') }}" class="relative inline-flex min-h-[44px] items-center justify-center rounded-full bg-[var(--color-accent)] px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-white hover:text-[var(--color-primary)]">
                        Arrange a conversation
                    </a>
                </div>
            </div>
        </div>
    </section>

    @if($posts->isNotEmpty())
        <section class="section-contrast-gold section-gap border-t border-neutral-100">
            <div class="section-shell relative overflow-hidden">
                <div class="section-orb section-orb-accent -top-20 -left-16 h-52 w-52"></div>
                <div class="section-orb section-orb-primary -bottom-24 right-0 h-56 w-56"></div>
                <div class="flex flex-wrap items-end justify-between gap-4">
                    <div class="max-w-2xl">
                        <p class="text-xs font-semibold uppercase tracking-[0.18em] text-[var(--color-accent)]">Insights and updates</p>
                        <h2 class="mt-3 font-display text-3xl font-bold text-[var(--color-heading)] md:text-4xl" style="font-family: var(--font-heading);">News and updates</h2>
                        <p class="mt-3 text-[var(--color-body)]/85">Helpful updates on supported living, referrals, and accommodation in the UK.</p>
                    </div>
                    <a href="{{ route('news.index') }}" class="hc-btn-secondary">All News</a>
                </div>

                @php
                    $featuredPost = $posts->first();
                    $supportingPosts = $posts->skip(1);
                @endphp

                <div class="mt-9 grid gap-6 xl:grid-cols-[1.25fr_0.95fr]">
                    @if($featuredPost)
                        <article class="group relative overflow-hidden rounded-[2rem] bg-[var(--color-primary)] text-white shadow-2xl shadow-neutral-900/15 ring-1 ring-white/10">
                            @if($featuredPost->cover)
                                <img src="{{ Storage::disk($featuredPost->cover->disk)->url($featuredPost->cover->path) }}" alt="{{ $featuredPost->cover->alt_text ?: $featuredPost->title }}" class="absolute inset-0 h-full w-full object-cover opacity-45 transition duration-700 group-hover:scale-105" loading="lazy">
                                <div class="absolute inset-0 bg-gradient-to-r from-[var(--color-primary)] via-[var(--color-primary)]/85 to-[var(--color-primary)]/35"></div>
                            @else
                                <div class="absolute inset-0 bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-accent)]/70"></div>
                            @endif
                            <div class="relative flex min-h-[420px] flex-col justify-end p-6 md:p-8">
                                <span class="w-fit rounded-full bg-white/14 px-3 py-1 text-xs font-semibold uppercase tracking-[0.14em] text-white/80">Featured insight</span>
                                <div class="mt-4 flex flex-wrap items-center gap-2 text-xs font-semibold uppercase tracking-wide text-[var(--color-accent)]">
                                    @if($featuredPost->category)
                                        <span>{{ $featuredPost->category->name }}</span>
                                        <span class="text-white/40" aria-hidden="true">•</span>
                                    @endif
                                    <time datetime="{{ $featuredPost->published_at?->toIso8601String() }}">{{ optional($featuredPost->published_at)->format('j M Y') }}</time>
                                </div>
                                <h3 class="mt-3 max-w-2xl font-display text-3xl font-bold leading-tight md:text-4xl" style="font-family: var(--font-heading);">
                                    <a href="{{ route('news.show', $featuredPost) }}">{{ $featuredPost->title }}</a>
                                </h3>
                                @if($featuredPost->excerpt)
                                    <p class="mt-4 max-w-2xl text-sm leading-relaxed text-white/85 md:text-base">{{ $featuredPost->excerpt }}</p>
                                @endif
                                <a href="{{ route('news.show', $featuredPost) }}" class="mt-6 inline-flex w-fit min-h-[44px] items-center justify-center rounded-full bg-[var(--color-accent)] px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-white hover:text-[var(--color-primary)]">Read featured article</a>
                            </div>
                        </article>
                    @endif

                    <div class="relative z-[1] grid gap-4">
                        @foreach($supportingPosts as $post)
                            <article class="group grid gap-4 overflow-hidden rounded-3xl border border-[var(--color-primary)]/15 bg-white/95 p-4 shadow-sm backdrop-blur-sm transition duration-300 hover:-translate-y-1 hover:border-[var(--color-accent)]/40 hover:shadow-xl sm:grid-cols-[10rem_1fr]">
                                @if($post->cover)
                                    <div class="h-40 overflow-hidden rounded-2xl sm:h-full">
                                        <img src="{{ Storage::disk($post->cover->disk)->url($post->cover->path) }}" alt="{{ $post->cover->alt_text ?: $post->title }}" class="h-full w-full object-cover transition duration-700 group-hover:scale-105" loading="lazy">
                                    </div>
                                @endif
                                <div class="py-1">
                                    <div class="flex flex-wrap items-center gap-2 text-xs font-semibold uppercase tracking-wide text-[var(--color-accent)]">
                                        @if($post->category)
                                            <span>{{ $post->category->name }}</span>
                                            <span aria-hidden="true">•</span>
                                        @endif
                                        <time datetime="{{ $post->published_at?->toIso8601String() }}">{{ optional($post->published_at)->format('j M Y') }}</time>
                                    </div>
                                    <h3 class="mt-2 font-display text-lg font-semibold leading-tight text-[var(--color-heading)]" style="font-family: var(--font-heading);">
                                        <a href="{{ route('news.show', $post) }}" class="hover:text-[var(--color-accent)]">{{ $post->title }}</a>
                                    </h3>
                                    @if($post->excerpt)
                                        <p class="mt-2 text-sm leading-relaxed text-[var(--color-body)]/75">{{ \Illuminate\Support\Str::limit($post->excerpt, 105) }}</p>
                                    @endif
                                </div>
                            </article>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>
    @endif
@endsection