@extends('layouts.site')
@section('title', $post->title)

@push('scripts')
    @if ($post->meta_description)
        <meta name="description" content="{{ $post->meta_description }}">
    @elseif ($post->excerpt)
        <meta name="description" content="{{ Str::limit($post->excerpt, 155) }}">
    @endif
@endpush

@section('content')
    <article>
        {{-- Cover --}}
        @if ($post->cover_image)
            <div class="relative h-72 w-full overflow-hidden sm:h-96">
                <img src="{{ asset($post->cover_image) }}" alt="{{ $post->title }}" class="h-full w-full object-cover">
                <div class="absolute inset-0 bg-gradient-to-t from-slate-950/80 to-transparent"></div>
            </div>
        @else
            <div class="h-40 w-full bg-gradient-to-br from-slate-900 via-slate-800 to-gold-600"></div>
        @endif

        {{-- Header --}}
        <header class="mx-auto max-w-3xl px-4 pt-10 text-center sm:px-6">
            @if ($post->category)
                <a href="{{ route('site.blog.index', ['category' => $post->category->slug]) }}"
                   class="inline-block rounded-full bg-gold-400/20 px-3 py-1 text-[10px] font-bold uppercase tracking-wider text-gold-600">{{ $post->category->name }}</a>
            @endif
            <h1 class="mt-4 font-serif text-3xl font-bold leading-tight text-slate-900 sm:text-4xl">{{ $post->title }}</h1>
            <p class="mt-4 text-sm text-slate-500">
                By <span class="font-semibold text-slate-700">{{ $post->author?->name ?? 'Epelcon Editorial' }}</span>
                · {{ $post->published_at?->format('F j, Y') }}
                · {{ $post->readingMinutes() }} min read
                · {{ number_format($post->views) }} views
            </p>
        </header>

        {{-- Body --}}
        <div class="mx-auto max-w-3xl px-4 py-10 text-lg leading-relaxed text-slate-700 sm:px-6">
            @if ($post->excerpt)
                <p class="mb-6 border-l-4 border-gold-400 pl-4 font-serif text-xl italic text-slate-600">{{ $post->excerpt }}</p>
            @endif
            <div class="space-y-5">
                @foreach (preg_split("/\r?\n\r?\n/", trim($post->body)) as $paragraph)
                    @if (trim($paragraph) !== '')
                        <p>{!! nl2br(e(trim($paragraph))) !!}</p>
                    @endif
                @endforeach
            </div>
        </div>

        {{-- Book CTA --}}
        <section class="bg-slate-950 py-12 text-center text-white">
            <p class="text-xs font-bold uppercase tracking-[0.3em] text-gold-400">Ready to feel it in person?</p>
            <h2 class="mt-2 font-serif text-3xl font-bold">Book your Epelcon stay</h2>
            <p class="mx-auto mt-3 max-w-lg px-4 text-slate-300">Rooms, suites, dining and wellness — reserved in under two minutes.</p>
            <a href="{{ route('site.book') }}" class="mt-5 inline-block rounded-xl bg-gradient-to-r from-gold-400 to-gold-600 px-7 py-3 text-sm font-extrabold text-slate-950 hover:brightness-110">Reserve a room</a>
        </section>

        {{-- Related --}}
        @if ($related->count())
            <section class="mx-auto max-w-6xl px-4 py-12 sm:px-6">
                <h3 class="mb-6 font-serif text-2xl font-bold text-slate-900">More stories</h3>
                <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach ($related as $r)
                        <a href="{{ route('site.blog.show', $r) }}" class="group overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-slate-200 transition hover:shadow-lg">
                            @if ($r->cover_image)
                                <img src="{{ asset($r->cover_image) }}" alt="{{ $r->title }}" class="h-40 w-full object-cover">
                            @else
                                <div class="flex h-40 w-full items-center justify-center bg-gradient-to-br from-slate-900 to-gold-600 text-4xl">📖</div>
                            @endif
                            <div class="p-5">
                                @if ($r->category)
                                    <span class="text-[10px] font-bold uppercase tracking-wider text-gold-600">{{ $r->category->name }}</span>
                                @endif
                                <h4 class="mt-1 font-serif text-lg font-bold text-slate-900 group-hover:text-gold-600">{{ $r->title }}</h4>
                                <p class="mt-1 text-xs text-slate-400">{{ $r->published_at?->format('M j, Y') }}</p>
                            </div>
                        </a>
                    @endforeach
                </div>
            </section>
        @endif
    </article>
@endsection
