@php
    $slides = [
        [
            'image' => 'images/stock/hero-family.jpg',
            'position' => 'object-center',
            'label' => 'Family',
            'kicker' => 'Money-Wise × RH Group',
            'title' => 'From financial confusion',
            'accent' => 'to financial control.',
            'description' => 'Learn the money basics, make a clear plan, and get the right support when you are ready to grow.',
            'cta' => ['label' => 'Take the free Financial Health Check', 'href' => '/assessments/financial-health'],
        ],
        [
            'image' => 'images/stock/mobile-money.jpg',
            'position' => 'object-center',
            'label' => 'Risk profile',
            'kicker' => 'Invest with confidence',
            'title' => 'Know your',
            'accent' => 'investment risk profile.',
            'description' => 'Nine quick questions reveal how much risk fits your life, and the investments that match your comfort level.',
            'cta' => ['label' => 'Find my risk profile', 'href' => '/assessments/investment-risk'],
            'secondary' => ['label' => 'View all assessments', 'href' => '/tools'],
        ],
        [
            'image' => 'images/stock/phone-chart.jpg',
            'position' => 'object-center',
            'label' => 'Growth',
            'kicker' => 'Make the future visible',
            'title' => 'See what consistency',
            'accent' => 'can build.',
            'description' => 'Choose your currency, compounding frequency and monthly amount. Watch the result update live.',
            'cta' => ['label' => 'Try the growth calculator', 'href' => '/tools/compound-growth'],
            'secondary' => ['label' => 'Plan my goals', 'href' => '/tools/wealth-goals'],
        ],
        [
            'image' => 'images/stock/diaspora.jpg',
            'position' => 'object-center',
            'label' => 'Diaspora',
            'kicker' => 'Build confidently from abroad',
            'title' => 'Build at home.',
            'accent' => 'Sleep well abroad.',
            'description' => 'Clear education, verified paths and practical guidance for investing back home.',
            'cta' => ['label' => 'Start my diaspora journey', 'href' => '/start/diaspora'],
            'secondary' => ['label' => 'Talk to the team', 'href' => '/contact?topic=coaching'],
        ],
        [
            'image' => 'images/stock/graduate.jpg',
            'position' => 'object-center',
            'label' => 'Academy',
            'kicker' => 'Learn at your own pace',
            'title' => 'Learn investing,',
            'accent' => 'step by step.',
            'description' => 'Short lessons, practical tools and clear progress—without jargon or hype.',
            'cta' => ['label' => 'Explore the academy', 'href' => '/learn'],
            'secondary' => ['label' => 'Watch free on YouTube', 'href' => 'https://www.youtube.com/@MoneyWiseWithRinaHicks'],
        ],
    ];
@endphp

<section
    data-home-slider
    class="relative isolate min-h-[calc(100svh-4.75rem)] overflow-hidden bg-navy-950 text-white"
    role="region"
    aria-roledescription="carousel"
    aria-label="Money-Wise highlights"
    x-data="{
        active: 0,
        total: {{ count($slides) }},
        timer: null,
        touchX: 0,
        touchY: 0,
        paused: false,
        stop() {
            if (this.timer) clearInterval(this.timer);
            this.timer = null;
        },
        start() {
            this.stop();
            if (this.paused || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
            this.timer = setInterval(() => this.next(false), 8000);
        },
        next(restart = true) {
            this.active = (this.active + 1) % this.total;
            if (restart) this.start();
        },
        previous() {
            this.active = (this.active - 1 + this.total) % this.total;
            this.start();
        },
        go(index) {
            this.active = index;
            this.start();
        },
        toggle() {
            this.paused = !this.paused;
            this.paused ? this.stop() : this.start();
        },
    }"
    x-init="start()"
    @focusin="stop()"
    @focusout="start()"
    @keydown.right.window="next()"
    @keydown.left.window="previous()"
    @touchstart.passive="touchX = $event.touches[0].clientX; touchY = $event.touches[0].clientY"
    @touchend.passive="
        const dx = $event.changedTouches[0].clientX - touchX;
        const dy = $event.changedTouches[0].clientY - touchY;
        if (Math.abs(dx) > 50 && Math.abs(dx) > Math.abs(dy)) dx > 0 ? previous() : next();
    "
>
    <div class="absolute inset-0" aria-live="polite" aria-atomic="true">
        @foreach ($slides as $index => $slide)
            <article
                data-home-slide
                x-cloak
                x-show="active === {{ $index }}"
                x-transition:enter="transition-opacity duration-700 ease-out"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
                x-transition:leave="transition-opacity duration-500 ease-in"
                x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0"
                class="absolute inset-0"
                :aria-hidden="active !== {{ $index }}"
                aria-roledescription="slide"
                aria-label="{{ $index + 1 }} of {{ count($slides) }}: {{ $slide['label'] }}"
            >
                <img
                    src="{{ asset($slide['image']) }}"
                    alt=""
                    class="h-full w-full {{ $slide['position'] }} object-cover transition-transform duration-[9000ms] ease-linear motion-reduce:transition-none"
                    :class="active === {{ $index }} ? 'scale-[1.055]' : 'scale-100'"
                >
                <div class="absolute inset-0 bg-gradient-to-r from-navy-950 via-navy-950/75 to-navy-950/10"></div>
                <div class="absolute inset-0 bg-gradient-to-t from-navy-950/80 via-transparent to-navy-950/25"></div>
            </article>
        @endforeach
    </div>

    <div class="container-site relative flex min-h-[calc(100svh-4.75rem)] items-center pb-32 pt-16 sm:pb-36 lg:pb-32">
        <div class="relative min-h-[28rem] w-full max-w-3xl sm:min-h-[26rem]">
            @foreach ($slides as $index => $slide)
                <div
                    x-cloak
                    x-show="active === {{ $index }}"
                    x-transition:enter="transition duration-700 delay-150 ease-out"
                    x-transition:enter-start="translate-y-5 opacity-0"
                    x-transition:enter-end="translate-y-0 opacity-100"
                    x-transition:leave="transition duration-300 ease-in"
                    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="flex items-center gap-3 text-[10px] font-bold uppercase tracking-[0.24em] text-wise-200 sm:text-[11px]">
                        <span class="h-px w-8 bg-wise-300" aria-hidden="true"></span>
                        {{ $slide['kicker'] }}
                    </p>

                    @if ($index === 0)
                        <h1 class="mt-5 max-w-3xl font-display text-[2.65rem] font-extrabold leading-[1.02] tracking-tight text-white sm:text-5xl lg:text-[3.75rem] xl:text-[4rem]">
                            {{ $slide['title'] }}<br>
                            <span class="text-wise-300">{{ $slide['accent'] }}</span>
                        </h1>
                    @else
                        <h2 class="mt-5 max-w-3xl font-display text-[2.65rem] font-extrabold leading-[1.02] tracking-tight text-white sm:text-5xl lg:text-[3.75rem] xl:text-[4rem]">
                            {{ $slide['title'] }}<br>
                            <span class="text-wise-300">{{ $slide['accent'] }}</span>
                        </h2>
                    @endif

                    <p class="mt-5 max-w-xl text-base leading-7 text-white/75 sm:text-lg">{{ $slide['description'] }}</p>

                    <div class="mt-7 flex flex-col items-start gap-4 sm:flex-row sm:items-center sm:gap-6">
                        <a href="{{ $slide['cta']['href'] }}" class="inline-flex min-h-12 items-center justify-center gap-2 rounded-xl bg-wise-400 px-6 py-3 font-display text-sm font-bold text-navy-950 shadow-wise transition hover:-translate-y-0.5 hover:bg-wise-300 focus:outline-none focus:ring-2 focus:ring-wise-200 focus:ring-offset-2 focus:ring-offset-navy-950 sm:text-base">
                            {{ $slide['cta']['label'] }}
                            <x-icon name="arrow-right" class="h-4 w-4" />
                        </a>
                        @if (isset($slide['secondary']))
                            <a href="{{ $slide['secondary']['href'] }}" class="group inline-flex items-center gap-2 py-2 text-sm font-bold text-white/85 transition hover:text-white sm:text-base">
                                {{ $slide['secondary']['label'] }}
                                <x-icon name="arrow-right" class="h-4 w-4 transition-transform group-hover:translate-x-1" />
                            </a>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <div class="absolute inset-x-0 bottom-0 z-10 bg-gradient-to-t from-navy-950/95 to-transparent pt-12">
        <div class="container-site pb-6">
            <div class="flex items-end justify-between gap-5 border-t border-white/20 pt-4">
                <div class="flex min-w-0 flex-1 items-end gap-3 sm:gap-6">
                    @foreach ($slides as $index => $slide)
                        <button
                            type="button"
                            @click="go({{ $index }})"
                            class="group min-w-0 flex-1 text-left"
                            :aria-current="active === {{ $index }} ? 'true' : 'false'"
                            aria-label="Show {{ $slide['label'] }} slide"
                        >
                            <span class="hidden text-[10px] font-bold uppercase tracking-[0.18em] transition sm:block" :class="active === {{ $index }} ? 'text-white' : 'text-white/40 group-hover:text-white/70'">
                                {{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }} / {{ $slide['label'] }}
                            </span>
                            <span class="mt-2 block h-0.5 overflow-hidden bg-white/20">
                                <span
                                    class="block h-full origin-left bg-wise-300 transition-transform duration-500"
                                    :class="active === {{ $index }} ? 'scale-x-100' : 'scale-x-0'"
                                ></span>
                            </span>
                        </button>
                    @endforeach
                </div>

                <div class="flex shrink-0 items-center gap-2">
                    <button type="button" @click="previous()" class="grid h-10 w-10 place-items-center rounded-full border border-white/25 text-white transition hover:border-wise-300 hover:bg-wise-300 hover:text-navy-950" aria-label="Previous slide">
                        <x-icon name="arrow-left" class="h-4 w-4" />
                    </button>
                    <button type="button" @click="toggle()" data-slider-toggle class="grid h-10 w-10 place-items-center rounded-full border border-white/25 text-white transition hover:border-wise-300 hover:bg-wise-300 hover:text-navy-950" :aria-label="paused ? 'Play slider' : 'Pause slider'">
                        <span x-show="!paused" aria-hidden="true" class="flex gap-0.5"><span class="h-3 w-0.5 bg-current"></span><span class="h-3 w-0.5 bg-current"></span></span>
                        <span x-cloak x-show="paused" aria-hidden="true" class="ml-0.5 block h-0 w-0 border-y-[6px] border-l-[9px] border-y-transparent border-l-current"></span>
                    </button>
                    <button type="button" @click="next()" class="grid h-10 w-10 place-items-center rounded-full border border-white/25 text-white transition hover:border-wise-300 hover:bg-wise-300 hover:text-navy-950" aria-label="Next slide">
                        <x-icon name="arrow-right" class="h-4 w-4" />
                    </button>
                </div>
            </div>
        </div>
    </div>
</section>