@props(['title', 'description', 'thumbnail', 'video_desktop', 'video_mobile', 'video_id'])

<section id="video-{{ $video_id }}" class="video-player-section container mx-auto px-4 py-8 md:py-12">
    <div class="flex flex-col lg:flex-row lg:gap-8">
        {{-- Video Player Area --}}
        <div class="relative w-full lg:w-2/3 bg-gray-900 rounded-lg overflow-hidden shadow-lg aspect-video"
             x-data="{ playing: false, showThumbnail: true }"
             x-init="$watch('playing', value => { if(value) $refs.video.play(); else $refs.video.pause(); })">
            {{-- Thumbnail and Play Button --}}
            <template x-if="showThumbnail">
                <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-75 cursor-pointer"
                     @click="playing = true; showThumbnail = false;">
                    <img src="{{ $thumbnail }}" alt="{{ $title }} Thumbnail" class="absolute inset-0 w-full h-full object-cover opacity-70">
                    <button class="relative z-10 p-4 bg-primary-blue-variant rounded-full shadow-lg hover:scale-110 transition-transform">
                        <svg class="w-12 h-12 text-white" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M8 5v14l11-7z"/>
                        </svg>
                    </button>
                </div>
            </template>

            {{-- Video Element --}}
            <video x-ref="video" x-show="!showThumbnail" controls preload="none" class="w-full h-full object-cover">
                <source src="{{ $video_desktop }}" type="video/mp4" media="(min-width: 768px)">
                <source src="{{ $video_mobile }}" type="video/mp4" media="(max-width: 767px)">
                Your browser does not support the video tag.
            </video>
        </div>

        {{-- Video Details --}}
        <div class="w-full lg:w-1/3 mt-6 lg:mt-0">
            <h2 class="text-2xl font-bold text-primary-blue-variant mb-3">{{ $title }}</h2>
            <p class="text-gray-700 leading-relaxed">{{ $description }}</p>
        </div>
    </div>

    {{-- Schema.org VideoObject --}}
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "VideoObject",
        "name": "{{ $title }}",
        "description": "{{ $description }}",
        "thumbnailUrl": "{{ $thumbnail }}",
        "uploadDate": "{{ date('Y-m-d') }}", {{-- Placeholder: Replace with actual upload date --}}
        "contentUrl": "{{ $video_desktop }}", {{-- Use desktop version as primary contentUrl --}}
        "embedUrl": "{{ $video_desktop }}", {{-- If embedded, use this. For now, same as contentUrl --}}
        "interactionCount": "0" {{-- Placeholder: Can be updated dynamically --}}
    }
    </script>
</section>