@extends('frontend.layouts.app')
@section('content')
@include('frontend.partials.page-header',['pageTitle'=>'News & Events','breadcrumbs'=>[['name'=>'News & Events']]])
<section class="py-14"><div class="max-w-7xl mx-auto px-4">
<div class="flex gap-2 mb-8 flex-wrap">
@foreach(['all'=>'All','news'=>'News','event'=>'Events','announcement'=>'Announcements','achievement'=>'Achievements','circular'=>'Circulars'] as $v=>$l)
<a href="/news?type={{ $v }}" class="px-4 py-2 rounded-full text-sm font-medium transition {{ $type===$v||($type==='all'&&$v==='all')?'bg-primary-700 text-white':'bg-gray-100 text-gray-600 hover:bg-gray-200' }}">{{ $l }}</a>
@endforeach
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
@forelse($news as $item)
<article class="news-card bg-white rounded-2xl overflow-hidden border border-gray-100 shadow-sm hover:shadow-lg transition" data-aos="fade-up" data-aos-delay="{{ ($loop->index%3)*70 }}">
@if($item->image)<div class="news-img-wrap h-48"><img src="{{ asset($item->image) }}" alt="{{ $item->title }}" class="w-full h-full object-cover"></div>
@else<div class="h-1.5" style="background:{{ ['news'=>'#2563eb','event'=>'#059669','achievement'=>'#d97706','announcement'=>'#7c3aed','circular'=>'#64748b'][$item->type]??'#2563eb' }}"></div>@endif
<div class="p-5">
<span class="text-xs font-semibold px-2.5 py-1 rounded-full {{ $item->type==='news'?'bg-blue-100 text-blue-700':($item->type==='event'?'bg-green-100 text-green-700':($item->type==='achievement'?'bg-yellow-100 text-yellow-700':'bg-purple-100 text-purple-700')) }}">{{ ucfirst($item->type) }}</span>
<h3 class="font-semibold text-gray-900 mt-3 text-[15px] leading-snug"><a href="/news/{{ $item->slug }}" class="hover:text-primary-700 transition">{{ $item->title }}</a></h3>
@if($item->excerpt)<p class="text-gray-500 text-sm mt-2">{{ Str::limit($item->excerpt,90) }}</p>@endif
<div class="flex items-center justify-between mt-4">
<span class="text-gray-400 text-xs">{{ $item->published_at?->format('d M Y') }}</span>
<a href="/news/{{ $item->slug }}" class="text-primary-600 text-sm font-semibold hover:text-primary-800">Read →</a>
</div>
</div>
</article>
@empty
<div class="col-span-3 text-center py-16 text-gray-500"><i class="fas fa-newspaper text-4xl text-gray-300 mb-4 block"></i>No items found.</div>
@endforelse
</div>
<div class="mt-8">{{ $news->links() }}</div>
</div></section>
@endsection