@extends('frontend.layouts.app')

@section('content')
    <!-- Hero Section -->
    <section class="bg-gradient-to-r from-primary-800 to-primary-600 py-16">
        <div class="container">
            <div class="max-w-3xl mx-auto text-center text-white">
                <h1 class="text-4xl lg:text-5xl font-bold mb-4">Blog & Property Guide</h1>
                <p class="text-xl text-white/80">
                    Tips, guides, and insights for buying, selling, and renting properties in Varanasi.
                </p>
            </div>
        </div>
    </section>

    <!-- Blog Content -->
    <section class="section bg-gray-50">
        <div class="container">
            <div class="lg:flex gap-8">
                <!-- Main Content -->
                <div class="lg:flex-1">
                    <!-- Featured Post -->
                    @if (isset($featuredPost) && $featuredPost && !isset($currentCategory))
                        <a href="{{ url('/blog/' . $featuredPost->slug) }}" class="block card mb-8 overflow-hidden">
                            <div class="md:flex">
                                <div class="md:w-1/2">
                                    <div class="aspect-video md:aspect-auto md:h-full">
                                        @if ($featuredPost->featured_image_url)
                                            <img src="{{ $featuredPost->featured_image_url }}"
                                                alt="{{ $featuredPost->title }}" class="w-full h-full object-cover">
                                        @else
                                            <img src="https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=800&h=500&fit=crop"
                                                alt="{{ $featuredPost->title }}" class="w-full h-full object-cover">
                                        @endif
                                    </div>
                                </div>
                                <div class="md:w-1/2 p-6 md:p-8 flex flex-col justify-center">
                                    <span
                                        class="inline-block px-3 py-1 bg-accent-100 text-accent-700 text-sm font-semibold rounded-full mb-4 w-fit">Featured</span>
                                    <h2 class="text-2xl font-bold text-gray-900 mb-3 hover:text-primary-600">
                                        {{ $featuredPost->title }}</h2>
                                    <p class="text-gray-600 mb-4">{{ $featuredPost->excerpt_text }}</p>
                                    <div class="flex items-center gap-4 text-sm text-gray-500">
                                        <span>{{ $featuredPost->published_at?->format('M d, Y') }}</span>
                                        <span>•</span>
                                        <span>{{ $featuredPost->read_time ?? 5 }} min read</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    @endif

                    <!-- Posts Grid -->
                    @if ($posts->count() > 0)
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            @foreach ($posts as $post)
                                <a href="{{ url('/blog/' . $post->slug) }}" class="card block overflow-hidden">
                                    <div class="aspect-video">
                                        @if ($post->featured_image_url)
                                            <img src="{{ $post->featured_image_url }}" alt="{{ $post->title }}"
                                                class="w-full h-full object-cover">
                                        @else
                                            <img src="https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=600&h=400&fit=crop"
                                                alt="{{ $post->title }}" class="w-full h-full object-cover">
                                        @endif
                                    </div>
                                    <div class="p-5">
                                        @if ($post->category)
                                            <span
                                                class="text-xs font-semibold text-primary-600 uppercase tracking-wide">{{ $post->category->name }}</span>
                                        @endif
                                        <h3
                                            class="text-lg font-semibold text-gray-900 mt-2 mb-2 hover:text-primary-600 line-clamp-2">
                                            {{ $post->title }}</h3>
                                        <p class="text-gray-600 text-sm line-clamp-2 mb-4">{{ $post->excerpt_text }}</p>
                                        <div class="flex items-center justify-between text-sm text-gray-500">
                                            <span>{{ $post->published_at?->format('M d, Y') }}</span>
                                            <span>{{ $post->read_time ?? 5 }} min read</span>
                                        </div>
                                    </div>
                                </a>
                            @endforeach
                        </div>

                        <!-- Pagination -->
                        <div class="mt-10">
                            {{ $posts->links() }}
                        </div>
                    @else
                        <!-- No Posts -->
                        <div class="bg-white rounded-xl p-12 text-center">
                            <div class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-6">
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 text-gray-400" fill="none"
                                    viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
                                </svg>
                            </div>
                            <h3 class="text-xl font-semibold text-gray-900 mb-2">No posts found</h3>
                            <p class="text-gray-500">Check back soon for new articles and guides!</p>
                        </div>
                    @endif
                </div>

                <!-- Sidebar -->
                <aside class="lg:w-80 flex-shrink-0 mt-8 lg:mt-0">
                    <!-- Categories -->
                    @if (isset($categories) && $categories->count() > 0)
                        <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
                            <h3 class="font-semibold text-gray-900 mb-4">Categories</h3>
                            <ul class="space-y-2">
                                <li>
                                    <a href="{{ url('/blog') }}"
                                        class="flex items-center justify-between py-2 px-3 rounded-lg {{ !isset($currentCategory) ? 'bg-primary-50 text-primary-700' : 'hover:bg-gray-50' }}">
                                        <span>All Articles</span>
                                    </a>
                                </li>
                                @foreach ($categories as $category)
                                    <li>
                                        <a href="{{ url('/blog/category/' . $category->slug) }}"
                                            class="flex items-center justify-between py-2 px-3 rounded-lg {{ isset($currentCategory) && $currentCategory->id === $category->id ? 'bg-primary-50 text-primary-700' : 'hover:bg-gray-50' }}">
                                            <span>{{ $category->name }}</span>
                                            @if ($category->posts_count > 0)
                                                <span
                                                    class="text-xs bg-gray-100 px-2 py-0.5 rounded-full">{{ $category->posts_count }}</span>
                                            @endif
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <!-- Newsletter -->
                    <div class="bg-gradient-to-br from-primary-600 to-primary-700 rounded-xl p-6 text-white">
                        <h3 class="font-semibold text-lg mb-2">Stay Updated</h3>
                        <p class="text-white/80 text-sm mb-4">Get the latest property insights and market updates in your
                            inbox.</p>
                        <form action="#" method="POST">
                            <input type="email" placeholder="Your email"
                                class="w-full px-4 py-2 rounded-lg text-gray-800 text-sm mb-3" required>
                            <button type="submit" class="btn btn-white btn-sm w-full">Subscribe</button>
                        </form>
                    </div>
                </aside>
            </div>
        </div>
    </section>
@endsection