@extends('layouts.site')

@section('title', $post->meta_title ?: $post->title)
@section('meta_description', $post->meta_description ?? \Illuminate\Support\Str::limit(strip_tags($post->body), 160))

@section('content')
    <article class="mx-auto max-w-4xl px-4 py-14 lg:px-8 lg:py-20" data-aos="fade-up">
        <header>
            <time class="text-xs font-semibold uppercase tracking-wide text-[var(--color-accent)]" datetime="{{ $post->published_at?->toIso8601String() }}">{{ optional($post->published_at)->format('j F Y') }}</time>
            <h1 class="mt-4 font-display text-4xl font-bold text-[var(--color-heading)]" style="font-family: var(--font-heading);">{{ $post->title }}</h1>
        </header>

        @if($post->excerpt)
            <p class="mt-6 text-lg font-medium text-neutral-800">{{ $post->excerpt }}</p>
        @endif

        @if($post->cover)
            <figure class="mt-8 overflow-hidden rounded-3xl border border-neutral-200 bg-white shadow-sm">
                <img src="{{ \Illuminate\Support\Facades\Storage::disk($post->cover->disk)->url($post->cover->path) }}" alt="{{ $post->cover->alt_text ?: $post->title }}" class="h-full max-h-[520px] w-full object-cover">
            </figure>
        @endif

        <div class="prose prose-neutral prose-lg prose-headings:font-display prose-headings:text-[var(--color-heading)] mt-10">
            {!! $post->body !!}
        </div>

        <footer class="mt-14 border-t border-neutral-100 pt-8 text-sm">
            <a class="font-semibold text-[var(--color-primary)] hover:underline" href="{{ route('news.index') }}">← Back to news</a>
        </footer>
    </article>
@endsection
