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

    <div class="listener-reviews__grid">
      {%- for block in section.blocks -%}
        <div class="listener-reviews__card" {{ block.shopify_attributes }} data-reveal style="--index: {{ forloop.index }}">
          {%- if block.settings.rating != blank -%}
            <div class="listener-reviews__stars" aria-label="{{ block.settings.rating }} out of 5 stars">
              {%- assign rating_int = block.settings.rating | plus: 0 -%}
              {%- for i in (1..5) -%}
                <svg class="listener-reviews__star{% if i <= rating_int %} listener-reviews__star--filled{% endif %}" width="16" height="16" viewBox="0 0 24 24" fill="{% if i <= rating_int %}currentColor{% else %}none{% endif %}" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><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>
              {%- endfor -%}
            <span class="visually-hidden">5/5</span>
          </div>
          {%- endif -%}
          <blockquote class="listener-reviews__quote">{{ block.settings.quote }}</blockquote>
          <div class="listener-reviews__footer">
            <span class="listener-reviews__author">{{ block.settings.author }}</span>
            {%- if block.settings.detail != blank -%}
              <span class="listener-reviews__detail">{{ block.settings.detail }}</span>
            {%- endif -%}
          </div>
        </div>
      {%- endfor -%}
    </div>
  </div>
</section>

{% schema %}
{
  "name": "Listener Reviews",
  "class": "section-listener-reviews",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Reviews" }
  ],
  "blocks": [
    {
      "type": "review",
      "name": "Review",
      "settings": [
        { "type": "textarea", "id": "quote", "label": "Quote" },
        { "type": "text", "id": "author", "label": "Author" },
        { "type": "text", "id": "detail", "label": "Detail" },
        { "type": "text", "id": "rating", "label": "Rating (1-5)", "default": "5" }
      ]
    }
  ],
  "presets": [{ "name": "Listener Reviews", "blocks": [{ "type": "review" }, { "type": "review" }, { "type": "review" }] }]
}
{% endschema %}