<!-- Shared video lightbox overlay. Must be inside an x-data="videoLightbox()" scope. -->
<div x-show="isOpen" x-transition.opacity @keydown.escape.window="close()"
     class="fixed inset-0 z-[60] bg-black/95 backdrop-blur flex items-center justify-center p-4"
     @click.self="close()"
     style="display:none">
  <button @click="close()" class="absolute top-6 right-6 text-bone/80 hover:text-gold text-3xl w-12 h-12 flex items-center justify-center rounded-full bg-ink/60 border border-white/10 z-10" aria-label="Close">×</button>
  <div class="relative w-full max-w-5xl aspect-video bg-ink border border-white/10 rounded-lg overflow-hidden shadow-2xl">
    <!-- Native video -->
    <template x-if="provider === 'native' && isOpen">
      <video :src="src" class="w-full h-full bg-black" controls autoplay playsinline></video>
    </template>
    <!-- YouTube / Vimeo embed -->
    <template x-if="(provider === 'youtube' || provider === 'vimeo') && isOpen">
      <iframe :src="src" class="w-full h-full" allowfullscreen allow="autoplay; fullscreen; encrypted-media; picture-in-picture" frameborder="0"></iframe>
    </template>
  </div>
</div>
<script>
function videoLightbox() {
  return {
    isOpen: false,
    src: '',
    provider: 'native',
    open(url, provider) {
      this.src = url;
      this.provider = provider || 'native';
      this.isOpen = true;
      document.body.style.overflow = 'hidden';
    },
    close() {
      this.isOpen = false;
      this.src = '';
      document.body.style.overflow = '';
    },
  };
}
window.videoLightbox = videoLightbox;
</script>
