<div>
    @if(Auth::user()->signal_status=='on')
    <div x-data="{ show: true }"
         x-show="show"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 transform translate-y-2"
         x-transition:enter-end="opacity-100 transform translate-y-0"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100 transform translate-y-0"
         x-transition:leave-end="opacity-0 transform translate-y-2"
         class="relative bg-gradient-to-r from-red-50 to-red-100 dark:from-red-950/40 dark:to-red-900/30 border-l-4 border-red-500 dark:border-red-400 rounded-xl p-5 mb-6 shadow-lg backdrop-blur-sm">
        <div class="flex items-start justify-between">
            <div class="flex items-start space-x-4">
                <div class="flex-shrink-0">
                    <div class="w-10 h-10 bg-red-500/10 dark:bg-red-400/15 rounded-full flex items-center justify-center">
                        <i data-lucide="alert-triangle" class="w-5 h-5 text-red-600 dark:text-red-400"></i>
                    </div>
                </div>
                <div class="flex-1 min-w-0">
                    <h4 class="text-sm font-semibold text-red-800 dark:text-red-200 mb-1">Signal Required</h4>
                    <p class="text-sm text-red-700 dark:text-red-300 leading-relaxed mb-3">
                        You are required to buy <span class="font-semibold text-red-800 dark:text-red-200">{{ Auth::user()->user_signal }}</span>.
                    </p>
                    <a href="{{ route('deposits') }}"
                       class="inline-flex items-center space-x-2 px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white text-sm font-medium rounded-lg transition-all duration-200 shadow-md hover:shadow-lg">
                        <i data-lucide="shopping-cart" class="w-4 h-4"></i>
                        <span>Buy Now</span>
                    </a>
                </div>
            </div>
            <button @click="show = false"
                    class="flex-shrink-0 ml-4 p-2 text-red-400 hover:text-red-600 dark:text-red-500 dark:hover:text-red-300 hover:bg-red-500/10 dark:hover:bg-red-400/15 rounded-lg transition-all duration-200">
                <i data-lucide="x" class="w-4 h-4"></i>
            </button>
        </div>
    </div>
    @endif
</div>
