@php
    $title = 'Vidéos';
    $description = "Discours, interviews et archives de terrain de Te Litho Tenge Didier, sur sa chaîne officielle YouTube @telithotenge73.";
    $ogImage = $featured?->thumbnailUrl();

    // JSON-LD VideoObject : uniquement les donnees reellement connues.
    // uploadDate n'est ajoute que si published_on est renseigne — jamais de
    // date inventee. Jamais affiche comme texte visible (voir layout.blade.php,
    // le bloc est toujours rendu via <script type="application/ld+json">).
    $structuredData = null;
    if ($featured) {
        $structuredData = array_filter([
            '@context' => 'https://schema.org',
            '@type' => 'VideoObject',
            'name' => $featured->title,
            'description' => $featured->description ?: $featured->title,
            'thumbnailUrl' => [$featured->thumbnailUrl(), ...$featured->thumbnailFallbacks()],
            'embedUrl' => $featured->embedUrl(),
            'uploadDate' => $featured->published_on?->toAtomString(),
        ]);
    }
@endphp
<x-layout :title="$title" :description="$description" :structured-data="$structuredData" :og-image="$ogImage">

    {{-- HERO --}}
    <section class="relative overflow-hidden border-b border-ink-900/10 bg-congo-950 py-24 text-paper">
        <x-brand-watermark tone="gold" class="left-1/2 top-1/2 h-[40rem] w-[40rem] -translate-x-1/2 -translate-y-1/2" />
        <div class="container-page relative max-w-2xl text-center">
            <p class="eyebrow text-gold-300">Médias et vidéos</p>
            <h1 class="h-signature mt-3 font-semibold">Regarder et écouter</h1>
            <p class="mt-6 leading-relaxed text-paper/75">
                Le terrain, la population, la vision pour Kinshasa — en images. Les vidéos publiées ici
                proviennent exclusivement de la chaîne officielle YouTube
                <a href="https://www.youtube.com/@telithotenge73" target="_blank" rel="noopener noreferrer" class="font-semibold text-gold-300 underline">@telithotenge73</a>.
            </p>
        </div>
    </section>

    {{-- VIDEO PRINCIPALE --}}
    <section class="container-page py-24">
        @if ($featured)
            <div class="reveal mx-auto max-w-4xl">
                <x-youtube-facade :video="$featured" class="aspect-video w-full rounded-2xl" />
                <div class="mt-6 text-center">
                    @if ($featured->published_on)
                        <p class="text-xs font-semibold uppercase tracking-[0.2em] text-gold-600">{{ $featured->published_on->translatedFormat('d F Y') }}</p>
                    @endif
                    <h2 class="h-section mt-2 font-semibold text-ink-900">{{ $featured->title }}</h2>
                    @if ($featured->description)
                        <p class="mx-auto mt-3 max-w-2xl leading-relaxed text-ink-600">{{ $featured->description }}</p>
                    @endif
                </div>
            </div>
        @else
            {{-- Etat vide, sobre : jamais d'erreur, jamais de contenu invente --}}
            <div class="reveal mx-auto max-w-lg rounded-2xl border border-ink-900/10 bg-paper-dim p-10 text-center">
                <p class="h-display text-lg font-semibold text-ink-900">Aucune vidéo publiée pour le moment</p>
                <p class="mt-2 text-sm text-ink-500">Retrouvez toute l'actualité sur la chaîne officielle YouTube.</p>
                <a href="https://www.youtube.com/@telithotenge73" target="_blank" rel="noopener noreferrer" class="btn-secondary mt-5 inline-flex">S'abonner sur YouTube</a>
            </div>
        @endif
    </section>

    {{-- AUTRES VIDEOS --}}
    @if ($videos->where('id', '!=', $featured?->id)->isNotEmpty())
    <section class="border-y border-ink-900/10 bg-paper-dim py-24">
        <div class="container-page">
            <p class="eyebrow reveal text-center">D'autres vidéos</p>
            <h2 class="h-section reveal mt-3 text-center font-semibold text-ink-900">À voir aussi</h2>
            <div class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                @foreach ($videos->where('id', '!=', $featured?->id) as $i => $video)
                    <a href="{{ $video->watchUrl() }}" target="_blank" rel="noopener noreferrer" class="reveal reveal-delay-{{ min(3, $i) }} group overflow-hidden rounded-2xl border border-ink-900/10 bg-white">
                        <div class="relative aspect-video overflow-hidden bg-ink-900">
                            <img src="{{ $video->thumbnailUrl('hqdefault') }}" alt="{{ $video->title }}" loading="lazy" class="h-full w-full object-cover transition duration-500 group-hover:scale-105">
                            <span class="absolute inset-0 flex items-center justify-center bg-ink-900/20 opacity-0 transition group-hover:opacity-100">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" class="h-12 w-12"><path d="M8 5v14l11-7z"/></svg>
                            </span>
                        </div>
                        <div class="p-4">
                            <h3 class="h-display font-semibold text-ink-900 group-hover:text-congo-800">{{ $video->title }}</h3>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    {{-- APPEL FINAL --}}
    <section class="relative overflow-hidden bg-congo-950 py-24 text-paper">
        <x-brand-watermark tone="gold" class="-right-24 -bottom-24 h-[34rem] w-[34rem]" />
        <div class="container-page relative mx-auto max-w-2xl text-center">
            <h2 class="h-section font-semibold">Poursuivre la découverte</h2>
            <p class="mt-4 text-paper/70">Le parcours documenté, les archives de terrain, et le mouvement qui l'accompagne.</p>
            <div class="mt-8 flex flex-wrap justify-center gap-3">
                <a href="{{ route('parcours') }}" class="btn-gold">Le parcours</a>
                <a href="{{ route('galerie.index') }}" class="btn-secondary !border-paper/30 !text-paper hover:!bg-paper/10">La galerie</a>
                <a href="{{ route('mouvement') }}" class="btn-secondary !border-paper/30 !text-paper hover:!bg-paper/10">Le mouvement</a>
            </div>
        </div>
    </section>
</x-layout>