@php
    $settings = $section->settings ?? [];
    $pt = $settings['padding_top'] ?? '80px';
    $pb = $settings['padding_bottom'] ?? '80px';
    $bg = $settings['bg_color'] ?? 'transparent';
    $videoUrl = $settings['video_url'] ?? 'https://www.youtube.com/embed/dQw4w9WgXcQ';

    $ptStyle = "padding-top: $pt;";
    $pbStyle = "padding-bottom: $pb;";
    $bgStyle = $bg !== 'transparent' ? "background-color: $bg;" : '';
@endphp

<section class="relative overflow-hidden" 
    style="{{ $ptStyle }} {{ $pbStyle }} {{ $bgStyle }}"
    id="section-{{ $section->id }}">
    {{-- Decorative Background Effect --}}
    <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-brand-500/5 blur-[120px] rounded-full pointer-events-none"></div>

    @if($settings['title'] ?? false)
    <h2 class="text-4xl md:text-6xl font-display font-800 text-text-base text-center mb-16 tracking-tight uppercase">
        {{ $settings['title'] }}
    </h2>
    @endif

    <div class="relative aspect-video rounded-[2.5rem] overflow-hidden border border-border-subtle shadow-2xl group bg-surface-secondary shadow-brand-500/5">
        @if($settings['video_type'] === 'self_hosted')
        <video class="w-full h-full object-cover" {{ ($settings['autoplay'] ?? false) ? 'autoplay' : '' }} {{
            ($settings['muted'] ?? true) ? 'muted' : '' }} {{ ($settings['loop'] ?? true) ? 'loop' : '' }} playsinline>
            <source src="{{ $videoUrl }}" type="video/mp4">
        </video>
        @else
        @php
        $params = http_build_query([
        'autoplay' => ($settings['autoplay'] ?? false) ? 1 : 0,
        'mute' => ($settings['muted'] ?? true) ? 1 : 0,
        'loop' => ($settings['loop'] ?? true) ? 1 : 0,
        'controls' => 1,
        'rel' => 0
        ]);
        $finalUrl = $videoUrl . (str_contains($videoUrl, '?') ? '&' : '?') . $params;
        @endphp
        <iframe class="w-full h-full border-none" src="{{ $finalUrl }}"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen>
        </iframe>
        @endif

        {{-- Premium Overlay on Hover --}}
        <div
            class="absolute inset-0 bg-brand-500/10 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none duration-700">
        </div>
    </div>
</sectio