<section class="garden-promise" data-reveal>
  <div class="container">
    <div class="garden-promise__grid">
      {%- for block in section.blocks -%}
        <div class="garden-promise__item" {{ block.shopify_attributes }} data-reveal style="--index: {{ forloop.index }}">
          <div class="garden-promise__icon" aria-hidden="true">
            {%- case block.settings.icon -%}
              {%- when 'leaf' -%}
                <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M16 4C10 4 5 10 5 18c0 4 2 7 4 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M16 4c6 0 11 6 11 14 0 4-2 7-4 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M16 4v22" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M10 14c2 1 4 2 6 2s4-1 6-2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
              {%- when 'anvil' -%}
                <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M6 22h20M8 22v-4c0-2 2-4 4-4h8c2 0 4 2 4 4v4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 14V8h8v6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><rect x="4" y="22" width="24" height="4" rx="1" stroke="currentColor" stroke-width="1.5"/></svg>
              {%- when 'lifetime' -%}
                <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" width="32" height="32"><circle cx="16" cy="16" r="11" stroke="currentColor" stroke-width="1.5"/><path d="M11 16l3 3 7-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
              {%- when 'ship' -%}
                <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" width="32" height="32"><rect x="6" y="10" width="14" height="12" rx="1" stroke="currentColor" stroke-width="1.5"/><path d="M20 14h4l4 4v4h-8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><circle cx="11" cy="24" r="2" stroke="currentColor" stroke-width="1.5"/><circle cx="23" cy="24" r="2" stroke="currentColor" stroke-width="1.5"/></svg>
              {%- else -%}
                <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" width="32" height="32"><circle cx="16" cy="16" r="11" stroke="currentColor" stroke-width="1.5"/></svg>
            {%- endcase -%}
          </div>
          {%- if block.settings.heading != blank -%}
            <h3 class="garden-promise__heading">{{ block.settings.heading }}</h3>
          {%- endif -%}
          {%- if block.settings.text != blank -%}
            <p class="garden-promise__text">{{ block.settings.text }}</p>
          {%- endif -%}
        </div>
      {%- endfor -%}
    </div>
  </div>
</section>

{% schema %}
{
  "name": "Garden Promise",
  "class": "section-garden-promise",
  "settings": [],
  "blocks": [
    {
      "type": "promise",
      "name": "Promise",
      "settings": [
        { "type": "select", "id": "icon", "label": "Icon", "options": [
          { "value": "leaf", "label": "Leaf" },
          { "value": "anvil", "label": "Anvil" },
          { "value": "lifetime", "label": "Lifetime" },
          { "value": "ship", "label": "Shipping" }
        ], "default": "leaf" },
        { "type": "text", "id": "heading", "label": "Heading", "default": "Promise" },
        { "type": "textarea", "id": "text", "label": "Description" }
      ]
    }
  ],
  "presets": [{ "name": "Garden Promise", "blocks": [{ "type": "promise" }, { "type": "promise" }, { "type": "promise" }, { "type": "promise" }] }]
}
{% endschema %}