@props([
    'slides' => [],
    'rotateMs' => 6000,
])

@php
    $slideCount = count($slides);
@endphp

@if ($slideCount === 0)
    @php return; @endphp
@endif

<div class="relative z-10 mt-auto flex w-full flex-1 flex-col items-center justify-center px-4 xl:px-8"
     x-data="{
        active: 0,
        total: {{ $slideCount }},
        progress: 0,
        timer: null,
        progressTimer: null,
        rotateMs: {{ $rotateMs }},
        startTimer() {
            this.stopTimer();
            this.progress = 0;
            if (this.total <= 1 || this.rotateMs <= 0) return;
            const step = (30 / this.rotateMs) * 100;
            this.progressTimer = setInterval(() => {
                this.progress = Math.min(this.progress + step, 100);
            }, 30);
            this.timer = setInterval(() => {
                this.active = (this.active + 1) % this.total;
                this.progress = 0;
            }, this.rotateMs);
        },
        stopTimer() {
            if (this.timer) clearInterval(this.timer);
            if (this.progressTimer) clearInterval(this.progressTimer);
            this.timer = null;
            this.progressTimer = null;
        },
        goTo(index) {
            this.active = index;
            this.startTimer();
        },
        init() {
            this.startTimer();
            this.$el.addEventListener('mouseenter', () => this.stopTimer());
            this.$el.addEventListener('mouseleave', () => this.startTimer());
        }
     }">
    <div class="w-full max-w-[28rem]">
        @foreach ($slides as $i => $slide)
            <div x-show="active === {{ $i }}"
                 x-transition:enter="transition duration-500 ease-out"
                 x-transition:enter-start="opacity-0 translate-y-3"
                 x-transition:enter-end="opacity-100 translate-y-0"
                 @if ($i > 0) x-cloak @endif
                 class="space-y-8 text-center">
                {{-- Illustration with soft accent glow behind it --}}
                <div class="relative flex justify-center">
                    <div aria-hidden="true"
                         class="absolute inset-0 -z-10 mx-auto h-full w-full max-w-[18rem] rounded-full opacity-70 blur-3xl xl:max-w-[20rem]"
                         style="background: radial-gradient(circle at 50% 50%, color-mix(in oklch, var(--accent) 38%, transparent) 0%, color-mix(in oklch, var(--accent) 12%, transparent) 45%, transparent 70%);"></div>

                    <div class="w-full max-w-[18rem] xl:max-w-[20rem]">
                        @include('dashboard::partials.illustrations.' . ($slide['illustration'] ?? 'analytics'))
                    </div>
                </div>

                <div class="space-y-4">
                    <h2 class="text-3xl font-bold leading-tight xl:text-4xl"
                        style="color: var(--accent);
                               text-shadow: 0 1px 24px color-mix(in oklch, var(--accent) 25%, transparent);">
                        {{ __($slide['title_key']) }}
                    </h2>
                    <p class="mx-auto max-w-[26rem] text-base leading-relaxed"
                       style="color: color-mix(in oklch, var(--foreground) 70%, transparent);">
                        {{ __($slide['desc_key']) }}
                    </p>
                </div>
            </div>
        @endforeach
    </div>

    {{-- Slide indicators --}}
    @if ($slideCount > 1)
        <div class="mt-14 flex items-center justify-center gap-3">
            @foreach ($slides as $i => $slide)
                <button type="button"
                        @click="goTo({{ $i }})"
                        aria-label="Slide {{ $i + 1 }}"
                        :class="active === {{ $i }} ? 'w-16 shadow-sm' : 'w-1.5 hover:w-3'"
                        :style="active === {{ $i }}
                                ? 'background-color: color-mix(in oklch, var(--accent) 22%, transparent);'
                                : 'background-color: color-mix(in oklch, var(--foreground) 12%, transparent);'"
                        class="relative h-1.5 overflow-hidden rounded-full transition-all duration-300">
                    <span x-show="active === {{ $i }}"
                          class="absolute inset-y-0 start-0 rounded-full"
                          :style="`width: ${progress}%;
                                   background: linear-gradient(90deg, var(--accent) 0%, color-mix(in oklch, var(--accent) 75%, var(--accent)) 100%);
                                   box-shadow: 0 0 8px color-mix(in oklch, var(--accent) 50%, transparent);`"></span>
                </button>
            @endforeach
        </div>
    @endif
</div>