<section class="workshop-collection" data-reveal>
  <div class="container">
    {%- if section.settings.eyebrow != blank -%}
      <span class="section-eyebrow">{{ section.settings.eyebrow }}</span>
    {%- endif -%}
    <div class="workshop-collection__header">
      {%- if section.settings.heading != blank -%}
        <h2 class="section-heading">{{ section.settings.heading }}</h2>
      {%- endif -%}
      {%- if section.settings.collection != blank -%}
        <a href="{{ section.settings.collection.url }}" class="section-link">View All Tools &rarr;</a>
      {%- endif -%}
    </div>

    <div class="workshop-collection__grid">
      {%- if section.settings.collection != blank -%}
        {%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
          <div class="workshop-collection__item" data-reveal style="--index: {{ forloop.index }}">
            <a href="{{ product.url }}" class="workshop-collection__link" aria-label="{{ product.title }}">
              <div class="workshop-collection__media">
                {%- if product.featured_image != blank -%}
                  <img src="{{ product.featured_image | image_url: width: 600 }}" srcset="{{ product.featured_image | image_url: width: 300 }} 300w, {{ product.featured_image | image_url: width: 450 }} 450w, {{ product.featured_image | image_url: width: 600 }} 600w" sizes="(max-width: 768px) 50vw, 25vw" alt="{{ product.featured_image.alt | escape }}" loading="lazy" class="workshop-collection__image">
                {%- else -%}
                  <div class="workshop-collection__placeholder">
                    <svg viewBox="0 0 400 500" fill="none" stroke="currentColor" stroke-width="1" opacity="0.12" aria-hidden="true"><rect x="40" y="40" width="320" height="420" rx="16"/><circle cx="200" cy="200" r="60"/></svg>
                  </div>
                {%- endif -%}
              </div>
              <div class="workshop-collection__info">
                <h3 class="workshop-collection__title">{{ product.title }}</h3>
                <span class="workshop-collection__price">{{ product.price | money }}</span>
              </div>
            </a>
          </div>
        {%- endfor -%}
      {%- else -%}
        {%- for block in section.blocks -%}
          <div class="workshop-collection__item" {{ block.shopify_attributes }} data-reveal style="--index: {{ forloop.index }}">
            <div class="workshop-collection__link">
              <div class="workshop-collection__media">
                {%- assign product_img = 'product-' | append: forloop.index | append: '.png' -%}
                <img src="{{ product_img | asset_url }}" alt="{{ block.settings.title }}" loading="lazy" class="workshop-collection__image" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
                <div class="workshop-collection__placeholder" style="display:none;">
                  <svg viewBox="0 0 400 500" fill="none" stroke="currentColor" stroke-width="1" opacity="0.12" aria-hidden="true"><rect x="40" y="40" width="320" height="420" rx="16"/><circle cx="200" cy="200" r="60"/></svg>
                </div>
              </div>
              <div class="workshop-collection__info">
                {%- if block.settings.title != blank -%}
                  <h3 class="workshop-collection__title">{{ block.settings.title }}</h3>
                {%- endif -%}
                {%- if block.settings.price != blank -%}
                  <span class="workshop-collection__price">{{ block.settings.price }}</span>
                {%- endif -%}
                {%- if block.settings.detail != blank -%}
                  <span class="workshop-collection__detail">{{ block.settings.detail }}</span>
                {%- endif -%}
              </div>
            </div>
          </div>
        {%- endfor -%}
      {%- endif -%}
    </div>
  </div>
</section>

{% schema %}
{
  "name": "Workshop Collection",
  "class": "section-workshop-collection",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "THE WORKSHOP" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Tools Worth Keeping" },
    { "type": "collection", "id": "collection", "label": "Collection" },
    { "type": "range", "id": "products_to_show", "label": "Products to show", "min": 2, "max": 8, "step": 1, "default": 4 }
  ],
  "blocks": [
    {
      "type": "product_card",
      "name": "Product Card",
      "settings": [
        { "type": "text", "id": "title", "label": "Title", "default": "Product" },
        { "type": "text", "id": "price", "label": "Price", "default": "$0" },
        { "type": "text", "id": "detail", "label": "Detail" }
      ]
    }
  ],
  "presets": [{ "name": "Workshop Collection", "blocks": [{ "type": "product_card" }, { "type": "product_card" }, { "type": "product_card" }, { "type": "product_card" }] }]
}
{% endschema %}