{%- comment -%} MW · Guarantee — centered promise + CTA framed by polaroid photos. {%- endcomment -%}
{%- assign uid = section.id | replace: '_', '' | replace: '-', '' -%}
{% style %}
  #shopify-section-{{ section.id }}{ --gu-bg:{{ section.settings.section_bg }}; --gu-head:{{ section.settings.heading_color }}; --gu-accent:{{ section.settings.accent_color }}; --gu-text:{{ section.settings.text_color }}; --gu-btn:{{ section.settings.button_bg }}; --gu-btntx:{{ section.settings.button_text_color }}; --gu-frame:{{ section.settings.frame_color }}; --gu-trust:{{ section.settings.trust_color }}; }
  .gu-{{ uid }}{ background:var(--gu-bg); padding:{{ section.settings.padding_top }}px {{ section.settings.side_padding }}px {{ section.settings.padding_bottom }}px; }
  .gu-{{ uid }} .gu__row{ max-width:{{ section.settings.max_width }}px; margin:0 auto; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(16px,3vw,40px); }
  .gu-{{ uid }} .gu__col{ display:flex; flex-direction:column; gap:26px; }
  .gu-{{ uid }} .gu__pol{ background:var(--gu-frame); padding:8px 8px 26px; border-radius:3px; box-shadow:0 14px 30px rgba(58,48,39,.16); width:132px; }
  .gu-{{ uid }} .gu__pol img{ width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; display:block; }
  .gu-{{ uid }} .gu__mid{ text-align:center; padding:6px clamp(4px,2vw,24px); }
  .gu-{{ uid }} .gu__h{ font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:700; font-size:clamp(26px,3vw,36px); color:var(--gu-head); margin:0 0 12px; line-height:1.12; }
  .gu-{{ uid }} .gu__h .ac{ color:var(--gu-accent); background:linear-gradient(99deg,var(--gu-accent) 0%,color-mix(in srgb,var(--gu-accent),#fff 32%) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
  .gu-{{ uid }} .gu__sub{ font-family:{{ section.settings.body_font.family }},{{ section.settings.body_font.fallback_families }}; font-size:15px; line-height:1.6; color:var(--gu-text); max-width:44ch; margin:0 auto 26px; }
  .gu-{{ uid }} .gu__btn{ display:inline-flex; align-items:center; justify-content:center; font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:14px; color:var(--gu-btntx); background:var(--gu-btn); border-radius:3px; padding:16px 40px; text-decoration:none; transition:transform .18s,filter .18s; }
  .gu-{{ uid }} .gu__btn:hover{ transform:translateY(-1px); filter:brightness(1.08); }
  .gu-{{ uid }} .gu__trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:22px; margin:26px 0 0; }
  .gu-{{ uid }} .gu__ti{ display:inline-flex; align-items:center; gap:8px; font-family:{{ section.settings.body_font.family }},{{ section.settings.body_font.fallback_families }}; font-size:13px; color:var(--gu-trust); }
  .gu-{{ uid }} .gu__ti svg{ width:18px; height:18px; color:var(--gu-accent); }
  @media (max-width:900px){ .gu-{{ uid }} .gu__row{ grid-template-columns:1fr; } .gu-{{ uid }} .gu__col{ flex-direction:row; justify-content:center; flex-wrap:wrap; order:2; } .gu-{{ uid }} .gu__mid{ order:1; } }
{% endstyle %}
<div class="gu-{{ uid }}">
  <div class="gu__row">
    <div class="gu__col gu__col--l">
      {%- for block in section.blocks -%}{%- if block.settings.side == 'left' -%}<div class="gu__pol" style="transform:rotate({{ block.settings.rotate }}deg)" {{ block.shopify_attributes }}>{% render 'mw-image', image: block.settings.image, url: block.settings.image_url, width: 300 %}</div>{%- endif -%}{%- endfor -%}
    </div>
    <div class="gu__mid">
      {%- if section.settings.heading != blank -%}<h2 class="gu__h">{{ section.settings.heading }}</h2>{%- endif -%}
      {%- if section.settings.sub != blank -%}<p class="gu__sub">{{ section.settings.sub | escape }}</p>{%- endif -%}
      {%- if section.settings.button_label != blank -%}<a class="gu__btn" href="{{ section.settings.button_link | default: '#' }}">{{ section.settings.button_label | escape }}</a>{%- endif -%}
      <div class="gu__trust">
        {%- if section.settings.trust_1 != blank -%}<span class="gu__ti">{% render 'mw-icon', name: section.settings.trust_1_icon %}{{ section.settings.trust_1 | escape }}</span>{%- endif -%}
        {%- if section.settings.trust_2 != blank -%}<span class="gu__ti">{% render 'mw-icon', name: section.settings.trust_2_icon %}{{ section.settings.trust_2 | escape }}</span>{%- endif -%}
        {%- if section.settings.trust_3 != blank -%}<span class="gu__ti">{% render 'mw-icon', name: section.settings.trust_3_icon %}{{ section.settings.trust_3 | escape }}</span>{%- endif -%}
      </div>
    </div>
    <div class="gu__col gu__col--r">
      {%- for block in section.blocks -%}{%- if block.settings.side == 'right' -%}<div class="gu__pol" style="transform:rotate({{ block.settings.rotate }}deg)" {{ block.shopify_attributes }}>{% render 'mw-image', image: block.settings.image, url: block.settings.image_url, width: 300 %}</div>{%- endif -%}{%- endfor -%}
    </div>
  </div>
</div>
{% schema %}
{
  "name": "MW · Guarantee",
  "tag": "section",
  "class": "mw-section mw-guarantee",
  "settings": [
    { "type": "html", "id": "heading", "label": "Heading", "info": "Use <span class=\"ac\">…</span> for the accent word.", "default": "<span class=\"ac\">60 days</span> to live in it" },
    { "type": "textarea", "id": "sub", "label": "Sub", "default": "Wear it to something real. Wash it. If it is not the dress you keep reaching for after 60 days, one email and you get every cent back." },
    { "type": "text", "id": "button_label", "label": "Button label", "default": "Try it on" },
    { "type": "url", "id": "button_link", "label": "Button link" },
    { "type": "header", "content": "Trust row" },
    { "type": "text", "id": "trust_1", "label": "Trust 1", "default": "60-Day Returns" },
    { "type": "select", "id": "trust_1_icon", "label": "Trust 1 icon", "default": "check-circle", "options": [ {"value":"check-circle","label":"Check"}, {"value":"truck","label":"Truck"}, {"value":"swap","label":"Swap"}, {"value":"lock","label":"Lock"}, {"value":"shield","label":"Shield"}, {"value":"refresh","label":"Refresh"} ] },
    { "type": "text", "id": "trust_2", "label": "Trust 2", "default": "Free Size Swaps, Both Ways" },
    { "type": "select", "id": "trust_2_icon", "label": "Trust 2 icon", "default": "swap", "options": [ {"value":"check-circle","label":"Check"}, {"value":"truck","label":"Truck"}, {"value":"swap","label":"Swap"}, {"value":"lock","label":"Lock"}, {"value":"shield","label":"Shield"}, {"value":"refresh","label":"Refresh"} ] },
    { "type": "text", "id": "trust_3", "label": "Trust 3", "default": "Secure Payment" },
    { "type": "select", "id": "trust_3_icon", "label": "Trust 3 icon", "default": "lock", "options": [ {"value":"check-circle","label":"Check"}, {"value":"truck","label":"Truck"}, {"value":"swap","label":"Swap"}, {"value":"lock","label":"Lock"}, {"value":"shield","label":"Shield"}, {"value":"refresh","label":"Refresh"} ] },
    { "type": "header", "content": "Layout & colour" },
    { "type": "range", "id": "max_width", "min": 800, "max": 1300, "step": 10, "unit": "px", "label": "Content width", "default": 1120 },
    { "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": "#F4EEE9" },
    { "type": "color", "id": "heading_color", "label": "Heading", "default": "#3A3027" },
    { "type": "color", "id": "accent_color", "label": "Accent", "default": "#B79B6E" },
    { "type": "color", "id": "text_color", "label": "Text", "default": "#7C7266" },
    { "type": "color", "id": "button_bg", "label": "Button", "default": "#3A3027" },
    { "type": "color", "id": "button_text_color", "label": "Button text", "default": "#F3ECE1" },
    { "type": "color", "id": "frame_color", "label": "Polaroid frame", "default": "#FFFFFF" },
    { "type": "color", "id": "trust_color", "label": "Trust text", "default": "#5C5449" }
  ],
  "blocks": [
    { "type": "photo", "name": "Polaroid", "settings": [
      { "type": "image_picker", "id": "image", "label": "Photo" },
      { "type": "text", "id": "image_url", "label": "…or photo URL" },
      { "type": "select", "id": "side", "label": "Side", "default": "left", "options": [ {"value":"left","label":"Left"}, {"value":"right","label":"Right"} ] },
      { "type": "range", "id": "rotate", "min": -12, "max": 12, "step": 1, "unit": "deg", "label": "Tilt", "default": -4 }
    ] }
  ],
  "max_blocks": 6,
  "presets": [ { "name": "MW · Guarantee", "blocks": [
    { "type": "photo", "settings": { "side": "left", "rotate": -5 } },
    { "type": "photo", "settings": { "side": "left", "rotate": 4 } },
    { "type": "photo", "settings": { "side": "right", "rotate": 5 } },
    { "type": "photo", "settings": { "side": "right", "rotate": -4 } }
  ] } ]
}
{% endschema %}