{% comment %}
Sizing Guide Section (Release-compatible)
- One block per product type (Skirts, Blouses, Sarees, Suits).
- Each block pulls the SIZE CHART from a Shopify Page (page picker).
- "How to measure" is stacked BELOW the chart (single-column layout).
- Side nav is text-only; active item is bold/darker. Mobile: horizontal scroll.
- Inherits Release controls: section_width, color_scheme, spacing_top/bottom (selects),
  content_position & content_alignment (exposed for consistency).
{% endcomment %}

{%- style -%}
  /* Release-style spacing + layout variables on the section root */
  #shopify-section-{{ section.id }} > .sizing-guide {
    --padding-block-start: calc(var(--section-spacing-unit-size) * {{ section.settings.spacing_top }});
    --padding-block-end:   calc(var(--section-spacing-unit-size) * {{ section.settings.spacing_bottom }});
    --section-content-alignment: {{ section.settings.content_alignment | default: 'center' }};
    --section-content-position:  {{ section.settings.content_position  | default: 'center' }};

    padding-block-start: var(--padding-block-start);
    padding-block-end:   var(--padding-block-end);
  }

  .sizing-guide.container{
    max-width: var(--page-width, 1200px);
    margin: 0 auto;
    padding-inline: var(--page-gutter, clamp(16px,3vw,32px));
  }

  /* Outer layout: side nav + content */
  .sizing-grid{
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: clamp(16px,2.5vw,32px);
  }

  /* Sticky side nav (desktop) */
  .sizing-nav{ position: sticky; top: clamp(64px, 8vh, 96px); align-self: start; }
  .sizing-nav__title{ font-size: 0.9rem; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 8px; opacity: .7; }
  .sizing-nav ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

  /* Text-only links; active state via JS */
  .sizing-nav__link{
    display: inline-block;
    padding: 6px 0;
    text-decoration: none;
    color: inherit;
    font-weight: 500;
    opacity: .7;
    border: none;
  }
  .sizing-nav__link.is-active,
  .sizing-nav__link:hover{ opacity: 1; font-weight: 600; }

  .sizing-content{ display: flex; flex-direction: column; gap: 48px; }

  .size-section{ padding-block: 8px; border-top: 1px solid rgba(0,0,0,.08); scroll-margin-top: 100px; }
  .size-section__title{ margin: 8px 0 4px; font-size: clamp(20px,2.4vw,28px); }
  .size-section__subtitle{ margin: 0 0 12px; opacity: .75; }
  .size-section__tip{ background: rgba(0,0,0,.03); border: 1px dashed rgba(0,0,0,.12); border-radius: 12px; padding: 10px 12px; margin: 0 0 16px; font-size: .95rem; }

  /* SINGLE-COLUMN BODY: chart first, then how-to */
  .size-section__body{ display: block; }
  .size-section__col{ margin-bottom: clamp(16px, 2vw, 24px); }
  .size-section__col:last-child{ margin-bottom: 0; }

  /* Optional table cosmetics if your page content is a table */
  .size-chart table{ width: 100%; border-collapse: collapse; }
  .size-chart th, .size-chart td{ border: 1px solid rgba(0,0,0,.1); padding: 10px; text-align: center; }

  .howto-images{ display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 10px; }
  .howto-image figcaption{ font-size: .85rem; opacity: .7; margin-top: 6px; }

  .size-section__footer{ margin-top: 16px; }
  .back-to-top{ font-size: .9rem; text-decoration: underline; }

  /* Mobile */
  @media (max-width: 749px){
    .sizing-grid{ grid-template-columns: 1fr; }
    .sizing-nav{ position: relative; top: auto; margin-bottom: 8px; }
    .sizing-nav ul{
      flex-direction: row;
      gap: 12px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
      padding-bottom: 4px;
    }
    .sizing-nav li{ scroll-snap-align: start; }
    .sizing-nav__link{ padding: 8px 2px; white-space: nowrap; }
    .size-section{ scroll-margin-top: 72px; }
  }
{%- endstyle -%}

<section class="sizing-guide container {{ section.settings.section_width }} color-{{ section.settings.color_scheme }} gradient" id="top">
  {% if section.blocks.size > 0 %}
    <div class="sizing-grid">
      <aside class="sizing-nav" role="navigation" aria-label="Sizing navigation">
        <div class="sizing-nav__inner">
          <h3 class="sizing-nav__title">{{ section.settings.nav_title | default: 'Size Guides' }}</h3>
          <ul>
            {% for block in section.blocks %}
              {% assign anchor = block.settings.anchor_id | default: block.id %}
              <li>
                <a class="sizing-nav__link" data-anchor="{{ anchor | escape }}" href="#{{ anchor | escape }}">{{ block.settings.title | escape }}</a>
              </li>
            {% endfor %}
          </ul>
        </div>
      </aside>

      <div class="sizing-content">
        {% for block in section.blocks %}
          {% assign anchor = block.settings.anchor_id | default: block.id %}
          <article id="{{ anchor | escape }}" class="size-section" {{ block.shopify_attributes }}>
            <header class="size-section__header">
              <h2 class="size-section__title">{{ block.settings.title }}</h2>
              {% if block.settings.subtitle != blank %}
                <p class="size-section__subtitle">{{ block.settings.subtitle }}</p>
              {% endif %}
              {% if block.settings.tip != blank %}
                <div class="size-section__tip">{{ block.settings.tip }}</div>
              {% endif %}
            </header>

            <div class="size-section__body">
              <div class="size-section__col size-section__col--chart">
                {%- assign chart_page = block.settings.size_chart_page -%}
                {% if chart_page != blank %}
                  <div class="size-chart rte">
                    {{ chart_page.content }}
                  </div>
                {% endif %}
              </div>

              <div class="size-section__col size-section__col--howto">
                {% if block.settings.howto_richtext != blank %}
                  <div class="how-to-measure rte">
                    {{ block.settings.howto_richtext }}
                  </div>
                {% endif %}

                <div class="howto-images">
                  {% if block.settings.image_1 != blank %}
                    <figure class="howto-image">
                      {{ block.settings.image_1 | image_url: width: 1200 | image_tag: loading: 'lazy', alt: block.settings.image_1_alt }}
                      {% if block.settings.image_1_caption != blank %}
                        <figcaption>{{ block.settings.image_1_caption }}</figcaption>
                      {% endif %}
                    </figure>
                  {% endif %}
                  {% if block.settings.image_2 != blank %}
                    <figure class="howto-image">
                      {{ block.settings.image_2 | image_url: width: 1200 | image_tag: loading: 'lazy', alt: block.settings.image_2_alt }}
                      {% if block.settings.image_2_caption != blank %}
                        <figcaption>{{ block.settings.image_2_caption }}</figcaption>
                      {% endif %}
                    </figure>
                  {% endif %}
                </div>
              </div>
            </div>

            <div class="size-section__footer">
              <a href="#top" class="back-to-top">{{ section.settings.back_to_top_label | default: 'Back to top' }}</a>
            </div>
          </article>
        {% endfor %}
      </div>
    </div>
  {% else %}
    <p class="empty-state">No sizing blocks added yet.</p>
  {% endif %}
</section>

<script>
  (function(){
    // Active link sync on scroll
    var sections = document.querySelectorAll('.size-section[id]');
    var links = document.querySelectorAll('.sizing-nav__link');

    function setActive(id){
      links.forEach(function(a){
        if(a.getAttribute('data-anchor') === id){ a.classList.add('is-active'); }
        else { a.classList.remove('is-active'); }
      });
    }

    // On click, immediately set active
    links.forEach(function(a){
      a.addEventListener('click', function(){ setActive(a.getAttribute('data-anchor')); });
    });

    // Observe sections
    if('IntersectionObserver' in window){
      var obs = new IntersectionObserver(function(entries){
        entries.forEach(function(entry){
          if(entry.isIntersecting){
            setActive(entry.target.id);
          }
        });
      }, { rootMargin: '-40% 0px -50% 0px', threshold: [0, 1] });
      sections.forEach(function(sec){ obs.observe(sec); });
    }
  })();
</script>

{% schema %}
{
  "name": "Sizing Guide",
  "tag": "section",
  "class": "section-sizing-guide",
  "settings": [
    {
      "type": "select",
      "id": "section_width",
      "label": "t:sections.global.section.width.label_alt",
      "options": [
        { "value": "max-w-page", "label": "t:sections.global.section.width.options.page.label" },
        { "value": "max-w-narrow", "label": "t:sections.global.section.width.options.narrow.label" },
        { "value": "max-w-narrower", "label": "t:sections.global.section.width.options.narrower.label" },
        { "value": "max-w-fluid", "label": "t:sections.global.section.width.options.fluid.label" }
      ],
      "default": "max-w-narrow"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.global.color_scheme.label",
      "default": "scheme-3"
    },
    {
      "type": "select",
      "id": "spacing_top",
      "label": "t:sections.global.spacing.spacing_top.label",
      "options": [
        { "value": "0", "label": "No" },
        { "value": "1", "label": "S" },
        { "value": "2", "label": "M" },
        { "value": "4", "label": "L" },
        { "value": "6", "label": "XL" }
      ],
      "default": "2"
    },
    {
      "type": "select",
      "id": "spacing_bottom",
      "label": "t:sections.global.spacing.spacing_bottom.label",
      "options": [
        { "value": "0", "label": "No" },
        { "value": "1", "label": "S" },
        { "value": "2", "label": "M" },
        { "value": "4", "label": "L" },
        { "value": "6", "label": "XL" }
      ],
      "default": "6"
    },
    {
      "type": "select",
      "id": "content_position",
      "label": "t:sections.global.content.position.label",
      "options": [
        { "value": "start",  "label": "t:sections.global.content.position.options.start.label" },
        { "value": "center", "label": "t:sections.global.content.position.options.center.label" },
        { "value": "end",    "label": "t:sections.global.content.position.options.end.label" }
      ],
      "default": "center"
    },
    {
      "type": "select",
      "id": "content_alignment",
      "label": "t:sections.global.content.alignment.label",
      "options": [
        { "value": "start",  "label": "t:sections.global.content.alignment.options.start.label" },
        { "value": "center", "label": "t:sections.global.content.alignment.options.center.label" },
        { "value": "end",    "label": "t:sections.global.content.alignment.options.end.label" }
      ],
      "default": "center"
    },
    { "type": "text", "id": "nav_title", "label": "Side nav heading", "default": "Size Guides" },
    { "type": "text", "id": "back_to_top_label", "label": "Back to top label", "default": "Back to top" }
  ],
  "blocks": [
    {
      "type": "category",
      "name": "Product type section",
      "settings": [
        { "type": "text", "id": "title", "label": "Title (e.g., Skirts)", "default": "Skirts" },
        { "type": "text", "id": "subtitle", "label": "Subtitle (optional)" },
        { "type": "text", "id": "anchor_id", "label": "Anchor ID (optional)" },
        { "type": "richtext", "id": "tip", "label": "Fit tip (optional)", "default": "<p>If you are between sizes, we recommend sizing up.</p>" },
        { "type": "page", "id": "size_chart_page", "label": "Size chart page" },
        { "type": "richtext", "id": "howto_richtext", "label": "How to measure (text)", "default": "<p>Measure at the fullest part and keep the tape parallel to the floor.</p>" },
        { "type": "image_picker", "id": "image_1", "label": "How-to image 1" },
        { "type": "text", "id": "image_1_alt", "label": "Image 1 alt text" },
        { "type": "text", "id": "image_1_caption", "label": "Image 1 caption" },
        { "type": "image_picker", "id": "image_2", "label": "How-to image 2" },
        { "type": "text", "id": "image_2_alt", "label": "Image 2 alt text" },
        { "type": "text", "id": "image_2_caption", "label": "Image 2 caption" }
      ]
    }
  ],
  "presets": [
    { "name": "Sizing Guide" }
  ]
}
{% endschema %}