@php
    $ratio = ['16:9' => 'aspect-video', '4:3' => 'aspect-[4/3]', '1:1' => 'aspect-square', '21:9' => 'aspect-[21/9]'][$block->get('ratio', '16:9')] ?? 'aspect-video';
    $url = $block->get('url');
    $embed = website_video_embed_url($url, [
        'autoplay' => $block->get('autoplay') ? 1 : 0,
        'mute' => $block->get('muted', true) ? 1 : 0,
        'loop' => $block->get('loop') ? 1 : 0,
    ]);
@endphp
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="{{ $variant === 'split' ? 'grid md:grid-cols-2 gap-10 items-center' : '' }}">
        <div class="{{ $variant === 'split' ? '' : 'text-center max-w-3xl mx-auto' }} flex flex-col gap-3 {{ $variant === 'split' ? '' : 'mb-8' }}">
            @if ($block->get('eyebrow'))
                <p class="ec-eyebrow text-sm font-semibold uppercase tracking-widest">{{ $block->get('eyebrow') }}</p>
            @endif
            @if ($block->get('title'))
                <h2 class="ec-heading text-3xl sm:text-4xl font-bold">{{ $block->get('title') }}</h2>
            @endif
            @if ($block->get('quote') && $variant === 'with_quote')
                <blockquote class="ec-muted text-lg italic leading-relaxed mt-2">
                    {{ $block->get('quote') }}
                    @if ($block->get('quote_author'))
                        <footer class="mt-2 text-sm not-italic font-semibold">— {{ $block->get('quote_author') }}</footer>
                    @endif
                </blockquote>
            @endif
        </div>

        <div class="{{ $ratio }} w-full overflow-hidden rounded-2xl bg-black">
            @if ($embed)
                <iframe src="{{ $embed }}" title="{{ $block->get('title') ?: __('فيديو') }}"
                        class="w-full h-full" loading="lazy" allowfullscreen
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                        referrerpolicy="strict-origin-when-cross-origin"></iframe>
            @elseif ($url)
                <video class="w-full h-full object-cover" controls
                       @if ($block->get('autoplay')) autoplay @endif
                       @if ($block->get('muted', true)) muted @endif
                       @if ($block->get('loop')) loop @endif
                       @if ($block->get('poster')) poster="{{ $block->get('poster') }}" @endif
                       playsinline>
                    <source src="{{ $url }}">
                </video>
            @endif
        </div>
    </div>

    @if ($block->get('quote') && $variant !== 'with_quote')
        <blockquote class="ec-muted text-center text-lg italic max-w-3xl mx-auto mt-8">{{ $block->get('quote') }}</blockquote>
    @endif
</div>
