@php
    $embed = \App\Support\VideoEmbed::parse($data['video_url'] ?? null);
    $file = $url($data['video_file'] ?? null);
    $poster = $url($data['poster'] ?? null) ?: ($embed['thumbnail'] ?? '');
    $width = match ($data['width'] ?? 'normal') {
        'narrow' => 'max-w-2xl',
        'wide' => 'max-w-6xl',
        default => 'max-w-4xl',
    };
@endphp
<section class="{{ $cls }}" {{ $attrs }}>
    <div class="container-page">
        @include('builder.partials.head')

        <figure @class(['mx-auto', $width, 'mt-10' => filled($data['title'] ?? null)])>
            <div class="pb-video" @if($embed) x-data="{ playing: false }" @endif>
                @if($embed)
                    <template x-if="playing">
                        <iframe src="{{ $embed['embed'].(str_contains($embed['embed'], '?') ? '&' : '?').'autoplay=1' }}" title="{{ $data['title'] ?? 'Video' }}" class="pb-video__frame" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    </template>
                    <button type="button" class="pb-video__poster" x-show="!playing" @click="playing = true" aria-label="Play video">
                        @if($poster)
                            <img src="{{ $poster }}" alt="{{ $data['poster_alt'] ?? '' }}" loading="lazy" decoding="async">
                        @endif
                        <span class="pb-video__play" aria-hidden="true">
                            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                        </span>
                    </button>
                @elseif($file)
                    <video class="pb-video__frame" controls preload="metadata" playsinline @if($poster) poster="{{ $poster }}" @endif>
                        <source src="{{ $file }}">
                    </video>
                @else
                    <div class="pb-video__empty">Add a YouTube/Vimeo link or upload a video file.</div>
                @endif
            </div>
            @if(filled($data['caption'] ?? null))
                <figcaption class="home-figure-caption home-figure-caption--center">{{ $data['caption'] }}</figcaption>
            @endif
        </figure>
    </div>
</section>