@props([
    'embed'  => null,
    'poster' => null,
    'title'  => 'Lecture video',
])

{{--
    Click-to-play facade.

    A YouTube iframe pulls ~800KB of player JavaScript and blocks the main
    thread. We render a poster and a play button instead, and inject the
    iframe only on the first click. On a course page with a 40-lecture
    syllabus this is the difference between a 1.4s and a 6s load.
--}}
<div
    x-data="{ playing: false }"
    class="relative aspect-video w-full overflow-hidden rounded-lg bg-slate-900"
>
    <template x-if="!playing">
        <button
            type="button"
            @click="playing = true"
            class="group absolute inset-0 flex h-full w-full items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-teal-400"
            aria-label="Play {{ $title }}"
        >
            @if ($poster)
                <img
                    src="{{ $poster }}"
                    alt=""
                    width="1280" height="720"
                    loading="lazy" decoding="async"
                    class="absolute inset-0 h-full w-full object-cover opacity-80 transition group-hover:opacity-95"
                >
            @endif

            <span class="relative flex h-16 w-16 items-center justify-center rounded-full bg-white/95 shadow-lg transition group-hover:scale-105">
                <svg viewBox="0 0 24 24" class="ml-1 h-7 w-7 fill-slate-900" aria-hidden="true">
                    <path d="M8 5v14l11-7z"/>
                </svg>
            </span>
        </button>
    </template>

    <template x-if="playing">
        <iframe
            src="{{ $embed }}{{ str_contains((string) $embed, '?') ? '&' : '?' }}autoplay=1"
            title="{{ $title }}"
            class="absolute inset-0 h-full w-full"
            frameborder="0"
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
            referrerpolicy="strict-origin-when-cross-origin"
        ></iframe>
    </template>
</div>