@extends('frontend.layouts.app')

@section('content')

<section class="max-w-7xl mx-auto px-6 py-24">
    <div class="mb-10">
        <p class="text-red-500 uppercase tracking-[0.35em] text-sm mb-2">Latest Updates</p>
        <h1 class="text-6xl">News</h1>
    </div>

    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
        @forelse($posts as $post)
            <div class="bg-[#111] rounded-3xl overflow-hidden border border-red-950">
                <div class="h-56 bg-cover bg-center"
                     style="background-image:url('{{ $post->featured_image ? asset('storage/'.$post->featured_image) : '' }}')">
                    @if(!$post->featured_image)
                        <div class="h-full flex items-center justify-center text-gray-500">Featured Image</div>
                    @endif
                </div>

                <div class="p-6">
                    <h3 class="text-3xl mb-3">{{ $post->title }}</h3>
                    <p class="text-gray-400 mb-2">
                        {{ optional($post->published_at)->format('F d, Y h:i A') ?? $post->created_at->format('F d, Y h:i A') }}
                    </p>
                    <p class="text-gray-400 mb-4">{{ $post->excerpt }}</p>

                    <a href="{{ route('news.show', $post->slug) }}" class="text-red-500 hover:text-white transition">
                        Read More →
                    </a>
                </div>
            </div>
        @empty
            <div class="lg:col-span-3 text-center text-gray-500 py-12">
                No news posts yet.
            </div>
        @endforelse
    </div>

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

@endsection