@props(['items' => collect()])

@if($items->count())
<div class="relative overflow-hidden bg-gradient-to-l from-red-600 via-red-500 to-red-700 dark:from-red-700 dark:via-red-600 dark:to-red-800 text-white shadow-lg">
  <div class="container mx-auto flex items-center gap-4 py-2 px-4">
    
    {{-- 🔥 أيقونة العاجل --}}
    <div class="flex items-center gap-2 font-extrabold text-sm tracking-wide bg-white/20 px-3 py-1 rounded-full shadow-inner backdrop-blur-md">
      <i class="fa-solid fa-bolt-lightning text-yellow-300 animate-pulse"></i>
      <span>عـاجـل</span>
    </div>

    {{-- 📰 العناوين المتحركة --}}
    <div 
      x-data="{ i: 0, items: @js($items->map(fn($r)=>['t'=>$r->title, 'u'=>$r->url])) }"
      x-init="setInterval(() => i = (i + 1) % items.length, 4000)"
      class="relative flex-1 overflow-hidden text-sm"
    >
      <template x-if="items.length">
        <a 
          :href="items[i].u ?? '#'"
          class="block animate-marquee whitespace-nowrap hover:underline font-medium transition"
          x-text="items[i].t">
        </a>
      </template>
    </div>
  </div>

  {{-- 🎵 تأثير خفيف للحركة المستمرة --}}
  <style>
    @keyframes marquee {
      0%   { transform: translateX(100%); opacity: 0.4; }
      10%  { opacity: 1; }
      100% { transform: translateX(-100%); opacity: 0.4; }
    }
    .animate-marquee {
      animation: marquee 15s linear infinite;
    }
  </style>
</div>
@endif