Product Feature Tabs

{%- comment -%} modblo. Product Feature Tabs {%- endcomment -%}
<section class="modblo-tabs" data-section-id="{{ section.id }}"
  style="--modblo-bg: {{ section.settings.bg }}; --modblo-fg: {{ section.settings.fg }}; --modblo-accent: {{ section.settings.accent }};">
  <div class="modblo-tabs__inner page-width">
    {%- if section.settings.heading != blank -%}
      <h2 class="modblo-tabs__heading">{{ section.settings.heading }}</h2>
    {%- endif -%}

    <div class="modblo-tabs__shell" data-modblo-tabs>
      <div class="modblo-tabs__nav" role="tablist" aria-label="Features">
        {%- for block in section.blocks -%}
          <button type="button"
                  role="tab"
                  id="modblo-tab-{{ block.id }}"
                  aria-selected="{% if forloop.first %}true{% else %}false{% endif %}"
                  aria-controls="modblo-panel-{{ block.id }}"
                  tabindex="{% if forloop.first %}0{% else %}-1{% endif %}"
                  class="modblo-tabs__tab"
                  data-tab="{{ block.id }}"
                  {{ block.shopify_attributes }}>
            <span class="modblo-tabs__tab-num">{{ forloop.index | prepend: '0' | slice: -2, 2 }}</span>
            <span class="modblo-tabs__tab-label">{{ block.settings.label }}</span>
          </button>
        {%- endfor -%}
      </div>

      <div class="modblo-tabs__panels">
        {%- for block in section.blocks -%}
          <div id="modblo-panel-{{ block.id }}"
               role="tabpanel"
               aria-labelledby="modblo-tab-{{ block.id }}"
               class="modblo-tabs__panel{% if forloop.first %} is-active{% endif %}"
               data-panel="{{ block.id }}">
            <div class="modblo-tabs__panel-media">
              {%- if block.settings.image != blank -%}
                {{ block.settings.image | image_url: width: 1200 | image_tag:
                  loading: 'lazy', widths: '600,900,1200', sizes: '(min-width: 768px) 50vw, 100vw',
                  alt: block.settings.label, class: 'modblo-tabs__img' }}
              {%- endif -%}
            </div>
            <div class="modblo-tabs__panel-body">
              <h3>{{ block.settings.title }}</h3>
              <p>{{ block.settings.description }}</p>
              {%- if block.settings.cta_label != blank -%}
                <a class="modblo-tabs__cta" href="{{ block.settings.cta_link }}">
                  {{ block.settings.cta_label }} →
                </a>
              {%- endif -%}
            </div>
          </div>
        {%- endfor -%}
      </div>
    </div>
  </div>
</section>

<style>
  .modblo-tabs { background: var(--modblo-bg, #fff); color: var(--modblo-fg, #0b0b0c); padding: clamp(64px,10vw,128px) 0; }
  .modblo-tabs__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
  .modblo-tabs__heading { font-size: clamp(28px,4vw,44px); letter-spacing: -.025em; margin: 0 0 36px; max-width: 640px; }
  .modblo-tabs__shell { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: flex-start; }
  .modblo-tabs__nav {
    display: flex; flex-direction: column; gap: 4px;
    border-left: 1px solid color-mix(in oklab, var(--modblo-fg) 12%, transparent);
    padding-left: 12px;
  }
  .modblo-tabs__tab {
    background: transparent; border: 0; cursor: pointer;
    padding: 12px 16px; text-align: left; border-radius: 12px;
    color: inherit; opacity: .55;
    display: flex; align-items: center; gap: 14px;
    transition: opacity .2s, background .2s;
    font-size: 15px; font-weight: 500;
  }
  .modblo-tabs__tab:hover { opacity: .85; }
  .modblo-tabs__tab[aria-selected="true"] {
    opacity: 1; background: color-mix(in oklab, var(--modblo-fg) 5%, transparent);
  }
  .modblo-tabs__tab-num { font-variant-numeric: tabular-nums; font-size: 11px; opacity: .55; font-weight: 700; }
  .modblo-tabs__panels { position: relative; min-height: 360px; }
  .modblo-tabs__panel {
    display: none;
    grid-template-columns: 1fr 1fr; gap: 32px;
    align-items: center;
  }
  .modblo-tabs__panel.is-active { display: grid; animation: modblo-tabs-fade .35s ease both; }
  .modblo-tabs__panel-media { aspect-ratio: 4/3; overflow: hidden; border-radius: 16px; background: color-mix(in oklab, var(--modblo-fg) 4%, transparent); }
  .modblo-tabs__img { width: 100%; height: 100%; object-fit: cover; }
  .modblo-tabs__panel-body h3 { font-size: 28px; letter-spacing: -.02em; margin: 0 0 12px; }
  .modblo-tabs__panel-body p { font-size: 16px; line-height: 1.6; opacity: .78; margin: 0; }
  .modblo-tabs__cta { display: inline-block; margin-top: 16px; color: var(--modblo-accent, #6366f1); font-weight: 600; text-decoration: none; }
  @keyframes modblo-tabs-fade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
  @media (max-width: 768px) {
    .modblo-tabs__shell { grid-template-columns: 1fr; }
    .modblo-tabs__nav { flex-direction: row; overflow-x: auto; border-left: 0; border-bottom: 1px solid color-mix(in oklab, var(--modblo-fg) 12%, transparent); padding: 0 0 12px; }
    .modblo-tabs__panel.is-active { grid-template-columns: 1fr; }
  }
</style>

<script>
  (function () {
    var roots = document.querySelectorAll('[data-section-id="{{ section.id }}"]');
    roots.forEach(function (root) {
      var shell = root.querySelector('[data-modblo-tabs]');
      if (!shell) return;
      var tabs = shell.querySelectorAll('[role="tab"]');
      var panels = shell.querySelectorAll('[role="tabpanel"]');
      function activate(id) {
        tabs.forEach(function (t) {
          var sel = t.dataset.tab === id;
          t.setAttribute('aria-selected', sel ? 'true' : 'false');
          t.tabIndex = sel ? 0 : -1;
        });
        panels.forEach(function (p) {
          p.classList.toggle('is-active', p.dataset.panel === id);
        });
      }
      tabs.forEach(function (t) {
        t.addEventListener('click', function () { activate(t.dataset.tab); });
        t.addEventListener('keydown', function (e) {
          var arr = Array.from(tabs);
          var i = arr.indexOf(t);
          if (e.key === 'ArrowDown' || e.key === 'ArrowRight') { e.preventDefault(); arr[(i + 1) % arr.length].focus(); }
          if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') { e.preventDefault(); arr[(i - 1 + arr.length) % arr.length].focus(); }
          if (e.key === 'Home') { e.preventDefault(); arr[0].focus(); }
          if (e.key === 'End') { e.preventDefault(); arr[arr.length - 1].focus(); }
        });
      });
    });
  })();
</script>

{% schema %}
{
  "name": "Product Feature Tabs",
  "tag": "section",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "What makes it different." },
    { "type": "color", "id": "bg", "label": "Background", "default": "#ffffff" },
    { "type": "color", "id": "fg", "label": "Foreground", "default": "#0b0b0c" },
    { "type": "color", "id": "accent", "label": "Accent", "default": "#6366f1" }
  ],
  "blocks": [{
    "type": "feature",
    "name": "Feature",
    "settings": [
      { "type": "text", "id": "label", "label": "Tab label", "default": "Engineered fabric" },
      { "type": "text", "id": "title", "label": "Panel title", "default": "Built from cloud-soft 60% merino." },
      { "type": "textarea", "id": "description", "label": "Description",
        "default": "A blend that breathes in summer and warms in winter, without the itch." },
      { "type": "image_picker", "id": "image", "label": "Image" },
      { "type": "text", "id": "cta_label", "label": "CTA label" },
      { "type": "url", "id": "cta_link", "label": "CTA link" }
    ]
  }],
  "max_blocks": 8,
  "presets": [{
    "name": "Product Feature Tabs",
    "blocks": [{ "type": "feature" }, { "type": "feature" }, { "type": "feature" }]
  }]
}
{% endschema %}