@props(['user'])

@php
 $staffColor = $user->permission?->staff_color ?? '#eeb425';
 $rankName = $user->permission?->rank_name ?? 'Staff';
@endphp

<style>
 @keyframes sparkle {
 0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
 50% { opacity: 1; transform: scale(1) rotate(180deg); }
 }
 @keyframes shimmer {
 0% { background-position: -200% center; }
 100% { background-position: 200% center; }
 }
 .sparkle-effect {
 position: absolute;
 width: 4px;
 height: 4px;
 background: white;
 border-radius: 50%;
 animation: sparkle 2s infinite;
 }
 .shimmer-text {
 background: linear-gradient(90deg, {{ $staffColor }}, white, {{ $staffColor }});
 background-size: 200% auto;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 animation: shimmer 3s linear infinite;
 }
</style>

<div class="group relative bg-white dark:bg-gray-800 rounded-2xl overflow-hidden border-2 transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl cursor-pointer"
 style="border-color: {{ $staffColor }}40; box-shadow: 0 4px 15px {{ $staffColor }}10;">
 <div class="absolute inset-0 bg-gradient-to-br from-white via-gray-50 to-gray-100 dark:from-gray-800 dark:via-gray-800 dark:to-gray-900 opacity-50"></div>
 
 @php
 $sparklePositions = [
 ['top' => '10%', 'left' => '15%', 'delay' => '0s'],
 ['top' => '20%', 'right' => '10%', 'delay' => '0.5s'],
 ['top' => '60%', 'left' => '5%', 'delay' => '1s'],
 ['top' => '70%', 'right' => '15%', 'delay' => '1.5s'],
 ];
 @endphp
 
 @foreach($sparklePositions as $pos)
 <div class="sparkle-effect" 
 style="{{ $pos['top'] }}; {{ $pos['left'] ?? '' }}; {{ $pos['right'] ?? '' }}; animation-delay: {{ $pos['delay'] }}; box-shadow: 0 0 6px {{ $staffColor }};">
 </div>
 @endforeach
 
 <div class="relative p-5 flex flex-col items-center text-center">
 <div class="relative mb-3">
 <div class="w-22 h-22 rounded-full overflow-hidden border-4 transition-all duration-300 group-hover:scale-110 group-hover:rotate-3" 
 style="border-color: {{ $staffColor }}; box-shadow: 0 0 15px {{ $staffColor }}50, inset 0 0 15px {{ $staffColor }}20;">
 <img style="image-rendering: pixelated;"
 src="{{ setting('avatar_imager') }}{{ $user->look }}&direction=3&head_direction=3&gesture=sml&action=wlk%2Cwav&size=l&img_format=gif&size=n"
 alt="{{ $user->username }}"
 class="w-full h-full object-cover">
 </div>
 @if($user->online)
 <div class="absolute bottom-0 right-0 w-4 h-4 rounded-full border-2 border-white dark:border-gray-800 bg-green-500 animate-pulse"
 style="box-shadow: 0 0 8px #22c55e;"></div>
 @endif
 </div>

 <a href="{{ route('profile.show', $user->username) }}" class="block group/link">
 <h3 class="text-lg font-extrabold truncate transition-all duration-300 group-hover/link:scale-105 shimmer-text">
 {{ $user->username }}
 </h3>
 </a>
 
 <div class="mt-1.5 px-3 py-0.5 rounded-full text-xs font-bold uppercase tracking-wide" 
 style="background-color: {{ $staffColor }}15; color: {{ $staffColor }}; border: 1px solid {{ $staffColor }}30;">
 {{ $rankName }}
 </div>
 
 <p class="text-sm text-gray-500 dark:text-gray-400 mt-3 line-clamp-2 min-h-[2.5rem] px-2">
 {{ $user->motto ?: __('No motto set') }}
 </p>
 
 <div class="mt-3 pt-3 border-t border-gray-100 dark:border-gray-700 w-full flex items-center justify-center gap-2 text-xs">
 <span class="flex items-center gap-1.5 font-medium {{ $user->online ? 'text-green-500' : 'text-gray-400' }}">
 <span class="w-2 h-2 rounded-full {{ $user->online ? 'bg-green-500 animate-pulse' : 'bg-gray-400' }}"></span>
 {{ $user->online ? __('Online') : __('Offline') }}
 </span>
 </div>
 </div>
</div>