@extends('layouts.site')

@section('title', $page->meta_title ?: $page->title)
@section('meta_description', $page->meta_description ?? '')

@section('content')
    <section class="floral-panel section-gap overflow-hidden">
        <div class="ambient-blob ambient-blob-one"></div>
        <div class="ambient-blob ambient-blob-two"></div>
        <div class="section-shell relative grid gap-10 lg:grid-cols-2 lg:items-center">
            <div data-aos="fade-up">
                <span class="inline-flex rounded-full border border-[var(--color-accent)]/35 bg-white/80 px-4 py-1 text-xs font-semibold uppercase tracking-[0.16em] text-[var(--color-accent)]">About Hillcrest Living</span>
                <h1 class="font-display text-4xl font-bold text-[var(--color-heading)] md:text-5xl" style="font-family: var(--font-heading);">Our Story</h1>
                <p class="mt-6 text-lg text-neutral-700">
                    Hillcrest Living began with one simple promise: older adults should be able to stay in the place they know best, with support that feels kind, personal, and familiar.
                </p>
                <p class="mt-4 text-neutral-700">
                    We believe great support is relationship-led. By building trust first, we provide practical day-to-day help while creating the companionship and consistency that help people feel secure.
                </p>
                <p class="mt-4 text-neutral-700">
                    Every care plan is shaped around real routines and real preferences, from mealtimes and appointments to mobility and household tasks, so support feels natural rather than disruptive.
                </p>
                <p class="mt-4 text-neutral-700">
                    Families gain peace of mind knowing a trusted person is there to encourage wellbeing, reduce loneliness, and protect dignity in the comfort of home.
                </p>
                <p class="mt-4 text-neutral-700">At Hillcrest, care is not only about tasks. It is about belonging, confidence, and living each day with reassurance.</p>
                <div class="mt-8 flex flex-wrap gap-3">
                    <a href="{{ route('contact.show') }}" class="hc-btn-primary">Speak to Our Team</a>
                    <a href="{{ route('services.index') }}" class="hc-btn-secondary">Explore Services</a>
                </div>
                <div class="mt-7 grid gap-3 sm:grid-cols-3">
                    <article class="hc-card p-4">
                        <p class="text-2xl font-bold text-[var(--color-heading)]">1-2-1</p>
                        <p class="text-xs uppercase tracking-wide text-neutral-600">Personal Attention</p>
                    </article>
                    <article class="hc-card p-4">
                        <p class="text-2xl font-bold text-[var(--color-heading)]">65+</p>
                        <p class="text-xs uppercase tracking-wide text-neutral-600">Older Adult Focus</p>
                    </article>
                    <article class="hc-card p-4">
                        <p class="text-2xl font-bold text-[var(--color-heading)]">Daily</p>
                        <p class="text-xs uppercase tracking-wide text-neutral-600">Routine and Reassurance</p>
                    </article>
                </div>
            </div>
            <div class="micro-float relative" data-aos="fade-left">
                <div class="absolute -left-4 -top-4 hidden rounded-xl border border-[var(--color-accent)]/35 bg-white/90 px-4 py-2 text-xs font-semibold text-[var(--color-heading)] shadow-md md:block">
                    Relationship-led support
                </div>
                <img src="{{ asset('assets/images/hillcrest-about-story.png') }}" alt="A warm, inviting, and peaceful living space representing comfortable home care" class="h-[320px] w-full rounded-2xl border border-neutral-200 bg-white object-cover object-center shadow-sm md:h-[460px]">
                <div class="absolute -bottom-4 right-4 max-w-[220px] rounded-xl border border-neutral-200 bg-white/95 p-3 shadow-md">
                    <p class="text-xs font-semibold uppercase tracking-wide text-[var(--color-accent)]">Our Promise</p>
                    <p class="mt-1 text-sm text-neutral-700">Warm, consistent care that protects dignity at home.</p>
                </div>
            </div>
        </div>
    </section>

    <section class="section-contrast-gold section-gap border-t border-neutral-100">
        <div class="section-shell grid gap-8 lg:grid-cols-2 lg:items-center">
            <div data-aos="fade-up">
                <img src="{{ asset('assets/images/hillcrest-community-photo.png') }}" alt="Residents and care professionals sharing meaningful community moments" class="h-[300px] w-full rounded-2xl border border-neutral-200 bg-white object-cover object-center shadow-sm md:h-[420px]">
            </div>
            <div data-aos="fade-up">
                <h2 class="font-display text-3xl font-bold text-[var(--color-heading)]" style="font-family: var(--font-heading);">Care That Feels Like Community</h2>
                <p class="mt-4 text-neutral-700">
                    We take time to understand each person as an individual, not just their care needs. Shared interests, familiar routines, and friendly conversation are all part of how we support wellbeing.
                </p>
                <p class="mt-4 text-neutral-700">
                    This community-focused approach helps people stay connected to the life they value while receiving one-to-one care at home.
                </p>
                <ul class="mt-5 space-y-3 text-neutral-700">
                    <li class="leaf-accent">Companionship-led support that reduces isolation.</li>
                    <li class="leaf-accent">Continuity from carers people can trust.</li>
                    <li class="leaf-accent">Care that adapts as needs and routines change.</li>
                </ul>
            </div>
        </div>
    </section>

    <section class="section-contrast-sage section-gap border-t border-neutral-100">
        <div class="section-shell">
            <div class="max-w-3xl" data-aos="fade-up">
                <h2 class="font-display text-3xl font-bold text-[var(--color-heading)]" style="font-family: var(--font-heading);">How We Support Everyday Living</h2>
                <p class="mt-4 text-neutral-700">
                    Our live-in and home-based support is designed to make daily life easier, safer, and more enjoyable without taking away independence.
                </p>
            </div>
            <div class="mt-8 grid gap-6 md:grid-cols-2 xl:grid-cols-4">
                <article class="hc-card" data-aos="fade-up">
                    <span class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-[var(--color-accent)]/15 text-sm font-bold text-[var(--color-heading)]">01</span>
                    <h3 class="font-display text-lg font-semibold text-[var(--color-heading)]" style="font-family: var(--font-heading);">Personal Routine Support</h3>
                    <p class="mt-3 text-sm text-neutral-700">Gentle help with getting ready for the day, mealtimes, and keeping to familiar routines.</p>
                </article>
                <article class="hc-card" data-aos="fade-up">
                    <span class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-[var(--color-accent)]/15 text-sm font-bold text-[var(--color-heading)]">02</span>
                    <h3 class="font-display text-lg font-semibold text-[var(--color-heading)]" style="font-family: var(--font-heading);">Practical Home Help</h3>
                    <p class="mt-3 text-sm text-neutral-700">Support with light household tasks, shopping, and everyday organisation to reduce stress.</p>
                </article>
                <article class="hc-card" data-aos="fade-up">
                    <span class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-[var(--color-accent)]/15 text-sm font-bold text-[var(--color-heading)]">03</span>
                    <h3 class="font-display text-lg font-semibold text-[var(--color-heading)]" style="font-family: var(--font-heading);">Health and Appointment Support</h3>
                    <p class="mt-3 text-sm text-neutral-700">Reliable support around appointments, reminders, and day-to-day wellbeing needs.</p>
                </article>
                <article class="hc-card" data-aos="fade-up">
                    <span class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-[var(--color-accent)]/15 text-sm font-bold text-[var(--color-heading)]">04</span>
                    <h3 class="font-display text-lg font-semibold text-[var(--color-heading)]" style="font-family: var(--font-heading);">Companionship and Reassurance</h3>
                    <p class="mt-3 text-sm text-neutral-700">A trusted presence that brings peace of mind to both clients and their families.</p>
                </article>
            </div>
        </div>
    </section>

    <section class="section-contrast-gold section-gap border-t border-neutral-100">
        <div class="section-shell grid gap-8 lg:grid-cols-2 lg:items-center">
            <div data-aos="fade-up">
                <h2 class="font-display text-3xl font-bold text-[var(--color-heading)]" style="font-family: var(--font-heading);">The Benefits of Live-in Care at Home</h2>
                <p class="mt-4 text-neutral-700">
                    Live-in care offers one-to-one support in familiar surroundings, helping people stay independent while receiving the reassurance they need each day.
                </p>
                <ul class="mt-5 space-y-3 text-neutral-700">
                    <li class="leaf-accent">Access care in the comfort of their own home, rather than in a residential care home.</li>
                    <li class="leaf-accent">Benefit from continuity of care from someone who lives in the home long-term.</li>
                    <li class="leaf-accent">Receive 1-2-1 care and personal attention from a dedicated Care Professional.</li>
                    <li class="leaf-accent">Enjoy having someone around to help with everyday tasks and offer companionship.</li>
                    <li class="leaf-accent">Make life easier, with help to get washed and dressed every day, attend appointments, or keep the house clean.</li>
                </ul>
            </div>
            <div data-aos="fade-up">
                <img src="{{ asset('assets/images/hillcrest-hero-photo-1.png') }}" alt="Older adult receiving personalised support in the comfort of home" class="h-[300px] w-full rounded-2xl border border-neutral-200 bg-white object-cover object-center shadow-sm md:h-[420px]">
            </div>
        </div>
    </section>

    <section class="section-gap border-t border-neutral-100 bg-white/90">
        <div class="section-shell">
            <div class="max-w-3xl" data-aos="fade-up">
                <h2 class="font-display text-3xl font-bold text-[var(--color-heading)]" style="font-family: var(--font-heading);">Our Care Journey</h2>
                <p class="mt-4 text-neutral-700">A simple, supportive process that helps families feel informed and confident at every step.</p>
            </div>
            <div class="mt-8 grid gap-6 lg:grid-cols-3">
                <article class="hc-card floral-soft" data-aos="fade-up">
                    <p class="text-xs font-semibold uppercase tracking-[0.14em] text-[var(--color-accent)]">Step 1</p>
                    <h3 class="mt-2 font-display text-xl font-semibold text-[var(--color-heading)]" style="font-family: var(--font-heading);">Listen and Understand</h3>
                    <p class="mt-3 text-sm text-neutral-700">We begin with a friendly conversation to understand care needs, routines, and personal preferences.</p>
                </article>
                <article class="hc-card floral-soft" data-aos="fade-up">
                    <p class="text-xs font-semibold uppercase tracking-[0.14em] text-[var(--color-accent)]">Step 2</p>
                    <h3 class="mt-2 font-display text-xl font-semibold text-[var(--color-heading)]" style="font-family: var(--font-heading);">Match and Plan</h3>
                    <p class="mt-3 text-sm text-neutral-700">We create a tailored support plan and carefully match carers to personality, needs, and lifestyle.</p>
                </article>
                <article class="hc-card floral-soft" data-aos="fade-up">
                    <p class="text-xs font-semibold uppercase tracking-[0.14em] text-[var(--color-accent)]">Step 3</p>
                    <h3 class="mt-2 font-display text-xl font-semibold text-[var(--color-heading)]" style="font-family: var(--font-heading);">Ongoing Reassurance</h3>
                    <p class="mt-3 text-sm text-neutral-700">We stay responsive with regular reviews, clear communication, and support that adapts over time.</p>
                </article>
            </div>
        </div>
    </section>

    <section class="section-gap border-t border-neutral-100 bg-white/90">
        <div class="section-shell grid gap-8 lg:grid-cols-2 lg:items-center">
            <div data-aos="fade-up">
                <h2 class="font-display text-3xl font-bold text-[var(--color-heading)]" style="font-family: var(--font-heading);">Why Families Choose Hillcrest</h2>
                <p class="mt-4 text-neutral-700">
                    Choosing care can feel overwhelming. We make it simpler through clear communication, thoughtful matching, and support that starts with listening.
                </p>
                <p class="mt-4 text-neutral-700">
                    Whether support is short-term after a hospital stay or part of a longer journey, our focus is always the same: helping people live well, safely, and with dignity in familiar surroundings.
                </p>
                <div class="mt-6 flex flex-wrap gap-3">
                    <a href="{{ route('contact.show') }}" class="hc-btn-secondary">Arrange a Conversation</a>
                    <a href="{{ route('services.index') }}" class="hc-btn-primary">Explore Our Services</a>
                </div>
            </div>
            <div data-aos="fade-up">
                <img src="{{ asset('assets/images/hillcrest-referral-photo.png') }}" alt="Family and care team discussing a personalised support plan" class="h-[300px] w-full rounded-2xl border border-neutral-200 bg-white object-cover object-center shadow-sm md:h-[420px]">
            </div>
        </div>
    </section>

    @php
        $galleryImages = [
            ['src' => asset('assets/images/hillcrest-gallery-photo-1.png'), 'alt' => 'Comfortable home environment for supported living'],
            ['src' => asset('assets/images/hillcrest-gallery-photo-2.png'), 'alt' => 'Daily activities supported with dignity and independence'],
            ['src' => asset('assets/images/hillcrest-gallery-photo-3.png'), 'alt' => 'Warm companionship and reassurance in familiar surroundings'],
        ];

        $teamProfiles = [
            [
                'name' => 'Amelia Hart',
                'role' => 'Registered Manager',
                'bio' => 'Leads care planning with a calm, person-centred approach and close family communication.',
                'image' => asset('assets/images/hillcrest-hero-ai-1.png'),
                'focus' => 'Care planning',
            ],
            [
                'name' => 'Daniel Okafor',
                'role' => 'Senior Support Lead',
                'bio' => 'Supports daily routines, independence goals, and consistent reassurance at home.',
                'image' => asset('assets/images/hillcrest-hero-ai-2.png'),
                'focus' => 'Daily support',
            ],
            [
                'name' => 'Priya Shah',
                'role' => 'Wellbeing Coordinator',
                'bio' => 'Builds meaningful activities around interests, confidence, companionship, and connection.',
                'image' => asset('assets/images/hillcrest-community-photo.png'),
                'focus' => 'Wellbeing',
            ],
            [
                'name' => 'Marcus Reed',
                'role' => 'Family Liaison',
                'bio' => 'Keeps families informed with clear updates, practical guidance, and responsive support.',
                'image' => asset('assets/images/hillcrest-referral-photo.png'),
                'focus' => 'Family support',
            ],
        ];
    @endphp

    <section class="section-contrast-gold section-gap overflow-hidden border-t border-neutral-100">
        <div class="section-shell" data-aos="fade-up">
            <div class="mb-8 max-w-3xl">
                <span class="inline-flex rounded-full border border-[var(--color-accent)]/35 bg-white/80 px-4 py-1 text-xs font-semibold uppercase tracking-[0.16em] text-[var(--color-accent)]">Life at Hillcrest</span>
                <h2 class="mt-3 font-display text-3xl font-bold text-[var(--color-heading)]" style="font-family: var(--font-heading);">Warm Spaces, Familiar Routines</h2>
                <p class="mt-4 text-neutral-700">A glimpse of calm, comfortable surroundings designed around reassurance, dignity, and everyday independence.</p>
            </div>
        </div>
        <div class="auto-gallery" aria-label="Hillcrest Living photo gallery">
            <div class="auto-gallery-track">
                <div class="auto-gallery-set">
                    @foreach($galleryImages as $image)
                        <figure class="auto-gallery-card">
                            <img src="{{ $image['src'] }}" alt="{{ $image['alt'] }}" class="h-full w-full object-cover object-center">
                        </figure>
                    @endforeach
                </div>
                <div class="auto-gallery-set" aria-hidden="true">
                    @foreach($galleryImages as $image)
                        <figure class="auto-gallery-card">
                            <img src="{{ $image['src'] }}" alt="" class="h-full w-full object-cover object-center">
                        </figure>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    <section class="section-contrast-sage section-gap overflow-hidden border-t border-neutral-100" data-aos="fade-up">
        <div class="section-shell">
            <div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
                <div class="max-w-3xl">
                    <span class="inline-flex rounded-full border border-[var(--color-accent)]/35 bg-white/80 px-4 py-1 text-xs font-semibold uppercase tracking-[0.16em] text-[var(--color-accent)]">People behind the care</span>
                    <h2 class="mt-3 font-display text-3xl font-bold text-[var(--color-heading)] md:text-4xl" style="font-family: var(--font-heading);">Meet the Team</h2>
                    <p class="mt-4 text-neutral-700">
                        A small, approachable team shaped around listening first, building trust, and making support feel natural at home.
                    </p>
                </div>
                <div class="rounded-2xl border border-[var(--color-accent)]/25 bg-white/75 px-4 py-3 text-sm text-neutral-700">
                    <span class="font-semibold text-[var(--color-heading)]">{{ count($teamProfiles) }} specialists</span>
                    <span class="mx-2 text-[var(--color-accent)]">/</span>
                    relationship-led support
                </div>
            </div>
            <div class="mt-8 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
                @foreach($teamProfiles as $member)
                    <article class="team-card group">
                        <div class="flex gap-4 p-4">
                            <img src="{{ $member['image'] }}" alt="{{ $member['name'] }} profile photo" class="h-20 w-20 shrink-0 rounded-2xl border border-neutral-200 object-cover object-center transition duration-300 group-hover:scale-[1.03]">
                            <div class="min-w-0">
                                <p class="text-xs font-semibold uppercase tracking-[0.12em] text-[var(--color-accent)]">{{ $member['focus'] }}</p>
                                <h3 class="mt-1 font-display text-lg font-semibold leading-tight text-[var(--color-heading)]" style="font-family: var(--font-heading);">{{ $member['name'] }}</h3>
                                <p class="mt-1 text-sm font-medium text-[var(--color-primary)]">{{ $member['role'] }}</p>
                            </div>
                        </div>
                        <p class="border-t border-neutral-100 px-4 pb-4 pt-3 text-sm leading-6 text-neutral-700">{{ $member['bio'] }}</p>
                    </article>
                @endforeach
            </div>
        </div>
    </section>
@endsection
