Review Stars Summary

<section class="sl-reviews-summary" style="padding:clamp(32px,5vw,56px) 1rem;color:inherit;font-family:inherit;text-align:center;">
  {%- assign rating = section.settings.rating | default: 4.8 -%}
  {%- assign filled = rating | floor -%}
  <div style="max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:.5rem;align-items:center;">
    {%- if section.settings.eyebrow != blank -%}
      <span style="font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sl-accent,#0a5cff);font-weight:700;">{{ section.settings.eyebrow }}</span>
    {%- endif -%}
    <h2 style="margin:0;font-size:clamp(1.25rem,2.5vw,1.75rem);">{{ section.settings.heading }}</h2>
    <div role="img" aria-label="Rated {{ rating }} out of 5" style="display:inline-flex;gap:.15rem;font-size:clamp(1.5rem,3vw,2rem);color:var(--sl-accent,#0a5cff);line-height:1;">
      {%- for i in (1..5) -%}
        {%- if i <= filled -%}
          <span>&#9733;</span>
        {%- else -%}
          <span style="opacity:.25;">&#9733;</span>
        {%- endif -%}
      {%- endfor -%}
    </div>
    <p style="margin:0;font-size:clamp(1rem,1.75vw,1.15rem);"><strong>{{ rating }}</strong> / 5 &middot; {{ section.settings.count | default: 1284 }} {{ section.settings.count_label | default: 'verified reviews' }}</p>
    {%- if section.settings.cta_text != blank -%}
      <a href="{{ section.settings.cta_link | default: '#' }}" style="margin-top:.5rem;color:var(--sl-accent,#0a5cff);text-decoration:none;border-bottom:1px solid var(--sl-accent,#0a5cff);font-weight:600;">{{ section.settings.cta_text }}</a>
    {%- endif -%}
  </div>
  <script type="application/ld+json">{"@context":"https://schema.org","@type":"AggregateRating","ratingValue":"{{ rating }}","reviewCount":"{{ section.settings.count | default: 1284 }}","bestRating":"5","worstRating":"1"}</script>
</section>
{% schema %}
{
  "name": "Review Stars Summary",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Loved by customers" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Our customers rate us" },
    { "type": "number", "id": "rating", "label": "Rating (0-5)", "default": 4.8 },
    { "type": "number", "id": "count", "label": "Review count", "default": 1284 },
    { "type": "text", "id": "count_label", "label": "Count label", "default": "verified reviews" },
    { "type": "text", "id": "cta_text", "label": "Link text", "default": "Read reviews" },
    { "type": "url", "id": "cta_link", "label": "Link URL" }
  ],
  "presets": [{ "name": "Review Stars Summary" }]
}
{% endschema %}