@extends('layouts.site')

@section('title', 'How It Works')
@section('meta_description', 'Learn how our care journey works. From the initial chat to meeting your Care Professionals, we make arranging home care simple and reassuring.')

@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)] shadow-sm">Our Process</span>
                <h1 class="mt-4 font-display text-4xl font-bold text-[var(--color-heading)] md:text-5xl lg:text-6xl" style="font-family: var(--font-heading);">How it works</h1>
                <p class="mt-6 text-lg leading-relaxed text-neutral-700">
                    Whatever care your loved one needs, we’ll work quickly to find a bespoke solution that’s right for you. And don’t worry – we know care needs can change over time, so we’re always ready to adapt, and just a phone call away when you need us.
                </p>
                <div class="mt-8 flex flex-wrap gap-4">
                    <a href="{{ route('contact.show') }}" class="hc-btn-primary">Enquire Now</a>
                    <a href="#journey" class="hc-btn-secondary">View the Journey</a>
                </div>
            </div>
            <div class="micro-float relative" data-aos="fade-left">
                <div class="absolute -right-6 -top-6 hidden h-32 w-32 rounded-full bg-[var(--color-accent)]/10 blur-2xl md:block"></div>
                <div class="absolute -bottom-6 -left-6 hidden h-40 w-40 rounded-full bg-[var(--color-primary)]/10 blur-2xl md:block"></div>
                <img src="{{ asset('assets/images/how-it-works-hero.png') }}" alt="Friendly care professional chatting with an elderly person" class="relative z-10 h-[360px] w-full rounded-[2rem] border border-neutral-200/60 bg-white object-cover object-center shadow-xl md:h-[500px]">
                <div class="absolute -bottom-6 right-8 z-20 max-w-[240px] rounded-2xl border border-neutral-200/80 bg-white/95 p-4 shadow-lg backdrop-blur-sm">
                    <p class="text-xs font-semibold uppercase tracking-wide text-[var(--color-accent)]">Tailored to you</p>
                    <p class="mt-1 text-sm text-neutral-700">Care that adapts as your needs change.</p>
                </div>
            </div>
        </div>
    </section>

    <div id="journey" class="relative overflow-hidden bg-neutral-50/50 py-16 lg:py-24">
        <!-- Connecting Line -->
        <div class="absolute bottom-0 left-1/2 top-0 hidden w-px -translate-x-1/2 bg-gradient-to-b from-transparent via-[var(--color-accent)]/30 to-transparent lg:block"></div>

        <!-- Step 1 -->
        <section class="relative">
            <div class="section-shell relative">
                <div class="grid gap-8 lg:grid-cols-2 lg:gap-16 lg:items-center">
                    <div data-aos="fade-up" class="order-2 lg:order-1 lg:text-right relative">
                        <div class="hc-card overflow-visible inline-block w-full text-left lg:text-right relative z-10">
                            <span class="absolute -top-6 -left-6 lg:-right-6 lg:left-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-white text-3xl font-bold text-[var(--color-accent)] shadow-lg border border-neutral-100 rotate-3">1</span>
                            <h2 class="mt-4 font-display text-2xl font-bold text-[var(--color-heading)] md:text-3xl" style="font-family: var(--font-heading);">Arrange an initial chat</h2>
                            <p class="mt-4 text-neutral-700 leading-relaxed">
                                The care journey begins with an informal, no-pressure chat with one of our friendly advisors. They’re ready to learn more about your situation, find out about your loved one’s current struggles, and answer any questions you have about home care.
                            </p>
                        </div>
                    </div>
                    <div data-aos="fade-left" class="order-1 lg:order-2 relative">
                        <div class="absolute top-1/2 -left-8 hidden h-4 w-4 -translate-y-1/2 rounded-full border-4 border-white bg-[var(--color-accent)] shadow-md lg:block z-20"></div>
                        <img src="{{ asset('assets/images/hillcrest-referral-photo.png') }}" alt="Arrange an initial chat" class="micro-float h-[280px] w-full rounded-3xl border border-neutral-200/50 bg-white object-cover object-center shadow-md md:h-[380px]">
                    </div>
                </div>
            </div>
        </section>

        <!-- Step 2 -->
        <section class="relative mt-16 lg:mt-32">
            <div class="section-shell relative">
                <div class="grid gap-8 lg:grid-cols-2 lg:gap-16 lg:items-center">
                    <div data-aos="fade-right" class="relative">
                        <div class="absolute top-1/2 -right-8 hidden h-4 w-4 -translate-y-1/2 rounded-full border-4 border-white bg-[var(--color-accent)] shadow-md lg:block z-20"></div>
                        <img src="{{ asset('assets/images/hillcrest-hero-photo-1.png') }}" alt="Book your home visit" class="micro-float h-[280px] w-full rounded-3xl border border-neutral-200/50 bg-white object-cover object-center shadow-md md:h-[380px]" style="animation-delay: -2s;">
                    </div>
                    <div data-aos="fade-up" class="relative">
                        <div class="hc-card overflow-visible inline-block w-full relative z-10">
                            <span class="absolute -top-6 -left-6 flex h-16 w-16 items-center justify-center rounded-2xl bg-white text-3xl font-bold text-[var(--color-accent)] shadow-lg border border-neutral-100 -rotate-3">2</span>
                            <h2 class="mt-4 font-display text-2xl font-bold text-[var(--color-heading)] md:text-3xl" style="font-family: var(--font-heading);">Book your home visit</h2>
                            <p class="mt-4 text-neutral-700 leading-relaxed">
                                The home visit is our chance to find out more details about your loved one’s specific needs and how we can help. We’ll arrange a time to come to the home, get to know your family, and learn more about your loved one’s personality so we can suggest the best Care Professional. Typically, the same Care Professional (or small team) will be visiting regularly, so we work hard to find someone who’s a great match.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Step 3 -->
        <section class="relative mt-16 lg:mt-32">
            <div class="section-shell relative">
                <div class="grid gap-8 lg:grid-cols-2 lg:gap-16 lg:items-center">
                    <div data-aos="fade-up" class="order-2 lg:order-1 lg:text-right relative">
                        <div class="hc-card overflow-visible inline-block w-full text-left lg:text-right relative z-10">
                            <span class="absolute -top-6 -left-6 lg:-right-6 lg:left-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-white text-3xl font-bold text-[var(--color-accent)] shadow-lg border border-neutral-100 rotate-3">3</span>
                            <h2 class="mt-4 font-display text-2xl font-bold text-[var(--color-heading)] md:text-3xl" style="font-family: var(--font-heading);">Meet your Care Professionals</h2>
                            <p class="mt-4 text-neutral-700 leading-relaxed">
                                When we’ve selected the best support team for your loved one’s needs, we like to arrange an introduction in a relaxed setting so you can meet, have any other questions answered, and lay the foundations of a great care relationship.
                            </p>
                        </div>
                    </div>
                    <div data-aos="fade-left" class="order-1 lg:order-2 relative">
                        <div class="absolute top-1/2 -left-8 hidden h-4 w-4 -translate-y-1/2 rounded-full border-4 border-white bg-[var(--color-accent)] shadow-md lg:block z-20"></div>
                        <img src="{{ asset('assets/images/how-it-works-step.png') }}" alt="Meet your Care Professionals" class="micro-float h-[280px] w-full rounded-3xl border border-neutral-200/50 bg-white object-cover object-center shadow-md md:h-[380px]" style="animation-delay: -4s;">
                    </div>
                </div>
            </div>
        </section>

        <!-- Step 4 -->
        <section class="relative mt-16 lg:mt-32">
            <div class="section-shell relative">
                <div class="grid gap-8 lg:grid-cols-2 lg:gap-16 lg:items-center">
                    <div data-aos="fade-right" class="relative">
                        <div class="absolute top-1/2 -right-8 hidden h-4 w-4 -translate-y-1/2 rounded-full border-4 border-white bg-[var(--color-accent)] shadow-md lg:block z-20"></div>
                        <img src="{{ asset('assets/images/hillcrest-community-photo.png') }}" alt="Get to know each other" class="micro-float h-[280px] w-full rounded-3xl border border-neutral-200/50 bg-white object-cover object-center shadow-md md:h-[380px]" style="animation-delay: -6s;">
                    </div>
                    <div data-aos="fade-up" class="relative">
                        <div class="hc-card overflow-visible inline-block w-full relative z-10">
                            <span class="absolute -top-6 -left-6 flex h-16 w-16 items-center justify-center rounded-2xl bg-white text-3xl font-bold text-[var(--color-accent)] shadow-lg border border-neutral-100 -rotate-3">4</span>
                            <h2 class="mt-4 font-display text-2xl font-bold text-[var(--color-heading)] md:text-3xl" style="font-family: var(--font-heading);">Get to know each other</h2>
                            <p class="mt-4 text-neutral-700 leading-relaxed">
                                We’re committed to making sure you and your Care Professional feel completely comfortable with one another. In the first few weeks, it’s all about learning your loved one’s likes and dislikes, preferred routines, and forming a strong bond with trust at the core. Family involvement helps foster this process, and we’ll keep in touch every step of the way to ensure a smooth transition and a great future care relationship.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <section class="floral-panel section-gap border-t border-neutral-100 text-center overflow-hidden">
        <div class="ambient-blob ambient-blob-two" style="left: 10%; top: 20%;"></div>
        <div class="ambient-blob ambient-blob-one" style="right: 10%; bottom: 10%;"></div>
        
        <div class="section-shell max-w-3xl mx-auto relative z-10" data-aos="zoom-in">
            <div class="hc-card overflow-visible p-8 md:p-12">
                <span class="inline-block mb-4 rounded-full bg-[var(--color-accent)]/10 px-4 py-1.5 text-xs font-semibold uppercase tracking-widest text-[var(--color-accent)]">Here to Help</span>
                <h2 class="font-display text-3xl font-bold text-[var(--color-heading)] md:text-4xl" style="font-family: var(--font-heading);">Confused about home care?</h2>
                <p class="mt-6 text-neutral-700 leading-relaxed">
                    We know you want the best for your loved one, so when it comes to arranging home care, we’ve made it easy with personalised, attentive care that adapts as your needs change.
                </p>
                <p class="mt-4 text-neutral-700 leading-relaxed">
                    Organising care shouldn’t feel like a trust fall. By taking the time to listen and understand your unique circumstances, we’re confident we can help your loved one live a more independent life at home, while helping you find balance as a caregiver.
                </p>
                <p class="mt-4 text-neutral-700 leading-relaxed">
                    From warm and friendly companionship, to specialised, practical care that puts their needs and preferences first, we are changing the way people think about home care.
                </p>
                <p class="mt-6 text-lg text-[var(--color-heading)] font-medium">
                    Whatever questions you would like answered, we’re here to put your mind at ease – with no pressure to make a decision until you feel ready.
                </p>
                <div class="mt-10">
                    <a href="{{ route('contact.show') }}" class="hc-btn-primary px-8 py-4 text-base">Get in touch today</a>
                </div>
            </div>
        </div>
    </section>
@endsection
