<x-layouts.site>

    @php
        $slides = [
            [
                'img' => 'images/stock/hero-family.jpg',
                'label' => 'Family',
                'tag' => 'For every African family',
                'title' => 'Money clarity,',
                'accent' => 'built for Africa.',
                'desc' => 'Tools you can touch. Learning without jargon. A plan you\'ll actually follow.',
                'cta' => ['label' => 'Get my free Financial Health Check', 'href' => '/assessments/financial-health'],
                'cta2' => ['label' => 'Explore the tools', 'href' => '/tools'],
            ],
            [
                'img' => 'images/stock/mobile-money.jpg',
                'label' => 'Personality',
                'tag' => 'New · 12 quick choices',
                'title' => 'What\'s your',
                'accent' => 'money personality?',
                'desc' => 'Guardian, Dreamer, Hustler or Giver, your money DNA, revealed.',
                'cta' => ['label' => 'Discover my money DNA', 'href' => '/assessments/money-personality'],
                'cta2' => ['label' => 'All assessments', 'href' => '/tools'],
            ],
            [
                'img' => 'images/stock/phone-chart.jpg',
                'label' => 'Growth',
                'tag' => 'Drag a slider, see your future',
                'title' => 'Watch your money',
                'accent' => 'make money.',
                'desc' => 'A little, monthly, becomes a lot. See your numbers live.',
                'cta' => ['label' => 'Open the growth visualiser', 'href' => '/tools/compound-growth'],
                'cta2' => ['label' => 'Plan my goals', 'href' => '/tools/wealth-goals'],
            ],
            [
                'img' => 'images/stock/diaspora.jpg',
                'label' => 'Diaspora',
                'tag' => 'For the diaspora',
                'title' => 'Invest back home,',
                'accent' => 'sleep well abroad.',
                'desc' => 'Verified paths and paper trails, zero heartbreak.',
                'cta' => ['label' => 'Start my diaspora journey', 'href' => '/start/diaspora'],
                'cta2' => ['label' => 'Talk to the team', 'href' => '/contact?topic=coaching'],
            ],
            [
                'img' => 'images/stock/graduate.jpg',
                'label' => 'Academy',
                'tag' => 'First lesson free',
                'title' => 'Learn to invest,',
                'accent' => 'step by step.',
                'desc' => 'Short videos, real progress, lifetime access.',
                'cta' => ['label' => 'See the Investable course', 'href' => '/learn/investable'],
                'cta2' => ['label' => 'Watch free on YouTube', 'href' => 'https://www.youtube.com/@MoneyWiseWithRinaHicks'],
            ],
        ];
    @endphp

    {{-- ============ HERO: THE DECK, FINESSED ============ --}}
    <section class="relative isolate overflow-hidden bg-navy-950"
             x-data="{
                active: 0,
                total: {{ count($slides) }},
                timer: null,
                tx: 0,
                ty: 0,
                styles: [
                    'z-index:50; transform: translate(0,0) rotate(0deg) scale(1); opacity:1',
                    'z-index:40; transform: translate(6%,-4%) rotate(3.5deg) scale(.955); opacity:1',
                    'z-index:30; transform: translate(12%,-8%) rotate(7deg) scale(.91); opacity:1',
                    'z-index:20; transform: translate(18%,-12%) rotate(10.5deg) scale(.865); opacity:.95',
                    'z-index:60; transform: translate(-118%,4%) rotate(-15deg) scale(.97); opacity:0',
                ],
                veils: [0, .35, .55, .7, 0],
                offset(i) { return (i - this.active + this.total) % this.total },
                next() { this.active = (this.active + 1) % this.total },
                prev() { this.active = (this.active - 1 + this.total) % this.total },
                go(i) { this.active = i; this.restart() },
                start() { this.timer = setInterval(() => this.next(), 6500) },
                stop() { clearInterval(this.timer) },
                restart() { this.stop(); this.start() },
             }"
             x-init="start()" @mouseenter="stop()" @mouseleave="start()"
             @touchstart.passive="tx = $event.touches[0].clientX; ty = $event.touches[0].clientY"
             @touchend.passive="
                const dx = $event.changedTouches[0].clientX - tx;
                const dy = $event.changedTouches[0].clientY - ty;
                if (Math.abs(dx) > 50 && Math.abs(dx) > Math.abs(dy)) { dx > 0 ? prev() : next(); restart() }
             ">

        {{-- Dynamic colour-washed backdrop from the active slide --}}
        @foreach ($slides as $i => $slide)
            <div x-cloak x-show="active === {{ $i }}"
                 x-transition:enter="transition-opacity duration-1000" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
                 x-transition:leave="transition-opacity duration-1000" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
                 class="absolute inset-0" aria-hidden="true">
                <img src="{{ asset($slide['img']) }}" alt="" class="h-full w-full scale-110 object-cover opacity-25 blur-3xl saturate-150">
            </div>
        @endforeach
        <div class="absolute inset-0 bg-gradient-to-br from-navy-950/95 via-navy-950/80 to-navy-900/60"></div>
        <div class="blob -left-44 top-0 h-[32rem] w-[32rem] bg-wise-500/20" data-parallax="0.2" aria-hidden="true"></div>
        <div class="blob -right-32 bottom-0 h-[26rem] w-[26rem] bg-navy-400/25" data-parallax="-0.1" aria-hidden="true"></div>

        <div class="container-site relative grid items-center gap-8 py-10 sm:py-12 lg:min-h-[78vh] lg:max-h-[52rem] lg:grid-cols-[1.05fr,1fr] lg:gap-14 lg:py-14">
            {{-- Copy --}}
            <div class="relative min-h-[26rem] min-[420px]:min-h-[24rem] sm:min-h-[23rem] lg:min-h-[22rem]">
                @foreach ($slides as $i => $slide)
                    <div x-cloak x-show="active === {{ $i }}"
                         x-transition:enter="transition duration-700 delay-150" x-transition:enter-start="opacity-0 translate-y-6" x-transition:enter-end="opacity-100 translate-y-0"
                         x-transition:leave="transition duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
                         class="absolute inset-x-0 top-1/2 -translate-y-1/2">
                        <p class="inline-flex items-center gap-2.5 rounded-full bg-white/[0.08] px-4 py-2 text-[11px] font-bold uppercase tracking-[0.2em] text-wise-200 ring-1 ring-white/15 backdrop-blur-md">
                            <span class="h-1.5 w-1.5 rounded-full bg-wise-400"></span>
                            {{ $slide['tag'] }}
                        </p>
                        <h1 class="mt-5 font-display text-[2.1rem] font-extrabold leading-[1.07] tracking-tight text-white min-[420px]:text-4xl sm:text-5xl lg:text-6xl xl:text-[4.1rem] lg:leading-[1.05]">
                            {{ $slide['title'] }}<br>
                            <span class="text-gradient">{{ $slide['accent'] }}</span>
                        </h1>
                        <p class="mt-4 max-w-md text-base leading-relaxed text-white/70 sm:text-lg">{{ $slide['desc'] }}</p>
                        <div class="mt-6 flex flex-col gap-3 sm:mt-7 sm:flex-row sm:flex-wrap sm:items-center">
                            <a href="{{ $slide['cta']['href'] }}" class="btn-accent w-full justify-center sm:w-auto sm:px-8 sm:py-4 sm:text-lg">
                                {{ $slide['cta']['label'] }} <x-icon name="arrow-right" class="h-5 w-5" />
                            </a>
                            <a href="{{ $slide['cta2']['href'] }}" class="btn-ghost w-full justify-center !text-white !ring-white/25 hover:!bg-white/10 sm:w-auto sm:px-8 sm:py-4 sm:text-lg">{{ $slide['cta2']['label'] }}</a>
                        </div>
                    </div>
                @endforeach
            </div>

            {{-- The deck, finessed --}}
            <div class="relative mx-auto w-full max-w-[19.5rem] min-[420px]:max-w-[22rem] sm:max-w-[26rem]">
                <div class="relative h-[20rem] min-[420px]:h-[22rem] sm:h-[26rem] md:h-[27rem]" style="perspective: 1600px">
                    @foreach ($slides as $i => $slide)
                        <button @click="offset({{ $i }}) === 0 ? (next(), restart()) : go({{ $i }})"
                                class="absolute inset-0 overflow-hidden rounded-[1.6rem] text-left ring-1 ring-white/20 transition-all duration-[800ms] [transition-timing-function:cubic-bezier(.22,1,.36,1)]"
                                style="transform-origin: 85% 110%; box-shadow: 0 30px 60px -18px rgb(2 6 23 / .6)"
                                :style="styles[offset({{ $i }})]"
                                aria-label="{{ $slide['title'] }} {{ $slide['accent'] }}">
                            <img src="{{ asset($slide['img']) }}" alt="" class="h-full w-full object-cover">
                            {{-- depth veil for cards behind --}}
                            <span class="absolute inset-0 bg-navy-950 transition-opacity duration-[800ms]" :style="'opacity:' + veils[offset({{ $i }})]"></span>
                            <span class="absolute inset-0 bg-gradient-to-t from-navy-950/85 via-navy-950/10 to-transparent"></span>
                            {{-- label chip --}}
                            <span class="absolute left-5 top-5 rounded-full bg-navy-950/55 px-3 py-1.5 text-[10px] font-bold uppercase tracking-[0.18em] text-wise-200 ring-1 ring-white/20 backdrop-blur-md">
                                {{ $slide['label'] }}
                            </span>
                            {{-- caption --}}
                            <span class="absolute inset-x-5 bottom-5 flex items-end justify-between gap-3">
                                <span>
                                    <span class="block text-[10px] font-bold uppercase tracking-[0.18em] text-wise-300">{{ $slide['tag'] }}</span>
                                    <span class="mt-1 block font-display text-base font-extrabold leading-snug text-white sm:text-lg">{{ $slide['title'] }} {{ $slide['accent'] }}</span>
                                </span>
                                <span class="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-wise-400 text-navy-950 shadow-wise transition-all duration-500"
                                      :class="offset({{ $i }}) === 0 ? 'opacity-100 scale-100' : 'opacity-0 scale-50'">
                                    <x-icon name="arrow-right" class="h-4 w-4" />
                                </span>
                            </span>
                        </button>
                    @endforeach
                </div>
                {{-- grounding shadow --}}
                <div class="mx-auto mt-5 h-5 w-3/4 rounded-[100%] bg-navy-950/80 blur-md" aria-hidden="true"></div>
            </div>
        </div>

        {{-- Bottom bar: slide tabs + arrows --}}
        <div class="container-site relative pb-6">
            <div class="flex items-end justify-between gap-4 border-t border-white/10 pt-4">
                <div class="no-scrollbar flex items-end gap-x-6 overflow-x-auto sm:gap-x-7">
                    @foreach ($slides as $i => $slide)
                        <button @click="go({{ $i }})" class="group shrink-0 text-left" aria-label="{{ $slide['label'] }}">
                            <span class="text-[11px] font-bold uppercase tracking-[0.2em] transition"
                                  :class="active === {{ $i }} ? 'text-white' : 'text-white/40 group-hover:text-white/75'">
                                {{ $slide['label'] }}
                            </span>
                            <span class="mt-1.5 block h-[3px] w-12 overflow-hidden rounded-full transition md:w-16"
                                  :class="active === {{ $i }} ? 'bg-white/20' : 'bg-white/10 group-hover:bg-white/20'">
                                <span x-cloak x-show="active === {{ $i }}" class="block h-full rounded-full bg-wise-400" style="animation: slidebar 6.5s linear forwards"></span>
                            </span>
                        </button>
                    @endforeach
                </div>
                <div class="flex shrink-0 gap-2">
                    <button @click="prev(); restart()" class="grid h-10 w-10 place-items-center rounded-full bg-white/[0.08] text-white ring-1 ring-white/15 backdrop-blur transition hover:bg-wise-400 hover:text-navy-950" aria-label="Previous slide">
                        <x-icon name="arrow-left" class="h-4 w-4" />
                    </button>
                    <button @click="next(); restart()" class="grid h-10 w-10 place-items-center rounded-full bg-white/[0.08] text-white ring-1 ring-white/15 backdrop-blur transition hover:bg-wise-400 hover:text-navy-950" aria-label="Next slide">
                        <x-icon name="arrow-right" class="h-4 w-4" />
                    </button>
                </div>
            </div>
        </div>
    </section>

    {{-- Media logos: light band, true colours on hover --}}
    <div class="border-b border-navy-100 bg-white py-6">
        <p class="mb-4 text-center text-[11px] font-bold uppercase tracking-[0.22em] text-navy-400">As featured on</p>
        <div class="marquee">
            @for ($i = 0; $i < 2; $i++)
                <div class="marquee-track" aria-hidden="{{ $i === 1 ? 'true' : 'false' }}">
                    @foreach (['ntv', 'nation', 'capitalfm', 'standard', 'switchtv', 'k24', 'ebru', 'minet'] as $logo)
                        <img src="{{ asset("images/media/{$logo}.png") }}" alt="{{ strtoupper($logo) }}" class="h-10 w-auto opacity-60 grayscale transition duration-300 hover:opacity-100 hover:grayscale-0">
                    @endforeach
                </div>
            @endfor
        </div>
    </div>

    {{-- ============ NEEDS: PHOTO TILES ============ --}}
    <section class="section bg-white">
        <div class="container-site">
            <div class="flex flex-wrap items-end justify-between gap-4" data-gsap="fade-up">
                <div>
                    <p class="eyebrow">No scrolling for answers</p>
                    <h2 class="section-title mt-3">What do you need <span class="text-gradient">today?</span></h2>
                </div>
                <a href="{{ route('tools.index') }}" class="btn-ghost btn-sm">All tools <x-icon name="arrow-right" class="h-4 w-4" /></a>
            </div>
            <div class="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-5" data-gsap-stagger>
                @foreach ([
                    ['img' => 'stock/debt-free.jpg', 'icon' => 'unlink', 'title' => 'Get out of debt', 'href' => route('tools.show', 'debt-payoff')],
                    ['img' => 'stock/budget-table.jpg', 'icon' => 'calculator', 'title' => 'Make a budget', 'href' => route('tools.show', 'budget')],
                    ['img' => 'stock/investing.jpg', 'icon' => 'trending-up', 'title' => 'Start investing', 'href' => route('tools.show', 'compound-growth')],
                    ['img' => 'stock/savings.jpg', 'icon' => 'life-buoy', 'title' => 'Build a safety net', 'href' => route('tools.show', 'emergency-fund')],
                    ['img' => 'stock/retired-couple.jpg', 'icon' => 'shield-check', 'title' => 'Protect my wealth', 'href' => route('tools.show', 'retirement')],
                ] as $i => $tile)
                    <a href="{{ $tile['href'] }}" class="card-photo group block {{ $i % 2 === 1 ? 'lg:mt-10' : '' }} h-72" data-tilt="6">
                        <img src="{{ asset('images/'.$tile['img']) }}" alt="{{ $tile['title'] }}">
                        <span class="overlay !p-5">
                            <span class="icon-tile-dark mb-2 !h-10 !w-10 backdrop-blur"><x-icon :name="$tile['icon']" class="h-4 w-4" /></span>
                            <span class="font-display text-lg font-bold leading-tight text-white">{{ $tile['title'] }}</span>
                            <span class="mt-1.5 inline-flex items-center gap-1 text-sm font-bold text-wise-300">
                                Start <x-icon name="arrow-right" class="h-3.5 w-3.5 transition-transform group-hover:translate-x-1" />
                            </span>
                        </span>
                    </a>
                @endforeach
            </div>
        </div>
    </section>

    {{-- ============ THREE JOURNEYS ============ --}}
    <section class="section relative overflow-hidden bg-navy-50/50">
        <div class="container-site relative">
            <div class="mx-auto max-w-2xl text-center" data-gsap="fade-up">
                <p class="eyebrow justify-center">Start your journey</p>
                <h2 class="section-title mt-3">There's a path for you</h2>
            </div>
            <div class="mt-12 grid gap-6 lg:grid-cols-3" data-gsap-stagger>
                @foreach ([
                    ['img' => 'stock/individuals.jpg', 'icon' => 'sprout', 'title' => 'You & Your Family', 'desc' => 'Debt freedom, real savings, first investments.', 'href' => route('journey.individuals')],
                    ['img' => 'stock/corporate.jpg', 'icon' => 'building', 'title' => 'Companies & Investors', 'desc' => 'Money wellness your team will never forget.', 'href' => route('journey.corporates')],
                    ['img' => 'stock/diaspora.jpg', 'icon' => 'globe', 'title' => 'The Diaspora', 'desc' => 'Build at home. Sleep well abroad.', 'href' => route('journey.diaspora')],
                ] as $journey)
                    <a href="{{ $journey['href'] }}" class="card-photo group block h-[26rem]" data-tilt="5">
                        <img src="{{ asset('images/'.$journey['img']) }}" alt="{{ $journey['title'] }}">
                        <span class="overlay">
                            <span class="icon-tile-dark mb-3 backdrop-blur"><x-icon :name="$journey['icon']" class="h-5 w-5" /></span>
                            <span class="font-display text-2xl font-bold text-white">{{ $journey['title'] }}</span>
                            <span class="mt-1.5 text-sm text-navy-100">{{ $journey['desc'] }}</span>
                            <span class="mt-4 inline-flex items-center gap-2 font-bold text-wise-300">
                                Start <x-icon name="arrow-right" class="h-4 w-4 transition-transform group-hover:translate-x-1.5" />
                            </span>
                        </span>
                    </a>
                @endforeach
            </div>
        </div>
    </section>

    {{-- ============ LIFE IN PICTURES ============ --}}
    <section class="overflow-hidden bg-white py-14">
        <div class="mx-auto max-w-2xl px-5 text-center" data-gsap="fade-up">
            <p class="eyebrow justify-center">The money moments that matter</p>
            <h2 class="section-title mt-3">This is what we're really building</h2>
        </div>
        <div class="marquee mt-10">
            @for ($i = 0; $i < 2; $i++)
                <div class="marquee-track !gap-5 !pr-5" style="animation-duration: 45s" aria-hidden="{{ $i === 1 ? 'true' : 'false' }}">
                    @foreach ([
                        ['img' => 'stock/home-keys.jpg', 'label' => 'The first home'],
                        ['img' => 'stock/graduate.jpg', 'label' => 'Fees fully paid'],
                        ['img' => 'stock/shop-owner.jpg', 'label' => 'The business launched'],
                        ['img' => 'stock/market-vendor.jpg', 'label' => 'The hustle that grew'],
                        ['img' => 'stock/mother-child.jpg', 'label' => 'The family secured'],
                        ['img' => 'stock/school-kids.jpg', 'label' => 'Education secured'],
                        ['img' => 'stock/retired-couple.jpg', 'label' => 'Elders honoured'],
                        ['img' => 'stock/community.jpg', 'label' => 'The chama that works'],
                    ] as $j => $moment)
                        <figure class="card-photo h-64 w-52 shrink-0 md:h-72 md:w-60 {{ $j % 2 === 1 ? 'mt-6' : '' }}">
                            <img src="{{ asset('images/'.$moment['img']) }}" alt="{{ $moment['label'] }}">
                            <figcaption class="overlay !justify-end !p-4">
                                <span class="font-display text-sm font-bold text-white">{{ $moment['label'] }}</span>
                            </figcaption>
                        </figure>
                    @endforeach
                </div>
            @endfor
        </div>
    </section>

    {{-- ============ PROOF ============ --}}
    <section class="relative overflow-hidden bg-navy-900">
        <img src="{{ asset('images/stock/nairobi.jpg') }}" alt="" class="absolute inset-0 h-full w-full object-cover opacity-15" data-parallax="0.12">
        <div class="absolute inset-0 bg-gradient-to-b from-navy-900 via-navy-900/80 to-navy-900"></div>

        <div class="container-site section relative">
            <div class="grid gap-8 text-center sm:grid-cols-2 lg:grid-cols-4" data-gsap-stagger>
                @foreach ([
                    ['icon' => 'users', 'value' => 1500, 'suffix' => '+', 'label' => 'People trained'],
                    ['icon' => 'heart', 'value' => 18000, 'suffix' => '+', 'label' => 'Community members'],
                    ['icon' => 'video', 'value' => 400, 'suffix' => '+', 'label' => 'Free videos & lessons'],
                    ['icon' => 'globe', 'value' => 10, 'suffix' => '+', 'label' => 'African markets served'],
                ] as $stat)
                    <div class="rounded-brand bg-white/[0.06] p-7 ring-1 ring-white/10 backdrop-blur-sm transition hover:bg-white/[0.09]">
                        <span class="icon-tile-dark mx-auto"><x-icon :name="$stat['icon']" class="h-5 w-5" /></span>
                        <p class="mt-3 font-display text-4xl font-extrabold text-wise-300 md:text-5xl"><span data-countup="{{ $stat['value'] }}" data-suffix="{{ $stat['suffix'] }}">0</span></p>
                        <p class="mt-1 font-semibold text-navy-100">{{ $stat['label'] }}</p>
                    </div>
                @endforeach
            </div>

            <div class="mt-12 grid gap-6 lg:grid-cols-[1fr,1.2fr,1fr]" data-gsap-stagger>
                <div class="card-arch hidden h-full min-h-[20rem] lg:block">
                    <img src="{{ asset('images/stock/woman-smile.jpg') }}" alt="A Money-Wise member">
                </div>

                <div class="space-y-5">
                    @foreach ($testimonials->take(2) as $testimonial)
                        <figure class="rounded-brand bg-white/[0.07] p-7 ring-1 ring-white/10 backdrop-blur transition-all duration-300 hover:-translate-y-1 hover:bg-white/[0.1]">
                            <x-icon name="quote" class="h-6 w-6 text-wise-400" />
                            <blockquote class="mt-3 leading-relaxed text-navy-100">{{ \Illuminate\Support\Str::limit($testimonial->quote, 200) }}</blockquote>
                            <figcaption class="mt-4 flex items-center gap-3">
                                <span class="grid h-10 w-10 place-items-center rounded-full bg-gradient-to-br from-wise-400 to-wise-600 font-display text-sm font-extrabold text-navy-950">
                                    {{ strtoupper(substr($testimonial->name, 0, 1)) }}
                                </span>
                                <span>
                                    <span class="block font-display font-bold text-white">{{ $testimonial->name }}</span>
                                    @if ($testimonial->role)<span class="text-xs text-navy-300">{{ $testimonial->role }}</span>@endif
                                </span>
                            </figcaption>
                        </figure>
                    @endforeach
                </div>

                <div class="card-arch hidden h-full min-h-[20rem] lg:block">
                    <img src="{{ asset('images/stock/team-celebrate.jpg') }}" alt="Celebrating financial wins">
                </div>
            </div>
        </div>
    </section>

    {{-- ============ WATCH ============ --}}
    <section class="section bg-white">
        <div class="container-site grid items-center gap-12 lg:grid-cols-2">
            {{-- Real featured video, loads the embed only on click (fast first paint) --}}
            <div x-data="{ playing: false }" class="relative aspect-video overflow-hidden rounded-brand bg-navy-950 shadow-brand-lg ring-1 ring-navy-100/60" data-gsap="fade-right">
                <template x-if="!playing">
                    <button type="button" @click="playing = true" class="group absolute inset-0 h-full w-full" aria-label="Play: Managing Your Salary">
                        <img src="https://i.ytimg.com/vi/qyhCOK7mlJA/hqdefault.jpg" alt="Managing Your Salary, Money-Wise with Rina Hicks" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105">
                        <span class="absolute inset-0 bg-gradient-to-t from-navy-950/70 via-transparent to-transparent"></span>
                        <span class="absolute inset-0 grid place-items-center">
                            <span class="grid h-20 w-20 place-items-center rounded-full bg-wise-400 text-navy-950 shadow-wise transition-transform duration-300 group-hover:scale-110">
                                <x-icon name="play" class="ml-1 h-8 w-8" />
                            </span>
                        </span>
                        <span class="absolute bottom-4 left-5 right-5 text-left font-display text-lg font-bold text-white">Managing Your Salary</span>
                    </button>
                </template>
                <template x-if="playing">
                    <iframe class="absolute inset-0 h-full w-full" src="https://www.youtube-nocookie.com/embed/qyhCOK7mlJA?autoplay=1" title="Managing Your Salary, Money-Wise with Rina Hicks"
                            frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </template>
            </div>
            <div data-gsap="fade-left">
                <p class="eyebrow">Watch &amp; learn, free</p>
                <h2 class="section-title mt-3">400+ videos. Zero jargon.</h2>
                <p class="mt-4 text-lg text-navy-600">Debt, saving, investing, in plain language, for every African market, straight from <strong class="text-navy-800">Money-Wise with Rina Hicks</strong>.</p>
                <div class="mt-7 flex flex-wrap gap-3">
                    <a href="{{ route('learn.show', 'money-foundations') }}" class="btn-primary">
                        <x-icon name="play" class="h-5 w-5" /> Start the free course
                    </a>
                    <a href="https://www.youtube.com/@MoneyWiseWithRinaHicks" target="_blank" rel="noopener" class="btn-ghost">
                        <x-icon name="youtube" class="h-5 w-5" /> Subscribe on YouTube
                    </a>
                </div>
            </div>
        </div>
    </section>

    {{-- ============ FEATURED: COURSE + BOOK ============ --}}
    <section class="section bg-white">
        <div class="container-site grid gap-6 lg:grid-cols-2">
            @if ($course)
                <div class="card-glow group relative overflow-hidden bg-navy-900 p-0" data-gsap="fade-right">
                    <img src="{{ asset('images/investable-intro.png') }}" alt="" class="absolute inset-0 h-full w-full object-cover opacity-25 transition-transform duration-700 group-hover:scale-105">
                    <div class="absolute inset-0 bg-gradient-to-t from-navy-950 via-navy-900/70 to-navy-900/40"></div>
                    <div class="relative flex h-full flex-col p-8 md:p-10">
                        <span class="chip w-fit bg-wise-400 text-navy-950"><x-icon name="trending-up" class="h-3.5 w-3.5" /> Flagship course</span>
                        <h3 class="mt-5 font-display text-3xl font-bold text-white">{{ $course->title }}</h3>
                        <p class="mt-3 flex-1 leading-relaxed text-navy-100">Confident investing in {{ $course->modules()->count() }} modules, values first, jargon never.</p>
                        <div class="mt-6 flex flex-wrap items-center gap-5 text-sm font-semibold text-wise-200">
                            <span class="flex items-center gap-1.5"><x-icon name="video" class="h-4 w-4" /> {{ $course->lessons()->count() }} lessons</span>
                            <span class="flex items-center gap-1.5"><x-icon name="gift" class="h-4 w-4" /> First lesson free</span>
                            <span class="flex items-center gap-1.5"><x-icon name="infinity" class="h-4 w-4" /> Lifetime access</span>
                        </div>
                        <a href="{{ route('learn.show', $course) }}" class="btn-accent mt-7 w-fit">Explore the course <x-icon name="arrow-right" class="h-4 w-4" /></a>
                    </div>
                </div>
            @endif

            <div class="card-glow group grid grid-cols-[1fr,auto] items-center gap-6 overflow-hidden p-8 md:p-10" data-gsap="fade-left">
                <div>
                    <span class="chip w-fit"><x-icon name="book-open" class="h-3.5 w-3.5" /> Bestselling book</span>
                    <h3 class="mt-5 font-display text-2xl font-bold text-navy-900 md:text-3xl">Money-Wise: Create, Grow &amp; Preserve Wealth</h3>
                    <p class="mt-3 leading-relaxed text-navy-600">The wealth guide written for the African context, a reader favourite since 2016.</p>
                    <a href="{{ route('books') }}" class="btn-primary mt-6 w-fit">Get the book <x-icon name="arrow-right" class="h-4 w-4" /></a>
                </div>
                <img src="{{ asset('images/book-cover.jpg') }}" alt="Money-Wise book cover"
                     class="hidden w-36 rotate-3 rounded-xl shadow-brand-lg transition-transform duration-500 group-hover:rotate-0 group-hover:scale-105 sm:block md:w-44">
            </div>
        </div>
    </section>

    {{-- ============ FINAL CTA ============ --}}
    <section class="relative overflow-hidden">
        <img src="{{ asset('images/stock/community.jpg') }}" alt="" class="absolute inset-0 h-full w-full object-cover" data-parallax="0.1">
        <div class="absolute inset-0 bg-navy-950/80"></div>
        <div class="container-site section relative text-center" data-gsap="zoom">
            <span class="mx-auto grid h-16 w-16 place-items-center rounded-3xl bg-wise-400 text-navy-950 shadow-wise"><x-icon name="heart-pulse" class="h-7 w-7" /></span>
            <h2 class="mx-auto mt-6 max-w-2xl font-display text-display-sm font-bold text-white md:text-display">
                Your money story changes <span class="text-gradient">today</span>.
            </h2>
            <p class="mx-auto mt-4 max-w-md text-lg text-navy-200">Three minutes. Twenty questions. Total clarity.</p>
            <a href="{{ route('assessments.show', 'financial-health') }}" class="btn-accent btn-lg mt-8">
                Take the free Financial Health Check
                <x-icon name="arrow-right" class="h-5 w-5" />
            </a>
        </div>
    </section>
</x-layouts.site>
