{% comment %}
Help Center (Aritzia-style): left nav (from a menu of Pages) + right pane (page contents)
Includes common controls: color scheme, spacing, width, breadcrumbs, heading, description.
{% endcomment %}

{%- liquid
  assign menu = section.settings.menu
  assign description = section.settings.text
-%}

{%- style -%}
  #shopify-section-{{ section.id }} > .help-wrap {
    --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 }});
    padding-block-start: var(--padding-block-start);
    padding-block-end:   var(--padding-block-end);
  }

  #shopify-section-{{ section.id }} .help-grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 32px;
  }
  @media (max-width: 992px) {
    #shopify-section-{{ section.id }} .help-grid { grid-template-columns: 1fr; }
  }

  #shopify-section-{{ section.id }} .help-nav ul { list-style: none; margin: 0; padding: 0; }
  #shopify-section-{{ section.id }} .help-link {
    display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none;
    color: var(--color-foreground, inherit);
  }
  #shopify-section-{{ section.id }} .help-link:hover { background: var(--color-base-background-2, #f5f5f5); }
  #shopify-section-{{ section.id }} .help-link.is-active { font-weight: 600; background: var(--color-base-background-2, #f5f5f5); }

  #shopify-section-{{ section.id }} .help-pane[hidden] { display: none !important; }
  #shopify-section-{{ section.id }} .help-title { margin-top: 0; }

  /* Optional: keep your card/table look consistent inside help pages */
  #shopify-section-{{ section.id }} .rte .size-chart-card { border:1px solid #e0e0e0; border-radius:10px; background:#fff; overflow:hidden; width:100%; }
  #shopify-section-{{ section.id }} .rte .size-chart-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  #shopify-section-{{ section.id }} .rte .tableChart { width:100%; border-collapse:collapse; table-layout:auto; }
  #shopify-section-{{ section.id }} .rte .tableChart thead th { font-weight:600; text-align:left; padding:14px 16px; background:#f7f7f7; border-bottom:1px solid #e0e0e0; white-space:nowrap; }
  #shopify-section-{{ section.id }} .rte .tableChart td { padding:14px 16px; text-align:left; border-bottom:1px solid #e0e0e0; white-space:nowrap; }
  #shopify-section-{{ section.id }} .rte .tableChart tr:last-child td { border-bottom:0; }
{%- endstyle -%}

<div class="help-wrap color-{{ section.settings.color_scheme }} gradient">
  <div class="container {{ section.settings.section_width }}">
    {%- if settings.enable_breadcrumbs_on_other_pages and section.settings.enable_breadcrumbs -%}
      {%- render 'breadcrumbs' -%}
    {%- endif -%}

    {%- if section.settings.heading != blank -%}
      <{{ section.settings.heading_size }} class="section__heading">{{ section.settings.heading }}</{{ section.settings.heading_size }}>
    {%- endif -%}

    {%- if description != blank -%}
      <div class="rte help-intro">{{ description }}</div>
    {%- endif -%}

    <div class="help-grid">
      <!-- Left: menu -->
      <nav class="help-nav" aria-label="Help topics">
        {% if menu != blank and linklists[menu] %}
          <ul>
            {% for link in linklists[menu].links %}
              {% assign handle = link.object.handle | default: link.title | handle %}
              <li><a class="help-link" href="#{{ handle }}" data-handle="{{ handle }}">{{ link.title }}</a></li>
            {% endfor %}
          </ul>
        {% else %}
          <p>Add a menu with Page links in the section settings.</p>
        {% endif %}
      </nav>

      <!-- Right: panes -->
      <div class="help-content">
        {% if menu != blank and linklists[menu] %}
          {% for link in linklists[menu].links %}
            {% assign page_obj = link.object %}
            {% assign handle = page_obj.handle | default: link.title | handle %}
            <article class="help-pane" id="{{ handle }}" data-handle="{{ handle }}" hidden>
              <h1 class="help-title">{{ page_obj.title }}</h1>
              <div class="rte">
                {{ page_obj.content }}
              </div>
            </article>
          {% endfor %}
        {% endif %}
      </div>
    </div>
  </div>
</div>

<script>
  (function() {
    const root = document.getElementById('shopify-section-{{ section.id }}');
    if (!root) return;
    const links = root.querySelectorAll('.help-link');
    const panes = root.querySelectorAll('.help-pane');

    function show(handle) {
      let found = false;
      panes.forEach(p => {
        const match = p.dataset.handle === handle;
        p.hidden = !match;
        if (match) found = true;
      });
      links.forEach(a => a.classList.toggle('is-active', a.dataset.handle === handle));
      if (!found && panes[0]) {
        panes[0].hidden = false;
        links[0]?.classList.add('is-active');
      }
    }
    const current = (location.hash || '').replace('#','');
    show(current);
    window.addEventListener('hashchange', () => show((location.hash || '').replace('#','')));
    links.forEach(a => a.addEventListener('click', () => show(a.dataset.handle)));
  })();
</script>

{% schema %}
{
  "name": "Help center",
  "tag": "section",
  "settings": [
    { "type": "link_list", "id": "menu", "label": "Help menu (Pages)", "info": "Choose a menu whose items link to individual Pages." },

    { "type": "inline_richtext", "id": "heading", "label": "Heading" },
    {
      "type": "select",
      "id": "heading_size",
      "label": "Heading size",
      "options": [
        { "value": "h6", "label": "XS" },
        { "value": "h5", "label": "S" },
        { "value": "h4", "label": "M" },
        { "value": "h3", "label": "L" },
        { "value": "h2", "label": "XL" }
      ],
      "default": "h3"
    },
    { "type": "richtext", "id": "text", "label": "Intro text" },

    { "type": "checkbox", "id": "enable_breadcrumbs", "label": "Show breadcrumbs", "default": true },

    { "type": "select", "id": "section_width", "label": "Section width", "options": [
        { "value": "max-w-page", "label": "Page" },
        { "value": "max-w-narrow", "label": "Narrow" },
        { "value": "max-w-narrower", "label": "Narrower" },
        { "value": "max-w-fluid", "label": "Fluid" }
      ],
      "default": "max-w-narrow"
    },

    { "type": "color_scheme", "id": "color_scheme", "label": "Color scheme", "default": "scheme-3" },

    { "type": "select", "id": "spacing_top", "label": "Spacing top", "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": "Spacing bottom", "options": [
        { "value": "0", "label": "No" }, { "value": "1", "label": "S" }, { "value": "2", "label": "M" },
        { "value": "4", "label": "L" }, { "value": "6", "label": "XL" }
      ], "default": "6"
    }
  ],
  "presets": [{ "name": "Help center" }]
}
{% endschema %}