@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';
    // The rule follows the heading's own alignment so it never floats away
    // from the text it underlines.
    $ruleAlign = ($block->get('header_align') ?? 'start') === 'center' ? 'center' : 'start';
    $ruleClass = $block->get('heading_rule') === 'accent_bar'
        ? 'ec-heading-rule ec-heading-rule--'.$ruleAlign
        : '';
    $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 {{ $ruleClass }}">
                    {!! website_highlight($block->get('title')) !!}
                </h2>
            @endif
            @if ($block->get('quote') && $variant === 'split')
                <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>

    {{-- The quote reads as a response to what was just watched, so it sits
         under the player rather than above it. --}}
    @if ($block->get('quote') && $variant !== 'split')
        <blockquote class="ec-muted text-center text-lg italic max-w-3xl mx-auto mt-8">
            {{ $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>
