<link rel="preload" href="{{ 'component-deferred-media.css' | asset_url }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="{{ 'section-video.css' | asset_url }}" as="style" onload="this.onload=null;this.rel='stylesheet'">

{% assign video_url_value = section.settings.video_url | strip %}
{% assign is_mp4_video = false %}

{% if video_url_value contains '.mp4' or video_url_value contains 'cloudinary.com' %}
  {% assign is_mp4_video = true %}
{% endif %}

{% if is_mp4_video %}

  <div class="video-section bijou-mp4-video-section-2026{% if section.settings.full_width == false %} page-width{% endif %}">
    <div class="bijou-mp4-video-section-2026__inner">
      <video
        class="bijou-mp4-video-section-2026__video"
        autoplay
        muted
        loop
        playsinline
        webkit-playsinline
        preload="auto"
        autoplay="autoplay"
        muted="muted"
        loop="loop"
        playsinline="playsinline"
        x-webkit-airplay="deny"
        disablepictureinpicture
        {% if section.settings.mobile_video_url != blank %}
          data-mobile-src="{{ section.settings.mobile_video_url | strip }}"
        {% endif %}
        data-desktop-src="{{ video_url_value }}"
        {% if section.settings.cover_image != blank %}
          poster="{{ section.settings.cover_image | img_url: '1920x' }}"
        {% endif %}
      >
        <source src="{{ video_url_value }}" type="video/mp4">
      </video>

      <div class="bijou-mp4-video-section-2026__overlay"></div>

      <div class="bijou-mp4-video-section-2026__content">
        {% if section.settings.heading != blank %}
          <h2>{{ section.settings.heading }}</h2>
        {% endif %}

        {% if section.settings.body_text != blank %}
          <p>{{ section.settings.body_text }}</p>
        {% endif %}

        {% if section.settings.button_label != blank and section.settings.button_link != blank %}
          <a href="{{ section.settings.button_link }}" class="bijou-mp4-video-section-2026__button">
            {{ section.settings.button_label }}
          </a>
        {% endif %}
      </div>
    </div>
  </div>

{% else %}

  <div class="video-section{% if section.settings.full_width == false %} page-width{% endif %}">
    <div class="text-center {% if section.settings.full_width %} page-width {% endif %}">
      <h2 class="title">{{ section.settings.heading }}</h2>
    </div>

    <deferred-media class="video-section__media deferred-media no-js-hidden" data-media-id="{{ section.settings.video_url }}">
      <button
        id="Deferred-Poster-Modal-{{ section.settings.video_url }}"
        class="video-section__poster media deferred-media__poster media--landscape"
        type="button"
      >
        {% if section.settings.cover_image != blank %}
          <img
            srcset="{{ section.settings.cover_image | img_url: '375x' }} 375w,{{ section.settings.cover_image | img_url: '750x' }} 750w,{{ section.settings.cover_image | img_url: '1500x' }} 1500w"
            src="{{ section.settings.cover_image | img_url: '1920x' }}"
            sizes="{% if section.settings.full_width %}100vw{% else %}(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px) calc(100vw - 10rem), 100vw{% endif %}"
            alt="{{ section.settings.heading | escape }}"
            loading="lazy"
          >
          <span class="deferred-media__poster-button motion-reduce">
            {% include 'svg-definitions' with 'icon-play' %}
          </span>
        {% endif %}
      </button>

      <iframe data-video-id="{{ section.settings.video_url }}" class="js-youtube" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </deferred-media>
  </div>

{% endif %}

<style>
  /* Override theme's global .video-section.page-width margin (5rem top/bottom) causing the gap under the header */
  .video-section.bijou-mp4-video-section-2026.page-width {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Remove the theme's default top/bottom spacing on this section so the banner sits flush under the header, like Kinn */
  .shopify-section:has(.bijou-mp4-video-section-2026),
  .spaced-section:has(.bijou-mp4-video-section-2026) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .bijou-mp4-video-section-2026 {
    width: 100%;
  }

  /* Always full-bleed, edge-to-edge like Kinn — page-width constraint removed */
  .bijou-mp4-video-section-2026.page-width {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .bijou-mp4-video-section-2026__inner {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #1f160b;
  }

  .bijou-mp4-video-section-2026__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
    display: block;
  }

  .bijou-mp4-video-section-2026__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      90deg,
      rgba(31, 22, 11, 0.58) 0%,
      rgba(31, 22, 11, 0.28) 42%,
      rgba(31, 22, 11, 0.04) 100%
    );
    pointer-events: none;
  }

  .bijou-mp4-video-section-2026__content {
    position: absolute;
    z-index: 2;
    left: 8%;
    bottom: 20%;
    max-width: 430px;
    color: #f8f6f2;
  }

  .bijou-mp4-video-section-2026__content h2 {
    margin: 0 0 14px;
    font-family: "Cormorant Garamond", Garamond, Georgia, "Times New Roman", serif;
    font-size: 44px;
    line-height: 1.08;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: #f8f6f2 !important;
  }

  .bijou-mp4-video-section-2026__content p {
    margin: 0 0 24px;
    font-family: Optima, "Optima LT Std", "Segoe UI", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 400;
    color: #f8f6f2 !important;
  }

  .bijou-mp4-video-section-2026__button {
    display: inline-block;
    padding: 11px 30px;
    background: #f8f6f2 !important;
    color: #1f160b !important;
    border: 1px solid #f8f6f2 !important;
    text-decoration: none !important;
    font-family: Optima, "Optima LT Std", "Segoe UI", Arial, sans-serif;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.04em;
    transition: all 0.25s ease;
  }

  .bijou-mp4-video-section-2026__button:hover {
    background: transparent !important;
    color: #f8f6f2 !important;
    border-color: #f8f6f2 !important;
    text-decoration: none !important;
  }

  @media screen and (max-width: 749px) {
    .bijou-mp4-video-section-2026 {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    .bijou-mp4-video-section-2026__inner {
      aspect-ratio: 16 / 9 !important;
      height: auto !important;
      overflow: hidden !important;
    }

    .bijou-mp4-video-section-2026__video {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      object-position: center center !important;
      transform: scale(1.15);
      background: #1f160b;
    }

    .bijou-mp4-video-section-2026__overlay {
      background: linear-gradient(
        180deg,
        rgba(31, 22, 11, 0.05) 0%,
        rgba(31, 22, 11, 0.28) 100%
      );
    }

    .bijou-mp4-video-section-2026__content {
      left: 6%;
      right: 6%;
      bottom: 22%;
      max-width: none;
    }

    .bijou-mp4-video-section-2026__content h2 {
      font-size: 36px;
      line-height: 1.12;
    }

    .bijou-mp4-video-section-2026__content p {
      font-size: 16px;
      line-height: 1.55;
    }

    .bijou-mp4-video-section-2026__button {
      padding: 6px 14px;
      font-size: 10px;
    }
  }
</style>

<script>
(function () {
  function setupBijouVideos() {
    const videos = document.querySelectorAll('.bijou-mp4-video-section-2026__video');

    videos.forEach(function(video) {
      if (video.dataset.bijouInit === 'true') return;
      video.dataset.bijouInit = 'true';

      video.muted = true;
      video.defaultMuted = true;
      video.loop = true;
      video.autoplay = true;
      video.playsInline = true;
      video.removeAttribute('controls');

      const mobileSrc = video.getAttribute('data-mobile-src');
      const desktopSrc = video.getAttribute('data-desktop-src');
      const isMobileViewport = window.innerWidth <= 749;
      const targetSrc = (mobileSrc && isMobileViewport) ? mobileSrc : desktopSrc;

      if (targetSrc) {
        let sourceEl = video.querySelector('source');
        if (!sourceEl) {
          sourceEl = document.createElement('source');
          sourceEl.type = 'video/mp4';
          video.appendChild(sourceEl);
        }
        sourceEl.setAttribute('src', targetSrc);
        video.load();
      }

      function playVideo() {
        const promise = video.play();
        if (promise !== undefined) {
          promise.catch(function() {});
        }
      }

      playVideo();

      video.addEventListener('loadeddata', playVideo);

      video.addEventListener('ended', function() {
        video.currentTime = 0;
        playVideo();
      });

      video.addEventListener('pause', function() {
        if (!document.hidden) {
          playVideo();
        }
      });

      document.addEventListener('visibilitychange', function() {
        if (!document.hidden) {
          playVideo();
        }
      });

      window.addEventListener('focus', function() {
        playVideo();
      });
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', setupBijouVideos);
  } else {
    setupBijouVideos();
  }
})();
</script>

{% schema %}
{
  "name": { "en_US": "Video", "zh_TW": "影片", "zh_CN": "影片", "ms_MY": "Video" },
  "tag": "section",
  "class": "spaced-section spaced-section--full-width",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "default": { "en_US": "Video", "zh_TW": "影片標題", "zh_CN": "影片标题", "ms_MY": "Video" },
      "label": { "en_US": "Video heading", "zh_TW": "影片標題", "zh_CN": "影片标题", "ms_MY": "Video heading" }
    },
    {
      "type": "text",
      "id": "body_text",
      "default": "Timeless brilliance, made for everyday elegance.",
      "label": { "en_US": "Body text", "zh_TW": "內文", "zh_CN": "正文", "ms_MY": "Body text" }
    },
    {
      "type": "text",
      "id": "button_label",
      "default": "Shop The Collection",
      "label": { "en_US": "Button label", "zh_TW": "按鈕文字", "zh_CN": "按钮文字", "ms_MY": "Button label" }
    },
    {
      "type": "text",
      "id": "button_link",
      "default": "/collections/tennis-collection",
      "label": { "en_US": "Button link", "zh_TW": "按鈕連結", "zh_CN": "按钮链接", "ms_MY": "Button link" }
    },
    {
      "type": "image",
      "id": "cover_image",
      "label": { "en_US": "Image", "zh_TW": "顯示圖片", "zh_CN": "显示图片", "ms_MY": "Imej" }
    },
    {
      "label": { "en_US": "Video URL", "zh_TW": "影片連結", "zh_CN": "影片链接", "ms_MY": "Video URL" },
      "type": "text",
      "id": "video_url",
      "default": "https://res.cloudinary.com/de4kjr9tt/video/upload/v1781547065/Website_Banner_1_cbrfju.mp4",
      "info": "Paste YouTube URL or direct MP4 URL here"
    },
    {
      "label": { "en_US": "Mobile Video URL", "zh_TW": "手機版影片連結", "zh_CN": "手机版影片链接", "ms_MY": "Mobile Video URL" },
      "type": "text",
      "id": "mobile_video_url",
      "default": "https://res.cloudinary.com/de4kjr9tt/video/upload/v1781978613/Website_Banner_2_ckxo83.mp4",
      "info": "Optional. Paste a separate Cloudinary/MP4 URL for mobile (below 750px). Leave blank to reuse the desktop video."
    },
    {
      "label": { "en_US": "Full Width", "zh_TW": "全螢幕寬度", "zh_CN": "全萤幕宽度", "ms_MY": "Kelebaran Penuh" },
      "type": "checkbox",
      "id": "full_width",
      "default": false
    }
  ],
  "presets": [
    {
      "name": { "en_US": "Video", "zh_TW": "影片", "zh_CN": "影片", "ms_MY": "Video" }
    }
  ]
}
{% endschema %}
