@extends('layouts.guest')

@section('title', __('Blog'))

@section('content')
<div class="py-12">
    <h1 class="text-3xl font-bold text-center mb-12">{{ __('Latest from our blog') }}</h1>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        @forelse($posts as $post)
            <a href="{{ route('blog.show', $post) }}" class="group">
                <div class="bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100 hover:shadow-lg transition h-full">
                    @if($post->image)
                        <img src="{{ asset($post->image) }}" alt="{{ $post->title }}" class="w-full h-48 object-cover">
                    @endif
                    <div class="p-6">
                        <p class="text-xs text-gray-400">{{ $post->published_at?->format('M d, Y') }} · {{ $post->reading_time }} min read</p>
                        <h3 class="font-semibold text-lg mt-2 group-hover:text-indigo-600 transition">{{ $post->title }}</h3>
                        <p class="text-sm text-gray-500 mt-2 line-clamp-3">{{ $post->excerpt }}</p>
                    </div>
                </div>
            </a>
        @empty
            <p class="col-span-3 text-center text-gray-500 py-12">{{ __('No blog posts yet.') }}</p>
        @endforelse
    </div>
    <div class="mt-8">{{ $posts->links() }}</div>
</div>
@endsection