<div class="overflow-hidden rounded-xl bg-white/40 shadow-lg ring-1 ring-black/5 dark:bg-neutral-950/40 backdrop-blur dark:ring-white/10">
    <div class="relative">
        {{-- Profile Banner Gradient --}}
        <div class="h-20 bg-gradient-to-br from-rose-500 via-rose-600 to-pink-600 dark:from-rose-700 dark:via-rose-800 dark:to-pink-800"></div>

        {{-- Avatar overlapping the banner --}}
        <div class="flex justify-center -mt-10">
            <div class="relative">
                <img class="h-20 w-20 rounded-full border-4 border-white dark:border-neutral-900 shadow-lg object-cover bg-white dark:bg-neutral-800"
                    src="{{ auth()->user()->getAvatar() }}"
                    alt="{{ auth()->user()->name }}">
                @if(auth()->user()->hasRole(\App\Enums\UserRole::SUPPORTER))
                    <span class="absolute -bottom-1 -right-1 flex h-7 w-7 items-center justify-center rounded-full bg-rose-600 text-white shadow-md ring-2 ring-white dark:ring-neutral-900"
                        data-te-toggle="tooltip"
                        title="Badge of appreciation for the horny people supporting us! :3">
                        <i class="fa-solid fa-heart text-[11px]"></i>
                    </span>
                @endif
            </div>
        </div>

        {{-- User Info --}}
        <div class="px-4 pb-4 pt-2 text-center">
            <h2 class="text-base font-bold text-gray-900 dark:text-gray-100 truncate">
                {{ auth()->user()->name }}
            </h2>
            <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
                Joined {{ auth()->user()->created_at->format('F Y') }}
            </p>
        </div>

        {{-- Quick Stats Row --}}
        <div class="grid grid-cols-4 border-t border-gray-200/60 dark:border-neutral-800/60">
            <div class="py-3 text-center hover:bg-gray-50/50 dark:hover:bg-neutral-900/30 transition-colors cursor-default">
                <div class="text-sm font-bold text-gray-800 dark:text-gray-200">
                    {{ number_format(auth()->user()->watched->count()) }}
                </div>
                <div class="text-[10px] font-medium uppercase tracking-wider text-gray-600 dark:text-gray-500">
                    Views
                </div>
            </div>
            <div class="py-3 text-center hover:bg-gray-50/50 dark:hover:bg-neutral-900/30 transition-colors cursor-default">
                <div class="text-sm font-bold text-gray-800 dark:text-gray-200">
                    {{ number_format(auth()->user()->commentCount()) }}
                </div>
                <div class="text-[10px] font-medium uppercase tracking-wider text-gray-600 dark:text-gray-500">
                    Cmts
                </div>
            </div>
            <div class="py-3 text-center hover:bg-gray-50/50 dark:hover:bg-neutral-900/30 transition-colors cursor-default">
                <div class="text-sm font-bold text-gray-800 dark:text-gray-200">
                    {{ number_format(auth()->user()->likes()) }}
                </div>
                <div class="text-[10px] font-medium uppercase tracking-wider text-gray-600 dark:text-gray-500">
                    Likes
                </div>
            </div>
            <div class="py-3 text-center hover:bg-gray-50/50 dark:hover:bg-neutral-900/30 transition-colors cursor-default">
                <div class="text-sm font-bold text-gray-800 dark:text-gray-200">
                    {{ number_format(auth()->user()->playlists->count()) }}
                </div>
                <div class="text-[10px] font-medium uppercase tracking-wider text-gray-600 dark:text-gray-500">
                    Lists
                </div>
            </div>
        </div>
    </div>
</div>