<section class="wag-worthy" data-reveal>
  <div class="container">
    {%- if section.settings.heading != blank -%}
      <h2 class="section-heading section-heading--center">{{ section.settings.heading }}</h2>
    {%- endif -%}

    <div class="wag-worthy__grid">
      {%- for block in section.blocks -%}
        <div class="wag-worthy__badge" {{ block.shopify_attributes }} data-reveal style="--index: {{ forloop.index }}">
          <div class="wag-worthy__icon" aria-hidden="true">
            {%- case block.settings.icon -%}
              {%- when 'paw' -%}
                <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" width="36" height="36"><ellipse cx="24" cy="32" rx="10" ry="8" fill="currentColor" opacity="0.85"/><circle cx="14" cy="20" r="5" fill="currentColor" opacity="0.7"/><circle cx="22" cy="14" r="4.5" fill="currentColor" opacity="0.7"/><circle cx="30" cy="14" r="4.5" fill="currentColor" opacity="0.7"/><circle cx="36" cy="20" r="5" fill="currentColor" opacity="0.7"/></svg>
              {%- when 'heart' -%}
                <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" width="36" height="36"><path d="M24 42s-16-9.5-16-21C8 14.4 13.4 10 18 10c3 0 5.5 1.8 6 3 .5-1.2 3-3 6-3 4.6 0 10 4.4 10 11 0 11.5-16 21-16 21z" fill="currentColor" opacity="0.85"/></svg>
              {%- when 'leaf' -%}
                <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" width="36" height="36"><path d="M12 40C12 40 10 18 30 8c0 0 8 2 8 16s-14 20-14 20" stroke="currentColor" stroke-width="2.5" fill="none" opacity="0.85"/><path d="M18 34c4-6 10-12 18-16" stroke="currentColor" stroke-width="1.5" opacity="0.5"/></svg>
              {%- when 'shield' -%}
                <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" width="36" height="36"><path d="M24 4L8 12v12c0 10 8 16 16 20 8-4 16-10 16-20V12L24 4z" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="2"/><path d="M18 24l4 4 8-8" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
              {%- else -%}
                <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" width="36" height="36"><circle cx="24" cy="24" r="16" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="2"/></svg>
            {%- endcase -%}
          </div>
          {%- if block.settings.label != blank -%}
            <h3 class="wag-worthy__label">{{ block.settings.label }}</h3>
          {%- endif -%}
          {%- if block.settings.detail != blank -%}
            <p class="wag-worthy__detail">{{ block.settings.detail }}</p>
          {%- endif -%}
        </div>
      {%- endfor -%}
    </div>
  </div>
</section>

{% schema %}
{
  "name": "Wag Worthy",
  "class": "section-wag-worthy",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Why Dogs Love Us" }
  ],
  "blocks": [
    {
      "type": "badge",
      "name": "Trust Badge",
      "settings": [
        { "type": "select", "id": "icon", "label": "Icon", "options": [
          { "value": "paw", "label": "Paw" },
          { "value": "heart", "label": "Heart" },
          { "value": "leaf", "label": "Leaf" },
          { "value": "shield", "label": "Shield" }
        ], "default": "paw" },
        { "type": "text", "id": "label", "label": "Label", "default": "Trust Badge" },
        { "type": "textarea", "id": "detail", "label": "Detail" }
      ]
    }
  ],
  "presets": [{ "name": "Wag Worthy", "blocks": [{ "type": "badge" }, { "type": "badge" }, { "type": "badge" }, { "type": "badge" }] }]
}
{% endschema %}