@php
    // CMS / Admin-Friendly Announcement Data Structure
    // Easily add, edit, or remove entries below:
    $announcements = [
        [
            'icon' => 'fa-bolt',
            'badge' => 'FLASH SALE',
            'text' => 'Up to 40% OFF on Noise Canceling Headphones & Smart Gadgets',
            'btn_text' => 'SHOP NOW',
            'btn_url' => '/category/electronics',
            'badge_color' => 'bg-amber-500 text-slate-950'
        ],
        [
            'icon' => 'fa-truck-fast',
            'badge' => 'FREE DELIVERY',
            'text' => 'Free Islandwide Express Delivery on All Orders Over LKR 10,000!',
            'btn_text' => 'EXPLORE',
            'btn_url' => '/category',
            'badge_color' => 'bg-emerald-500 text-white'
        ],
        [
            'icon' => 'fa-shield-halved',
            'badge' => 'WARRANTY',
            'text' => '100% Genuine Products with 1-Year Local Manufacturer Warranty',
            'btn_text' => 'DISCOVER',
            'btn_url' => '/category/watches',
            'badge_color' => 'bg-blue-500 text-white'
        ],
        [
            'icon' => 'fa-headset',
            'badge' => 'HOTLINE',
            'text' => 'Order Hotline: +94 11 234 5678 — 24/7 Dedicated Customer Care',
            'btn_text' => 'CONTACT US',
            'btn_url' => '/category',
            'badge_color' => 'bg-amber-400 text-slate-950'
        ]
    ];
@endphp

<!-- Sliding Ticker Announcement Bar -->
<div class="bg-noko-navydark text-white border-b border-slate-800 text-xs select-none sticky top-0 z-50 shadow-md"
     x-data="{
         currentIndex: 0,
         items: {{ json_encode($announcements) }},
         timer: null,
         interval: 5000,
         paused: false,
         next() {
             this.currentIndex = (this.currentIndex + 1) % this.items.length;
         },
         prev() {
             this.currentIndex = (this.currentIndex - 1 + this.items.length) % this.items.length;
         },
         startAutoPlay() {
             this.timer = setInterval(() => {
                 if (!this.paused) this.next();
             }, this.interval);
         },
         stopAutoPlay() {
             if (this.timer) clearInterval(this.timer);
         }
     }"
     x-init="startAutoPlay()"
     @mouseenter="paused = true"
     @mouseleave="paused = false">

    <div class="max-w-7xl mx-auto px-3 sm:px-6 h-9 flex items-center justify-between gap-2">
        
        <!-- Left Arrow Button -->
        <button @click="prev()" 
                title="Previous Announcement" 
                class="text-slate-400 hover:text-amber-400 p-1.5 rounded transition-colors focus:outline-none flex-shrink-0">
            <i class="fa-solid fa-chevron-left text-[11px]"></i>
        </button>

        <!-- Sliding Announcement Text Container -->
        <div class="flex-1 overflow-hidden relative h-full flex items-center justify-center">
            <template x-for="(item, index) in items" :key="index">
                <div x-show="currentIndex === index"
                     x-transition:enter="transition ease-out duration-300 transform"
                     x-transition:enter-start="opacity-0 translate-y-2"
                     x-transition:enter-end="opacity-100 translate-y-0"
                     x-transition:leave="transition ease-in duration-200 transform"
                     x-transition:leave-start="opacity-100 translate-y-0"
                     x-transition:leave-end="opacity-0 -translate-y-2"
                     class="absolute inset-0 flex items-center justify-center space-x-2 text-center px-2">
                    
                    <!-- Icon -->
                    <i class="fa-solid text-amber-400 text-xs hidden sm:inline-block" :class="item.icon"></i>
                    
                    <!-- Badge -->
                    <span class="text-[10px] font-black uppercase px-2 py-0.5 rounded shadow-sm flex-shrink-0" 
                          :class="item.badge_color" 
                          x-text="item.badge"></span>

                    <!-- Announcement Text -->
                    <span class="font-medium text-slate-200 truncate max-w-xs sm:max-w-md md:max-w-lg lg:max-w-2xl" 
                          x-text="item.text"></span>

                    <!-- Action Button -->
                    <a :href="item.btn_url" 
                       class="hidden md:inline-flex items-center space-x-1 bg-amber-500 hover:bg-amber-400 text-slate-950 font-black text-[10px] uppercase px-2.5 py-0.5 rounded transition-transform hover:scale-105 flex-shrink-0 ml-2 shadow-sm">
                        <span x-text="item.btn_text"></span>
                        <i class="fa-solid fa-arrow-right text-[9px]"></i>
                    </a>

                </div>
            </template>
        </div>

        <!-- Right Arrow Button -->
        <button @click="next()" 
                title="Next Announcement" 
                class="text-slate-400 hover:text-amber-400 p-1.5 rounded transition-colors focus:outline-none flex-shrink-0">
            <i class="fa-solid fa-chevron-right text-[11px]"></i>
        </button>

    </div>
</div>