{%- comment -%} MW · Worn By — thin auto-scrolling social-proof avatar band. {%- endcomment -%}
{%- assign uid = section.id | replace: '_', '' | replace: '-', '' -%}
{% style %}
  #shopify-section-{{ section.id }}{ --wb-bg:{{ section.settings.bg_color }}; --wb-name:{{ section.settings.name_color }}; --wb-quote:{{ section.settings.quote_color }}; }
  .wb-{{ uid }}{ background:var(--wb-bg); overflow:hidden; padding:{{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px; }
  .wb-{{ uid }} .wb__title{ text-align:center; font-family:{{ section.settings.body_font.family }},{{ section.settings.body_font.fallback_families }}; font-size:13px; letter-spacing:.06em; color:var(--wb-quote); margin:0 0 14px; }
  .wb-{{ uid }} .wb__mask{ position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
  .wb-{{ uid }} .wb__track{ display:flex; width:max-content; gap:{{ section.settings.gap }}px; animation:wb-scroll-{{ uid }} {{ section.settings.speed }}s linear infinite; }
  .wb-{{ uid }} .wb__mask:hover .wb__track{ animation-play-state:paused; }
  .wb-{{ uid }} .wb__item{ display:flex; align-items:center; gap:11px; flex:none; }
  .wb-{{ uid }} .wb__av{ width:38px; height:38px; border-radius:50%; object-fit:cover; flex:none; background:var(--mw-gold-tint,#e9dec9); }
  .wb-{{ uid }} .wb__tx{ line-height:1.25; }
  .wb-{{ uid }} .wb__nm{ font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:600; font-size:13.5px; color:var(--wb-name); display:flex; align-items:center; gap:4px; }
  .wb-{{ uid }} .wb__nm svg{ width:13px; height:13px; color:var(--mw-verify,#2E7D32); }
  .wb-{{ uid }} .wb__qt{ font-family:{{ section.settings.body_font.family }},{{ section.settings.body_font.fallback_families }}; font-size:13px; color:var(--wb-quote); }
  @keyframes wb-scroll-{{ uid }}{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
{% endstyle %}
<div class="wb-{{ uid }}">
  {%- if section.settings.heading != blank -%}<p class="wb__title">{{ section.settings.heading | escape }}</p>{%- endif -%}
  <div class="wb__mask"><div class="wb__track">
    {%- for i in (1..2) -%}{%- for block in section.blocks -%}
      <div class="wb__item" {{ block.shopify_attributes }}>
        {% render 'mw-image', image: block.settings.avatar, url: block.settings.avatar_url, alt: block.settings.name, width: 96, class: 'wb__av' %}
        <div class="wb__tx">
          <div class="wb__nm">{{ block.settings.name | escape }}{%- if block.settings.verified -%}{% render 'mw-icon', name: 'verified' %}{%- endif -%}</div>
          <div class="wb__qt">{{ block.settings.quote | escape }}</div>
        </div>
      </div>
    {%- endfor -%}{%- endfor -%}
  </div></div>
</div>
{% schema %}
{
  "name": "MW · Worn By",
  "tag": "section",
  "class": "mw-section mw-worn-by",
  "settings": [
    { "type": "text", "id": "heading", "label": "Small heading" },
    { "type": "range", "id": "speed", "min": 20, "max": 90, "step": 5, "unit": "s", "label": "Scroll duration", "default": 45 },
    { "type": "range", "id": "gap", "min": 24, "max": 96, "step": 4, "unit": "px", "label": "Gap", "default": 56 },
    { "type": "range", "id": "padding_top", "min": 0, "max": 60, "step": 2, "unit": "px", "label": "Padding top", "default": 22 },
    { "type": "range", "id": "padding_bottom", "min": 0, "max": 60, "step": 2, "unit": "px", "label": "Padding bottom", "default": 22 },
    { "type": "font_picker", "id": "heading_font", "label": "Name font", "default": "poppins_n6" },
    { "type": "font_picker", "id": "body_font", "label": "Quote font", "default": "inter_n4" },
    { "type": "color", "id": "bg_color", "label": "Background", "default": "#EDE4DC" },
    { "type": "color", "id": "name_color", "label": "Name", "default": "#3A3027" },
    { "type": "color", "id": "quote_color", "label": "Quote", "default": "#7C7266" }
  ],
  "blocks": [
    { "type": "person", "name": "Customer", "settings": [
      { "type": "image_picker", "id": "avatar", "label": "Avatar" },
      { "type": "text", "id": "avatar_url", "label": "…or avatar URL" },
      { "type": "text", "id": "name", "label": "Name", "default": "Nora H." },
      { "type": "checkbox", "id": "verified", "label": "Verified badge", "default": true },
      { "type": "text", "id": "quote", "label": "One-line quote", "default": "Wore it to work and to dinner after" }
    ] }
  ],
  "max_blocks": 12,
  "presets": [ { "name": "MW · Worn By", "blocks": [
    { "type": "person", "settings": { "name": "Nora H.", "quote": "Wore it to work and to dinner after" } },
    { "type": "person", "settings": { "name": "Juliet M.", "quote": "Moves like a jumper, reads like couture" } },
    { "type": "person", "settings": { "name": "Sofie L.", "quote": "Leather jacket over it and done" } },
    { "type": "person", "settings": { "name": "Elin K.", "quote": "Got ready in fifteen minutes flat" } },
    { "type": "person", "settings": { "name": "Marta B.", "quote": "Ordered the onyx the same evening" } }
  ] } ]
}
{% endschema %}