{%- comment -%} MW · Before / After — draggable image comparison slider. {%- endcomment -%}
{%- assign uid = section.id | replace: '_', '' | replace: '-', '' -%}
{% style %}
  #shopify-section-{{ section.id }}{ --ba-bg:{{ section.settings.section_bg }}; --ba-head:{{ section.settings.heading_color }}; --ba-accent:{{ section.settings.accent_color }}; --ba-accent2:{{ section.settings.accent_color_2 }}; --ba-sub:{{ section.settings.sub_color }}; --ba-label:{{ section.settings.label_bg }}; --ba-labeltx:{{ section.settings.label_text }}; --ba-handle:{{ section.settings.handle_color }}; }
  .ba-{{ uid }}{ background:var(--ba-bg); padding:{{ section.settings.padding_top }}px {{ section.settings.side_padding }}px {{ section.settings.padding_bottom }}px; }
  .ba-{{ uid }} .ba__wrap{ max-width:{{ section.settings.max_width }}px; margin:0 auto; }
  .ba-{{ uid }} .ba__head{ text-align:center; max-width:600px; margin:0 auto clamp(20px,3vw,36px); }
  .ba-{{ uid }} .ba__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(--ba-head); margin:0; line-height:1.12; }
  .ba-{{ uid }} .ba__h .ac{ color:var(--ba-accent); background:linear-gradient(99deg,var(--ba-accent) 0%,var(--ba-accent2) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
  .ba-{{ uid }} .ba__sub{ font-family:{{ section.settings.body_font.family }},{{ section.settings.body_font.fallback_families }}; font-size:15px; color:var(--ba-sub); margin:10px 0 0; }
  .ba-{{ uid }} .ba__stage{ position:relative; aspect-ratio:{{ section.settings.image_ratio }}; border-radius:{{ section.settings.image_radius }}px; overflow:hidden; user-select:none; touch-action:none; }
  .ba-{{ uid }} .ba__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
  .ba-{{ uid }} .ba__after{ clip-path:inset(0 0 0 50%); }
  .ba-{{ uid }} .ba__lbl{ position:absolute; bottom:14px; padding:5px 12px; border-radius:999px; font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:600; font-size:12px; background:var(--ba-label); color:var(--ba-labeltx); z-index:2; }
  .ba-{{ uid }} .ba__lbl--b{ left:14px; } .ba-{{ uid }} .ba__lbl--a{ right:14px; }
  .ba-{{ uid }} .ba__line{ position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--ba-handle); transform:translateX(-50%); z-index:3; }
  .ba-{{ uid }} .ba__grip{ position:absolute; top:50%; left:50%; width:42px; height:42px; border-radius:50%; background:var(--ba-handle); transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; cursor:ew-resize; box-shadow:0 6px 18px rgba(0,0,0,.25); z-index:4; }
  .ba-{{ uid }} .ba__grip svg{ width:22px; height:22px; color:#241C15; }
{% endstyle %}
<div class="ba-{{ uid }}">
  <div class="ba__wrap">
    <div class="ba__head">
      {%- if section.settings.heading != blank -%}<h2 class="ba__h">{{ section.settings.heading }}</h2>{%- endif -%}
      {%- if section.settings.sub != blank -%}<p class="ba__sub">{{ section.settings.sub | escape }}</p>{%- endif -%}
    </div>
    <div class="ba__stage" id="ba-{{ uid }}" data-stage>
      <img class="ba__img ba__before" src="{% if section.settings.before_image != blank %}{{ section.settings.before_image | image_url: width: 1400 }}{% else %}{{ section.settings.before_url }}{% endif %}" alt="Before" draggable="false">
      <img class="ba__img ba__after" data-after src="{% if section.settings.after_image != blank %}{{ section.settings.after_image | image_url: width: 1400 }}{% else %}{{ section.settings.after_url }}{% endif %}" alt="After" draggable="false">
      <span class="ba__lbl ba__lbl--b">{{ section.settings.before_label | escape }}</span>
      <span class="ba__lbl ba__lbl--a">{{ section.settings.after_label | escape }}</span>
      <div class="ba__line" data-line></div>
      <div class="ba__grip" data-grip>{% render 'mw-icon', name: 'drag' %}</div>
    </div>
  </div>
</div>
<script>
(function(){var r=document.getElementById('ba-{{ uid }}');if(!r)return;var after=r.querySelector('[data-after]'),line=r.querySelector('[data-line]'),grip=r.querySelector('[data-grip]');var down=false;
function set(x){var rect=r.getBoundingClientRect();var p=Math.max(0,Math.min(1,(x-rect.left)/rect.width));after.style.clipPath='inset(0 0 0 '+(p*100)+'%)';line.style.left=(p*100)+'%';grip.style.left=(p*100)+'%';}
function move(e){if(!down)return;var x=e.touches?e.touches[0].clientX:e.clientX;set(x);}
r.addEventListener('mousedown',function(e){down=true;set(e.clientX);});r.addEventListener('touchstart',function(e){down=true;set(e.touches[0].clientX);},{passive:true});
window.addEventListener('mousemove',move);window.addEventListener('touchmove',move,{passive:true});
window.addEventListener('mouseup',function(){down=false;});window.addEventListener('touchend',function(){down=false;});
})();
</script>
{% schema %}
{
  "name": "MW · Before / After",
  "tag": "section",
  "class": "mw-section mw-before-after",
  "settings": [
    { "type": "html", "id": "heading", "label": "Heading", "info": "Use <span class=\"ac\">…</span> for the accent.", "default": "See the <span class=\"ac\">difference</span>" },
    { "type": "text", "id": "sub", "label": "Sub", "default": "Drag to compare — glued sequins vs knitted-in shimmer." },
    { "type": "image_picker", "id": "before_image", "label": "Before image" },
    { "type": "text", "id": "before_url", "label": "…or before URL" },
    { "type": "image_picker", "id": "after_image", "label": "After image" },
    { "type": "text", "id": "after_url", "label": "…or after URL" },
    { "type": "text", "id": "before_label", "label": "Before label", "default": "Before" },
    { "type": "text", "id": "after_label", "label": "After label", "default": "After" },
    { "type": "select", "id": "image_ratio", "label": "Ratio", "default": "16/10", "options": [ {"value":"16/10","label":"16:10"}, {"value":"4/3","label":"4:3"}, {"value":"1/1","label":"Square"}, {"value":"3/4","label":"3:4"} ] },
    { "type": "range", "id": "image_radius", "min": 0, "max": 24, "step": 1, "unit": "px", "label": "Radius", "default": 14 },
    { "type": "range", "id": "max_width", "min": 600, "max": 1100, "step": 10, "unit": "px", "label": "Content width", "default": 860 },
    { "type": "range", "id": "padding_top", "min": 0, "max": 160, "step": 4, "unit": "px", "label": "Padding top", "default": 72 },
    { "type": "range", "id": "padding_bottom", "min": 0, "max": 160, "step": 4, "unit": "px", "label": "Padding bottom", "default": 72 },
    { "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 (gradient start)", "default": "#B79B6E" },
    { "type": "color", "id": "accent_color_2", "label": "Accent (gradient end)", "default": "#D6C19E" },
    { "type": "color", "id": "sub_color", "label": "Sub", "default": "#7C7266" },
    { "type": "color", "id": "label_bg", "label": "Label background", "default": "#241C15" },
    { "type": "color", "id": "label_text", "label": "Label text", "default": "#F3ECE1" },
    { "type": "color", "id": "handle_color", "label": "Handle / divider", "default": "#FFFFFF" }
  ],
  "presets": [ { "name": "MW · Before / After" } ]
}
{% endschema %}