{%- comment -%} MW · Day to Night — tabbed benefit switcher with paired image + arrows. {%- endcomment -%}
{%- assign uid = section.id | replace: '_', '' | replace: '-', '' -%}
{% style %}
  #shopify-section-{{ section.id }}{ --dn-bg:{{ section.settings.section_bg }}; --dn-head:{{ section.settings.heading_color }}; --dn-tab:{{ section.settings.tab_color }}; --dn-tabactive:{{ section.settings.tab_active_bg }}; --dn-tabactivetx:{{ section.settings.tab_active_color }}; --dn-tabbar:{{ section.settings.tab_bar_bg }}; --dn-title:{{ section.settings.content_heading_color }}; --dn-text:{{ section.settings.text_color }}; }
  .dn-{{ uid }}{ background:var(--dn-bg); padding:{{ section.settings.padding_top }}px {{ section.settings.side_padding }}px {{ section.settings.padding_bottom }}px; }
  .dn-{{ uid }} .dn__wrap{ max-width:{{ section.settings.max_width }}px; margin:0 auto; }
  .dn-{{ uid }} .dn__h{ text-align:center; 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(--dn-head); margin:0 0 22px; }
  .dn-{{ uid }} .dn__tabs{ display:flex; justify-content:center; gap:4px; background:var(--dn-tabbar); border-radius:999px; padding:5px; width:max-content; max-width:100%; margin:0 auto clamp(28px,4vw,44px); flex-wrap:wrap; }
  .dn-{{ uid }} .dn__tab{ border:0; background:transparent; cursor:pointer; font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:500; font-size:14px; color:var(--dn-tab); padding:10px 20px; border-radius:999px; transition:background .2s,color .2s; }
  .dn-{{ uid }} .dn__tab[aria-selected="true"]{ background:var(--dn-tabactive); color:var(--dn-tabactivetx); box-shadow:0 2px 8px rgba(58,48,39,.12); }
  .dn-{{ uid }} .dn__stage{ position:relative; }
  .dn-{{ uid }} .dn__panel{ display:none; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(24px,4vw,56px); }
  .dn-{{ uid }} .dn__panel[data-active]{ display:grid; animation:dn-fade-{{ uid }} .35s ease; }
  @keyframes dn-fade-{{ uid }}{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
  .dn-{{ uid }} .dn__ct{ padding:0 clamp(0px,3vw,40px); }
  .dn-{{ uid }} .dn__ctt{ font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:700; font-size:clamp(20px,2vw,26px); color:var(--dn-title); margin:0 0 12px; }
  .dn-{{ uid }} .dn__ctx{ font-family:{{ section.settings.body_font.family }},{{ section.settings.body_font.fallback_families }}; font-size:15px; line-height:1.65; color:var(--dn-text); margin:0; }
  .dn-{{ uid }} .dn__im{ border-radius:{{ section.settings.image_radius }}px; overflow:hidden; aspect-ratio:{{ section.settings.image_ratio }}; }
  .dn-{{ uid }} .dn__im img{ width:100%; height:100%; object-fit:cover; display:block; }
  .dn-{{ uid }} .dn__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(--dn-head); }
  .dn-{{ uid }} .dn__nav svg{ width:20px; height:20px; }
  .dn-{{ uid }} .dn__nav--prev{ left:-6px; } .dn-{{ uid }} .dn__nav--next{ right:-6px; }
  @media (max-width:760px){ .dn-{{ uid }} .dn__panel[data-active]{ grid-template-columns:1fr; } .dn-{{ uid }} .dn__ct{ order:2; } .dn-{{ uid }} .dn__nav{ display:none; } }
{% endstyle %}
<div class="dn-{{ uid }}" id="dn-{{ uid }}">
  <div class="dn__wrap">
    {%- if section.settings.heading != blank -%}<h2 class="dn__h">{{ section.settings.heading | escape }}</h2>{%- endif -%}
    <div class="dn__tabs" role="tablist">
      {%- for block in section.blocks -%}<button class="dn__tab" role="tab" data-tab="{{ forloop.index0 }}" aria-selected="{% if forloop.first %}true{% else %}false{% endif %}">{{ block.settings.label | escape }}</button>{%- endfor -%}
    </div>
    <div class="dn__stage">
      <button class="dn__nav dn__nav--prev" data-prev aria-label="Previous">{% render 'mw-icon', name: 'arrow-left' %}</button>
      {%- for block in section.blocks -%}
        <div class="dn__panel" data-panel="{{ forloop.index0 }}" {% if forloop.first %}data-active{% endif %} {{ block.shopify_attributes }}>
          <div class="dn__ct">
            <h3 class="dn__ctt">{{ block.settings.title | escape }}</h3>
            <p class="dn__ctx">{{ block.settings.text | escape }}</p>
          </div>
          <div class="dn__im">{% render 'mw-image', image: block.settings.image, url: block.settings.image_url, alt: block.settings.title, width: 700 %}</div>
        </div>
      {%- endfor -%}
      <button class="dn__nav dn__nav--next" data-next aria-label="Next">{% render 'mw-icon', name: 'arrow-right' %}</button>
    </div>
  </div>
</div>
<script>
(function(){var r=document.getElementById('dn-{{ uid }}');if(!r)return;var tabs=[].slice.call(r.querySelectorAll('.dn__tab'));var panels=[].slice.call(r.querySelectorAll('.dn__panel'));var i=0;
function go(n){i=(n+panels.length)%panels.length;tabs.forEach(function(t,x){t.setAttribute('aria-selected',x===i?'true':'false')});panels.forEach(function(p,x){if(x===i){p.setAttribute('data-active','')}else{p.removeAttribute('data-active')}});}
tabs.forEach(function(t,x){t.addEventListener('click',function(){go(x)})});
var p=r.querySelector('[data-prev]'),n=r.querySelector('[data-next]');p&&p.addEventListener('click',function(){go(i-1)});n&&n.addEventListener('click',function(){go(i+1)});})();
</script>
{% schema %}
{
  "name": "MW · Day to Night",
  "tag": "section",
  "class": "mw-section mw-day-to-night",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "One dress, every hour" },
    { "type": "range", "id": "max_width", "min": 900, "max": 1300, "step": 10, "unit": "px", "label": "Content width", "default": 1120 },
    { "type": "select", "id": "image_ratio", "label": "Image ratio", "default": "5/4", "options": [ {"value":"5/4","label":"5:4"}, {"value":"1/1","label":"Square"}, {"value":"4/5","label":"4:5"}, {"value":"3/4","label":"3:4"} ] },
    { "type": "range", "id": "image_radius", "min": 0, "max": 24, "step": 1, "unit": "px", "label": "Image radius", "default": 10 },
    { "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": 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": "#EDE4DC" },
    { "type": "color", "id": "heading_color", "label": "Heading", "default": "#17324E" },
    { "type": "color", "id": "tab_bar_bg", "label": "Tab bar", "default": "#E4D8CA" },
    { "type": "color", "id": "tab_color", "label": "Tab text", "default": "#5C5449" },
    { "type": "color", "id": "tab_active_bg", "label": "Active tab", "default": "#FFFFFF" },
    { "type": "color", "id": "tab_active_color", "label": "Active tab text", "default": "#241C15" },
    { "type": "color", "id": "content_heading_color", "label": "Panel heading", "default": "#17324E" },
    { "type": "color", "id": "text_color", "label": "Panel text", "default": "#5C5449" }
  ],
  "blocks": [
    { "type": "tab", "name": "Tab", "settings": [
      { "type": "text", "id": "label", "label": "Tab label", "default": "Daylight" },
      { "type": "text", "id": "title", "label": "Title", "default": "Overdressed? Never" },
      { "type": "textarea", "id": "text", "label": "Text", "default": "Micro sequins catch daylight softly instead of flashing it back. Add a cardigan and it reads as a knit dress on a Tuesday, not a party outfit that wandered out early." },
      { "type": "image_picker", "id": "image", "label": "Image" },
      { "type": "text", "id": "image_url", "label": "…or image URL" }
    ] }
  ],
  "max_blocks": 5,
  "presets": [ { "name": "MW · Day to Night", "blocks": [
    { "type": "tab", "settings": { "label": "Daylight", "title": "Overdressed? Never", "text": "Micro sequins catch daylight softly instead of flashing it back. Add a cardigan and it reads as a knit dress on a Tuesday, not a party outfit that wandered out early." } },
    { "type": "tab", "settings": { "label": "Afternoon", "title": "Slips into any plan", "text": "Straight through the hip with enough give to walk fast in. It moves from a lunch to a gallery to a long table without a single adjustment." } },
    { "type": "tab", "settings": { "label": "Evening", "title": "Hand-finished, head to hem", "text": "As the light drops the shimmer lifts. The same dress that read quiet at noon holds a candlelit room at nine, no change of outfit required." } }
  ] } ]
}
{% endschema %}