@extends('site.layout')

@section('content')
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
        <div class="text-2xl font-semibold">Our Latest Blogs</div>

        <div class="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach ($posts as $post)
                <a href="{{ route('blog.show', $post) }}" class="group bg-white border border-gray-200 rounded-xl overflow-hidden hover:shadow">
                    <div class="aspect-[16/9] bg-gray-100 overflow-hidden">
                        @if ($post->cover_image_path)
                            <img src="{{ asset('storage/'.$post->cover_image_path) }}" alt="{{ $post->title }}" class="w-full h-full object-cover group-hover:scale-105 transition" />
                        @else
                            <div class="w-full h-full flex items-center justify-center text-gray-400 text-sm">No image</div>
                        @endif
                    </div>
                    <div class="p-5">
                        <div class="font-semibold text-gray-900 group-hover:text-red-700 line-clamp-2">{{ $post->title }}</div>
                        <div class="mt-2 text-sm text-gray-600 line-clamp-2">{{ $post->excerpt }}</div>
                        <div class="mt-4 inline-flex items-center rounded-md bg-red-700 px-4 py-2 text-white text-sm font-semibold">Read More</div>
                    </div>
                </a>
            @endforeach
        </div>

        <div class="mt-10">
            {{ $posts->links() }}
        </div>
    </div>
@endsection