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

    <div class="happy-tails__grid">
      {%- for block in section.blocks -%}
        <div class="happy-tails__card" {{ block.shopify_attributes }} data-reveal style="--index: {{ forloop.index }}">
          <div class="happy-tails__paw" aria-hidden="true">
            <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" width="28" height="28"><ellipse cx="20" cy="27" rx="8" ry="6.5" fill="currentColor" opacity="0.2"/><circle cx="12" cy="17" r="4" fill="currentColor" opacity="0.15"/><circle cx="18" cy="12" r="3.5" fill="currentColor" opacity="0.15"/><circle cx="24" cy="12" r="3.5" fill="currentColor" opacity="0.15"/><circle cx="29" cy="17" r="4" fill="currentColor" opacity="0.15"/></svg>
          </div>
          {%- if block.settings.quote != blank -%}
            <blockquote class="happy-tails__quote">{{ block.settings.quote }}</blockquote>
          {%- endif -%}
          <div class="happy-tails__attribution">
            {%- if block.settings.author != blank -%}
              <span class="happy-tails__author">{{ block.settings.author }}</span>
            {%- endif -%}
            {%- if block.settings.detail != blank -%}
              <span class="happy-tails__detail">{{ block.settings.detail }}</span>
            {%- endif -%}
          </div>
        </div>
      {%- endfor -%}
    </div>
  </div>
</section>

{% schema %}
{
  "name": "Happy Tails",
  "class": "section-happy-tails",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "HAPPY TAILS" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "What the Pack Says" }
  ],
  "blocks": [
    {
      "type": "testimonial",
      "name": "Testimonial",
      "settings": [
        { "type": "textarea", "id": "quote", "label": "Quote" },
        { "type": "text", "id": "author", "label": "Author" },
        { "type": "text", "id": "detail", "label": "Detail" }
      ]
    }
  ],
  "presets": [{ "name": "Happy Tails", "blocks": [{ "type": "testimonial" }, { "type": "testimonial" }, { "type": "testimonial" }] }]
}
{% endschema %}