<x-layouts.site>
    <x-slot:title>Financial Coaching</x-slot:title>
    <x-slot:description>One-on-one financial coaching that helps you create, grow and preserve wealth, with your values at the centre. A guided, confidential partnership, not a quick fix.</x-slot:description>

    {{-- ============ HERO ============ --}}
    <section class="relative overflow-hidden bg-mesh">
        <div class="bg-kitenge absolute inset-0 opacity-[0.05]" aria-hidden="true"></div>
        <div class="blob -left-32 -top-20 h-96 w-96 bg-wise-300/40" data-parallax="0.2" aria-hidden="true"></div>
        <div class="blob -right-24 bottom-0 h-80 w-80 bg-navy-200/40" data-parallax="0.12" aria-hidden="true"></div>

        <div class="container-site relative grid items-center gap-12 py-16 md:py-24 lg:grid-cols-[1.05fr,1fr]" data-hero>
            <div>
                <p class="eyebrow" data-hero-item>Coaching</p>
                <h1 class="mt-4 font-display text-display-sm font-bold leading-[1.05] text-navy-900 md:text-display" data-hero-item>
                    Create, grow and <span class="text-gradient">preserve wealth</span>, with your values at the centre
                </h1>
                <p class="mt-5 max-w-xl text-lg leading-relaxed text-navy-600" data-hero-item>
                    A guided, confidential partnership that helps you think clearly about money, get unstuck, and move
                    from where you are to where you want to be, in a much shorter time.
                </p>
                <div class="mt-7 flex flex-wrap gap-3" data-hero-item>
                    <a href="{{ route('coaching.book') }}" class="btn-accent btn-lg">Book a coaching session <x-icon name="arrow-right" class="h-5 w-5" /></a>
                    <a href="#how" class="btn-ghost btn-lg">How it works</a>
                </div>
                <div class="mt-7 flex flex-wrap items-center gap-x-6 gap-y-2 text-sm font-semibold text-navy-600" data-hero-item>
                    <span class="flex items-center gap-2"><x-icon name="shield-check" class="h-4 w-4 text-emerald-500" /> Confidential</span>
                    <span class="flex items-center gap-2"><x-icon name="heart" class="h-4 w-4 text-wise-500" /> Values-led</span>
                    <span class="flex items-center gap-2"><x-icon name="file-text" class="h-4 w-4 text-wise-500" /> A plan you can act on</span>
                </div>
            </div>

            {{-- Layered image composition --}}
            <div class="relative mx-auto w-full max-w-md lg:max-w-none" data-hero-item>
                <div class="card-photo aspect-[4/5] w-full shadow-brand-lg" data-tilt="4">
                    <img src="{{ asset('images/stock/woman-smile.jpg') }}" alt="A reflective, confident coaching conversation">
                    <span class="overlay">
                        <span class="chip w-fit bg-wise-400 text-navy-950">No judgement, ever</span>
                    </span>
                </div>

                {{-- floating retention badge --}}
                <div class="absolute -left-4 top-8 rounded-2xl bg-white p-4 shadow-brand-lg ring-1 ring-navy-100 md:-left-8" data-float>
                    <p class="font-display text-3xl font-extrabold text-navy-900">80%</p>
                    <p class="text-[11px] font-bold uppercase tracking-wide text-navy-400">retention with<br>coaching</p>
                </div>

                {{-- floating coach badge --}}
                <div class="absolute -bottom-5 -right-3 flex items-center gap-3 rounded-2xl bg-navy-900 p-3 pr-5 shadow-brand-lg md:-right-6" data-float>
                    <img src="{{ asset('images/rina-square.jpg') }}" alt="Rina Hicks" class="h-11 w-11 rounded-xl object-cover">
                    <div>
                        <p class="text-[10px] font-bold uppercase tracking-wide text-wise-300">Your coach</p>
                        <p class="font-display text-sm font-bold text-white">Rina Hicks</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- ============ WHAT IS COACHING ============ --}}
    <section class="section bg-white">
        <div class="container-site grid items-center gap-12 lg:grid-cols-2">
            <div class="relative order-2 lg:order-1" data-gsap="fade-right">
                <div class="card-photo aspect-[5/4] w-full" data-tilt="3">
                    <img src="{{ asset('images/stock/learning.jpg') }}" alt="A focused one-on-one coaching session">
                </div>
                <div class="absolute -right-4 -top-4 hidden rounded-2xl bg-wise-400 px-5 py-4 text-navy-950 shadow-wise sm:block" data-float>
                    <p class="font-display text-sm font-extrabold leading-tight">Get unstuck.<br>Get clarity.</p>
                </div>
            </div>

            <div class="order-1 lg:order-2" data-gsap="fade-left">
                <p class="eyebrow">What is coaching?</p>
                <h2 class="section-title mt-3">A partnership that gets you there, faster</h2>
                <p class="mt-4 text-lg leading-relaxed text-navy-600">
                    Coaching is a creative partnership that helps you explore how to overcome barriers and reach your
                    goals in far less time than going it alone.
                </p>
                <div class="mt-7 space-y-3">
                    @foreach ([
                        ['icon' => 'lightbulb', 'title' => 'Gain awareness', 'desc' => 'See your money clearly, without the fog of guilt or guesswork.'],
                        ['icon' => 'unlink', 'title' => 'Get unstuck', 'desc' => 'Break the patterns that keep you circling the same problems.'],
                        ['icon' => 'rocket', 'title' => 'Move to action', 'desc' => 'Turn insight into a plan you actually follow through on.'],
                    ] as $b)
                        <div class="flex items-start gap-4 rounded-2xl bg-navy-50/60 p-4 ring-1 ring-navy-100/70">
                            <span class="icon-tile shrink-0"><x-icon :name="$b['icon']" class="h-5 w-5" /></span>
                            <div>
                                <p class="font-display font-bold text-navy-900">{{ $b['title'] }}</p>
                                <p class="mt-0.5 text-sm leading-relaxed text-navy-500">{{ $b['desc'] }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    {{-- ============ IS / IS NOT (split panel) ============ --}}
    <section class="section bg-mesh">
        <div class="container-site">
            <div class="text-center" data-gsap="fade-up">
                <p class="eyebrow justify-center">Set the expectation</p>
                <h2 class="section-title mt-3">What coaching is, and what it isn't</h2>
            </div>

            <div class="relative mt-12 grid gap-4 md:grid-cols-2 md:gap-0" data-gsap="zoom">
                {{-- IS --}}
                <div class="rounded-brand bg-white p-8 shadow-brand ring-1 ring-emerald-100 md:rounded-r-none md:border-r-2 md:border-emerald-100">
                    <h3 class="flex items-center gap-2 font-display text-lg font-bold text-emerald-700"><x-icon name="check-circle" class="h-6 w-6" /> Coaching is</h3>
                    <ul class="mt-5 space-y-3 text-sm text-navy-700">
                        @foreach ([
                            'Joyful and encouraging', 'Asking the right questions',
                            'A positive way to explore options', 'Learning from a seasoned professional',
                            'A process that creates lasting change', 'Client-led and focused on your future',
                            'Helping you realise your full potential',
                        ] as $is)
                            <li class="flex items-start gap-3"><span class="mt-0.5 grid h-5 w-5 shrink-0 place-items-center rounded-full bg-emerald-100 text-emerald-600"><x-icon name="check" class="h-3 w-3" /></span> {{ $is }}</li>
                        @endforeach
                    </ul>
                </div>
                {{-- IS NOT --}}
                <div class="rounded-brand bg-navy-900 bg-mesh-dark p-8 shadow-brand md:rounded-l-none">
                    <h3 class="flex items-center gap-2 font-display text-lg font-bold text-white"><x-icon name="x" class="h-6 w-6 text-navy-300" /> Coaching is not</h3>
                    <ul class="mt-5 space-y-3 text-sm text-navy-200">
                        @foreach ([
                            'Judgemental or shaming', 'Telling you what to do', 'A quick fix', 'Therapy',
                            'Focused on the past', 'Diagnosing dysfunction',
                            'Only about organisational performance',
                        ] as $isnot)
                            <li class="flex items-start gap-3"><span class="mt-0.5 grid h-5 w-5 shrink-0 place-items-center rounded-full bg-white/10 text-navy-300"><x-icon name="x" class="h-3 w-3" /></span> {{ $isnot }}</li>
                        @endforeach
                    </ul>
                </div>
                {{-- VS badge --}}
                <div class="absolute left-1/2 top-1/2 hidden h-14 w-14 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full bg-wise-400 font-display text-sm font-extrabold text-navy-950 shadow-wise ring-4 ring-white md:grid">VS</div>
            </div>
        </div>
    </section>

    {{-- ============ RETENTION RINGS ============ --}}
    <section class="section bg-navy-950 bg-mesh-dark">
        <div class="container-site max-w-4xl text-center" data-gsap="fade-up">
            <p class="eyebrow justify-center text-wise-300">Why it sticks</p>
            <h2 class="section-title mt-3 text-white">Training fades. Coaching changes you.</h2>
            <p class="mx-auto mt-3 max-w-xl text-navy-200">Studies on long-term retention tell the story plainly.</p>

            <div class="mt-12 grid gap-10 sm:grid-cols-2">
                @foreach ([
                    ['label' => 'Training alone', 'pct' => 20, 'color' => '#64748b'],
                    ['label' => 'Coaching + training', 'pct' => 80, 'color' => '#58b9e6'],
                ] as $stat)
                    <div class="flex flex-col items-center" x-data="{ shown: false }" x-init="setTimeout(() => shown = true, 300)">
                        <div class="relative h-44 w-44">
                            <svg viewBox="0 0 120 120" class="h-full w-full -rotate-90">
                                <circle cx="60" cy="60" r="52" fill="none" stroke="rgba(255,255,255,0.10)" stroke-width="12"/>
                                <circle cx="60" cy="60" r="52" fill="none" stroke="{{ $stat['color'] }}" stroke-width="12" stroke-linecap="round"
                                        stroke-dasharray="326.7"
                                        :stroke-dashoffset="shown ? {{ 326.7 - (326.7 * $stat['pct'] / 100) }} : 326.7"
                                        style="transition: stroke-dashoffset 1.5s cubic-bezier(.2,.6,.3,1)"/>
                            </svg>
                            <div class="absolute inset-0 grid place-items-center">
                                <span class="font-display text-4xl font-extrabold text-white">{{ $stat['pct'] }}%</span>
                            </div>
                        </div>
                        <p class="mt-4 font-display font-bold text-white">{{ $stat['label'] }}</p>
                        <p class="text-xs font-semibold uppercase tracking-wide text-navy-300">long-term retention</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- ============ WHAT WE OFFER ============ --}}
    <section class="section bg-white">
        <div class="container-site grid items-center gap-12 lg:grid-cols-2">
            <div data-gsap="fade-right">
                <p class="eyebrow">What we offer</p>
                <h2 class="section-title mt-3">One-on-one coaching, built around you</h2>
                <p class="mt-4 text-lg leading-relaxed text-navy-600">
                    We help you gain clarity around your money, align your decisions with your values and build a
                    practical plan for your future. Our coaching supports you to:
                </p>
                <ul class="mt-6 space-y-3">
                    @foreach ([
                        'Clarify your purpose, personal vision and financial goals',
                        'Understand your current situation with honesty and care',
                        'Make intentional decisions on saving, investing and long-term planning',
                    ] as $point)
                        <li class="flex items-start gap-3 text-navy-700">
                            <span class="mt-0.5 grid h-6 w-6 shrink-0 place-items-center rounded-full bg-wise-100 text-wise-700"><x-icon name="check" class="h-3.5 w-3.5" /></span>
                            {{ $point }}
                        </li>
                    @endforeach
                </ul>
                <div class="mt-7 rounded-2xl border-l-4 border-wise-400 bg-navy-50/60 p-5 text-navy-600">
                    <p class="leading-relaxed">You will never be told what to do with your money. We work alongside you to design a clear, realistic plan you understand and feel confident implementing, grounded in trust and respect.</p>
                </div>
            </div>
            <div class="relative" data-gsap="fade-left">
                <div class="card-photo aspect-[4/5] w-full" data-tilt="3">
                    <img src="{{ asset('images/stock/man-laptop.jpg') }}" alt="Reviewing a personal financial plan">
                </div>
            </div>
        </div>
    </section>

    {{-- ============ WHAT TO EXPECT (timeline) ============ --}}
    <section id="how" class="section bg-mesh">
        <div class="container-site max-w-3xl">
            <div class="text-center" data-gsap="fade-up">
                <p class="eyebrow justify-center">The journey</p>
                <h2 class="section-title mt-3">What to expect from the program</h2>
                <p class="mx-auto mt-3 max-w-xl text-navy-600">Structured, thoughtful and tailored to you, designed to move you from clarity to action, step by step.</p>
            </div>

            <div class="relative mt-12 space-y-4 before:absolute before:left-[1.45rem] before:top-2 before:bottom-2 before:w-0.5 before:bg-wise-200 before:content-['']" data-gsap-stagger>
                @foreach ([
                    'Understand your unique situation, goals and concerns',
                    'Clarify what you want to achieve and why it matters to you',
                    'Identify the obstacles, habits or beliefs holding you back',
                    'Explore practical strategies that fit your goals and values',
                    'Build a clear, actionable plan with accountability and follow-through',
                ] as $i => $step)
                    <div class="relative flex items-start gap-5 rounded-2xl bg-white p-5 shadow-brand ring-1 ring-navy-100/60">
                        <span class="relative z-10 grid h-12 w-12 shrink-0 place-items-center rounded-full bg-navy-900 font-display text-lg font-extrabold text-wise-300 ring-4 ring-white">{{ $i + 1 }}</span>
                        <p class="pt-2.5 leading-relaxed text-navy-700">{{ $step }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- ============ OUTCOMES ============ --}}
    <section class="section bg-white">
        <div class="container-site">
            <div class="text-center" data-gsap="fade-up">
                <p class="eyebrow justify-center">The payoff</p>
                <h2 class="section-title mt-3">By the end, you can expect to</h2>
            </div>
            <div class="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3" data-gsap-stagger>
                @foreach ([
                    ['icon' => 'compass', 'text' => 'Feel clearer and more confident, instead of overwhelmed or unsure'],
                    ['icon' => 'file-text', 'text' => 'Hold a simple, practical plan that reflects your values and real life'],
                    ['icon' => 'trending-up', 'text' => 'Know where your money is going, and why, with real direction'],
                    ['icon' => 'target', 'text' => 'Make measurable progress toward the goals you care about'],
                    ['icon' => 'lightbulb', 'text' => 'See your finances from new, calmer, more intentional perspectives'],
                    ['icon' => 'shield-check', 'text' => 'Feel at peace about long-term planning, including retirement'],
                ] as $out)
                    <div class="card-glow group p-6">
                        <span class="icon-tile transition-transform duration-300 group-hover:-translate-y-1"><x-icon :name="$out['icon']" class="h-5 w-5" /></span>
                        <p class="mt-4 leading-relaxed text-navy-700">{{ $out['text'] }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- ============ CTA ============ --}}
    <section class="section bg-mesh">
        <div class="container-site">
            <div class="relative overflow-hidden rounded-brand bg-navy-900 bg-mesh-dark p-10 text-center md:p-14" data-gsap="zoom">
                <div class="bg-kitenge absolute inset-0 opacity-[0.06]" aria-hidden="true"></div>
                <div class="blob -right-16 -top-20 h-64 w-64 bg-wise-400/25" aria-hidden="true"></div>
                <div class="relative">
                    <h2 class="mx-auto max-w-2xl font-display text-3xl font-bold text-white md:text-4xl">Ready to take the next step?</h2>
                    <p class="mx-auto mt-3 max-w-xl text-navy-200">
                        Start with a 45-minute virtual session. We will look at where you stand, clarify your goals and map a clear plan you feel confident about.
                    </p>
                    <div class="mt-8 flex flex-wrap justify-center gap-3">
                        <a href="{{ route('coaching.book') }}" class="btn-accent btn-lg">Book a coaching session <x-icon name="arrow-right" class="h-5 w-5" /></a>
                        <a href="{{ route('assessments.show', 'financial-health') }}" class="btn-white btn-lg">Take the free Financial Health Check</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
</x-layouts.site>
