Testimonial Slider

<section class="sl-testimonials" style="padding:clamp(32px,6vw,64px) 0;color:inherit;font-family:inherit;">
  <header style="max-width:720px;margin:0 auto 1.75rem;padding:0 1rem;text-align:center;">
    {%- if section.settings.eyebrow != blank -%}
      <span style="font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--sl-accent,#0a5cff);font-weight:700;">{{ section.settings.eyebrow }}</span>
    {%- endif -%}
    <h2 style="text-align:center;font-size:clamp(1.5rem,3vw,2rem);margin:.25rem 0 0;line-height:1.2;">{{ section.settings.heading }}</h2>
  </header>
  <div style="display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.5rem clamp(1rem,4vw,2rem) 1rem;scroll-padding:1rem;">
    {%- for block in section.blocks -%}
      <figure style="flex:0 0 clamp(260px,80vw,420px);scroll-snap-align:center;margin:0;padding:clamp(1.25rem,2.5vw,1.75rem);border:1px solid currentColor;border-radius:.6rem;display:flex;flex-direction:column;gap:.75rem;" {{ block.shopify_attributes }}>
        {%- assign rating = block.settings.rating | default: 5 -%}
        <div role="img" aria-label="Rated {{ rating }} out of 5" style="display:inline-flex;gap:.12rem;color:var(--sl-accent,#0a5cff);font-size:1rem;line-height:1;">
          {%- for i in (1..5) -%}{%- if i <= rating -%}<span>&#9733;</span>{%- else -%}<span style="opacity:.25;">&#9733;</span>{%- endif -%}{%- endfor -%}
        </div>
        <blockquote style="margin:0;font-size:clamp(1rem,1.5vw,1.1rem);line-height:1.55;flex:1;">&ldquo;{{ block.settings.quote }}&rdquo;</blockquote>
        <figcaption style="display:flex;align-items:center;gap:.65rem;opacity:.9;font-size:.875rem;border-top:1px solid currentColor;padding-top:.85rem;">
          {%- capture avatar_fallback -%}https://picsum.photos/seed/{{ block.settings.author | handle | default: block.id }}/80/80{%- endcapture -%}
          <img src="{{ block.settings.avatar | image_url: width: 80 | default: avatar_fallback }}" alt="{{ block.settings.author | default: 'Customer' }}" loading="lazy" style="width:2.25rem;height:2.25rem;border-radius:50%;object-fit:cover;flex:0 0 auto;" />
          <div style="display:flex;flex-direction:column;gap:.1rem;min-width:0;">
            <strong style="font-weight:700;line-height:1.2;">{{ block.settings.author }}</strong>
            {%- if block.settings.role != blank -%}<span style="opacity:.7;line-height:1.2;">{{ block.settings.role }}</span>{%- endif -%}
          </div>
          {%- if block.settings.verified -%}
            <span style="margin-left:auto;padding:.15rem .5rem;background:var(--sl-accent,#0a5cff);color:#fff;font-size:.65rem;border-radius:999px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;flex:0 0 auto;">Verified</span>
          {%- endif -%}
        </figcaption>
      </figure>
    {%- endfor -%}
  </div>
</section>
{% schema %}
{
  "name": "Testimonial Slider",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Loved by thousands" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "What customers say" }
  ],
  "blocks": [
    {
      "type": "testimonial",
      "name": "Testimonial",
      "settings": [
        { "type": "textarea", "id": "quote", "label": "Quote", "default": "Absolutely love this product." },
        { "type": "text", "id": "author", "label": "Author", "default": "Jane Doe" },
        { "type": "text", "id": "role", "label": "Role / location", "default": "Verified buyer" },
        { "type": "image_picker", "id": "avatar", "label": "Avatar" },
        { "type": "range", "id": "rating", "label": "Rating (1-5)", "min": 1, "max": 5, "step": 1, "default": 5 },
        { "type": "checkbox", "id": "verified", "label": "Verified badge", "default": true }
      ]
    }
  ],
  "presets": [
    {
      "name": "Testimonial Slider",
      "blocks": [
        { "type": "testimonial", "settings": { "quote": "Softer than anything I own and the fit is perfect. I reach for it every week.", "author": "Maya R.", "role": "Brooklyn, NY", "rating": 5, "verified": true } },
        { "type": "testimonial", "settings": { "quote": "Arrived in two days, packaged beautifully, and the quality is obvious the moment you touch it.", "author": "Jordan K.", "role": "Verified buyer", "rating": 5, "verified": true } },
        { "type": "testimonial", "settings": { "quote": "I've washed mine a dozen times and it still looks brand new. Money well spent.", "author": "Priya S.", "role": "Austin, TX", "rating": 5, "verified": true } },
        { "type": "testimonial", "settings": { "quote": "Customer service was incredible when I needed a different size — a new one was on the way the same day.", "author": "Liam O.", "role": "Verified buyer", "rating": 5, "verified": true } }
      ]
    }
  ]
}
{% endschema %}