{%- if block.settings.video != blank -%}
  <div
    class="video-popup-wrapper {{ block.settings.visibility }}"
    {{ block.shopify_attributes }}
    style="width: 100%;--margin-top: {{ block.settings.margin_top | divided_by: 10.0 }}rem;--margin-bottom: {{ block.settings.margin_bottom | divided_by: 10.0 }}rem;"
  >
    <div style="width: 100%; text-align: {{ block.settings.link_alignment | default: 'left' }};">
      <a
        href="#"
        class="video-popup-trigger"
        style="
          font-size: {{ block.settings.link_font_size | default: 16 }}px;
          color: {{ block.settings.link_color | default: '#000000' }};
          font-weight: {% if block.settings.link_bold %}bold{% else %}normal{% endif %};
          text-decoration: {% if block.settings.link_underline %}underline{% else %}none{% endif %};
          display: inline-block;
        "
        data-video-id="{{ block.id }}"
      >
        {% if block.settings.link_text != blank %}
          {{ block.settings.link_text }}
        {% else %}
          Watch Video
        {% endif %}
      </a>
    </div>

    <!-- Video Popup Modal -->
    <div
      class="video-popup-modal"
      id="video-modal-{{ block.id }}"
      style="display: none;"
      data-modal-id="{{ block.id }}"
    >
      <div class="video-popup-overlay" data-close-modal="{{ block.id }}"></div>
      <div class="video-popup-content">
        <button class="video-popup-close" data-close-modal="{{ block.id }}">&times;</button>

        <div class="video-container">
          <internal-video
            class="internal-video{% if block.settings.muted_autoplay %} internal-video--playing internal-video--muted{% endif %}"
            data-autoplay="{{ block.settings.muted_autoplay }}"
            data-block-id="{{ block.id }}"
          >
            {% liquid
              if block.settings.thumbnail != blank
                assign thumbnail = block.settings.thumbnail
              else
                assign thumbnail = block.settings.video.preview_image
              endif
            %}
            <video
              width="100%"
              height="auto"
              preload="metadata"
              poster="{{ thumbnail | image_url }}"
              {% if block.settings.loop %}
                loop
              {% endif %}
              {% if block.settings.muted_autoplay %}
                muted
              {% endif %}
              playsinline
              disablepictureinpicture
              id="video-element-{{ block.id }}"
            >
              {% for source in block.settings.video.sources %}
                <source
                  {% if block.settings.muted_autoplay %}
                    data-
                  {% endif -%}
                  src="{{ source.url }}"
                  type="{{ source.mime_type }}"
                >
              {% endfor %}
            </video>
            {% if block.settings.display_play_btn or block.settings.muted_autoplay == false %}
              <button class="internal-video__play">
                <div class="play-button color-{{ block.settings.btn_color_scheme }}{% if block.settings.btn_animation %} ripple-animation{% endif %}">
                  <svg fill="currentColor" height="24" role="img" viewBox="0 0 24 24" width="24">
                    <path d="M8 5v14l11-7z"/>
                  </svg>
                </div>
              </button>
            {% endif %}
            {% if block.settings.display_timeline %}
              <div class="internal-video__timeline accent-color-{{ block.settings.timeline_color }}">&nbsp;</div>
            {% endif %}
            {% if block.settings.display_sound_btn %}
              <button class="internal-video__sound-btn flex-center color-{{ block.settings.sound_btn_color_scheme }}">
                <svg class="sound-off" fill="currentColor" height="12" role="img" viewBox="0 0 48 48" width="12">
                  <path clip-rule="evenodd" d="M1.5 13.3c-.8 0-1.5.7-1.5 1.5v18.4c0 .8.7 1.5 1.5 1.5h8.7l12.9 12.9c.9.9 2.5.3 2.5-1v-9.8c0-.4-.2-.8-.4-1.1l-22-22c-.3-.3-.7-.4-1.1-.4h-.6zm46.8 31.4-5.5-5.5C44.9 36.6 48 31.4 48 24c0-11.4-7.2-17.4-7.2-17.4-.6-.6-1.6-.6-2.2 0L37.2 8c-.6.6-.6 1.6 0 2.2 0 0 5.7 5 5.7 13.8 0 5.4-2.1 9.3-3.8 11.6L35.5 32c1.1-1.7 2.3-4.4 2.3-8 0-6.8-4.1-10.3-4.1-10.3-.6-.6-1.6-.6-2.2 0l-1.4 1.4c-.6.6-.6 1.6 0 2.2 0 0 2.6 2 2.6 6.7 0 1.8-.4 3.2-.9 4.3L25.5 22V1.4c0-1.3-1.6-1.9-2.5-1L13.5 10 3.3-.3c-.6-.6-1.5-.6-2.1 0L-.2 1.1c-.6.6-.6 1.5 0 2.1L4 7.6l26.8 26.8 13.9 13.9c.6.6 1.5.6 2.1 0l1.4-1.4c.7-.6.7-1.6.1-2.2z" fill-rule="evenodd"></path>
                </svg>
                <svg class="sound-on" fill="currentColor" height="12" role="img" viewBox="0 0 24 24" width="12">
                  <path d="M16.636 7.028a1.5 1.5 0 1 0-2.395 1.807 5.365 5.365 0 0 1 1.103 3.17 5.378 5.378 0 0 1-1.105 3.176 1.5 1.5 0 1 0 2.395 1.806 8.396 8.396 0 0 0 1.71-4.981 8.39 8.39 0 0 0-1.708-4.978Zm3.73-2.332A1.5 1.5 0 1 0 18.04 6.59 8.823 8.823 0 0 1 20 12.007a8.798 8.798 0 0 1-1.96 5.415 1.5 1.5 0 0 0 2.326 1.894 11.672 11.672 0 0 0 2.635-7.31 11.682 11.682 0 0 0-2.635-7.31Zm-8.963-3.613a1.001 1.001 0 0 0-1.082.187L5.265 6H2a1 1 0 0 0-1 1v10.003a1 1 0 0 0 1 1h3.265l5.01 4.682.02.021a1 1 0 0 0 1.704-.814L12.005 2a1 1 0 0 0-.602-.917Z"></path>
                </svg>
              </button>
            {% endif %}
          </internal-video>
        </div>
      </div>
    </div>
  </div>

  <style>
        .video-popup-wrapper {
          display: inline-block;
        }

        .video-popup-trigger {
          color: var(--color-link, #1a73e8);
          text-decoration: underline;
          cursor: pointer;
          font-size: 1rem;
          transition: color 0.3s ease;
        }

        .video-popup-trigger:hover {
          color: var(--color-link-hover, #0d47a1);
        }

        .video-popup-modal {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 9999;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .video-popup-overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.8);
          cursor: pointer;
        }

        .video-popup-content {
          position: relative;
          max-width: 90vw;
          max-height: 90vh;
          background: #000;
          border-radius: 8px;
          overflow: hidden;
        }

        .video-popup-close {
          position: absolute;
          top: 10px;
          right: 15px;
          background: rgba(0, 0, 0, 0.5);
          border: none;
          color: white;
          font-size: 24px;
          cursor: pointer;
          z-index: 10;
          width: 30px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
        }

        .video-popup-modal .video-container {
          position: relative;
          width: 100%;
          min-width: 300px;
        }

        .video-popup-modal .video-container video {
          cursor: pointer;
        }

        .video-popup-modal .internal-video__play {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: none;
          border: none;
          cursor: pointer;
          z-index: 5;
          transition: opacity 0.3s ease;
        }

        .video-popup-modal .play-button {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.3s ease;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }

        .video-popup-modal .play-button:hover {
          transform: scale(1.1);
        }

        .video-popup-modal .play-button svg {
          width: 24px;
          height: 24px;
          margin-left: 3px;
        }

        .video-popup-modal .internal-video--playing .internal-video__play {
          opacity: 0;
          pointer-events: none;
        }

        .video-popup-modal .flex-center {
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .video-popup-modal .ripple-animation:active {
          animation: ripple 0.6s linear;
        }

        @keyframes ripple {
          0% {
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
          }
          70% {
            box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
          }
          100% {
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
          }
        }

        @media (max-width: 768px) {
          .video-popup-content {
            max-width: 95vw;
            max-height: 85vh;
          }

          .video-popup-modal .play-button {
            width: 50px;
            height: 50px;
          }

          .video-popup-modal .play-button svg {
            width: 20px;
            height: 20px;
          }
        }
      .video-popup-wrapper {
      display: block !important; /* ensure full width */
      width: 100%;
    }
  </style>

  <script>
   (function () {
  const videoPopups = {};

  function initVideoPopup(blockId) {
    const trigger = document.querySelector(`[data-video-id="${blockId}"]`);
    const modal = document.getElementById(`video-modal-${blockId}`);
    const video = document.getElementById(`video-element-${blockId}`);
    const internalVideo = modal?.querySelector('internal-video');
    const playBtn = modal?.querySelector('.internal-video__play');
    const soundBtn = modal?.querySelector('.internal-video__sound-btn');
    const timeline = modal?.querySelector('.internal-video__timeline');

    if (!trigger || !modal || !video) return;

    videoPopups[blockId] = {
      trigger, modal, video, internalVideo, playBtn, soundBtn, timeline,
      isPlaying: false,
      isMuted: video.muted
    };

    // Remove existing listeners (avoid duplicates on reinit)
    trigger.replaceWith(trigger.cloneNode(true));
    const newTrigger = document.querySelector(`[data-video-id="${blockId}"]`);

    newTrigger.addEventListener('click', function (e) {
      e.preventDefault();
      openModal(blockId);
    });

    modal.querySelectorAll('[data-close-modal]').forEach(closeBtn => {
      closeBtn.replaceWith(closeBtn.cloneNode(true));
    });
    modal.querySelectorAll('[data-close-modal]').forEach(closeBtn => {
      closeBtn.addEventListener('click', () => closeModal(blockId));
    });

    modal.addEventListener('click', function (e) {
      if (e.target === modal || e.target.classList.contains('video-popup-overlay')) {
        closeModal(blockId);
      }
    });

    if (playBtn) {
      playBtn.replaceWith(playBtn.cloneNode(true));
      modal.querySelector('.internal-video__play').addEventListener('click', (e) => {
        e.stopPropagation();
        togglePlay(blockId);
      });
    }

    video.addEventListener('click', function (e) {
      e.stopPropagation();
      togglePlay(blockId);
    });

    if (soundBtn) {
      soundBtn.replaceWith(soundBtn.cloneNode(true));
      modal.querySelector('.internal-video__sound-btn').addEventListener('click', (e) => {
        e.stopPropagation();
        toggleSound(blockId);
      });
    }

    if (timeline) {
      timeline.replaceWith(timeline.cloneNode(true));
      modal.querySelector('.internal-video__timeline').addEventListener('click', (e) => {
        e.stopPropagation();
        seekVideo(blockId, e);
      });
      video.addEventListener('timeupdate', () => updateTimeline(blockId));
    }

    video.addEventListener('play', () => {
      videoPopups[blockId].isPlaying = true;
      internalVideo?.classList.add('internal-video--playing');
    });

    video.addEventListener('pause', () => {
      videoPopups[blockId].isPlaying = false;
      internalVideo?.classList.remove('internal-video--playing');
    });

    video.addEventListener('ended', () => {
      videoPopups[blockId].isPlaying = false;
      internalVideo?.classList.remove('internal-video--playing');
    });
  }

  function openModal(blockId) {
    const popup = videoPopups[blockId];
    if (!popup) return;

    popup.modal.style.display = 'flex';
    document.body.style.overflow = 'hidden';

    if (popup.internalVideo?.dataset.autoplay === 'true') {
      popup.video.play();
    }
  }

  function closeModal(blockId) {
    const popup = videoPopups[blockId];
    if (!popup) return;

    popup.modal.style.display = 'none';
    document.body.style.overflow = '';
    popup.video.pause();
    popup.video.currentTime = 0;
    popup.isPlaying = false;
    popup.internalVideo?.classList.remove('internal-video--playing');
  }

  function togglePlay(blockId) {
    const popup = videoPopups[blockId];
    if (!popup) return;

    if (popup.isPlaying) {
      popup.video.pause();
    } else {
      popup.video.play();
    }
  }

  function toggleSound(blockId) {
    const popup = videoPopups[blockId];
    if (!popup) return;

    popup.video.muted = !popup.video.muted;
    popup.isMuted = popup.video.muted;

    if (popup.video.muted) {
      popup.internalVideo?.classList.add('internal-video--muted');
    } else {
      popup.internalVideo?.classList.remove('internal-video--muted');
    }
  }

  function seekVideo(blockId, event) {
    const popup = videoPopups[blockId];
    if (!popup || !popup.timeline) return;

    const rect = popup.timeline.getBoundingClientRect();
    const pos = (event.clientX - rect.left) / rect.width;
    popup.video.currentTime = pos * popup.video.duration;
  }

  function updateTimeline(blockId) {
    const popup = videoPopups[blockId];
    if (!popup || !popup.timeline) return;

    const progress = (popup.video.currentTime / popup.video.duration) * 100;
    popup.timeline.style.setProperty('--progress', `${progress}%`);
    popup.timeline.style.background = `linear-gradient(to right, currentColor ${progress}%, rgba(255,255,255,0.3) ${progress}%)`;
  }

  function initAllVideoPopups() {
    document.querySelectorAll('.video-popup-trigger').forEach(trigger => {
      const blockId = trigger.dataset.videoId;
      if (blockId) {
        initVideoPopup(blockId);
      }
    });
  }

  // Initial load
  document.addEventListener('DOMContentLoaded', initAllVideoPopups);

  // Shopify theme editor reinitialization
  document.addEventListener('shopify:section:load', initAllVideoPopups);
  document.addEventListener('shopify:block:select', initAllVideoPopups);
  document.addEventListener('shopify:block:deselect', initAllVideoPopups);

  // Escape key to close
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') {
      Object.keys(videoPopups).forEach(blockId => {
        if (videoPopups[blockId].modal.style.display === 'flex') {
          closeModal(blockId);
        }
      });
    }
  });
})();
  </script>
{%- else -%}
  <div class="video-popup-placeholder">
    {{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
    <p>Select a video in the theme editor</p>
  </div>
{%- endif -%}
