@extends('public.layouts.guest')

@section('nav_explore', 'text-teal-700 font-semibold')
@section('nav_news', 'text-teal-700 font-semibold bg-teal-50/50')
@section('title', 'News & Updates — ' . \App\Models\Setting::get('property_name','Parkview Hotel CDO'))
@section('meta_description', 'Latest news, announcements and updates from ' . \App\Models\Setting::get('property_name','Parkview Hotel CDO') . ' in Cagayan de Oro.')

@section('content')

<div class="bg-gradient-to-br from-teal-700 to-teal-900 py-16">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 text-center">
        <p class="text-teal-300 text-xs font-semibold tracking-[0.2em] uppercase mb-2">News</p>
        <h1 class="text-4xl font-bold text-white">News &amp; Updates</h1>
        <p class="text-teal-200 mt-3 text-sm">Announcements, events, and stories from the hotel.</p>
    </div>
</div>

<div class="py-16 bg-gray-50">
    <div class="max-w-6xl mx-auto px-4 sm:px-6">
        @if($posts->isEmpty())
        <div class="text-center py-16 text-gray-400 text-sm">No posts published yet. Please check back soon.</div>
        @else
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($posts as $post)
            <a href="{{ route('public.news.show', $post->slug) }}" class="group bg-white rounded-2xl border-[0.5px] border-gray-200 overflow-hidden flex flex-col hover:shadow-md transition-shadow">
                <div class="aspect-video bg-gradient-to-br from-teal-50 to-teal-100 overflow-hidden">
                    @if($post->cover_image)
                    <img src="{{ \Illuminate\Support\Facades\Storage::url($post->cover_image) }}" alt="{{ $post->title }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                    @else
                    <div class="w-full h-full flex items-center justify-center"><svg class="w-10 h-10 text-teal-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7"/></svg></div>
                    @endif
                </div>
                <div class="p-5 flex flex-col flex-1">
                    <div class="flex items-center gap-2 text-[11px] text-gray-400 mb-2">
                        @if($post->category)<span class="text-teal-600 font-semibold uppercase tracking-wide">{{ $post->category }}</span><span>·</span>@endif
                        <span>{{ $post->published_at->format('M j, Y') }}</span>
                    </div>
                    <h2 class="font-bold text-gray-900 group-hover:text-teal-700 transition-colors leading-snug">{{ $post->title }}</h2>
                    @if($post->excerpt)<p class="text-sm text-gray-500 mt-2 leading-relaxed flex-1">{{ $post->excerpt }}</p>@endif
                    <span class="inline-flex items-center gap-1.5 text-teal-600 font-semibold text-sm mt-4">Read more <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></span>
                </div>
            </a>
            @endforeach
        </div>

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