{%- comment -%} MW · Why It Works — big lifestyle image + text, checklist and inline review. {%- endcomment -%}
{%- assign uid = section.id | replace: '_', '' | replace: '-', '' -%}
{% style %}
  #shopify-section-{{ section.id }}{ --wi-bg:{{ section.settings.section_bg }}; --wi-head:{{ section.settings.heading_color }}; --wi-accent:{{ section.settings.accent_color }}; --wi-text:{{ section.settings.text_color }}; --wi-check:{{ section.settings.check_color }}; --wi-rev:{{ section.settings.review_bg }}; }
  .wi-{{ uid }}{ background:var(--wi-bg); padding:{{ section.settings.padding_top }}px {{ section.settings.side_padding }}px {{ section.settings.padding_bottom }}px; }
  .wi-{{ uid }} .wi__grid{ max-width:{{ section.settings.max_width }}px; margin:0 auto; display:grid; grid-template-columns:{{ section.settings.image_col }}fr 1fr; align-items:center; gap:clamp(28px,4vw,64px); }
  {% if section.settings.media_position == 'right' %}.wi-{{ uid }} .wi__media{ order:2; }{% endif %}
  .wi-{{ uid }} .wi__media{ border-radius:{{ section.settings.image_radius }}px; overflow:hidden; aspect-ratio:{{ section.settings.image_ratio }}; }
  .wi-{{ uid }} .wi__media img{ width:100%; height:100%; object-fit:cover; display:block; }
  .wi-{{ uid }} .wi__h{ font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:700; font-size:clamp(24px,2.6vw,34px); line-height:1.12; color:var(--wi-head); margin:0 0 16px; }
  .wi-{{ uid }} .wi__h .ac{ color:var(--wi-accent); background:linear-gradient(99deg,var(--wi-accent) 0%,color-mix(in srgb,var(--wi-accent),#fff 32%) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
  .wi-{{ uid }} .wi__body{ font-family:{{ section.settings.body_font.family }},{{ section.settings.body_font.fallback_families }}; font-size:15px; line-height:1.65; color:var(--wi-text); }
  .wi-{{ uid }} .wi__body p{ margin:0 0 14px; }
  .wi-{{ uid }} .wi__list{ display:grid; gap:11px; margin:18px 0 0; }
  .wi-{{ uid }} .wi__li{ display:flex; align-items:center; gap:10px; font-family:{{ section.settings.body_font.family }},{{ section.settings.body_font.fallback_families }}; font-size:14px; color:var(--wi-head); }
  .wi-{{ uid }} .wi__li svg{ width:19px; height:19px; color:var(--wi-check); flex:none; }
  .wi-{{ uid }} .wi__rev{ margin:22px 0 0; background:var(--wi-rev); border-radius:10px; padding:16px 18px; display:flex; gap:13px; align-items:flex-start; box-shadow:var(--mw-shadow-sm,0 1px 3px rgba(58,48,39,.08)); }
  .wi-{{ uid }} .wi__rev img{ width:42px; height:42px; border-radius:50%; object-fit:cover; flex:none; }
  .wi-{{ uid }} .wi__rq{ font-family:{{ section.settings.body_font.family }},{{ section.settings.body_font.fallback_families }}; font-size:13.5px; line-height:1.5; color:var(--wi-text); margin:0 0 6px; }
  .wi-{{ uid }} .wi__rmeta{ display:flex; align-items:center; gap:8px; }
  .wi-{{ uid }} .wi__stars{ display:inline-flex; gap:1px; color:var(--mw-star,#E8B04B); }
  .wi-{{ uid }} .wi__stars svg{ width:13px; height:13px; }
  .wi-{{ uid }} .wi__rn{ font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:600; font-size:13px; color:var(--wi-head); }
  @media (max-width:820px){ .wi-{{ uid }} .wi__grid{ grid-template-columns:1fr; } {% if section.settings.media_position == 'right' %}.wi-{{ uid }} .wi__media{ order:0; }{% endif %} }
{% endstyle %}
<div class="wi-{{ uid }}">
  <div class="wi__grid">
    <div class="wi__media">{% render 'mw-image', image: section.settings.image, url: section.settings.image_url, alt: section.settings.heading, width: 1000 %}</div>
    <div class="wi__text">
      {%- if section.settings.heading != blank -%}<h2 class="wi__h">{{ section.settings.heading }}</h2>{%- endif -%}
      <div class="wi__body">{{ section.settings.body }}</div>
      {%- if section.blocks.size > 0 -%}<div class="wi__list">
        {%- for block in section.blocks -%}<div class="wi__li" {{ block.shopify_attributes }}>{% render 'mw-icon', name: 'check-circle' %}<span>{{ block.settings.text | escape }}</span></div>{%- endfor -%}
      </div>{%- endif -%}
      {%- if section.settings.review_quote != blank -%}
        <div class="wi__rev">
          {% render 'mw-image', image: section.settings.review_avatar, url: section.settings.review_avatar_url, width: 96 %}
          <div>
            <p class="wi__rq">{{ section.settings.review_quote | escape }}</p>
            <div class="wi__rmeta"><span class="wi__stars">{% for i in (1..5) %}{% render 'mw-icon', name: 'star' %}{% endfor %}</span><span class="wi__rn">{{ section.settings.review_name | escape }}</span></div>
          </div>
        </div>
      {%- endif -%}
    </div>
  </div>
</div>
{% schema %}
{
  "name": "MW · Why It Works",
  "tag": "section",
  "class": "mw-section mw-why-it-works",
  "settings": [
    { "type": "image_picker", "id": "image", "label": "Image" },
    { "type": "text", "id": "image_url", "label": "…or image URL" },
    { "type": "select", "id": "media_position", "label": "Image side", "default": "left", "options": [ {"value":"left","label":"Left"}, {"value":"right","label":"Right"} ] },
    { "type": "select", "id": "image_ratio", "label": "Image ratio", "default": "4/5", "options": [ {"value":"4/5","label":"4:5"}, {"value":"1/1","label":"1:1"}, {"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": "image_col", "min": 1, "max": 4, "step": 1, "label": "Image column weight", "default": 1 },
    { "type": "html", "id": "heading", "label": "Heading", "info": "Use <span class=\"ac\">…</span> for the accent colour.", "default": "The sequin dress you wear <span class=\"ac\">more than once</span>" },
    { "type": "richtext", "id": "body", "label": "Body", "default": "<p>The average sequin dress is worn once, photographed, and never touched again. It scratches, it sheds, and it only suits one kind of evening. Ours was cut as a knit first and a sequin dress second — which is why it survives a wash, works with a cardigan at noon, and still holds a room at nine.</p>" },
    { "type": "header", "content": "Inline review (optional)" },
    { "type": "image_picker", "id": "review_avatar", "label": "Reviewer avatar" },
    { "type": "text", "id": "review_avatar_url", "label": "…or avatar URL" },
    { "type": "textarea", "id": "review_quote", "label": "Review quote", "default": "I have a wardrobe of sequin dresses I wore exactly once. This is the first one that made it into normal rotation." },
    { "type": "text", "id": "review_name", "label": "Reviewer name", "default": "Juliet M." },
    { "type": "header", "content": "Layout & colour" },
    { "type": "range", "id": "max_width", "min": 900, "max": 1300, "step": 10, "unit": "px", "label": "Content width", "default": 1180 },
    { "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": "Section background", "default": "#EDE4DC" },
    { "type": "color", "id": "heading_color", "label": "Heading", "default": "#17324E" },
    { "type": "color", "id": "accent_color", "label": "Heading accent", "default": "#B79B6E" },
    { "type": "color", "id": "text_color", "label": "Body text", "default": "#5C5449" },
    { "type": "color", "id": "check_color", "label": "Check icon", "default": "#3A3027" },
    { "type": "color", "id": "review_bg", "label": "Review card background", "default": "#FBF8F3" }
  ],
  "blocks": [
    { "type": "check", "name": "Checklist item", "settings": [ { "type": "text", "id": "text", "label": "Text", "default": "Knitted sequins that never shed" } ] }
  ],
  "max_blocks": 6,
  "presets": [ { "name": "MW · Why It Works", "blocks": [
    { "type": "check", "settings": { "text": "Knitted sequins that never shed" } },
    { "type": "check", "settings": { "text": "Lined body, no slip required" } },
    { "type": "check", "settings": { "text": "Machine washable, no dry cleaning" } }
  ] } ]
}
{% endschema %}