<section class="safety-badges" data-reveal>
  <div class="container">
    <div class="safety-badges__row">
      {%- for block in section.blocks -%}
        <div class="safety-badges__item" {{ block.shopify_attributes }} data-reveal style="--index: {{ forloop.index }}">
          <div class="safety-badges__icon-wrap">
            {%- case block.settings.icon -%}
              {%- when 'shield' -%}
                <svg class="safety-badges__icon" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><polyline points="9 12 11 14 15 10"/></svg>
              {%- when 'heart' -%}
                <svg class="safety-badges__icon" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
              {%- when 'star' -%}
                <svg class="safety-badges__icon" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
              {%- when 'leaf' -%}
                <svg class="safety-badges__icon" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.3c.48.17.98.3 1.34.3C19 20 22 3 22 3c-1 2-8 2.25-13 3.25S2 11.5 2 13.5s1.75 3.75 1.75 3.75"/></svg>
              {%- else -%}
                <svg class="safety-badges__icon" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>
            {%- endcase -%}
          </div>
          <div class="safety-badges__text">
            <h3 class="safety-badges__label">{{ block.settings.label }}</h3>
            {%- if block.settings.description != blank -%}
              <p class="safety-badges__desc">{{ block.settings.description }}</p>
            {%- endif -%}
          </div>
        </div>
      {%- endfor -%}
    </div>
  </div>
</section>

{% schema %}
{
  "name": "Safety Badges",
  "class": "section-safety-badges",
  "settings": [],
  "blocks": [
    {
      "type": "badge",
      "name": "Badge",
      "settings": [
        { "type": "text", "id": "icon", "label": "Icon name", "default": "shield" },
        { "type": "text", "id": "label", "label": "Label", "default": "Certified Safe" },
        { "type": "text", "id": "description", "label": "Description" }
      ]
    }
  ],
  "presets": [{ "name": "Safety Badges", "blocks": [{ "type": "badge" }, { "type": "badge" }, { "type": "badge" }, { "type": "badge" }] }]
}
{% endschema %}