{{--
    Détail d'un article d'actualité — en-tête (catégorie, date, titre, auteur),
    image à la une, contenu HTML riche PURIFIÉ (anti-XSS via clean()), puis lien
    retour et articles liés. Données fournies par NewsController@show.

    @var \App\Models\News $article                L'article courant (content = HTML).
    @var \Illuminate\Support\Collection $related   Jusqu'à 3 articles liés.

    SÉCURITÉ : le contenu riche est rendu via {!! clean($article->content) !!}
    (mews/purifier). Ne JAMAIS rendre $article->content sans clean().
--}}
@extends('layouts.app')

@section('title', $article->meta_title ?: $article->title)
@section('meta_description', $article->meta_description ?: $article->excerpt)

{{-- Open Graph spécifique à l'article. og:type et og:title sont gérés par le
     layout via og_type / og_title ; la section og ajoute description + visuel. --}}
@section('og_type', 'article')
@section('og_title', $article->meta_title ?: $article->title)
@section('og')
    <meta property="og:description" content="{{ $article->meta_description ?: $article->excerpt }}">
    @if ($article->featured_image)
        <meta property="og:image" content="{{ media_url($article->featured_image) }}">
    @endif
@endsection

@section('content')
    @php $image = media_url($article->featured_image); @endphp

    <article>
        {{-- ============================= EN-TÊTE --}}
        <header class="relative overflow-hidden bg-hero-soft">
            <div class="pointer-events-none absolute -right-24 -top-24 h-72 w-72 rounded-full bg-brand-400/10 blur-3xl"></div>

            <div class="mx-auto max-w-3xl px-4 py-16 sm:px-6 sm:py-20 lg:px-8">
                {{-- Fil d'Ariane. --}}
                <nav class="mb-6 flex flex-wrap items-center gap-2 text-sm text-slate-500" aria-label="Fil d'Ariane">
                    <a href="{{ route('home') }}" class="transition hover:text-brand-600">Accueil</a>
                    <span aria-hidden="true" class="text-slate-300">/</span>
                    <a href="{{ route('news.index') }}" class="transition hover:text-brand-600">Actualités</a>
                    <span aria-hidden="true" class="text-slate-300">/</span>
                    <span class="font-medium text-navy-800" aria-current="page">{{ \Illuminate\Support\Str::limit($article->title, 40) }}</span>
                </nav>

                <div class="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm">
                    @if ($article->category)
                        <a href="{{ route('news.index', ['category' => $article->category]) }}"
                           class="font-semibold uppercase tracking-[0.08em] text-brand-600 hover:underline">{{ $article->category }}</a>
                    @endif
                    @if ($article->published_at)
                        <span aria-hidden="true" class="text-slate-300">·</span>
                        <time datetime="{{ $article->published_at->toDateString() }}" class="text-slate-500">
                            {{ $article->published_at->translatedFormat('d F Y') }}
                        </time>
                    @endif
                </div>

                <h1 class="mt-4 font-display text-3xl font-bold leading-tight tracking-tight text-navy-900 sm:text-4xl">{{ $article->title }}</h1>

                @if ($article->author?->name)
                    <p class="mt-5 flex items-center gap-2 text-sm text-slate-500">
                        @svg('heroicon-o-user-circle', 'h-5 w-5 text-slate-400')
                        <span>Par <span class="font-semibold text-navy-800">{{ $article->author->name }}</span></span>
                    </p>
                @endif
            </div>
        </header>

        {{-- ============================= IMAGE À LA UNE --}}
        @if ($image)
            <div class="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
                <div class="-mt-8 overflow-hidden rounded-card shadow-lift">
                    <img src="{{ $image }}" alt="{{ $article->title }}" class="h-full w-full object-cover" loading="lazy">
                </div>
            </div>
        @endif

        {{-- ============================= CORPS DE L'ARTICLE (HTML purifié) --}}
        <div class="py-16">
            <div class="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
                @if (filled($article->content))
                    <div class="prose-news">{!! clean($article->content) !!}</div>
                @elseif (filled($article->excerpt))
                    <p class="text-[1.05rem] leading-relaxed text-slate-600">{{ $article->excerpt }}</p>
                @endif

                {{-- Lien de retour. --}}
                <div class="mt-12 border-t border-line pt-8">
                    <a href="{{ route('news.index') }}" class="inline-flex items-center gap-2 text-sm font-semibold text-brand-600 hover:underline">
                        @svg('heroicon-o-arrow-left', 'h-4 w-4')
                        Retour aux actualités
                    </a>
                </div>
            </div>
        </div>
    </article>

    {{-- ============================= ARTICLES LIÉS --}}
    @if ($related->isNotEmpty())
        <section class="bg-surface py-20">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <x-section-heading align="left" eyebrow="À lire aussi" title="Articles liés" />

                <div class="mt-12 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
                    @foreach ($related as $relatedArticle)
                        <x-reveal :delay="$loop->index * 100" class="h-full">
                            <x-news-card :article="$relatedArticle" class="h-full" />
                        </x-reveal>
                    @endforeach
                </div>
            </div>
        </section>
    @endif
@endsection