{%- comment -%} MW · In Motion — horizontal carousel of vertical UGC video cards. {%- endcomment -%}
{%- assign uid = section.id | replace: '_', '' | replace: '-', '' -%}
{% style %}
  #shopify-section-{{ section.id }}{ --im-bg:{{ section.settings.section_bg }}; --im-head:{{ section.settings.heading_color }}; --im-accent:{{ section.settings.accent_color }}; --im-sub:{{ section.settings.sub_color }}; }
  .im-{{ uid }}{ background:var(--im-bg); padding:{{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px; }
  .im-{{ uid }} .im__head{ text-align:center; max-width:600px; margin:0 auto clamp(24px,3vw,40px); padding:0 24px; }
  .im-{{ uid }} .im__h{ font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:700; font-size:clamp(24px,2.8vw,34px); color:var(--im-head); margin:0; }
  .im-{{ uid }} .im__h .ac{ color:var(--im-accent); background:linear-gradient(99deg,var(--im-accent) 0%,color-mix(in srgb,var(--im-accent),#fff 32%) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
  .im-{{ uid }} .im__sub{ font-family:{{ section.settings.body_font.family }},{{ section.settings.body_font.fallback_families }}; font-size:14px; color:var(--im-sub); margin:8px 0 0; }
  .im-{{ uid }} .im__wrap{ position:relative; }
  .im-{{ uid }} .im__track{ display:flex; gap:{{ section.settings.gap }}px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px {{ section.settings.side_padding }}px; scrollbar-width:none; }
  .im-{{ uid }} .im__track::-webkit-scrollbar{ display:none; }
  .im-{{ uid }} .im__card{ position:relative; flex:0 0 {{ section.settings.card_width }}px; max-width:70vw; aspect-ratio:9/16; scroll-snap-align:center; border-radius:{{ section.settings.card_radius }}px; overflow:hidden; background:#111; cursor:pointer; }
  .im-{{ uid }} .im__card video,.im-{{ uid }} .im__card img{ width:100%; height:100%; object-fit:cover; display:block; }
  .im-{{ uid }} .im__ov{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.05) 40%,rgba(0,0,0,.6)); display:flex; flex-direction:column; justify-content:flex-end; padding:16px; pointer-events:none; }
  .im-{{ uid }} .im__nm{ font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:600; font-size:15px; color:#fff; display:flex; align-items:center; gap:5px; }
  .im-{{ uid }} .im__nm svg{ width:14px; height:14px; color:#D6C19E; }
  .im-{{ uid }} .im__cap{ font-family:{{ section.settings.body_font.family }},{{ section.settings.body_font.fallback_families }}; font-size:12.5px; color:rgba(255,255,255,.85); margin-top:3px; }
  .im-{{ uid }} .im__play{ position:absolute; right:14px; bottom:14px; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center; color:#241C15; }
  .im-{{ uid }} .im__play svg{ width:18px; height:18px; margin-left:2px; }
  .im-{{ uid }} .im__card.is-playing .im__play,.im-{{ uid }} .im__card.is-playing .im__ov{ opacity:0; }
  .im-{{ uid }} .im__nav{ position:absolute; top:calc(50% - 20px); width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid var(--mw-line,#E5DCCB); box-shadow:var(--mw-shadow-md,0 8px 24px rgba(58,48,39,.10)); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--im-head); z-index:2; }
  .im-{{ uid }} .im__nav svg{ width:20px; height:20px; }
  .im-{{ uid }} .im__nav--prev{ left:8px; } .im-{{ uid }} .im__nav--next{ right:8px; }
  @media (max-width:700px){ .im-{{ uid }} .im__nav{ display:none; } }
{% endstyle %}
<div class="im-{{ uid }}" id="im-{{ uid }}">
  <div class="im__head">
    {%- if section.settings.heading != blank -%}<h2 class="im__h">{{ section.settings.heading }}</h2>{%- endif -%}
    {%- if section.settings.sub != blank -%}<p class="im__sub">{{ section.settings.sub | escape }}</p>{%- endif -%}
  </div>
  <div class="im__wrap">
    <button class="im__nav im__nav--prev" data-prev aria-label="Previous">{% render 'mw-icon', name: 'arrow-left' %}</button>
    <div class="im__track" data-track>
      {%- for block in section.blocks -%}
        <div class="im__card" data-video {{ block.shopify_attributes }}>
          {%- if block.settings.video_url != blank -%}
            <video src="{{ block.settings.video_url }}" poster="{% if block.settings.poster != blank %}{{ block.settings.poster | image_url: width: 600 }}{% else %}{{ block.settings.poster_url }}{% endif %}" muted loop playsinline preload="none"></video>
          {%- else -%}
            {% render 'mw-image', image: block.settings.poster, url: block.settings.poster_url, alt: block.settings.name, width: 600 %}
          {%- endif -%}
          <div class="im__ov"><div class="im__nm">{{ block.settings.name | escape }}{% if block.settings.verified %}{% render 'mw-icon', name: 'verified' %}{% endif %}</div><div class="im__cap">{{ block.settings.caption | escape }}</div></div>
          <div class="im__play">{% render 'mw-icon', name: 'play' %}</div>
        </div>
      {%- endfor -%}
    </div>
    <button class="im__nav im__nav--next" data-next aria-label="Next">{% render 'mw-icon', name: 'arrow-right' %}</button>
  </div>
</div>
<script>
(function(){var r=document.getElementById('im-{{ uid }}');if(!r)return;var t=r.querySelector('[data-track]');
function step(d){var c=t.querySelector('.im__card');var g=parseInt(getComputedStyle(t).columnGap)||18;var w=c?c.offsetWidth+g:280;t.scrollBy({left:d*w,behavior:'smooth'});}
var p=r.querySelector('[data-prev]'),n=r.querySelector('[data-next]');p&&p.addEventListener('click',function(){step(-1)});n&&n.addEventListener('click',function(){step(1)});
r.querySelectorAll('[data-video]').forEach(function(card){var v=card.querySelector('video');if(!v)return;card.addEventListener('click',function(){if(v.paused){r.querySelectorAll('video').forEach(function(o){if(o!==v){o.pause();o.muted=true;o.closest('.im__card').classList.remove('is-playing');}});v.muted=false;v.play();card.classList.add('is-playing');}else{v.pause();card.classList.remove('is-playing');}});});})();
</script>
{% schema %}
{
  "name": "MW · In Motion",
  "tag": "section",
  "class": "mw-section mw-in-motion",
  "settings": [
    { "type": "html", "id": "heading", "label": "Heading", "info": "Use <span class=\"ac\">…</span> for the accent.", "default": "Seen out in it." },
    { "type": "text", "id": "sub", "label": "Sub", "default": "Fit checks, first wears and the shoes debate." },
    { "type": "range", "id": "card_width", "min": 180, "max": 320, "step": 10, "unit": "px", "label": "Card width", "default": 240 },
    { "type": "range", "id": "card_radius", "min": 0, "max": 24, "step": 1, "unit": "px", "label": "Card radius", "default": 12 },
    { "type": "range", "id": "gap", "min": 8, "max": 32, "step": 2, "unit": "px", "label": "Gap", "default": 16 },
    { "type": "range", "id": "padding_top", "min": 0, "max": 160, "step": 4, "unit": "px", "label": "Padding top", "default": 64 },
    { "type": "range", "id": "padding_bottom", "min": 0, "max": 160, "step": 4, "unit": "px", "label": "Padding bottom", "default": 64 },
    { "type": "range", "id": "side_padding", "min": 12, "max": 80, "step": 2, "unit": "px", "label": "Side padding", "default": 40 },
    { "type": "font_picker", "id": "heading_font", "label": "Heading font", "default": "poppins_n7" },
    { "type": "font_picker", "id": "body_font", "label": "Body font", "default": "inter_n4" },
    { "type": "color", "id": "section_bg", "label": "Background", "default": "#EDE4DC" },
    { "type": "color", "id": "heading_color", "label": "Heading", "default": "#17324E" },
    { "type": "color", "id": "accent_color", "label": "Accent", "default": "#B79B6E" },
    { "type": "color", "id": "sub_color", "label": "Sub", "default": "#7C7266" }
  ],
  "blocks": [
    { "type": "clip", "name": "Clip", "settings": [
      { "type": "text", "id": "video_url", "label": "Video URL (.mp4)", "info": "Direct .mp4 link (Shopify Files or CDN). Leave blank to show the poster only." },
      { "type": "image_picker", "id": "poster", "label": "Poster image" },
      { "type": "text", "id": "poster_url", "label": "…or poster URL" },
      { "type": "text", "id": "name", "label": "Name", "default": "Nora H." },
      { "type": "checkbox", "id": "verified", "label": "Verified", "default": true },
      { "type": "text", "id": "caption", "label": "Caption", "default": "Ordered the Champagne" }
    ] }
  ],
  "max_blocks": 12,
  "presets": [ { "name": "MW · In Motion", "blocks": [
    { "type": "clip", "settings": { "name": "Sofie L.", "caption": "Leather jacket, then the door" } },
    { "type": "clip", "settings": { "name": "Nora H.", "caption": "Ordered the Champagne" } },
    { "type": "clip", "settings": { "name": "Elin K.", "caption": "Sneakers or heels?" } },
    { "type": "clip", "settings": { "name": "Marta B.", "caption": "First unboxing" } },
    { "type": "clip", "settings": { "name": "Juliet M.", "caption": "The twirl test, passed" } }
  ] } ]
}
{% endschema %}