@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', $post->title . ' — ' . \App\Models\Setting::get('property_name','Parkview Hotel CDO'))
@section('meta_description', $post->excerpt ?: \Illuminate\Support\Str::limit(strip_tags($post->bodyHtml()), 155))
@section('og_image', $post->cover_image ? \Illuminate\Support\Facades\Storage::url($post->cover_image) : '')
@section('og_type', 'article')

@push('jsonld')
<script type="application/ld+json">
{!! json_encode([
    '@context'      => 'https://schema.org',
    '@type'         => 'NewsArticle',
    'headline'      => $post->title,
    'datePublished' => optional($post->published_at)->toIso8601String(),
    'dateModified'  => $post->updated_at->toIso8601String(),
    'author'        => ['@type' => 'Organization', 'name' => \App\Models\Setting::get('property_name', 'Parkview Hotel CDO')],
    'publisher'     => ['@type' => 'Organization', 'name' => \App\Models\Setting::get('property_name', 'Parkview Hotel CDO')],
    'description'   => $post->excerpt ?: \Illuminate\Support\Str::limit(strip_tags($post->bodyHtml()), 200),
    'mainEntityOfPage' => url()->current(),
] + ($post->cover_image ? ['image' => url(\Illuminate\Support\Facades\Storage::url($post->cover_image))] : []), JSON_UNESCAPED_UNICODE) !!}
</script>
@endpush

@section('content')

<div class="bg-gradient-to-br from-teal-700 to-teal-900 py-14">
    <div class="max-w-3xl mx-auto px-4 sm:px-6">
        <a href="{{ route('public.news') }}" class="inline-flex items-center gap-1.5 text-teal-300 hover:text-white text-sm mb-5 transition-colors">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            All News
        </a>
        <div class="flex items-center gap-2 text-xs text-teal-200 mb-3">
            @if($post->category)<span class="font-semibold uppercase tracking-wide">{{ $post->category }}</span><span>·</span>@endif
            <span>{{ $post->published_at->format('F j, Y') }}</span>
        </div>
        <h1 class="text-3xl sm:text-4xl font-bold text-white leading-tight">{{ $post->title }}</h1>
    </div>
</div>

<div class="py-12 bg-gray-50">
    <div class="max-w-3xl mx-auto px-4 sm:px-6">
        @if($post->cover_image)
        <img src="{{ \Illuminate\Support\Facades\Storage::url($post->cover_image) }}" alt="{{ $post->title }}" class="w-full aspect-video object-cover rounded-2xl border-[0.5px] border-gray-200 mb-8">
        @endif

        <div class="bg-white rounded-2xl border-[0.5px] border-gray-200 p-6 sm:p-8">
            @if($post->excerpt)
            <p class="text-lg text-gray-600 leading-relaxed font-medium mb-6 pb-6 border-b border-gray-100">{{ $post->excerpt }}</p>
            @endif
            <div class="post-body text-[15px] text-gray-700 leading-relaxed">{!! $post->bodyHtml() !!}</div>
        </div>

        @if($recent->count())
        <div class="mt-12">
            <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-4">More News</h2>
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                @foreach($recent as $r)
                <a href="{{ route('public.news.show', $r->slug) }}" class="group bg-white rounded-xl border-[0.5px] border-gray-200 p-4 hover:border-teal-300 transition-colors">
                    <p class="text-[11px] text-gray-400 mb-1">{{ $r->published_at->format('M j, Y') }}</p>
                    <p class="font-semibold text-gray-800 text-sm group-hover:text-teal-700 transition-colors line-clamp-2">{{ $r->title }}</p>
                </a>
                @endforeach
            </div>
        </div>
        @endif
    </div>
</div>
@endsection