@extends('front.layouts.app')

@section('title', 'Pooja Services - Astrotalk')

@section('content')
    <div class="pt-32 pb-20 px-6">
        <div class="max-w-7xl mx-auto">
            <!-- Breadcrumbs -->
            <nav class="flex items-center gap-2 text-[10px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-8">
                <a href="{{ route('home') }}" class="hover:text-white transition-colors">Home</a>
                <i data-lucide="chevron-right" class="w-2.5 h-2.5"></i>
                <span class="text-slate-300">Ritual & Pooja Services</span>
            </nav>

            <!-- Header -->
            <div class="text-center mb-16">
                <h1 class="text-4xl md:text-5xl font-black text-white mb-6 tracking-tight">Ritual & Pooja Services</h1>
                <p class="text-slate-400 max-w-2xl mx-auto Leading-relaxed">Book sacred rituals, Vedic poojas, and spiritual
                    services performed by expert astrologers to bring harmony and prosperity to your life.</p>
            </div>

            <!-- Services Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                @forelse($services as $service)
                    <div
                        class="glass rounded-3xl overflow-hidden border border-white/5 flex flex-col group hover:border-purple-500/30 transition-all duration-500 hover:-translate-y-2">
                        <!-- Image -->
                        <div class="h-56 relative overflow-hidden">
                            @if($service->image)
                                <img src="{{ asset('storage/' . $service->image) }}" alt="{{ $service->name }}"
                                    class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
                            @else
                                <div class="w-full h-full bg-slate-800 flex items-center justify-center">
                                    <i data-lucide="sparkles" class="w-12 h-12 text-slate-700"></i>
                                </div>
                            @endif
                            <div
                                class="absolute inset-0 bg-gradient-to-t from-slate-950 via-transparent to-transparent opacity-60">
                            </div>
                            <div class="absolute bottom-4 left-6">
                                <span
                                    class="bg-purple-500/20 backdrop-blur-md text-purple-400 px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest border border-purple-500/30">
                                    Vedic Ritual
                                </span>
                            </div>
                        </div>

                        <!-- Content -->
                        <div class="p-8 flex-1 flex flex-col">
                            <h3 class="text-xl font-bold text-white mb-3 group-hover:text-purple-400 transition-colors">
                                {{ $service->name }}
                            </h3>
                            <p class="text-slate-400 text-sm line-clamp-3 mb-8 leading-relaxed">
                                {{ strip_tags($service->description) ?: 'Experience traditional Vedic rituals performed with precision and devotion by our expert priesthood and astrologers.' }}
                            </p>

                            <div class="mt-auto border-t border-white/5 pt-6 flex items-center justify-between">
                                <div class="flex items-center gap-2">
                                    <div class="flex -space-x-2">
                                        <div
                                            class="w-8 h-8 rounded-full border border-slate-950 bg-slate-800 flex items-center justify-center text-[10px] font-bold">
                                            A</div>
                                        <div
                                            class="w-8 h-8 rounded-full border border-slate-950 bg-slate-700 flex items-center justify-center text-[10px] font-bold">
                                            B</div>
                                        <div
                                            class="w-8 h-8 rounded-full border border-slate-950 bg-slate-600 flex items-center justify-center text-[10px] font-bold text-slate-400">
                                            +</div>
                                    </div>
                                    <span class="text-[10px] font-bold text-slate-500 uppercase tracking-tighter">Experts
                                        Available</span>
                                </div>

                                <a href="{{ route('pooja-services.show', $service->slug) }}"
                                    class="bg-white/5 hover:bg-purple-500 hover:text-white text-slate-300 px-5 py-2.5 rounded-xl text-xs font-bold transition-all border border-white/5">
                                    Book Now
                                </a>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-span-full py-20 text-center">
                        <p class="text-slate-500">No pooja services found at the moment.</p>
                    </div>
                @endforelse
            </div>

            <!-- Pagination -->
            <div class="mt-16">
                {{ $services->links() }}
            </div>
        </div>
    </div>
@endsection