/**
 * Chrome-specific video fallback
 * Since Chrome has issues with VideoJS/HLS, this script provides a fallback
 * that replaces video players with play buttons that open videos in a new page.
 */
document.addEventListener('DOMContentLoaded', function() {
  // Only run this script for Chrome browsers
  const isChrome = /Chrome/.test(navigator.userAgent) && !/Edge/.test(navigator.userAgent) && !/OPR/.test(navigator.userAgent);
  
  if (!isChrome) {
    return; // Exit if not Chrome
  }

  // Videos to handle with IDs and their mp4 sources
  const videoMappings = {
    'video-hero': '/static/videos/video1.mp4',
    'video2': '/static/videos/video2.mp4',
    'video3': '/static/videos/video3.mp4'
  };
  
  // Process each video
  Object.keys(videoMappings).forEach(function(videoId) {
    const videoElement = document.getElementById(videoId);
    if (!videoElement) return;
    
    const videoContainer = videoElement.closest('.video-container');
    if (!videoContainer) return;
    
    // Get poster image
    const posterUrl = videoElement.getAttribute('poster');
    
    // Create play button overlay
    const playButtonOverlay = document.createElement('div');
    playButtonOverlay.className = 'chrome-play-overlay';
    playButtonOverlay.innerHTML = `
      <div class="chrome-play-button">
        <svg xmlns="http://www.w3.org/2000/svg" width="68" height="48" viewBox="0 0 68 48">
          <path fill="#f00" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path>
          <path fill="#fff" d="M 45,24 27,14 27,34"></path>
        </svg>
      </div>
    `;
    
    // Style the container for positioning
    videoContainer.style.position = 'relative';
    
    // Create a poster image as background
    if (posterUrl) {
      const posterImage = document.createElement('div');
      posterImage.className = 'chrome-poster-image';
      posterImage.style.backgroundImage = `url(${posterUrl})`;
      videoContainer.appendChild(posterImage);
    }
    
    // Add click event to open the video in a new page/overlay
    playButtonOverlay.addEventListener('click', function() {
      // Create the lightbox overlay
      const lightbox = document.createElement('div');
      lightbox.className = 'video-lightbox';
      lightbox.innerHTML = `
        <div class="video-lightbox-content">
          <button class="close-lightbox">&times;</button>
          <video controls autoplay>
            <source src="${videoMappings[videoId]}" type="video/mp4">
            Your browser does not support the video tag.
          </video>
        </div>
      `;
      
      // Add the lightbox to the body
      document.body.appendChild(lightbox);
      
      // Add close functionality
      const closeButton = lightbox.querySelector('.close-lightbox');
      closeButton.addEventListener('click', function() {
        document.body.removeChild(lightbox);
      });
      
      // Close when clicking outside the video
      lightbox.addEventListener('click', function(e) {
        if (e.target === lightbox) {
          document.body.removeChild(lightbox);
        }
      });
    });
    
    // Hide the original video element
    videoElement.style.display = 'none';
    
    // Add the play button to the container
    videoContainer.appendChild(playButtonOverlay);
  });
});