@props(['slides', 'heading' => null, 'subheading' => null, 'ctaLabel' => null, 'ctaHref' => null])

@if ($slides->isNotEmpty())
    <section
        x-data="{
            active: 0,
            count: {{ $slides->count() }},
            names: {{ Illuminate\Support\Js::from($slides->pluck('name')) }},
            paused: false,
            timer: null,
            start() {
                this.timer = setInterval(() => { if (! this.paused) this.next(); }, 5500);
            },
            next() { this.active = (this.active + 1) % this.count; },
            prev() { this.active = (this.active - 1 + this.count) % this.count; },
        }"
        x-init="start()"
        @mouseenter="paused = true"
        @mouseleave="paused = false"
        class="relative w-full h-[52vh] min-h-[380px] sm:h-[62vh] sm:min-h-[440px] lg:h-[78vh] lg:max-h-[760px] overflow-hidden bg-gray-900"
    >
        @foreach ($slides as $index => $slide)
            <div
                x-show="active === {{ $index }}"
                x-transition:enter="transition ease-out duration-700"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
                x-transition:leave="transition ease-in duration-500"
                x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0"
                class="absolute inset-0"
                style="display: none;"
            >
                @if ($slide->picture())
                    <img
                        src="{{ $slide->picture()->url() }}"
                        alt="{{ $slide->name }}"
                        class="h-full w-full object-cover"
                        @if ($index === 0) fetchpriority="high" @else loading="lazy" @endif
                    >
                @else
                    <div class="h-full w-full bg-gradient-to-br from-gray-700 to-gray-900"></div>
                @endif

                <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-black/10"></div>

                @unless ($heading)
                    <div class="absolute inset-x-0 bottom-0 px-6 pb-8 sm:px-10 sm:pb-12 lg:px-16 lg:pb-16">
                        <div class="max-w-7xl mx-auto">
                            <h2 class="text-white text-xl sm:text-3xl lg:text-4xl font-semibold tracking-tight drop-shadow-sm max-w-2xl">
                                {{ $slide->name }}
                            </h2>
                        </div>
                    </div>
                @endunless
            </div>
        @endforeach

        @if ($heading)
            <div class="absolute inset-0 flex items-center">
                <div class="max-w-7xl w-full mx-auto px-6 sm:px-10 lg:px-16">
                    <div class="max-w-2xl">
                        <p class="text-amber-400 font-semibold text-sm sm:text-base tracking-wide uppercase mb-3 drop-shadow-sm" x-text="'{{ __('Featuring') }} — ' + names[active]"></p>
                        <h1 class="text-white text-3xl sm:text-5xl lg:text-6xl font-bold tracking-tight drop-shadow-md">
                            {{ $heading }}
                        </h1>
                        @if ($subheading)
                            <p class="mt-5 text-gray-100 text-base sm:text-lg max-w-lg drop-shadow-sm">
                                {{ $subheading }}
                            </p>
                        @endif
                        @if ($ctaLabel && $ctaHref)
                            <a
                                href="{{ $ctaHref }}"
                                class="mt-8 inline-flex items-center px-8 py-3.5 bg-amber-500 hover:bg-amber-400 border border-transparent rounded-md font-semibold text-base text-gray-900 shadow-lg shadow-amber-500/20 transition"
                            >
                                {{ $ctaLabel }}
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        @endif

        @if ($slides->count() > 1)
            <button
                type="button"
                @click="prev()"
                aria-label="{{ __('Previous slide') }}"
                class="absolute left-3 top-1/2 -translate-y-1/2 flex items-center justify-center h-9 w-9 sm:h-11 sm:w-11 rounded-full bg-black/30 text-white backdrop-blur-sm hover:bg-black/50 transition focus:outline-none focus:ring-2 focus:ring-white/70"
            >
                <svg class="h-5 w-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.5 15L7.5 10L12.5 5" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
            </button>
            <button
                type="button"
                @click="next()"
                aria-label="{{ __('Next slide') }}"
                class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center justify-center h-9 w-9 sm:h-11 sm:w-11 rounded-full bg-black/30 text-white backdrop-blur-sm hover:bg-black/50 transition focus:outline-none focus:ring-2 focus:ring-white/70"
            >
                <svg class="h-5 w-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.5 15L12.5 10L7.5 5" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
            </button>

            <div class="absolute inset-x-0 bottom-3 sm:bottom-4 flex items-center justify-center gap-2">
                @foreach ($slides as $index => $slide)
                    <button
                        type="button"
                        @click="active = {{ $index }}"
                        aria-label="{{ __('Go to slide') }} {{ $index + 1 }}"
                        class="h-1.5 rounded-full transition-all duration-300"
                        :class="active === {{ $index }} ? 'w-6 bg-white' : 'w-1.5 bg-white/50 hover:bg-white/75'"
                    ></button>
                @endforeach
            </div>
        @endif
    </section>
@endif