@extends('front.layouts.app')

@section('title', $blog->title . ' - Astrotalk Blog')

@section('content')
    <div class="max-w-7xl mx-auto px-6 py-12">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12">
            <!-- Main Content -->
            <div class="lg:col-span-8">
                <nav class="flex mb-8 text-sm text-slate-500" aria-label="Breadcrumb">
                    <ol class="inline-flex items-center space-x-1 md:space-x-3">
                        <li class="inline-flex items-center">
                            <a href="{{ route('home') }}"
                                class="hover:text-white flex items-center gap-1 transition-colors">
                                <i data-lucide="home" class="w-3.5 h-3.5"></i>
                                Home
                            </a>
                        </li>
                        <li>
                            <div class="flex items-center">
                                <i data-lucide="chevron-right" class="w-4 h-4 text-slate-600"></i>
                                <span class="ml-1 md:ml-2">Blog</span>
                            </div>
                        </li>
                    </ol>
                </nav>

                <article class="space-y-8">
                    <h1 class="text-4xl md:text-5xl font-black text-white leading-tight">
                        {{ $blog->title }}
                    </h1>

                    <div
                        class="flex flex-wrap items-center gap-6 text-slate-400 text-sm font-medium py-6 border-y border-white/5">
                        <div class="flex items-center gap-2">
                            <i data-lucide="calendar" class="w-4 h-4 text-yellow-500"></i>
                            {{ $blog->published_at ? $blog->published_at->format('M d, Y') : $blog->created_at->format('M d, Y') }}
                        </div>
                        <div class="flex items-center gap-2">
                            <i data-lucide="user" class="w-4 h-4 text-blue-500"></i>
                            Astrotalk Expert
                        </div>
                        <div class="flex items-center gap-2">
                            <i data-lucide="clock" class="w-4 h-4 text-emerald-500"></i>
                            5 min read
                        </div>
                    </div>

                    @if($blog->image)
                        <div class="rounded-[2.5rem] overflow-hidden shadow-2xl shadow-blue-500/10 border border-white/5">
                            <img src="{{ asset('storage/' . $blog->image) }}" alt="{{ $blog->title }}" class="w-full h-auto">
                        </div>
                    @endif

                    <div class="prose prose-invert prose-lg max-w-none text-slate-300 leading-relaxed font-medium">
                        {!! $blog->content !!}
                    </div>
                </article>

                <!-- Share Section -->
                <div class="mt-16 p-8 glass rounded-[2rem] flex flex-col md:flex-row items-center justify-between gap-6">
                    <div>
                        <h3 class="text-xl font-bold text-white mb-1">Enjoyed this article?</h3>
                        <p class="text-slate-400 text-sm">Share it with your friends and family.</p>
                    </div>
                    <div class="flex gap-4">
                        <button
                            class="w-12 h-12 rounded-2xl bg-white/5 flex items-center justify-center hover:bg-blue-600 transition-all group">
                            <i data-lucide="facebook" class="w-5 h-5 text-slate-400 group-hover:text-white"></i>
                        </button>
                        <button
                            class="w-12 h-12 rounded-2xl bg-white/5 flex items-center justify-center hover:bg-sky-400 transition-all group">
                            <i data-lucide="twitter" class="w-5 h-5 text-slate-400 group-hover:text-white"></i>
                        </button>
                        <button
                            class="w-12 h-12 rounded-2xl bg-white/5 flex items-center justify-center hover:bg-emerald-500 transition-all group">
                            <i data-lucide="message-circle" class="w-5 h-5 text-slate-400 group-hover:text-white"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="lg:col-span-4 space-y-8">
                <!-- Recent Posts -->
                <div class="glass rounded-[2rem] p-8">
                    <h3 class="text-xl font-bold text-white mb-6">Recent Articles</h3>
                    <div class="space-y-6">
                        @foreach($recentBlogs as $recent)
                            <a href="{{ route('blog.show', $recent->slug) }}" class="flex gap-4 group">
                                @if($recent->image)
                                    <div
                                        class="w-20 h-20 rounded-2xl overflow-hidden flex-shrink-0 border border-white/10 group-hover:border-yellow-500/50 transition-colors">
                                        <img src="{{ asset('storage/' . $recent->image) }}" class="w-full h-full object-cover">
                                    </div>
                                @endif
                                <div class="flex-1">
                                    <h4
                                        class="text-white font-bold text-sm line-clamp-2 group-hover:text-yellow-500 transition-colors">
                                        {{ $recent->title }}</h4>
                                    <p class="text-[10px] text-slate-500 uppercase font-black tracking-widest mt-2">
                                        {{ $recent->published_at ? $recent->published_at->format('M d, Y') : $recent->created_at->format('M d, Y') }}
                                    </p>
                                </div>
                            </a>
                        @endforeach
                    </div>
                </div>

                <!-- CTA Card -->
                <div
                    class="glass rounded-[2rem] p-8 bg-gradient-to-br from-indigo-600/20 to-indigo-900/20 border-indigo-500/20 relative overflow-hidden group">
                    <div
                        class="absolute -right-10 -bottom-10 w-40 h-40 bg-indigo-500/10 blur-[50px] rounded-full group-hover:scale-150 transition-all duration-1000">
                    </div>

                    <h3 class="text-2xl font-bold text-white mb-4 relative z-10">Get Expert Advice</h3>
                    <p class="text-indigo-200/70 text-sm mb-6 relative z-10">Connect with our top astrologers for
                        personalized insights and guidance.</p>
                    <a href="{{ route('home') }}"
                        class="inline-block px-8 py-3 bg-indigo-600 hover:bg-indigo-500 text-white font-bold rounded-xl transition-all shadow-xl shadow-indigo-600/20 relative z-10">
                        Consult Now
                    </a>
                </div>
            </div>
        </div>
    </div>
@endsection