@php
    // CMS / Admin-Friendly Hero Slider Data Structure
    $heroSlides = [
        [
            'tag' => 'MADE IN ITALY',
            'title' => 'The Signature Centerpiece',
            'subtitle' => 'Discover Italian luxury handbags & premium fashion accessories.',
            'image' => 'https://images.unsplash.com/photo-1548036328-c9fa89d128fa?q=80&w=1600&auto=format&fit=crop',
            'btn_text' => 'SHOP NOW',
            'btn_url' => '/category/handbags'
        ],
        [
            'tag' => 'PREMIUM TIMEPIECES',
            'title' => 'Elegance & Precision Craftsmanship',
            'subtitle' => 'Mastercrafted luxury watches designed for timeless style.',
            'image' => 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80&w=1600&auto=format&fit=crop',
            'btn_text' => 'EXPLORE WATCHES',
            'btn_url' => '/category/watches'
        ],
        [
            'tag' => 'NEXT-GEN AUDIO',
            'title' => 'Immersive Sound & Smart Electronics',
            'subtitle' => 'Elevate your sound experience with industry-leading noise canceling gear.',
            'image' => 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?q=80&w=1600&auto=format&fit=crop',
            'btn_text' => 'DISCOVER AUDIO',
            'btn_url' => '/category/electronics'
        ]
    ];
@endphp

<!-- Main Hero Slider Carousel -->
<section class="relative w-full overflow-hidden bg-slate-950 select-none"
         x-data="{
             currentSlide: 0,
             slides: {{ json_encode($heroSlides) }},
             timer: null,
             interval: 5000,
             paused: false,
             nextSlide() {
                 this.currentSlide = (this.currentSlide + 1) % this.slides.length;
             },
             prevSlide() {
                 this.currentSlide = (this.currentSlide - 1 + this.slides.length) % this.slides.length;
             },
             startTimer() {
                 this.timer = setInterval(() => {
                     if (!this.paused) this.nextSlide();
                 }, this.interval);
             },
             stopTimer() {
                 if (this.timer) clearInterval(this.timer);
             }
         }"
         x-init="startTimer()"
         @mouseenter="paused = true"
         @mouseleave="paused = false">

    <!-- Slider Container -->
    <div class="relative w-full h-[340px] md:h-[480px] lg:h-[520px]">
        
        <template x-for="(slide, index) in slides" :key="index">
            <div x-show="currentSlide === index"
                 x-transition:enter="transition ease-out duration-700 transform"
                 x-transition:enter-start="opacity-0 scale-105"
                 x-transition:enter-end="opacity-100 scale-100"
                 x-transition:leave="transition ease-in duration-500 transform"
                 x-transition:leave-start="opacity-100 scale-100"
                 x-transition:leave-end="opacity-0 scale-95"
                 class="absolute inset-0 w-full h-full bg-cover bg-center"
                 :style="`background-image: url('${slide.image}');`">
                
                <!-- Dark Vignette Gradient Overlay -->
                <div class="absolute inset-0 bg-gradient-to-r from-noko-navy/90 via-noko-navy/50 to-transparent"></div>

                <!-- Text Overlay Content -->
                <div class="max-w-7xl mx-auto h-full px-6 sm:px-12 flex items-center relative z-10">
                    <div class="max-w-xl space-y-4 text-white">
                        
                        <span x-text="slide.tag" 
                              class="inline-block bg-amber-500 text-slate-950 font-black text-[10px] sm:text-xs uppercase tracking-widest px-3 py-1 rounded shadow-md"></span>

                        <h2 x-text="slide.title" 
                            class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black leading-tight tracking-tight drop-shadow-md"></h2>

                        <p x-text="slide.subtitle" 
                           class="text-slate-200 text-xs sm:text-sm md:text-base font-normal leading-relaxed max-w-lg drop-shadow"></p>

                        <div class="pt-2">
                            <a :href="slide.btn_url" 
                               class="inline-flex items-center space-x-2 bg-gradient-to-r from-amber-500 to-amber-600 hover:from-amber-600 hover:to-amber-700 text-slate-950 font-black px-6 py-3 rounded-full text-xs sm:text-sm uppercase tracking-wider transition-all duration-300 shadow-xl hover:scale-105">
                                <span x-text="slide.btn_text"></span>
                                <i class="fa-solid fa-arrow-right text-xs"></i>
                            </a>
                        </div>

                    </div>
                </div>

            </div>
        </template>

        <!-- Left Navigation Arrow -->
        <button @click="prevSlide()" 
                title="Previous Slide" 
                class="absolute left-4 top-1/2 -translate-y-1/2 z-20 w-11 h-11 rounded-full bg-slate-950/40 hover:bg-slate-950/80 text-white border border-white/20 flex items-center justify-center backdrop-blur-sm transition-all hover:scale-110 focus:outline-none">
            <i class="fa-solid fa-chevron-left text-sm"></i>
        </button>

        <!-- Right Navigation Arrow -->
        <button @click="nextSlide()" 
                title="Next Slide" 
                class="absolute right-4 top-1/2 -translate-y-1/2 z-20 w-11 h-11 rounded-full bg-slate-950/40 hover:bg-slate-950/80 text-white border border-white/20 flex items-center justify-center backdrop-blur-sm transition-all hover:scale-110 focus:outline-none">
            <i class="fa-solid fa-chevron-right text-sm"></i>
        </button>

        <!-- Bottom Pagination Indicator Bars (Dash indicators like image 2) -->
        <div class="absolute bottom-5 left-1/2 -translate-x-1/2 z-20 flex items-center space-x-2">
            <template x-for="(slide, index) in slides" :key="index">
                <button @click="currentSlide = index"
                        :class="currentSlide === index ? 'w-8 bg-amber-500 shadow-lg' : 'w-2.5 bg-white/40 hover:bg-white/70'"
                        class="h-2 rounded-full transition-all duration-300 focus:outline-none"></button>
            </template>
        </div>

    </div>

</section>