<!-- BACKGROUND OVERLAY -->
<div id="video-overlay"></div> 
  <!-- VIDEO POPUP -->
<div id="video-popup">
  <button id="close-video" aria-label="Close video popup">×</button>
  <div class="video-wrapper" id="video-container">
    <div id="player"></div>
    <div id="video-controls">
      <button id="play-pause">⏸</button>
      <button id="mute-unmute">🔊</button>
    </div>
  </div>
</div>

<!-- MINI BUTTON TO REOPEN VIDEO -->
<button id="reopen-video" title="Watch video again">🎬</button>

#video-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vw;
  max-width: 800px;
  aspect-ratio: 16 / 9;
  background: black;
  z-index: 9999;
  transition: all 0.3s ease-in-out;
  display: block;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

#video-popup.sticky {
  width: 300px;
  height: 168px;
  top: auto;
  left: auto;
  bottom: 20px;
  right: 20px;
  transform: none;
}

.video-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

#player {
  width: 100%;
  height: 100%;
}

#video-controls {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 10000;
  display: flex;
  gap: 10px;
}

#video-controls button {
  background: rgba(0,0,0,0.6);
  border: none;
  color: white;
  padding: 6px 12px;
  font-size: 18px;
  cursor: pointer;
  border-radius: 5px;
}

/* Close button */
#close-video {
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: 24px;
  color: white;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10000;
  font-weight: bold;
}

/* Reopen icon */
#reopen-video {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 28px;
  background: #000;
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 9999;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

#video-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5); /* 50% black */
  z-index: 9998;
  display: block; /* visible on load */
  transition: opacity 0.3s ease-in-out;
}

#video-overlay.hidden {
  display: none;
}

// Load YouTube API
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
document.head.appendChild(tag);

let player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    videoId: 'nbVNhIzAITg',
    playerVars: {
      autoplay: 1,
      controls: 0,
      modestbranding: 1,
      rel: 0,
      showinfo: 0,
      enablejsapi: 1
    },
    events: {
      onReady: function (event) {
  event.target.mute(); // Start muted
  event.target.playVideo();
  document.getElementById("mute-unmute").textContent = "🔇"; // <-- update icon to muted
}
    }
  });
}

document.addEventListener("DOMContentLoaded", function () {
  const popup = document.getElementById("video-popup");
  const closeBtn = document.getElementById("close-video");
  const reopenBtn = document.getElementById("reopen-video");

  const playPauseBtn = document.getElementById("play-pause");
  const muteUnmuteBtn = document.getElementById("mute-unmute");
  const overlay = document.getElementById("video-overlay");


  // Sticky on scroll
window.addEventListener("scroll", function () {
  if (popup.style.display === "none") return;

  if (window.scrollY > 300) {
    popup.classList.add("sticky");
    overlay.classList.add("hidden");
  } else {
    popup.classList.remove("sticky");
    overlay.classList.remove("hidden");
  }
});


  // Close popup
closeBtn.addEventListener("click", function () {
  popup.style.display = "none";
  player.stopVideo();
  reopenBtn.style.display = "block";
  overlay.classList.add("hidden"); // <-- hide overlay
});


  // Reopen popup
reopenBtn.addEventListener("click", function () {
  popup.style.display = "block";
  player.playVideo();
  reopenBtn.style.display = "none";
  if (window.scrollY <= 300) overlay.classList.remove("hidden"); // show only if not docked
});


  // Play/Pause toggle
  playPauseBtn.addEventListener("click", function () {
    const state = player.getPlayerState();
    if (state === YT.PlayerState.PLAYING) {
      player.pauseVideo();
      playPauseBtn.textContent = "▶️";
    } else {
      player.playVideo();
      playPauseBtn.textContent = "⏸";
    }
  });

  // Mute/Unmute toggle
  muteUnmuteBtn.addEventListener("click", function () {
    if (player.isMuted()) {
      player.unMute();
      muteUnmuteBtn.textContent = "🔊";
    } else {
      player.mute();
      muteUnmuteBtn.textContent = "🔇";
    }
  });
});