@foreach($astrologers as $astrologer)
    <div class="glass relative group overflow-hidden rounded-[2rem] hover:scale-[1.02] transition-all duration-300">
        <div
            class="absolute inset-0 bg-gradient-to-b from-transparent via-slate-900/50 to-slate-900 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        </div>

        <div class="absolute top-4 right-4 z-20">
            <button type="button"
                onclick="event.preventDefault(); event.stopPropagation(); toggleFavourite({{ $astrologer->id }})"
                id="fav-btn-{{ $astrologer->id }}"
                class="w-10 h-10 rounded-full flex items-center justify-center transition-all bg-slate-900/50 backdrop-blur-md border border-white/10 hover:scale-110 group/heart">
                <i data-lucide="heart"
                    class="w-5 h-5 transition-colors {{ in_array($astrologer->id, $favouriteIds ?? []) ? 'text-red-500 fill-red-500' : 'text-white group-heart:text-red-400' }}"></i>
            </button>
        </div>

        <div class="p-6 relative z-10">
            <div class="flex items-center gap-4 mb-6">
                <div class="relative">
                    <div
                        class="w-16 h-16 rounded-full overflow-hidden border-2 {{ $astrologer->isOnline() ? 'border-green-500 shadow-lg shadow-green-500/20' : 'border-yellow-500 shadow-lg shadow-yellow-500/20' }}">
                        <img src="{{ $astrologer->avatar ?? 'https://ui-avatars.com/api/?name=' . urlencode($astrologer->name) . '&background=1e293b&color=eab308' }}"
                            alt="{{ $astrologer->name }}" class="w-full h-full object-cover">
                    </div>
                    <div class="absolute -bottom-1 -right-1 w-6 h-6 rounded-full bg-slate-900 flex items-center justify-center border border-slate-700"
                        title="{{ $astrologer->isOnline() ? 'Online' : 'Offline' }}">
                        <i data-lucide="circle"
                            class="w-3 h-3 {{ $astrologer->isOnline() ? 'text-green-500 fill-green-500' : 'text-slate-500 fill-slate-500' }}"></i>
                    </div>
                </div>
                <div>
                    <h3 class="font-bold text-white text-lg leading-tight">{{ $astrologer->name }}</h3>
                    <div class="flex items-center gap-1 text-yellow-500 text-xs font-bold mt-1">
                        <i data-lucide="star" class="w-3 h-3 fill-current"></i>
                        <span>{{ number_format($astrologer->average_rating, 1) }}</span>
                        <span class="text-slate-500 font-normal">({{ $astrologer->total_reviews ?? 0 }}
                            reviews)</span>
                    </div>
                </div>
            </div>

            <div class="space-y-3 mb-6">
                <div class="space-y-1 mb-2">
                    @if($astrologer->scategories && $astrologer->scategories->count() > 0)
                        <div class="flex items-center gap-2 text-xs text-slate-300">
                            <i data-lucide="award" class="w-3 h-3 text-purple-400"></i>
                            <span class="truncate">
                                {{ $astrologer->scategories->pluck('name')->take(2)->implode(', ') }}
                            </span>
                        </div>
                    @endif

                    @if($astrologer->skills && $astrologer->skills->count() > 0)
                        <div class="flex items-center gap-2 text-xs text-slate-400">
                            <i data-lucide="sparkles" class="w-3 h-3 text-blue-400"></i>
                            <span class="truncate">
                                {{ $astrologer->skills->pluck('name')->take(2)->implode(', ') }}
                            </span>
                        </div>
                    @endif

                    @if((!$astrologer->scategories || $astrologer->scategories->isEmpty()) && (!$astrologer->skills || $astrologer->skills->isEmpty()))
                        <div class="flex items-center gap-2 text-xs text-slate-300">
                            <i data-lucide="award" class="w-3 h-3 text-purple-400"></i>
                            <span class="truncate">Vedic Astrology</span>
                        </div>
                    @endif
                </div>
                <div class="flex items-center gap-2 text-xs text-slate-300">
                    <i data-lucide="languages" class="w-3 h-3 text-emerald-400"></i>
                    <span
                        class="truncate">{{ $astrologer->languages ? $astrologer->languages->pluck('name')->take(2)->implode(', ') : 'Hindi, English' }}</span>
                </div>
                <div class="flex items-center gap-2 text-xs text-slate-300">
                    <i data-lucide="briefcase" class="w-3 h-3 text-blue-400"></i>
                    <span>{{ $astrologer->astrologerDetail->experience_years ?? 0 }} Years Exp.</span>
                </div>
            </div>

            <div class="flex items-center justify-between pt-4 border-t border-white/10">
                <div>
                    <p class="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Starting at
                    </p>
                    <p class="text-sm font-bold text-white">
                        ₹{{ $astrologer->astrologerDetail->price_chat ?? 0 }}/min</p>
                </div>
                <a href="{{ route('astrologer.public_profile', $astrologer->slug) }}"
                    class="bg-yellow-500 hover:bg-yellow-400 text-slate-900 text-xs font-bold px-4 py-2 rounded-xl transition-colors">
                    Profile
                </a>
            </div>
        </div>
    </div>
@endforeach