@extends('frontend.layouts.app')

@section('content')
<section class="py-24 text-center bg-black">
    <h1 class="text-7xl">Blog</h1>
    <p class="text-gray-400 mt-3">News, updates, releases, and stories.</p>
</section>

<section class="max-w-7xl mx-auto px-6 py-14 grid md:grid-cols-2 lg:grid-cols-3 gap-8">
    @foreach($posts as $post)
        <article class="bg-[#111] rounded-3xl overflow-hidden border border-red-950">
            <div class="h-60 bg-cover bg-center" style="background-image:url('{{ $post->featured_image ? asset('storage/'.$post->featured_image) : '' }}')"></div>
            <div class="p-6">
                <h2 class="text-3xl mb-3">{{ $post->title }}</h2>
                <p class="text-gray-400 mb-4">{{ $post->excerpt }}</p>
                <a href="{{ route('blog.show', $post->slug) }}" class="text-red-500">Read Article</a>
            </div>
        </article>
    @endforeach
</section>

<div class="max-w-7xl mx-auto px-6 pb-16">
    {{ $posts->links() }}
</div>
@endsection