<video
  id="heroVideo"
  muted
  autoplay
  loop
  playsinline
  preload="auto"
  class="w-full h-auto object-cover opacity-0 transition-opacity duration-300"
></video>

<script>
(() => {
  const video = document.getElementById("heroVideo");
  if (!video) return;

  // WebM versions (tumhe yeh files banani hongi)
  const mobileWebm =
    "https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/video/ef-mobile-video-revised.webm";
  const desktopWebm =
    "https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/video/ef-video.webm";

  // MP4 fallback (existing files)
  const mobileMp4 =
    "https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/video/ef-mobile-video-revised.mp4";
  const desktopMp4 =
    "https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/video/ef-video.mp4";

  const isMobile = window.innerWidth < 768;

  const webmSrc = isMobile ? mobileWebm : desktopWebm;
  const mp4Src  = isMobile ? mobileMp4  : desktopMp4;

  // check WebM support
  const canWebm = video.canPlayType('video/webm; codecs="vp9,opus"') ||
                  video.canPlayType('video/webm; codecs="vp8,vorbis"');

  // page load hote hi best format set karo
  video.src = canWebm ? webmSrc : mp4Src;

  // jaise hi first frame milti hai, video dikhao + play
  const showAndPlay = () => {
    video.style.opacity = "1";
    video.play().catch(() => {});
  };

  video.addEventListener("loadeddata", showAndPlay, { once: true });

  video.load();

  // iOS Safari ke liye first touch par ensure play (Safari WebM support nahi, MP4 hi chalega)
  document.addEventListener("touchstart", () => {
    video.play().catch(() => {});
  }, { once: true });
})();
</script>
<?php /**PATH /home1/eggfirst/public_html/resources/views/components/hero.blade.php ENDPATH**/ ?>