{%- comment -%} MW · Story Circles — Instagram-style circles opening a fullscreen tap-through viewer. {%- endcomment -%}
{%- assign uid = section.id | replace: '_', '' | replace: '-', '' -%}
{% style %}
  #shopify-section-{{ section.id }}{ --sc-bg:{{ section.settings.section_bg }}; --sc-head:{{ section.settings.heading_color }}; --sc-accent:{{ section.settings.accent_color }}; --sc-sub:{{ section.settings.sub_color }}; --sc-label:{{ section.settings.label_color }}; --sc-ring1:{{ section.settings.ring_start }}; --sc-ring2:{{ section.settings.ring_end }}; }
  .sc-{{ uid }}{ background:var(--sc-bg); padding:{{ section.settings.padding_top }}px {{ section.settings.side_padding }}px {{ section.settings.padding_bottom }}px; }
  .sc-{{ uid }} .sc__head{ text-align:center; max-width:600px; margin:0 auto clamp(20px,3vw,32px); }
  .sc-{{ uid }} .sc__h{ font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:700; font-size:clamp(24px,2.6vw,32px); color:var(--sc-head); margin:0; }
  .sc-{{ uid }} .sc__h .ac{ color:var(--sc-accent); background:linear-gradient(99deg,var(--sc-accent) 0%,color-mix(in srgb,var(--sc-accent),#fff 32%) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
  .sc-{{ uid }} .sc__sub{ font-family:{{ section.settings.body_font.family }},{{ section.settings.body_font.fallback_families }}; font-size:14px; color:var(--sc-sub); margin:8px 0 0; }
  .sc-{{ uid }} .sc__row{ display:flex; justify-content:center; gap:clamp(14px,2vw,26px); flex-wrap:wrap; }
  .sc-{{ uid }} .sc__item{ background:none; border:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:8px; width:{{ section.settings.circle_size | plus: 12 }}px; }
  .sc-{{ uid }} .sc__ring{ width:{{ section.settings.circle_size }}px; height:{{ section.settings.circle_size }}px; border-radius:50%; padding:3px; background:conic-gradient(from 210deg,var(--sc-ring1),var(--sc-ring2),var(--sc-ring1)); }
  .sc-{{ uid }} .sc__ring img{ width:100%; height:100%; border-radius:50%; object-fit:cover; border:2px solid var(--sc-bg); display:block; }
  .sc-{{ uid }} .sc__lbl{ font-family:{{ section.settings.body_font.family }},{{ section.settings.body_font.fallback_families }}; font-size:12px; color:var(--sc-label); text-align:center; line-height:1.2; }
  .sc-{{ uid }} .sc__viewer{ position:fixed; inset:0; background:rgba(20,15,10,.92); z-index:9999; display:none; align-items:center; justify-content:center; }
  .sc-{{ uid }} .sc__viewer.open{ display:flex; }
  .sc-{{ uid }} .sc__stage{ position:relative; width:min(420px,92vw); aspect-ratio:9/16; background:#000; border-radius:14px; overflow:hidden; }
  .sc-{{ uid }} .sc__stage img,.sc-{{ uid }} .sc__stage video{ width:100%; height:100%; object-fit:cover; }
  .sc-{{ uid }} .sc__bars{ position:absolute; top:10px; left:10px; right:10px; display:flex; gap:4px; z-index:3; }
  .sc-{{ uid }} .sc__bar{ flex:1; height:3px; border-radius:3px; background:rgba(255,255,255,.35); overflow:hidden; }
  .sc-{{ uid }} .sc__bar i{ display:block; height:100%; width:0; background:#fff; }
  .sc-{{ uid }} .sc__bar.done i{ width:100%; } .sc-{{ uid }} .sc__bar.active i{ animation:sc-fill-{{ uid }} var(--dur,5s) linear forwards; }
  @keyframes sc-fill-{{ uid }}{ from{width:0} to{width:100%} }
  .sc-{{ uid }} .sc__cap{ position:absolute; left:0; right:0; bottom:0; padding:18px 16px; background:linear-gradient(transparent,rgba(0,0,0,.6)); color:#fff; font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:600; font-size:15px; z-index:3; }
  .sc-{{ uid }} .sc__zone{ position:absolute; top:0; bottom:0; width:40%; z-index:2; cursor:pointer; } .sc-{{ uid }} .sc__zone--l{ left:0; } .sc-{{ uid }} .sc__zone--r{ right:0; }
  .sc-{{ uid }} .sc__close{ position:absolute; top:-42px; right:0; background:none; border:0; color:#fff; cursor:pointer; font-size:26px; line-height:1; }
  @media (max-width:520px){ .sc-{{ uid }} .sc__close{ top:12px; right:12px; z-index:4; } }
{% endstyle %}
<div class="sc-{{ uid }}" id="sc-{{ uid }}">
  <div class="sc__head">
    {%- if section.settings.heading != blank -%}<h2 class="sc__h">{{ section.settings.heading }}</h2>{%- endif -%}
    {%- if section.settings.sub != blank -%}<p class="sc__sub">{{ section.settings.sub | escape }}</p>{%- endif -%}
  </div>
  <div class="sc__row">
    {%- for block in section.blocks -%}
      <button class="sc__item" data-i="{{ forloop.index0 }}" {{ block.shopify_attributes }}>
        <span class="sc__ring">{% render 'mw-image', image: block.settings.image, url: block.settings.image_url, alt: block.settings.title, width: 200 %}</span>
        <span class="sc__lbl">{{ block.settings.title | escape }}</span>
      </button>
    {%- endfor -%}
  </div>
  <div class="sc__viewer" data-viewer aria-hidden="true">
    <div class="sc__stage">
      <button class="sc__close" data-close aria-label="Close">&times;</button>
      <div class="sc__bars" data-bars></div>
      <div class="sc__media" data-media></div>
      <div class="sc__cap" data-cap></div>
      <div class="sc__zone sc__zone--l" data-prev></div>
      <div class="sc__zone sc__zone--r" data-next></div>
    </div>
  </div>
</div>
<script>
(function(){var r=document.getElementById('sc-{{ uid }}');if(!r)return;
var slides=[{% for block in section.blocks %}{img:{% if block.settings.image != blank %}{{ block.settings.image | image_url: width: 800 | json }}{% else %}{{ block.settings.image_url | json }}{% endif %},cap:{{ block.settings.title | json }},vid:{{ block.settings.video_url | default: '' | json }}}{% unless forloop.last %},{% endunless %}{% endfor %}];
var dur={{ section.settings.duration | times: 1000 }};var i=0,timer=null;
var v=r.querySelector('[data-viewer]'),bars=r.querySelector('[data-bars]'),media=r.querySelector('[data-media]'),cap=r.querySelector('[data-cap]');
function render(){bars.innerHTML=slides.map(function(_,x){return '<span class="sc__bar '+(x<i?'done':x===i?'active':'')+'"><i></i></span>';}).join('');media.innerHTML=slides[i].vid?('<video src="'+slides[i].vid+'" autoplay muted playsinline></video>'):('<img src="'+slides[i].img+'" alt="">');cap.textContent=slides[i].cap||'';bars.querySelectorAll('.sc__bar').forEach(function(b){b.style.setProperty('--dur',(dur/1000)+'s')});clearTimeout(timer);timer=setTimeout(next,dur);}
function open(n){i=n;v.classList.add('open');v.setAttribute('aria-hidden','false');document.body.style.overflow='hidden';render();}
function close(){v.classList.remove('open');v.setAttribute('aria-hidden','true');document.body.style.overflow='';clearTimeout(timer);}
function next(){if(i<slides.length-1){i++;render();}else{close();}}
function prev(){if(i>0){i--;render();}}
r.querySelectorAll('.sc__item').forEach(function(b){b.addEventListener('click',function(){open(+b.dataset.i)});});
r.querySelector('[data-close]').addEventListener('click',close);
r.querySelector('[data-next]').addEventListener('click',next);
r.querySelector('[data-prev]').addEventListener('click',prev);
v.addEventListener('click',function(e){if(e.target===v)close();});
document.addEventListener('keydown',function(e){if(!v.classList.contains('open'))return;if(e.key==='Escape')close();if(e.key==='ArrowRight')next();if(e.key==='ArrowLeft')prev();});})();
</script>
{% schema %}
{
  "name": "MW · Story Circles",
  "tag": "section",
  "class": "mw-section mw-story-circles",
  "settings": [
    { "type": "html", "id": "heading", "label": "Heading", "info": "Use <span class=\"ac\">…</span> for the accent.", "default": "Straight from the <span class=\"ac\">group chat</span>" },
    { "type": "text", "id": "sub", "label": "Sub", "default": "First wears, unboxings and the shoes debate." },
    { "type": "range", "id": "circle_size", "min": 56, "max": 110, "step": 2, "unit": "px", "label": "Circle size", "default": 76 },
    { "type": "range", "id": "duration", "min": 3, "max": 10, "step": 1, "unit": "s", "label": "Slide duration", "default": 5 },
    { "type": "range", "id": "padding_top", "min": 0, "max": 160, "step": 4, "unit": "px", "label": "Padding top", "default": 56 },
    { "type": "range", "id": "padding_bottom", "min": 0, "max": 160, "step": 4, "unit": "px", "label": "Padding bottom", "default": 56 },
    { "type": "range", "id": "side_padding", "min": 12, "max": 64, "step": 2, "unit": "px", "label": "Side padding", "default": 24 },
    { "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": "#F4EEE9" },
    { "type": "color", "id": "heading_color", "label": "Heading", "default": "#1A1A1A" },
    { "type": "color", "id": "accent_color", "label": "Accent", "default": "#B79B6E" },
    { "type": "color", "id": "sub_color", "label": "Sub", "default": "#7C7266" },
    { "type": "color", "id": "label_color", "label": "Circle label", "default": "#5C5449" },
    { "type": "color", "id": "ring_start", "label": "Ring gradient start", "default": "#D6C19E" },
    { "type": "color", "id": "ring_end", "label": "Ring gradient end", "default": "#B79B6E" }
  ],
  "blocks": [
    { "type": "story", "name": "Story", "settings": [
      { "type": "image_picker", "id": "image", "label": "Image" },
      { "type": "text", "id": "image_url", "label": "…or image URL" },
      { "type": "text", "id": "video_url", "label": "Video URL (.mp4, optional)" },
      { "type": "text", "id": "title", "label": "Label", "default": "Fit check" }
    ] }
  ],
  "max_blocks": 12,
  "presets": [ { "name": "MW · Story Circles", "blocks": [
    { "type": "story", "settings": { "title": "Fit check" } },
    { "type": "story", "settings": { "title": "Which shoes" } },
    { "type": "story", "settings": { "title": "Unboxing" } },
    { "type": "story", "settings": { "title": "The twirl" } },
    { "type": "story", "settings": { "title": "Out the door" } },
    { "type": "story", "settings": { "title": "Getting ready" } }
  ] } ]
}
{% endschema %}