/**
 * Chrome-specific video fallback
 * Since Chrome has issues with VideoJS/HLS, this script provides a fallback
 * that replaces video players with play buttons that redirect to dedicated video pages.
 */
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 corresponding dedicated pages
  const videoMappings = {
    'video-hero': '/videos/video1.html',
    'video2': '/videos/video2.html',
    'video3': '/videos/video3.html'
  };
  
  // 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 dedicated video page
    playButtonOverlay.addEventListener('click', function() {
      window.location.href = videoMappings[videoId];
    });
    
    // Hide the original video element
    videoElement.style.display = 'none';
    
    // Add the play button to the container
    videoContainer.appendChild(playButtonOverlay);
  });
});