@extends('front.layouts.app')

@section('content')
    <div class="max-w-7xl mx-auto px-6 py-20">
        <!-- Banner Slider Section -->
        @if(isset($banners) && $banners->count() > 0)
            <div class="mb-24" x-data="{ 
                                                                                                                    active: 0, 
                                                                                                                    loop() {
                                                                                                                        setInterval(() => {
                                                                                                                            this.active = (this.active + 1) % {{ $banners->count() }};
                                                                                                                        }, 5000)
                                                                                                                    } 
                                                                                                                }"
                x-init="loop()">
                <div class="relative h-[300px] md:h-[500px] rounded-[3rem] overflow-hidden glass border-white/10 group">
                    @foreach($banners as $index => $banner)
                        <div x-show="active === {{ $index }}" x-transition:enter="transition ease-out duration-1000"
                            x-transition:enter-start="opacity-0 scale-105" x-transition:enter-end="opacity-100 scale-100"
                            class="absolute inset-0">
                            <a href="{{ $banner->link_url ?? '#' }}" class="block w-full h-full">
                                <img src="{{ asset('storage/' . $banner->image_path) }}" class="w-full h-full object-cover">
                                <div class="absolute inset-0 bg-gradient-to-t from-slate-950/80 via-transparent to-transparent">
                                </div>
                            </a>
                        </div>
                    @endforeach

                    <!-- Dots -->
                    <div class="absolute bottom-8 left-1/2 -translate-x-1/2 flex gap-3">
                        @foreach($banners as $index => $banner)
                            <button @click="active = {{ $index }}" class="h-1.5 rounded-full transition-all duration-300"
                                :class="active === {{ $index }} ? 'w-8 bg-yellow-500' : 'w-2 bg-white/20 hover:bg-white/40'"></button>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif

        <div class="text-center space-y-8 mb-24">
            <h1 class="text-6xl md:text-8xl font-black text-white tracking-tighter leading-none">
                Unlock Your <span
                    class="bg-gradient-to-r from-yellow-500 to-amber-200 bg-clip-text text-transparent">Destiny</span>
            </h1>
            <p class="text-xl text-slate-400 max-w-2xl mx-auto leading-relaxed">
                Connect with the world's most trusted astrologers for genuine guidance, spiritual insights, and
                life-changing predictions.
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <!-- User Registration Card -->
            <a href="{{ route('register') }}"
                class="glass group p-8 rounded-[2rem] hover:bg-white/5 transition-all duration-500">
                <div
                    class="w-16 h-16 bg-blue-600/10 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                    <i data-lucide="user-plus" class="text-blue-500 w-8 h-8"></i>
                </div>
                <h3 class="text-2xl font-bold text-white mb-2">Join as User</h3>
                <p class="text-slate-400 text-sm">Consult with top astrologers and get personalized predictions.</p>
            </a>

            <!-- Astrologer Registration Card -->
            <a href="{{ route('astrologer.register') }}"
                class="glass group p-8 rounded-[2rem] hover:bg-white/5 transition-all duration-500 border-yellow-500/20">
                <div
                    class="w-16 h-16 bg-yellow-500/10 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                    <i data-lucide="sparkles" class="text-yellow-500 w-8 h-8"></i>
                </div>
                <h3 class="text-2xl font-bold text-white mb-2">Join as Astrologer</h3>
                <p class="text-slate-400 text-sm">Grow your practice and guide thousands of people worldwide.</p>
            </a>

            <!-- Categories (Demo) -->
            <div class="glass p-8 rounded-[2rem] border-white/5 opacity-50 col-span-1 md:col-span-2">
                <div class="w-16 h-16 bg-purple-600/10 rounded-2xl flex items-center justify-center mb-6">
                    <i data-lucide="layout-grid" class="text-purple-500 w-8 h-8"></i>
                </div>
                <h3 class="text-2xl font-bold text-white mb-2">Browse All</h3>
                <p class="text-slate-400 text-sm">Explore various categories of spiritual guidance.</p>
            </div>
        </div>
    </div>

    <!-- Our Astrologers Section -->
    @if(isset($astrologers) && count($astrologers) > 0)
        <div class="bg-yellow-400 py-20 relative overflow-hidden">
            <div class="max-w-7xl mx-auto px-6 text-center space-y-4 mb-12 relative z-10">
                <h2 class="text-3xl md:text-5xl font-black text-slate-900 uppercase tracking-tight">Our Astrologers</h2>
                <p class="text-slate-800 text-lg font-medium">13000+ Best Astrologers from India for Online Consultation</p>
            </div>

            <div class="max-w-7xl mx-auto px-6 relative" x-data="{
                                                                                                                scrollContainer: null,
                                                                                                                init() {
                                                                                                                    this.scrollContainer = this.$refs.container;
                                                                                                                },
                                                                                                                scrollLeft() {
                                                                                                                    this.scrollContainer.scrollBy({ left: -320, behavior: 'smooth' });
                                                                                                                },
                                                                                                                scrollRight() {
                                                                                                                    this.scrollContainer.scrollBy({ left: 320, behavior: 'smooth' });
                                                                                                                }
                                                                                                            }">

                <!-- Prev Button -->
                <button @click="scrollLeft()"
                    class="absolute left-2 top-1/2 -translate-y-1/2 z-20 w-12 h-12 bg-transparent border-2 border-slate-900/20 text-slate-900 rounded-full flex items-center justify-center hover:bg-slate-900 hover:text-white transition-all">
                    <i data-lucide="chevron-left" class="w-6 h-6"></i>
                </button>

                <!-- Next Button -->
                <button @click="scrollRight()"
                    class="absolute right-2 top-1/2 -translate-y-1/2 z-20 w-12 h-12 bg-transparent border-2 border-slate-900/20 text-slate-900 rounded-full flex items-center justify-center hover:bg-slate-900 hover:text-white transition-all">
                    <i data-lucide="chevron-right" class="w-6 h-6"></i>
                </button>

                <div x-ref="container" class="flex gap-6 overflow-x-auto scroll-smooth no-scrollbar py-8 px-4 snap-x">
                    @foreach($astrologers as $astrologer)
                        <a href="{{ route('astrologer.public_profile', $astrologer->slug) }}"
                            class="snap-center flex-shrink-0 w-72 bg-white rounded-3xl p-6 text-center shadow-xl hover:shadow-2xl transition-all transform hover:-translate-y-2 cursor-pointer group">
                            <div class="relative w-32 h-32 mx-auto mb-4 group-hover:scale-105 transition-transform">
                                <div class="w-full h-full rounded-full p-1 border-2 border-yellow-400 overflow-hidden">
                                    @if($astrologer->astrologerDetail && $astrologer->astrologerDetail->profile_pic)
                                        <img src="{{ asset('storage/' . $astrologer->astrologerDetail->profile_pic) }}"
                                            class="w-full h-full object-cover rounded-full">
                                    @else
                                        <div
                                            class="w-full h-full bg-slate-100 flex items-center justify-center text-slate-400 font-bold text-3xl">
                                            {{ substr($astrologer->name, 0, 1) }}
                                        </div>
                                    @endif
                                </div>
                                <button type="button"
                                    onclick="event.preventDefault(); event.stopPropagation(); toggleFavourite({{ $astrologer->id }})"
                                    id="fav-btn-{{ $astrologer->id }}"
                                    class="absolute top-0 right-0 w-8 h-8 rounded-full bg-white shadow-md border border-slate-100 flex items-center justify-center transition-all hover:scale-110 z-20">
                                    <i data-lucide="heart"
                                        class="w-4 h-4 {{ in_array($astrologer->id, $favouriteIds ?? []) ? 'text-red-500 fill-red-500' : 'text-slate-300' }}"></i>
                                </button>
                            </div>
                            <h3 class="text-xl font-bold text-slate-900 mb-1 group-hover:text-yellow-600 transition-colors">
                                {{ $astrologer->name }}
                            </h3>
                            <p class="text-sm text-slate-500 mb-4 font-medium">
                                @if($astrologer->scategories->count() > 0 || $astrologer->skills->count() > 0)
                                    {{ $astrologer->scategories->pluck('name')->concat($astrologer->skills->pluck('name'))->take(2)->implode(', ') }}
                                @elseif($astrologer->astrologerDetail && $astrologer->astrologerDetail->skill_names)
                                    {{ collect($astrologer->astrologerDetail->skill_names)->take(2)->implode(', ') }}
                                @else
                                    Vedic Astrology
                                @endif
                            </p>
                            <div class="flex flex-col items-center gap-1 mb-4">
                                <div class="flex items-center gap-1 text-yellow-600">
                                    <div class="flex gap-0.5">
                                        @for($i = 1; $i <= 5; $i++)
                                            <i data-lucide="star"
                                                class="w-3.5 h-3.5 {{ $i <= floor($astrologer->average_rating) ? 'fill-current' : '' }}"></i>
                                        @endfor
                                    </div>
                                    <span class="text-sm font-bold ml-1">{{ number_format($astrologer->average_rating, 1) }}</span>
                                </div>
                                <span
                                    class="text-[10px] text-slate-500 font-bold uppercase tracking-wider">({{ $astrologer->total_reviews }}
                                    Reviews)</span>
                            </div>
                            <span
                                class="inline-block px-6 py-2 bg-yellow-400 text-slate-900 text-xs font-black uppercase tracking-widest rounded-full opacity-0 group-hover:opacity-100 transition-opacity">View
                                Profile</span>
                        </a>
                    @endforeach
                </div>
            </div>
        </div>
    @endif
    <!-- Latest Blogs Section -->
    @if(isset($blogs) && count($blogs) > 0)
        <div class="max-w-7xl mx-auto px-6 py-24">
            <div class="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
                <div class="space-y-4">
                    <h2 class="text-4xl md:text-5xl font-black text-white tracking-tight">Latest from <span
                            class="text-yellow-500">Blog</span></h2>
                    <p class="text-slate-400 text-lg max-w-xl">Deep dive into the world of astrology, rituals, and spiritual
                        wellness with our expert articles.</p>
                </div>
                <a href="#"
                    class="px-8 py-4 bg-white/5 hover:bg-white/10 text-white font-bold rounded-2xl transition-all border border-white/10">
                    View All Posts
                </a>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                @foreach($blogs as $blog)
                    <a href="{{ route('blog.show', $blog->slug) }}" class="group block">
                        <div
                            class="glass rounded-[2.5rem] overflow-hidden transition-all duration-500 group-hover:translate-y-[-8px] group-hover:shadow-2xl group-hover:shadow-yellow-500/10 border-white/5">
                            <div class="relative h-64 overflow-hidden">
                                @if($blog->image)
                                    <img src="{{ asset('storage/' . $blog->image) }}"
                                        class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                                @else
                                    <div class="w-full h-full bg-slate-800 flex items-center justify-center">
                                        <i data-lucide="image" class="w-12 h-12 text-slate-600"></i>
                                    </div>
                                @endif
                                <div class="absolute top-6 left-6">
                                    <span
                                        class="px-4 py-2 bg-yellow-500 text-slate-900 text-xs font-black uppercase tracking-widest rounded-full shadow-lg">
                                        Astrology
                                    </span>
                                </div>
                            </div>
                            <div class="p-8">
                                <div class="flex items-center gap-4 mb-4 text-sm text-slate-500 font-medium">
                                    <span class="flex items-center gap-2">
                                        <i data-lucide="calendar" class="w-4 h-4"></i>
                                        {{ $blog->published_at ? $blog->published_at->format('M d, Y') : $blog->created_at->format('M d, Y') }}
                                    </span>
                                    <span class="w-1 h-1 bg-slate-700 rounded-full"></span>
                                    <span class="flex items-center gap-2">
                                        <i data-lucide="clock" class="w-4 h-4"></i>
                                        5 min read
                                    </span>
                                </div>
                                <h3
                                    class="text-2xl font-bold text-white mb-4 group-hover:text-yellow-500 transition-colors line-clamp-2 leading-snug">
                                    {{ $blog->title }}
                                </h3>
                                <p class="text-slate-400 text-sm leading-relaxed mb-6 line-clamp-3">
                                    {{ $blog->excerpt ?? Str::limit(strip_tags($blog->content), 120) }}
                                </p>
                                <div class="flex items-center gap-2 text-yellow-500 font-bold text-sm group/btn">
                                    Read Full Article
                                    <i data-lucide="arrow-right"
                                        class="w-4 h-4 transition-transform group-hover/btn:translate-x-1"></i>
                                </div>
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    @endif

    <!-- FAQ Section -->
    @if(isset($faqCategories) && $faqCategories->count() > 0)
        <div class="max-w-7xl mx-auto px-6 py-24 border-t border-white/5"
            x-data="{ activeCategory: {{ $faqCategories->first()->id }} }">
            <div class="text-center space-y-4 mb-20">
                <h2 class="text-4xl md:text-5xl font-black text-white tracking-tight">Got <span
                        class="text-yellow-500">Questions?</span></h2>
                <p class="text-slate-400 text-lg max-w-xl mx-auto">Find answers to common queries about our services, safety,
                    and astrology guidance.</p>
            </div>

            <!-- Category Tabs -->
            <div class="flex flex-wrap justify-center gap-3 mb-16">
                @foreach($faqCategories as $category)
                    <button @click="activeCategory = {{ $category->id }}"
                        :class="activeCategory === {{ $category->id }} ? 'bg-yellow-500 text-slate-900 border-yellow-500 shadow-xl shadow-yellow-500/20' : 'bg-white/5 text-slate-400 border-white/10 hover:bg-white/10'"
                        class="px-8 py-4 rounded-2xl text-sm font-bold border transition-all duration-300">
                        {{ $category->name }}
                    </button>
                @endforeach
            </div>

            <!-- FAQs Content Area -->
            <div class="max-w-4xl mx-auto">
                @foreach($faqCategories as $category)
                    <div x-show="activeCategory === {{ $category->id }}" x-transition:enter="transition ease-out duration-300"
                        x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0"
                        class="space-y-4" style="display: none;">

                        @forelse($category->faqs as $faq)
                            <div class="glass rounded-3xl overflow-hidden border-white/5 hover:border-white/10 transition-all"
                                x-data="{ open: false }">
                                <button @click="open = !open"
                                    class="w-full px-8 py-6 flex items-center justify-between text-left group">
                                    <span class="text-lg font-bold text-white group-hover:text-yellow-500 transition-colors">
                                        {{ $faq->question }}
                                    </span>
                                    <div class="w-8 h-8 rounded-xl bg-white/5 flex items-center justify-center transition-transform duration-300"
                                        :class="open ? 'rotate-180 bg-yellow-500/10 text-yellow-500' : 'text-slate-500'">
                                        <i data-lucide="chevron-down" class="w-5 h-5"></i>
                                    </div>
                                </button>

                                <div x-show="open" x-transition:enter="transition ease-out duration-200"
                                    x-transition:enter-start="opacity-0 -translate-y-2"
                                    x-transition:enter-end="opacity-100 translate-y-0" class="px-8 pb-8">
                                    <div class="h-px bg-white/5 mb-6"></div>
                                    <p class="text-slate-400 leading-relaxed font-medium">
                                        {{ $faq->answer }}
                                    </p>
                                </div>
                            </div>
                        @empty
                            <div class="text-center py-12 glass rounded-3xl opacity-50">
                                <p class="text-slate-500">No FAQs available in this category.</p>
                            </div>
                        @endforelse
                    </div>
                @endforeach
            </div>
        </div>
    @endif


    <style>
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
    </style>
    @push('scripts')
        <script>
            function toggleFavourite(astrologerId) {
                if (!{{ auth()->check() ? 'true' : 'false' }}) {
                    window.location.href = "{{ route('login') }}?redirect=" + encodeURIComponent(window.location.href);
                    return;
                }

                fetch(`{{ url('user/favourites') }}/${astrologerId}/toggle`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    }
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            const btn = document.getElementById(`fav-btn-${astrologerId}`);
                            // Lucide replaces <i> with <svg>, so we look for either
                            const icon = btn.querySelector('i, svg');

                            if (data.isFavourite) {
                                icon.classList.remove('text-slate-300', 'text-white');
                                icon.classList.add('text-red-500', 'fill-red-500');
                            } else {
                                icon.classList.remove('text-red-500', 'fill-red-500');
                                // Add back the default color based on where we are
                                icon.classList.add(btn.closest('.glass') ? 'text-white' : 'text-slate-300');
                            }
                        }
                    })
                    .catch(error => console.error('Error:', error));
            }
        </script>
    @endpush
@endsection