@extends('layouts.app')
@section('content')
<div class="pt-24">
<div class="relative py-20 px-4 bg-gradient-to-br from-dark-brown to-deep-green bengali-pattern text-center">
    <h1 class="font-playfair text-5xl text-cream font-bold mb-3" data-aos="fade-up">Blog & Stories</h1>
    <p class="text-cream/60" data-aos="fade-up" data-aos-delay="100">Stories from our kitchen, culture, and culinary world</p>
    <div class="section-divider mt-4"></div>
</div>
<div class="max-w-7xl mx-auto px-4 py-12">

    {{-- Featured Blog --}}
    @if($featuredBlog)
    <div class="glass-card overflow-hidden mb-14 group" data-aos="fade-up">
        <div class="grid md:grid-cols-2">
            <div class="h-72 md:h-auto overflow-hidden">
                <img src="{{ $featuredBlog->thumbnail_url }}" alt="{{ $featuredBlog->title }}"
                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
            </div>
            <div class="p-8 md:p-12 flex flex-col justify-center">
                <span class="text-gold text-xs tracking-widest uppercase mb-3">Featured Story</span>
                @if($featuredBlog->blogCategory)
                <span class="border border-gold/30 text-gold text-xs px-3 py-1 rounded-full mb-4 w-fit">{{ $featuredBlog->blogCategory->name }}</span>
                @endif
                <h2 class="font-playfair text-3xl text-cream font-bold mb-4 group-hover:text-gold transition-colors">{{ $featuredBlog->title }}</h2>
                <p class="text-cream/60 mb-6 leading-relaxed">{{ $featuredBlog->excerpt }}</p>
                <div class="flex items-center gap-4 text-cream/40 text-sm mb-6">
                    <span><i class="fas fa-user mr-1"></i>{{ $featuredBlog->author?->name ?? 'Shalik Team' }}</span>
                    <span><i class="fas fa-calendar mr-1"></i>{{ $featuredBlog->published_at?->format('M d, Y') }}</span>
                    @if($featuredBlog->read_time)<span><i class="fas fa-clock mr-1"></i>{{ $featuredBlog->read_time }} min read</span>@endif
                </div>
                <a href="{{ route('blog.show', $featuredBlog->slug) }}" class="btn-gold w-fit">Read More <i class="fas fa-arrow-right ml-2"></i></a>
            </div>
        </div>
    </div>
    @endif

    {{-- Category Filter --}}
    <div class="flex flex-wrap gap-3 mb-10" data-aos="fade-up">
        <a href="{{ route('blog.index') }}" class="px-5 py-2 rounded-full text-sm transition-all {{ !request('category') ? 'bg-gold text-dark-brown font-semibold' : 'border border-gold/30 text-cream/60 hover:text-gold hover:border-gold' }}">All</a>
        @foreach($categories as $cat)
        <a href="{{ route('blog.index', ['category' => $cat->slug]) }}"
           class="px-5 py-2 rounded-full text-sm transition-all {{ request('category')==$cat->slug ? 'bg-gold text-dark-brown font-semibold' : 'border border-gold/30 text-cream/60 hover:text-gold hover:border-gold' }}">
            {{ $cat->name }} ({{ $cat->blogs_count }})
        </a>
        @endforeach
    </div>

    {{-- Blog Grid --}}
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
        @forelse($blogs as $blog)
        <a href="{{ route('blog.show', $blog->slug) }}" class="glass-card overflow-hidden group hover:-translate-y-2 transition-all duration-300" data-aos="fade-up" data-aos-delay="{{ $loop->index % 3 * 100 }}">
            <div class="h-52 overflow-hidden">
                <img src="{{ $blog->thumbnail_url }}" alt="{{ $blog->title }}"
                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
            </div>
            <div class="p-6">
                @if($blog->blogCategory)
                <span class="text-xs text-gold border border-gold/30 px-3 py-1 rounded-full">{{ $blog->blogCategory->name }}</span>
                @endif
                <h3 class="font-playfair text-cream text-xl font-semibold mt-3 mb-2 group-hover:text-gold transition-colors">{{ $blog->title }}</h3>
                <p class="text-cream/60 text-sm mb-4 leading-relaxed">{{ Str::limit($blog->excerpt, 110) }}</p>
                <div class="flex items-center justify-between text-xs text-cream/40 pt-3 border-t border-white/5">
                    <span><i class="fas fa-user mr-1"></i>{{ $blog->author?->name ?? 'Shalik Team' }}</span>
                    <span><i class="fas fa-calendar mr-1"></i>{{ $blog->published_at?->format('M d, Y') }}</span>
                </div>
            </div>
        </a>
        @empty
        <div class="col-span-3 text-center py-20">
            <i class="fas fa-newspaper text-gold/30 text-6xl mb-4"></i>
            <p class="text-cream/50">No blog posts yet.</p>
        </div>
        @endforelse
    </div>
    <div class="mt-10">{{ $blogs->links() }}</div>
</div>
</div>
@endsection