@extends('blog.layout')

@section('meta_title', config('app.name').' — Home')

@section('content')
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div class="lg:col-span-2 space-y-8">
            <h1 class="text-3xl font-bold">Latest posts</h1>
            <div class="grid gap-6">
                @foreach($posts as $post)
                    <article class="bg-white rounded-lg shadow overflow-hidden">
                        @if($post->featured_image)
                            <a href="{{ route('blog.post', $post) }}"><img src="{{ asset('storage/'.$post->featured_image) }}" alt="" class="w-full h-48 object-cover"></a>
                        @endif
                        <div class="p-6">
                            <h2 class="text-xl font-semibold mb-2"><a href="{{ route('blog.post', $post) }}" class="hover:text-blue-600">{{ $post->title }}</a></h2>
                            <p class="text-sm text-gray-500 mb-2">{{ $post->published_at?->format('M j, Y') }} · {{ $post->author->name ?? '' }}</p>
                            @if($post->excerpt)
                                <p class="text-gray-600 mb-4">{{ Str::limit(strip_tags($post->excerpt), 160) }}</p>
                            @endif
                            <a href="{{ route('blog.post', $post) }}" class="text-blue-600 text-sm hover:underline">Read more</a>
                        </div>
                    </article>
                @endforeach
            </div>
            <div>{{ $posts->links() }}</div>
        </div>
        <aside class="space-y-8">
            <div>
                <h3 class="font-bold text-lg mb-3">Popular</h3>
                <ul class="space-y-2 text-sm">
                    @foreach($popular as $p)
                        <li><a href="{{ route('blog.post', $p) }}" class="text-blue-600 hover:underline">{{ Str::limit($p->title, 50) }}</a></li>
                    @endforeach
                </ul>
            </div>
            <div>
                <h3 class="font-bold text-lg mb-3">Categories</h3>
                <ul class="space-y-1 text-sm">
                    @foreach($categories as $c)
                        <li><a href="{{ route('blog.category', $c) }}" class="text-blue-600 hover:underline">{{ $c->name }}</a></li>
                    @endforeach
                </ul>
            </div>
            <div>
                <h3 class="font-bold text-lg mb-3">Tags</h3>
                <div class="flex flex-wrap gap-2">
                    @foreach($tags as $t)
                        <a href="{{ route('blog.tag', $t) }}" class="px-2 py-1 bg-gray-200 rounded text-xs hover:bg-gray-300">{{ $t->name }}</a>
                    @endforeach
                </div>
            </div>
        </aside>
    </div>
@endsection