{%- comment -%}
  Product Videos — scroll-snap video carousel.
  No carousel library: a scroll-snap track plus arrow buttons, so it
  works with touch natively and degrades to a plain scroller.
{%- endcomment -%}

{%- liquid
  assign s = section.settings
  assign uid = section.id
-%}

{% style %}
  .pv-{{ uid }} { padding-top: {{ s.padding_top }}px; padding-bottom: {{ s.padding_bottom }}px; }
  .pv-{{ uid }}__head { text-align: center; margin-bottom: 20px; }
  .pv-{{ uid }}__wrap { position: relative; }
  .pv-{{ uid }}__track {
    display: flex; gap: {{ s.gap }}px; overflow-x: auto;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    padding-bottom: 4px;
  }
  .pv-{{ uid }}__track::-webkit-scrollbar { display: none; }
  .pv-{{ uid }}__card {
    flex: 0 0 {{ s.card_width }}px; max-width: 82vw;
    scroll-snap-align: center;
    border-radius: {{ s.radius }}px; overflow: hidden;
    background: rgba(0,0,0,.05); position: relative;
    aspect-ratio: {{ s.ratio }};
  }
  .pv-{{ uid }}__card video,
  .pv-{{ uid }}__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pv-{{ uid }}__cap {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 22px 12px 12px; font-size: 13px; color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
  }
  .pv-{{ uid }}__nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
    background: {{ s.nav_bg }}; color: {{ s.nav_text }};
    display: grid; place-items: center;
  }
  .pv-{{ uid }}__nav--prev { left: 4px; }
  .pv-{{ uid }}__nav--next { right: 4px; }
  .pv-{{ uid }}__nav svg { width: 17px; height: 17px; }
  @media screen and (max-width: 749px) { .pv-{{ uid }}__nav { display: none; } }
{% endstyle %}

<div class="pv-{{ uid }} color-{{ s.color_scheme }} gradient">
  <div class="page-width">
    {%- if s.heading != blank -%}
      <div class="pv-{{ uid }}__head"><h2>{{ s.heading | escape }}</h2></div>
    {%- endif -%}
    <div class="pv-{{ uid }}__wrap">
      {%- if s.show_arrows -%}
        <button class="pv-{{ uid }}__nav pv-{{ uid }}__nav--prev" data-pv-prev aria-label="Previous">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
        </button>
      {%- endif -%}
      <div class="pv-{{ uid }}__track" data-pv-track>
        {%- for block in section.blocks -%}
          <div class="pv-{{ uid }}__card" {{ block.shopify_attributes }}>
            {%- if block.settings.video != blank -%}
              {{ block.settings.video | video_tag: image_size: '600x', autoplay: s.autoplay, loop: true, muted: true, controls: s.controls }}
            {%- elsif block.settings.video_url != blank -%}
              <video {% if s.autoplay %}autoplay muted playsinline{% endif %} loop{% if s.controls %} controls{% endif %}
                     {% if block.settings.poster_url != blank %}poster="{{ block.settings.poster_url }}"{% endif %} preload="metadata">
                <source src="{{ block.settings.video_url }}" type="video/mp4">
              </video>
            {%- elsif block.settings.poster_url != blank -%}
              <img src="{{ block.settings.poster_url }}" alt="{{ block.settings.caption | escape }}" loading="lazy" width="600" height="1000">
            {%- else -%}
              {{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
            {%- endif -%}
            {%- if block.settings.caption != blank -%}
              <div class="pv-{{ uid }}__cap">{{ block.settings.caption | escape }}</div>
            {%- endif -%}
          </div>
        {%- endfor -%}
      </div>
      {%- if s.show_arrows -%}
        <button class="pv-{{ uid }}__nav pv-{{ uid }}__nav--next" data-pv-next aria-label="Next">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
        </button>
      {%- endif -%}
    </div>
  </div>
</div>

<script>
  (() => {
    const root = document.currentScript.previousElementSibling;
    if (!root) return;
    const track = root.querySelector('[data-pv-track]');
    if (!track) return;
    const step = () => (track.firstElementChild?.getBoundingClientRect().width || 300) + {{ s.gap }};
    root.querySelector('[data-pv-prev]')?.addEventListener('click', () => track.scrollBy({left: -step(), behavior: 'smooth'}));
    root.querySelector('[data-pv-next]')?.addEventListener('click', () => track.scrollBy({left: step(), behavior: 'smooth'}));
  })();
</script>

{% schema %}
{
  "name": "Product Videos",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": [
      "header",
      "footer"
    ]
  },
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "See it in action"
    },
    {
      "type": "checkbox",
      "id": "autoplay",
      "label": "Autoplay (muted)",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "controls",
      "label": "Show controls",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_arrows",
      "label": "Show arrows",
      "default": true
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "range",
      "id": "card_width",
      "min": 160,
      "max": 600,
      "step": 10,
      "unit": "px",
      "label": "Card width",
      "default": 280
    },
    {
      "type": "select",
      "id": "ratio",
      "label": "Card ratio",
      "default": "9 / 16",
      "options": [
        {
          "value": "9 / 16",
          "label": "Vertical"
        },
        {
          "value": "1 / 1",
          "label": "Square"
        },
        {
          "value": "4 / 5",
          "label": "Portrait"
        }
      ]
    },
    {
      "type": "range",
      "id": "gap",
      "min": 4,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Gap",
      "default": 12
    },
    {
      "type": "range",
      "id": "radius",
      "min": 0,
      "max": 32,
      "step": 2,
      "unit": "px",
      "label": "Corner radius",
      "default": 12
    },
    {
      "type": "color",
      "id": "nav_bg",
      "label": "Arrow background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "nav_text",
      "label": "Arrow colour",
      "default": "#111111"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "Colour scheme",
      "default": "scheme-1"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Top padding",
      "default": 44
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Bottom padding",
      "default": 44
    }
  ],
  "blocks": [
    {
      "type": "clip",
      "name": "Video",
      "settings": [
        {
          "type": "video",
          "id": "video",
          "label": "Video"
        },
        {
          "type": "text",
          "id": "video_url",
          "label": "Video URL (MP4)",
          "info": "Used only when no video is picked."
        },
        {
          "type": "text",
          "id": "poster_url",
          "label": "Poster image URL"
        },
        {
          "type": "text",
          "id": "caption",
          "label": "Caption"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Product Videos",
      "blocks": [
        {
          "type": "clip"
        },
        {
          "type": "clip"
        },
        {
          "type": "clip"
        },
        {
          "type": "clip"
        }
      ]
    }
  ]
}
{% endschema %}
