<section class="gear-rack" data-reveal>
  <div class="container">
    {%- if section.settings.eyebrow != blank -%}
      <span class="section-eyebrow">{{ section.settings.eyebrow }}</span>
    {%- endif -%}
    {%- if section.settings.heading != blank -%}
      <h2 class="section-heading">{{ section.settings.heading }}</h2>
    {%- endif -%}

    <div class="gear-rack__stack">
      {%- if section.settings.collection != blank -%}
        {%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
          <div class="gear-rack__panel gear-rack__panel--{{ forloop.index }}{% if forloop.index == 2 or forloop.index == 4 %} gear-rack__panel--flip{% endif %}" data-reveal style="--index: {{ forloop.index }}">
            <div class="gear-rack__media">
              {%- if product.featured_image != blank -%}
                <img src="{{ product.featured_image | image_url: width: 800 }}" srcset="{{ product.featured_image | image_url: width: 400 }} 400w, {{ product.featured_image | image_url: width: 600 }} 600w, {{ product.featured_image | image_url: width: 800 }} 800w" sizes="(max-width: 768px) 100vw, 50vw" alt="{{ product.featured_image.alt | escape }}" loading="lazy" class="gear-rack__image">
              {%- else -%}
                <div class="gear-rack__placeholder">
                  <svg viewBox="0 0 600 400" fill="none" stroke="currentColor" stroke-width="1" opacity="0.12" aria-hidden="true"><rect x="40" y="30" width="520" height="340" rx="12"/><polygon points="300,80 420,280 180,280"/></svg>
                </div>
              {%- endif -%}
            </div>
            <div class="gear-rack__info">
              <h3 class="gear-rack__title">{{ product.title }}</h3>
              {%- if product.description != blank -%}
                <p class="gear-rack__desc">{{ product.description | strip_html | truncatewords: 30 }}</p>
              {%- endif -%}
              <div class="gear-rack__meta">
                <span class="gear-rack__price">{{ product.price | money }}</span>
                <a href="{{ product.url }}" class="btn btn--primary gear-rack__cta">View Gear</a>
              </div>
            </div>
          </div>
        {%- endfor -%}
      {%- else -%}
        {%- assign placeholder_names = 'Alpine Shell Jacket,Trail Running Pack 30L,Ridgeline Midlayer,Summit Approach Shoe' | split: ',' -%}
        {%- assign placeholder_prices = '$289,$195,$165,$220' | split: ',' -%}
        {%- assign placeholder_descs = 'Fully seam-sealed 3-layer shell with pit zips and helmet-compatible hood. Weighs 12 oz.,Lightweight fastpacking vest with 30L capacity and bounce-free suspension for technical terrain.,Breathable grid fleece midlayer that regulates heat on steep ascents without the bulk.,Sticky rubber approach shoe with stiff midsole for scrambles and talus fields.' | split: ',' -%}
        {%- for i in (1..4) -%}
          {%- assign idx = forloop.index0 -%}
          <div class="gear-rack__panel gear-rack__panel--{{ forloop.index }}{% if forloop.index == 2 or forloop.index == 4 %} gear-rack__panel--flip{% endif %}" data-reveal style="--index: {{ forloop.index }}">
            <div class="gear-rack__media">
              {%- assign product_img = 'product-' | append: forloop.index | append: '.png' -%}
              <img src="{{ product_img | asset_url }}" alt="{{ placeholder_names[idx] }}" loading="lazy" style="width:100%;height:100%;object-fit:cover;" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
              <div class="gear-rack__placeholder" style="display:none;">
                <svg viewBox="0 0 600 400" fill="none" stroke="currentColor" stroke-width="1" opacity="0.12" aria-hidden="true"><rect x="40" y="30" width="520" height="340" rx="12"/><polygon points="300,80 420,280 180,280"/></svg>
              </div>
            </div>
            <div class="gear-rack__info">
              <h3 class="gear-rack__title">{{ placeholder_names[idx] }}</h3>
              <p class="gear-rack__desc">{{ placeholder_descs[idx] }}</p>
              <div class="gear-rack__meta">
                <span class="gear-rack__price">{{ placeholder_prices[idx] }}</span>
                <span class="btn btn--primary gear-rack__cta">View Gear</span>
              </div>
            </div>
          </div>
        {%- endfor -%}
      {%- endif -%}
    </div>
  </div>
</section>

{% schema %}
{
  "name": "Gear Rack",
  "class": "section-gear-rack",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "THE GEAR" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Built for the Push" },
    { "type": "collection", "id": "collection", "label": "Collection" },
    { "type": "range", "id": "products_to_show", "label": "Products to show", "min": 2, "max": 8, "step": 1, "default": 4 }
  ],
  "presets": [{ "name": "Gear Rack" }]
}
{% endschema %}