{{-- 
    Publishing Block: Video Embed
    Video player with cover image
    
    Block Data Structure:
    {
        "type": "video",
        "video_type": "upload", // upload, youtube, vimeo, url
        "video_path": "path/to/video.mp4",
        "youtube_id": "abc123",
        "vimeo_id": "123456789",
        "video_url": "https://...",
        "cover_image": "path/to/cover.jpg",
        "title": "Video Title",
        "description": "Video description",
        "autoplay": false,
        "aspect_ratio": "16:9", // 16:9, 4:3, 1:1, 21:9
        "style": "default" // default, rounded, bordered, elevated
    }
--}}
@php
    $videoType = $block['video_type'] ?? 'upload';
    $aspectRatio = $block['aspect_ratio'] ?? '16:9';
    $style = $block['style'] ?? 'default';
    
    $aspectClasses = [
        '16:9' => 'aspect-video',
        '4:3' => 'aspect-[4/3]',
        '1:1' => 'aspect-square',
        '21:9' => 'aspect-[21/9]',
    ];
    
    $styleClasses = [
        'default' => '',
        'rounded' => 'rounded-xl overflow-hidden',
        'bordered' => 'border-4 border-gray-200 rounded-xl',
        'elevated' => 'rounded-xl shadow-2xl',
    ];
@endphp

<section class="py-12 lg:py-16 bg-white">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        
        {{-- Title --}}
        @if(!empty($block['title']))
            <div class="text-center mb-8">
                <h2 class="text-3xl font-bold text-gray-800 mb-3">
                    {{ $block['title'] }}
                </h2>
                @if(!empty($block['description']))
                    <p class="text-lg text-gray-600 max-w-5xl mx-auto">
                        {{ $block['description'] }}
                    </p>
                @endif
            </div>
        @endif
        
        {{-- Video Container --}}
        <div class="relative {{ $aspectClasses[$aspectRatio] ?? 'aspect-video' }} {{ $styleClasses[$style] ?? '' }} bg-gray-900">
            
            @if($videoType === 'upload' && !empty($block['video_path']))
                {{-- Uploaded Video --}}
                <video 
                    src="{{ asset('storage/' . $block['video_path']) }}"
                    class="absolute inset-0 w-full h-full object-cover"
                    controls
                    {{ !empty($block['autoplay']) ? 'autoplay' : '' }}
                    poster="{{ !empty($block['cover_image']) ? asset('storage/' . $block['cover_image']) : '' }}">
                    Your browser does not support the video tag.
                </video>
                
            @elseif($videoType === 'youtube' && !empty($block['youtube_id']))
                {{-- YouTube Embed --}}
                <iframe 
                    src="https://www.youtube.com/embed/{{ $block['youtube_id'] }}?rel=0{{ !empty($block['autoplay']) ? '&autoplay=1' : '' }}"
                    class="absolute inset-0 w-full h-full"
                    frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen>
                </iframe>
                
            @elseif($videoType === 'vimeo' && !empty($block['vimeo_id']))
                {{-- Vimeo Embed --}}
                <iframe 
                    src="https://player.vimeo.com/video/{{ $block['vimeo_id'] }}?{{ !empty($block['autoplay']) ? 'autoplay=1' : '' }}"
                    class="absolute inset-0 w-full h-full"
                    frameborder="0"
                    allow="autoplay; fullscreen; picture-in-picture"
                    allowfullscreen>
                </iframe>
                
            @elseif($videoType === 'url' && !empty($block['video_url']))
                {{-- Direct URL Video --}}
                <video 
                    src="{{ $block['video_url'] }}"
                    class="absolute inset-0 w-full h-full object-cover"
                    controls
                    {{ !empty($block['autoplay']) ? 'autoplay' : '' }}>
                    Your browser does not support the video tag.
                </video>
                
            @else
                {{-- Placeholder --}}
                <div class="absolute inset-0 flex items-center justify-center bg-gray-100">
                    <div class="text-center text-gray-400">
                        <i class="fas fa-video text-5xl mb-4"></i>
                        <p class="text-lg">Video not available</p>
                    </div>
                </div>
            @endif
            
            {{-- Cover Image Overlay (for uploaded videos) --}}
            @if($videoType === 'upload' && !empty($block['cover_image']))
                <div x-data="{ playing: false }" 
                     class="absolute inset-0 cursor-pointer"
                     :class="{ 'hidden': playing }"
                     @click="$refs.video.play(); playing = true">
                    <img src="{{ asset('storage/' . $block['cover_image']) }}" 
                         alt="{{ $block['title'] ?? 'Video cover' }}"
                         class="w-full h-full object-cover">
                    <div class="absolute inset-0 bg-black/30 flex items-center justify-center">
                        <div class="w-20 h-20 rounded-full bg-white/90 flex items-center justify-center hover:bg-white transition">
                            <i class="fas fa-play text-gray-800 text-2xl ml-1"></i>
                        </div>
                    </div>
                </div>
            @endif
        </div>
        
        {{-- Caption --}}
        @if(!empty($block['caption']))
            <p class="text-center text-gray-500 text-sm mt-4 italic">
                {{ $block['caption'] }}
            </p>
        @endif
        
    </div>
</section>
