@props(['video', 'class' => 'aspect-video w-full'])
{{--
    Facade "lite embed" : n'affiche qu'une miniature + un bouton Lecture
    tant que le visiteur n'a pas cliqué. L'iframe YouTube n'est injectee
    qu'au clic (voir resources/js/app.js) — aucune requete vers YouTube,
    aucun cookie tiers, aucune lecture automatique tant que ce choix n'a
    pas ete fait explicitement.

    Repli permanent : YouTube peut imposer, cote serveur et selon le
    reseau du visiteur, une verification "Connectez-vous pour confirmer
    que vous n'êtes pas un robot" a l'interieur meme de l'iframe — un
    controle que notre JavaScript ne peut pas detecter (document
    cross-origine). Le bouton "Regarder directement sur YouTube" reste
    donc toujours visible, sans attendre une erreur.
--}}
<div>
    <div
        class="youtube-facade group relative overflow-hidden rounded-2xl bg-ink-900 shadow-lg {{ $class }}"
        data-video-id="{{ $video->youtube_id }}"
        data-embed-url="{{ $video->playerEmbedUrl() }}"
        data-watch-url="{{ $video->watchUrl() }}"
        data-title="{{ $video->title }}"
    >
        <img
            src="{{ $video->thumbnailUrl() }}"
            data-thumb-fallbacks="{{ implode(',', $video->thumbnailFallbacks()) }}"
            alt="Miniature de la vidéo « {{ $video->title }} »"
            loading="lazy"
            decoding="async"
            class="youtube-facade-thumb h-full w-full object-cover"
        >
        <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-ink-900/70 via-ink-900/10 to-transparent"></div>
        <button
            type="button"
            class="youtube-facade-play absolute inset-0 flex items-center justify-center"
            aria-label="Lire la vidéo : {{ $video->title }}"
        >
            <span class="flex h-16 w-16 items-center justify-center rounded-full bg-gold-500 text-congo-950 shadow-2xl transition duration-300 group-hover:scale-105 group-hover:bg-gold-600 sm:h-20 sm:w-20">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-7 w-7 translate-x-0.5 sm:h-8 sm:w-8"><path d="M8 5v14l11-7z"/></svg>
            </span>
        </button>

        {{-- Etat de repli sur erreur connue du lecteur (video indisponible,
             integration interdite, identifiant invalide...), masque par
             defaut et affiche par app.js via l'API YouTube IFrame. Ne
             couvre jamais le controle anti-robot lui-meme (indetectable). --}}
        <div class="youtube-facade-error hidden absolute inset-0 flex-col items-center justify-center gap-4 bg-ink-900 p-6 text-center">
            <p class="max-w-xs text-sm font-medium text-paper">La lecture intégrée n'est pas disponible dans ce navigateur.</p>
            <a href="{{ $video->watchUrl() }}" target="_blank" rel="noopener noreferrer" class="btn-gold !px-5 !py-2.5 text-xs">Regarder sur YouTube</a>
        </div>
    </div>

    <div class="mt-4 flex flex-col items-start gap-3 sm:flex-row sm:items-center sm:justify-between">
        <p class="text-xs leading-relaxed text-ink-500">
            Si YouTube demande une connexion ou empêche la lecture intégrée, ouvrez la vidéo directement sur YouTube.
        </p>
        <a href="{{ $video->watchUrl() }}" target="_blank" rel="noopener noreferrer" class="btn-secondary shrink-0 !px-4 !py-2 text-xs">
            Regarder directement sur YouTube
        </a>
    </div>
</div>