{%- comment -%}
  MIT License · (c) 2026 Lintel · https://lintelagency.com/resources/shopify-sections
{%- endcomment -%}
{%- comment -%}
  Video: a Shopify-hosted video or a YouTube / Vimeo link, shown three ways:
  - inline: poster with a play button, the player loads in place on click (or autoplays muted)
  - background: muted ambient loop with a pause / play button, no controls
  - lightbox: poster with a play button that opens the player in a native <dialog>
  The player (video or iframe) is only created on play, open or when a background video scrolls near,
  so nothing third-party loads with the page. YouTube uses youtube-nocookie.com, Vimeo dnt=1.
  Under prefers-reduced-motion nothing autoplays.
  Depends on: snippets/lib-image.liquid, snippets/lib-button.liquid
{%- endcomment -%}

{%- liquid
  assign s = section.settings
  assign heading_tag = s.heading_tag | default: 'h2'
  assign mode = s.mode | default: 'lightbox'
  assign eager = false
  if section.index <= 2
    assign eager = true
  endif

  assign text_position = s.text_position
  if mode == 'inline'
    assign text_position = 'above'
  endif

  assign src_type = ''
  assign src_id = ''
  if s.video != blank
    assign src_type = 'shopify'
  elsif s.video_url != blank
    assign src_type = s.video_url.type
    assign src_id = s.video_url.id
    if src_type == blank
      comment
        Fallback for a plain URL string (theme preview tools); Shopify gives type and id.
      endcomment
      assign raw = s.video_url | append: ''
      if raw contains 'vimeo.com/'
        assign src_type = 'vimeo'
        assign src_id = raw | split: 'vimeo.com/' | last | split: '?' | first | split: '/' | first
      elsif raw contains 'youtu.be/'
        assign src_type = 'youtube'
        assign src_id = raw | split: 'youtu.be/' | last | split: '?' | first
      elsif raw contains 'v='
        assign src_type = 'youtube'
        assign src_id = raw | split: 'v=' | last | split: '&' | first
      elsif raw contains '/shorts/' or raw contains '/embed/'
        assign src_type = 'youtube'
        assign src_id = raw | split: '/' | last | split: '?' | first
      endif
    endif
  endif

  assign autoplay = false
  if mode == 'inline' and s.autoplay
    assign autoplay = true
  endif
  assign muted = false
  if mode == 'background' or autoplay or mode == 'inline' and s.muted
    assign muted = true
  endif
  assign loop = false
  if mode == 'background' or s.loop
    assign loop = true
  endif
  assign controls = true
  if mode == 'background' or mode == 'inline' and s.controls == false
    assign controls = false
  endif

  assign embed = ''
  if src_type == 'youtube'
    assign embed = 'https://www.youtube-nocookie.com/embed/' | append: src_id | append: '?autoplay=1&playsinline=1&rel=0'
    if muted
      assign embed = embed | append: '&mute=1'
    endif
    if loop
      assign embed = embed | append: '&loop=1&playlist=' | append: src_id
    endif
    if controls == false
      assign embed = embed | append: '&controls=0'
    endif
    if mode == 'background'
      assign embed = embed | append: '&enablejsapi=1&disablekb=1&iv_load_policy=3'
    endif
  elsif src_type == 'vimeo'
    assign embed = 'https://player.vimeo.com/video/' | append: src_id | append: '?dnt=1'
    if mode == 'background'
      assign embed = embed | append: '&background=1'
    else
      assign embed = embed | append: '&autoplay=1'
      if muted
        assign embed = embed | append: '&muted=1'
      endif
      if loop
        assign embed = embed | append: '&loop=1'
      endif
      if controls == false
        assign embed = embed | append: '&controls=0'
      endif
    endif
  endif

  assign has_video = false
  if src_type == 'shopify' or embed != blank
    assign has_video = true
  endif

  assign poster = s.poster
  if poster == blank and src_type == 'shopify'
    assign poster = s.video.preview_image
  endif

  assign video_title = s.video_title | default: 'Video' | escape
  assign play_label = s.play_label | strip
  assign play_name = play_label | default: 'Play video' | escape | append: ': ' | append: video_title

  assign dialog_ratio = '16 / 9'
  if src_type == 'shopify' and s.video.aspect_ratio != blank
    assign dialog_ratio = s.video.aspect_ratio
  endif

  assign has_content = false
  if s.eyebrow != blank or s.heading != blank or s.text != blank or s.button_label != blank
    assign has_content = true
  endif
  if text_position == 'overlay' and mode == 'lightbox' and has_video
    assign has_content = true
  endif
-%}

{%- capture play_button -%}
  <button
    type="button"
    class="lib-video__play{% if play_label == blank %} lib-video__play--icon{% endif %}"
    aria-label="{{ play_name }}"
    {% if mode == 'lightbox' %}
      aria-haspopup="dialog"
    {% endif %}
  >
    <span class="lib-video__play-icon" aria-hidden="true">
      <svg viewBox="0 0 24 24" width="22" height="22" focusable="false"><path d="M8 5.5v13l10.5-6.5z" fill="currentColor"/></svg>
    </span>
    {%- if play_label != blank -%}
      <span class="lib-video__play-label">{{ play_label | escape }}</span>
    {%- endif -%}
  </button>
{%- endcapture -%}

<div
  class="lib-video lib-video--{{ s.section_width }}"
  {% if s.anchor_id != blank %}
    id="{{ s.anchor_id | handleize }}"
  {% endif %}
  data-show="{{ s.show_on }}"
  data-text="{{ text_position }}"
  style="
    --lib-bg: {{ s.color_bg }};
    --lib-text: {{ s.color_text }};
    --lib-on-video: {{ s.color_on_video }};
    --lib-accent: {{ s.color_accent }};
    --lib-accent-text: {{ s.color_accent_text }};
    --lib-overlay: {{ s.overlay_color }};
    --lib-overlay-o: {{ s.overlay_opacity | divided_by: 100.0 }};
    --lib-radius-frame: {{ s.corner_radius }}px;
    --lib-ratio: {{ s.ratio | replace: '-', ' / ' }};
    --lib-ratio-m: {{ s.ratio_mobile | replace: '-', ' / ' }};
    --lib-dialog-ratio: {{ dialog_ratio }};
    --lib-pt: {{ s.padding_top }}px;
    --lib-pb: {{ s.padding_bottom }}px;
    --lib-pt-m: {{ s.padding_top_mobile }}px;
    --lib-pb-m: {{ s.padding_bottom_mobile }}px;
  "
>
  <lib-video-player
    class="lib-video__inner"
    data-mode="{{ mode }}"
    data-src="{{ src_type }}"
    data-toggle-label="Pause or play: {{ video_title }}"
    {% if autoplay %}
      data-autoplay
    {% endif %}
  >
    {%- if has_content -%}
      <div class="lib-video__content" data-align="{{ s.text_alignment }}" data-align-m="{{ s.text_alignment_mobile }}">
        {%- if s.eyebrow != blank -%}
          <p class="lib-video__eyebrow">{{ s.eyebrow | escape }}</p>
        {%- endif -%}

        {%- if s.heading != blank -%}
          <{{ heading_tag }} class="lib-video__heading lib-video__heading--{{ s.heading_size }}">
            {{- s.heading -}}
          </{{ heading_tag }}>
        {%- endif -%}

        {%- if s.text != blank -%}
          <div class="lib-video__text">{{ s.text }}</div>
        {%- endif -%}

        {%- if text_position == 'overlay' and mode == 'lightbox' and has_video -%}
          <div class="lib-video__actions">
            {{ play_button }}
            {%- render 'lib-button', label: s.button_label, url: s.button_url, style: s.button_style -%}
          </div>
        {%- elsif s.button_label != blank -%}
          <div class="lib-video__actions">
            {%- render 'lib-button', label: s.button_label, url: s.button_url, style: s.button_style -%}
          </div>
        {%- endif -%}
      </div>
    {%- endif -%}

    <div class="lib-video__stage">
      <div class="lib-video__poster">
        {%- render 'lib-image',
          image: poster,
          image_mobile: s.poster_mobile,
          class: 'lib-video__img',
          sizes: '(min-width: 1200px) 1200px, 100vw',
          eager: eager
        -%}
      </div>
      <div class="lib-video__slot"></div>
      <div class="lib-video__overlay" aria-hidden="true"></div>

      {%- if has_video -%}
        {%- if mode == 'background' -%}
          <button
            type="button"
            class="lib-video__toggle"
            aria-label="Play background video"
            data-label-play="Play background video"
            data-label-pause="Pause background video"
            data-state="paused"
          >
            <svg class="lib-video__toggle-play" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" focusable="false"><path d="M8 5.5v13l10.5-6.5z" fill="currentColor"/></svg>
            <svg class="lib-video__toggle-pause" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" focusable="false"><path d="M7 5h3.5v14H7zM13.5 5H17v14h-3.5z" fill="currentColor"/></svg>
          </button>
        {%- elsif text_position != 'overlay' or mode == 'inline' -%}
          <div class="lib-video__play-wrap">{{ play_button }}</div>
        {%- endif -%}
      {%- endif -%}
    </div>

    {%- if has_video -%}
      <template class="lib-video__tpl">
        {%- if src_type == 'shopify' -%}
          {{
            s.video
            | video_tag:
              class: 'lib-video__media',
              autoplay: true,
              muted: muted,
              loop: loop,
              controls: controls,
              playsinline: true,
              preload: 'metadata'
          }}
        {%- else -%}
          <iframe
            class="lib-video__media"
            src="{{ embed | escape }}"
            title="{{ video_title }}"
            allow="autoplay; encrypted-media; picture-in-picture; fullscreen"
            allowfullscreen
            referrerpolicy="strict-origin-when-cross-origin"
            {% if mode == 'background' %}
              tabindex="-1" aria-hidden="true"
            {% endif %}
          ></iframe>
        {%- endif -%}
      </template>

      {%- if mode == 'lightbox' -%}
        <dialog class="lib-video__dialog" aria-label="{{ video_title }}">
          <button type="button" class="lib-video__close" aria-label="Close video">
            <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false"><path d="M6 6l12 12M18 6 6 18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
          </button>
          <div class="lib-video__dialog-frame"></div>
        </dialog>
      {%- endif -%}
    {%- endif -%}
  </lib-video-player>
</div>

{% stylesheet %}
  .lib-video {
    background: var(--lib-bg);
    color: var(--lib-text);
    padding: var(--lib-pt) 1rem var(--lib-pb);
  }
  .lib-video__inner {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    max-width: 1200px;
    margin: 0 auto;
  }
  .lib-video--full { padding-inline: 0; }
  .lib-video--full .lib-video__inner { max-width: none; }
  .lib-video--full[data-text='above'] .lib-video__content { padding-inline: 1rem; }
  @media (max-width: 749px) {
    .lib-video { padding-top: var(--lib-pt-m); padding-bottom: var(--lib-pb-m); }
    .lib-video[data-show='desktop'] { display: none; }
  }
  @media (min-width: 750px) {
    .lib-video[data-show='mobile'] { display: none; }
  }

  /* Content: above the video, or layered over it in the same grid cell. */
  .lib-video__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    width: 100%;
    max-width: 46rem;
  }
  .lib-video__content[data-align='center'] { align-items: center; text-align: center; margin-inline: auto; }
  .lib-video__content[data-align='right'] { align-items: flex-end; text-align: right; margin-inline-start: auto; }
  @media (max-width: 749px) {
    .lib-video__content[data-align-m] { margin-inline: 0; }
    .lib-video__content[data-align-m='left'] { align-items: flex-start; text-align: left; }
    .lib-video__content[data-align-m='center'] { align-items: center; text-align: center; margin-inline: auto; }
    .lib-video__content[data-align-m='right'] { align-items: flex-end; text-align: right; margin-inline-start: auto; }
  }
  .lib-video[data-text='overlay'] .lib-video__content,
  .lib-video[data-text='overlay'] .lib-video__stage { grid-area: 1 / 1; }
  /* Width is fixed, so a taller text block stretches the stage instead of widening it. */
  .lib-video[data-text='overlay'] .lib-video__stage { align-self: stretch; justify-self: stretch; width: 100%; }
  .lib-video[data-text='overlay'] .lib-video__content {
    position: relative;
    z-index: 2;
    align-self: center;
    justify-self: stretch;
    max-width: none;
    margin: 0;
    padding: clamp(1.5rem, 6vw, 4.5rem);
    color: var(--lib-on-video);
    pointer-events: none;
  }
  .lib-video[data-text='overlay'] .lib-video__content > * { max-width: 40rem; }
  .lib-video[data-text='overlay'] .lib-video__content :is(a, button) { pointer-events: auto; }
  .lib-video[data-text='overlay'] .lib-btn--outline,
  .lib-video[data-text='overlay'] .lib-btn--text { color: var(--lib-on-video); }

  .lib-video__eyebrow {
    margin: 0 0 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.75;
  }
  .lib-video__heading {
    margin: 0;
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    line-height: 1.06;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }
  .lib-video__heading--small { font-size: clamp(1.5rem, 2.6vw, 2rem); }
  .lib-video__heading--medium { font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
  .lib-video__heading--xlarge { font-size: clamp(2.5rem, 6.5vw, 5rem); }
  .lib-video__text {
    margin-top: 1rem;
    font-size: 1.0625rem;
    line-height: 1.6;
    opacity: 0.8;
  }
  .lib-video__text > :first-child { margin-top: 0; }
  .lib-video__text > :last-child { margin-bottom: 0; }
  .lib-video__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.75rem;
  }
  .lib-video__content[data-align='center'] .lib-video__actions { justify-content: center; }
  .lib-video__content[data-align='right'] .lib-video__actions { justify-content: flex-end; }
  @media (max-width: 749px) {
    .lib-video__content[data-align-m='left'] .lib-video__actions { justify-content: flex-start; }
    .lib-video__content[data-align-m='center'] .lib-video__actions { justify-content: center; }
    .lib-video__content[data-align-m='right'] .lib-video__actions { justify-content: flex-end; }
  }

  /* Stage: reserves the chosen ratio per device; poster, player, overlay and controls are layered. */
  .lib-video__stage {
    position: relative;
    aspect-ratio: var(--lib-ratio);
    border-radius: var(--lib-radius-frame);
    overflow: hidden;
    isolation: isolate;
    background: color-mix(in srgb, var(--lib-text) 10%, #000);
    container-type: size;
  }
  @media (max-width: 749px) {
    .lib-video__stage { aspect-ratio: var(--lib-ratio-m); }
  }
  .lib-video--full .lib-video__stage { border-radius: 0; }
  .lib-video__poster,
  .lib-video__slot,
  .lib-video__overlay { position: absolute; inset: 0; }
  .lib-video__img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .lib-video__img:is(svg) { fill: color-mix(in srgb, var(--lib-text) 30%, transparent); }
  .lib-video__slot { z-index: 1; }
  .lib-video__slot:empty { display: none; }
  .lib-video__media {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
    object-fit: contain;
  }
  .lib-video__overlay {
    z-index: 2;
    background: var(--lib-overlay);
    opacity: var(--lib-overlay-o);
    pointer-events: none;
  }
  .lib-video__inner[data-mode='inline'][data-playing] .lib-video__overlay { display: none; }

  /* Background mode: the player covers the stage like an image; no pointer events. */
  .lib-video__inner[data-mode='background'] .lib-video__slot { pointer-events: none; }
  .lib-video__inner[data-mode='background'] video.lib-video__media { object-fit: cover; background: transparent; }
  .lib-video__inner[data-mode='background'] iframe.lib-video__media {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100cqw, 177.78cqh);
    height: max(100cqh, 56.25cqw);
    transform: translate(-50%, -50%);
    background: transparent;
  }

  /* Play button (inline and lightbox) */
  .lib-video__play-wrap {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    pointer-events: none;
  }
  .lib-video__inner[data-playing] .lib-video__play-wrap { display: none; }
  .lib-video__play {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1.4rem 0.5rem 0.5rem;
    border: 0;
    border-radius: 999px;
    background: var(--lib-accent);
    color: var(--lib-accent-text);
    font: inherit;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 10px 30px -12px rgb(0 0 0 / 0.5);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .lib-video__play--icon { padding: 0.5rem; }
  .lib-video__play-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--lib-accent-text) 16%, transparent);
  }
  .lib-video__play-icon svg { margin-inline-start: 2px; }
  .lib-video__play--icon .lib-video__play-icon { width: 3.75rem; height: 3.75rem; background: none; }
  .lib-video__play:hover { transform: scale(1.04); box-shadow: 0 14px 34px -12px rgb(0 0 0 / 0.6); }
  .lib-video__play:focus-visible,
  .lib-video__toggle:focus-visible,
  .lib-video__close:focus-visible {
    outline: 2px solid var(--lib-accent-text);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px var(--lib-accent);
  }

  /* Background toggle */
  .lib-video__toggle {
    position: absolute;
    inset-block-end: 1rem;
    inset-inline-end: 1rem;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(0 0 0 / 0.45);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(6px);
  }
  .lib-video__toggle:hover { background: rgb(0 0 0 / 0.65); }
  .lib-video__toggle[data-state='playing'] .lib-video__toggle-play,
  .lib-video__toggle[data-state='paused'] .lib-video__toggle-pause { display: none; }
  .lib-video[data-text='overlay'] .lib-video__toggle { z-index: 3; }

  /* Lightbox dialog */
  .lib-video__dialog {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: clamp(3.5rem, 6vw, 4.5rem) 1rem;
    border: 0;
    background: transparent;
    color: #fff;
  }
  .lib-video__dialog[open] { display: grid; place-items: center; }
  .lib-video__dialog::backdrop { background: rgb(12 10 9 / 0.88); }
  .lib-video__dialog-frame {
    width: min(100%, 1280px, calc((100vh - 9rem) * (var(--lib-dialog-ratio))));
    aspect-ratio: var(--lib-dialog-ratio);
    border-radius: 12px;
    overflow: hidden;
    background: #000;
  }
  .lib-video__close {
    position: fixed;
    inset-block-start: 1rem;
    inset-inline-end: 1rem;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.14);
    color: #fff;
    cursor: pointer;
  }
  .lib-video__close:hover { background: rgb(255 255 255 / 0.26); }
  .lib-video__close:focus-visible { outline-color: #fff; box-shadow: none; }

  @media (prefers-reduced-motion: reduce) {
    .lib-video__play { transition: none; }
    .lib-video__play:hover { transform: none; }
  }
{% endstylesheet %}

{% javascript %}
  if (!customElements.get('lib-video-player')) {
    customElements.define(
      'lib-video-player',
      class extends HTMLElement {
        connectedCallback() {
          if (this._ready) return;
          this.tpl = this.querySelector('template.lib-video__tpl');
          this.slotEl = this.querySelector('.lib-video__slot');
          if (!this.tpl || !this.slotEl) return;
          this._ready = true;
          this.mode = this.dataset.mode;
          this.playBtn = this.querySelector('.lib-video__play');
          this.toggleBtn = this.querySelector('.lib-video__toggle');
          this.dialog = this.querySelector('dialog.lib-video__dialog');
          this.frame = this.dialog && this.dialog.querySelector('.lib-video__dialog-frame');
          this.closeBtn = this.dialog && this.dialog.querySelector('.lib-video__close');
          const reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

          this.onPlay = () => (this.mode === 'lightbox' ? this.open() : this.startInline());
          this.onToggle = () => this.toggle();
          this.onClose = () => this.closed();
          this.onCloseBtn = () => this.dialog.close();
          this.onBackdrop = (e) => {
            if (e.target === this.dialog) this.dialog.close();
          };
          if (this.playBtn) this.playBtn.addEventListener('click', this.onPlay);
          if (this.toggleBtn) this.toggleBtn.addEventListener('click', this.onToggle);
          if (this.dialog) {
            this.dialog.addEventListener('close', this.onClose);
            this.dialog.addEventListener('click', this.onBackdrop);
            if (this.closeBtn) this.closeBtn.addEventListener('click', this.onCloseBtn);
          }

          const auto = this.mode === 'background' || (this.mode === 'inline' && this.hasAttribute('data-autoplay'));
          if (auto && !reduced) {
            const start = () => (this.mode === 'background' ? this.startBackground() : this.startInline(false));
            if ('IntersectionObserver' in window) {
              this.io = new IntersectionObserver(
                (entries) => {
                  if (!entries.some((en) => en.isIntersecting)) return;
                  this.io.disconnect();
                  this.io = null;
                  start();
                },
                { rootMargin: '200px 0px' }
              );
              this.io.observe(this);
            } else {
              start();
            }
          }
        }

        disconnectedCallback() {
          if (!this._ready) return;
          this._ready = false;
          if (this.io) this.io.disconnect();
          if (this.playBtn) this.playBtn.removeEventListener('click', this.onPlay);
          if (this.toggleBtn) this.toggleBtn.removeEventListener('click', this.onToggle);
          if (this.dialog) {
            this.dialog.removeEventListener('close', this.onClose);
            this.dialog.removeEventListener('click', this.onBackdrop);
            if (this.closeBtn) this.closeBtn.removeEventListener('click', this.onCloseBtn);
            if (this.dialog.open) this.dialog.close();
          }
        }

        // Clones the player from the inert template into target; nothing loads before this.
        mount(target) {
          target.replaceChildren(this.tpl.content.cloneNode(true));
          const media = target.querySelector('video, iframe');
          if (media && media.tagName === 'VIDEO') {
            if (media.hasAttribute('muted')) media.muted = true;
            const p = media.play();
            if (p && p.catch) p.catch(() => {});
          }
          return media;
        }

        startInline(focus = true) {
          if (this.hasAttribute('data-playing')) return;
          const media = this.mount(this.slotEl);
          this.setAttribute('data-playing', '');
          // Without native controls, the video itself pauses and resumes on click, Enter or Space.
          if (media && media.tagName === 'VIDEO' && !media.hasAttribute('controls')) {
            media.setAttribute('tabindex', '0');
            media.setAttribute('aria-label', this.dataset.toggleLabel || 'Pause or play video');
            media.addEventListener('click', () => this.flip(media));
            media.addEventListener('keydown', (e) => {
              if (e.key !== 'Enter' && e.key !== ' ') return;
              e.preventDefault();
              this.flip(media);
            });
          }
          if (focus && media) media.focus({ preventScroll: true });
        }

        flip(video) {
          if (video.paused) {
            const p = video.play();
            if (p && p.catch) p.catch(() => {});
          } else {
            video.pause();
          }
        }

        startBackground() {
          this.media = this.mount(this.slotEl);
          this.setAttribute('data-playing', '');
          this.setState(true);
        }

        toggle() {
          if (!this.media) {
            this.startBackground();
            return;
          }
          const playing = this.toggleBtn.dataset.state === 'playing';
          if (this.media.tagName === 'VIDEO') {
            this.flip(this.media);
          } else {
            this.command(!playing);
          }
          this.setState(!playing);
        }

        // Pause / play an embedded background player through its postMessage API.
        command(play) {
          const win = this.media.contentWindow;
          if (!win) return;
          if (this.dataset.src === 'youtube') {
            win.postMessage(JSON.stringify({ event: 'command', func: play ? 'playVideo' : 'pauseVideo', args: [] }), '*');
          } else if (this.dataset.src === 'vimeo') {
            win.postMessage(JSON.stringify({ method: play ? 'play' : 'pause' }), '*');
          }
        }

        setState(playing) {
          if (!this.toggleBtn) return;
          this.toggleBtn.dataset.state = playing ? 'playing' : 'paused';
          this.toggleBtn.setAttribute('aria-label', this.toggleBtn.dataset[playing ? 'labelPause' : 'labelPlay']);
        }

        open() {
          if (!this.dialog || !this.frame || this.dialog.open) return;
          this.dialog.showModal();
          const media = this.mount(this.frame);
          if (media) {
            if (media.tagName === 'VIDEO') media.setAttribute('tabindex', '-1');
            media.focus({ preventScroll: true });
          }
        }

        // Esc, the close button and a backdrop click all end here: unload the player, restore focus.
        closed() {
          if (this.frame) this.frame.replaceChildren();
          if (this.playBtn) this.playBtn.focus({ preventScroll: true });
        }
      }
    );
  }
{% endjavascript %}

{% schema %}
{
  "name": "Lib · Video",
  "tag": "section",
  "class": "lib-section",
  "settings": [
    { "type": "header", "content": "Content" },
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "From the studio" },
    { "type": "inline_richtext", "id": "heading", "label": "Heading", "default": "Made slowly, <em>by hand</em>" },
    {
      "type": "select",
      "id": "heading_tag",
      "label": "Heading tag",
      "info": "Use H1 only when this is the page's main heading.",
      "options": [
        { "value": "h1", "label": "H1" },
        { "value": "h2", "label": "H2" },
        { "value": "h3", "label": "H3" },
        { "value": "p", "label": "Paragraph" }
      ],
      "default": "h2"
    },
    {
      "type": "select",
      "id": "heading_size",
      "label": "Heading size",
      "options": [
        { "value": "small", "label": "Small" },
        { "value": "medium", "label": "Medium" },
        { "value": "large", "label": "Large" },
        { "value": "xlarge", "label": "Extra large" }
      ],
      "default": "large"
    },
    { "type": "richtext", "id": "text", "label": "Text", "default": "<p>Every bowl starts as a lump of local clay. Two minutes in the studio, from the wheel to the kiln.</p>" },
    {
      "type": "select",
      "id": "text_position",
      "label": "Text position",
      "info": "Inline players always show the text above, so it never covers the controls.",
      "options": [
        { "value": "above", "label": "Above the video" },
        { "value": "overlay", "label": "Over the video" }
      ],
      "default": "above"
    },

    { "type": "header", "content": "Video" },
    {
      "type": "select",
      "id": "mode",
      "label": "Display",
      "options": [
        { "value": "inline", "label": "Inline player" },
        { "value": "background", "label": "Background loop (muted)" },
        { "value": "lightbox", "label": "Poster that opens a lightbox" }
      ],
      "default": "lightbox"
    },
    { "type": "video", "id": "video", "label": "Shopify-hosted video", "info": "Used first when set." },
    { "type": "video_url", "id": "video_url", "label": "Or YouTube / Vimeo link", "accept": ["youtube", "vimeo"], "info": "YouTube plays from youtube-nocookie.com and Vimeo with do-not-track. Nothing loads until play." },
    { "type": "text", "id": "video_title", "label": "Video title", "info": "Read by screen readers for the play button, the player and the lightbox.", "default": "A bowl thrown on the wheel" },
    { "type": "image_picker", "id": "poster", "label": "Poster image on desktop", "info": "Shown until the video plays. Falls back to the Shopify video's own preview image." },
    { "type": "image_picker", "id": "poster_mobile", "label": "Poster image on mobile", "info": "Optional. Shown below 750px." },
    { "type": "text", "id": "play_label", "label": "Play button text", "info": "Leave empty for an icon-only button.", "default": "Watch the film", "visible_if": "{{ section.settings.mode != 'background' }}" },
    { "type": "checkbox", "id": "autoplay", "label": "Autoplay (muted)", "info": "Starts muted when it scrolls into view. Never autoplays for visitors who prefer reduced motion.", "default": false, "visible_if": "{{ section.settings.mode == 'inline' }}" },
    { "type": "checkbox", "id": "muted", "label": "Start muted", "default": false, "visible_if": "{{ section.settings.mode == 'inline' }}" },
    { "type": "checkbox", "id": "controls", "label": "Show player controls", "default": true, "visible_if": "{{ section.settings.mode == 'inline' }}" },
    { "type": "checkbox", "id": "loop", "label": "Loop", "info": "Background videos always loop.", "default": false, "visible_if": "{{ section.settings.mode != 'background' }}" },

    { "type": "header", "content": "Button" },
    { "type": "text", "id": "button_label", "label": "Button label", "default": "Shop ceramics" },
    { "type": "url", "id": "button_url", "label": "Button link" },
    {
      "type": "select",
      "id": "button_style",
      "label": "Button style",
      "options": [
        { "value": "primary", "label": "Solid" },
        { "value": "outline", "label": "Outline" },
        { "value": "text", "label": "Text link" }
      ],
      "default": "outline"
    },

    { "type": "header", "content": "Layout" },
    {
      "type": "select",
      "id": "ratio",
      "label": "Shape on desktop",
      "options": [
        { "value": "16-9", "label": "16:9 widescreen" },
        { "value": "21-9", "label": "21:9 cinema" },
        { "value": "4-3", "label": "4:3" },
        { "value": "1-1", "label": "1:1 square" },
        { "value": "9-16", "label": "9:16 vertical" }
      ],
      "default": "16-9"
    },
    {
      "type": "select",
      "id": "ratio_mobile",
      "label": "Shape on mobile",
      "options": [
        { "value": "16-9", "label": "16:9 widescreen" },
        { "value": "21-9", "label": "21:9 cinema" },
        { "value": "4-3", "label": "4:3" },
        { "value": "1-1", "label": "1:1 square" },
        { "value": "9-16", "label": "9:16 vertical" }
      ],
      "default": "4-3"
    },
    {
      "type": "select",
      "id": "section_width",
      "label": "Width",
      "options": [
        { "value": "page", "label": "Page width" },
        { "value": "full", "label": "Full width" }
      ],
      "default": "page"
    },
    { "type": "range", "id": "corner_radius", "label": "Corner radius", "info": "Page width only.", "min": 0, "max": 40, "step": 2, "unit": "px", "default": 16 },
    { "type": "text_alignment", "id": "text_alignment", "label": "Text alignment on desktop", "default": "center" },
    {
      "type": "select",
      "id": "text_alignment_mobile",
      "label": "Text alignment on mobile",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "left"
    },
    { "type": "color", "id": "overlay_color", "label": "Overlay color", "default": "#1C1917" },
    { "type": "range", "id": "overlay_opacity", "label": "Overlay opacity", "info": "Hidden once an inline video plays.", "min": 0, "max": 90, "step": 5, "unit": "%", "default": 15 },

    { "type": "header", "content": "Colors" },
    { "type": "color_background", "id": "color_bg", "label": "Background", "default": "#F5F1EA" },
    { "type": "color", "id": "color_text", "label": "Text", "default": "#1C1917" },
    { "type": "color", "id": "color_on_video", "label": "Text over video", "default": "#FFFFFF" },
    { "type": "color", "id": "color_accent", "label": "Accent (play button, solid button)", "default": "#1C1917" },
    { "type": "color", "id": "color_accent_text", "label": "Text on accent", "default": "#F5F1EA" },

    { "type": "header", "content": "Spacing and visibility" },
    { "type": "range", "id": "padding_top", "label": "Top padding on desktop", "min": 0, "max": 200, "step": 4, "unit": "px", "default": 80 },
    { "type": "range", "id": "padding_bottom", "label": "Bottom padding on desktop", "min": 0, "max": 200, "step": 4, "unit": "px", "default": 80 },
    { "type": "range", "id": "padding_top_mobile", "label": "Top padding on mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 48 },
    { "type": "range", "id": "padding_bottom_mobile", "label": "Bottom padding on mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 48 },
    {
      "type": "select",
      "id": "show_on",
      "label": "Show on",
      "options": [
        { "value": "all", "label": "All devices" },
        { "value": "desktop", "label": "Desktop only" },
        { "value": "mobile", "label": "Mobile only" }
      ],
      "default": "all"
    },
    { "type": "text", "id": "anchor_id", "label": "Anchor ID", "info": "Optional. Link to this section with #your-id." }
  ],
  "presets": [
    {
      "name": "Lib · Video"
    }
  ]
}
{% endschema %}