@props(['data' => []])

<section class="section-padding bg-white">
    <div class="container-page">
        @if(!empty($data['title']))
            <div class="mx-auto mb-12 max-w-3xl text-center">
                <span class="home-eyebrow">Watch</span>
                <h2 class="section-heading mt-6">{{ $data['title'] }}</h2>
            </div>
        @endif
        <div class="premium-card mx-auto max-w-4xl overflow-hidden p-2">
            @if(!empty($data['url']))
                <div class="aspect-video overflow-hidden rounded-2xl">
                    <iframe src="{{ $data['url'] }}" class="h-full w-full" allowfullscreen loading="lazy" title="{{ $data['title'] ?? 'Video' }}"></iframe>
                </div>
            @else
                <div class="flex aspect-video items-center justify-center rounded-2xl bg-[#030712]">
                    <div class="flex h-16 w-16 items-center justify-center rounded-full bg-primary text-white shadow-lg">
                        <svg class="ml-1 h-7 w-7" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
                    </div>
                </div>
            @endif
        </div>
    </div>
</section>