@extends('layouts.app')
@section('title','Newsroom — '.setting('site_name'))
@section('content')
@include('partials.page-hero', ['slug'=>'news', 'cta'=>false])
<section class="section-white py-20">
    <div class="max-w-7xl mx-auto px-5 lg:px-8">
        @if($posts->isEmpty())
            <p class="text-center text-gray-400 font-body py-10">No news posts yet.</p>
        @else
            @php($featured = $posts->first())
            <a href="{{ route('news.show',$featured) }}" class="grid lg:grid-cols-2 gap-8 items-center mb-16 group reveal">
                <div class="rounded-2xl overflow-hidden aspect-[16/10] bg-gray-100">
                    <img src="{{ media($featured->image) }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                </div>
                <div>
                    <span class="text-[11px] font-bold tracking-[0.2em] uppercase font-body" style="color:#1aaaa3;">{{ $featured->category }}</span>
                    <h2 class="font-heading font-extrabold text-gray-900 mt-3 mb-3" style="font-size:clamp(1.6rem,3vw,2.2rem);">{{ $featured->title }}</h2>
                    <p class="text-gray-500 font-body mb-4">{{ $featured->excerpt }}</p>
                    <span class="text-gray-400 text-sm font-body">{{ $featured->published_at?->format('d M Y') }}</span>
                </div>
            </a>
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-7">
                @foreach($posts->skip(1) as $post)
                    <a href="{{ route('news.show',$post) }}" class="card-lift hover-raise rounded-2xl overflow-hidden bg-white reveal group" style="border:1px solid rgba(0,0,0,.07);">
                        <div class="aspect-[16/10] overflow-hidden bg-gray-100"><img src="{{ media($post->image) }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"></div>
                        <div class="p-6">
                            <span class="text-[10px] font-bold tracking-[0.2em] uppercase font-body" style="color:#1aaaa3;">{{ $post->category }}</span>
                            <h3 class="font-heading font-bold text-gray-900 mt-2 mb-2 leading-snug">{{ $post->title }}</h3>
                            <p class="text-gray-500 text-sm font-body mb-3">{{ \Illuminate\Support\Str::limit($post->excerpt,90) }}</p>
                            <span class="text-gray-400 text-xs font-body">{{ $post->published_at?->format('d M Y') }}</span>
                        </div>
                    </a>
                @endforeach
            </div>
        @endif
    </div>
</section>
@endsection