Animated Testimonials

{%- comment -%} modblo. Animated Testimonials {%- endcomment -%}
<section class="modblo-testi" data-section-id="{{ section.id }}"
  style="--modblo-bg: {{ section.settings.bg }}; --modblo-fg: {{ section.settings.fg }}; --modblo-card: {{ section.settings.card_bg }};">
  <div class="modblo-testi__inner page-width">
    {%- if section.settings.eyebrow != blank -%}
      <p class="modblo-testi__eyebrow">{{ section.settings.eyebrow }}</p>
    {%- endif -%}
    {%- if section.settings.heading != blank -%}
      <h2 class="modblo-testi__heading">{{ section.settings.heading }}</h2>
    {%- endif -%}

    <div class="modblo-testi__track" data-track>
      {%- for block in section.blocks -%}
        <article class="modblo-testi__card" {{ block.shopify_attributes }}>
          <div class="modblo-testi__stars" aria-label="5 out of 5 stars">
            {%- for i in (1..5) -%}<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M8 1l2.2 4.5 5 .7-3.6 3.5.9 5L8 12.3 3.5 14.7l.9-5L.8 6.2l5-.7L8 1z" fill="currentColor"/></svg>{%- endfor -%}
          </div>
          <blockquote>{{ block.settings.quote }}</blockquote>
          <footer>
            {%- if block.settings.avatar != blank -%}
              {{ block.settings.avatar | image_url: width: 96 | image_tag: loading: 'lazy', widths: '48,96', sizes: '48px', class: 'modblo-testi__avatar' }}
            {%- endif -%}
            <div>
              <p class="modblo-testi__name">{{ block.settings.name }}</p>
              <p class="modblo-testi__role">{{ block.settings.role }}</p>
            </div>
          </footer>
        </article>
      {%- endfor -%}
    </div>

    <div class="modblo-testi__nav" aria-hidden="false">
      <button type="button" data-prev aria-label="Previous testimonial">&larr;</button>
      <button type="button" data-next aria-label="Next testimonial">&rarr;</button>
    </div>
  </div>
</section>

<style>
  .modblo-testi { background: var(--modblo-bg, #0b0b0c); color: var(--modblo-fg, #fafafa); padding: clamp(64px,10vw,128px) 0; }
  .modblo-testi__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
  .modblo-testi__eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: 12px; opacity: .65; margin: 0 0 12px; font-weight: 600; }
  .modblo-testi__heading { font-size: clamp(28px,4vw,48px); letter-spacing: -.025em; margin: 0 0 40px; max-width: 560px; }
  .modblo-testi__track {
    display: grid; grid-auto-flow: column; grid-auto-columns: min(420px, 80vw);
    gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 20px;
    scrollbar-width: none;
  }
  .modblo-testi__track::-webkit-scrollbar { display: none; }
  .modblo-testi__card {
    scroll-snap-align: start;
    background: var(--modblo-card, rgba(255,255,255,.04));
    border: 1px solid color-mix(in oklab, var(--modblo-fg) 12%, transparent);
    border-radius: 20px; padding: 28px;
    display: flex; flex-direction: column; gap: 18px;
    transition: transform .3s ease, border-color .3s ease;
  }
  .modblo-testi__card:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--modblo-fg) 24%, transparent); }
  .modblo-testi__stars { color: #fbbf24; display: flex; gap: 2px; }
  .modblo-testi__card blockquote { margin: 0; font-size: 18px; line-height: 1.5; letter-spacing: -.01em; }
  .modblo-testi__card footer { display: flex; align-items: center; gap: 12px; margin-top: auto; }
  .modblo-testi__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
  .modblo-testi__name { margin: 0; font-weight: 600; font-size: 14px; }
  .modblo-testi__role { margin: 2px 0 0; font-size: 12px; opacity: .65; }
  .modblo-testi__nav { display: flex; gap: 8px; margin-top: 24px; }
  .modblo-testi__nav button {
    width: 40px; height: 40px; border-radius: 999px;
    background: transparent; color: var(--modblo-fg);
    border: 1px solid color-mix(in oklab, var(--modblo-fg) 22%, transparent);
    cursor: pointer; transition: background .2s, border-color .2s;
  }
  .modblo-testi__nav button:hover { background: color-mix(in oklab, var(--modblo-fg) 6%, transparent); }
</style>

<script>
  (function () {
    var roots = document.querySelectorAll('[data-section-id="{{ section.id }}"]');
    roots.forEach(function (root) {
      var track = root.querySelector('[data-track]');
      var prev = root.querySelector('[data-prev]');
      var next = root.querySelector('[data-next]');
      if (!track) return;
      function scrollByCard(dir) {
        var card = track.querySelector('.modblo-testi__card');
        if (!card) return;
        var step = card.getBoundingClientRect().width + 18;
        track.scrollBy({ left: dir * step, behavior: 'smooth' });
      }
      prev && prev.addEventListener('click', function () { scrollByCard(-1); });
      next && next.addEventListener('click', function () { scrollByCard(1); });
    });
  })();
</script>

{% schema %}
{
  "name": "Animated Testimonials",
  "tag": "section",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Loved by operators" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "From the brands shipping faster." },
    { "type": "color", "id": "bg", "label": "Background", "default": "#0b0b0c" },
    { "type": "color", "id": "fg", "label": "Foreground", "default": "#fafafa" },
    { "type": "color", "id": "card_bg", "label": "Card background", "default": "rgba(255,255,255,0.04)" }
  ],
  "blocks": [{
    "type": "testimonial",
    "name": "Testimonial",
    "settings": [
      { "type": "textarea", "id": "quote", "label": "Quote",
        "default": "We replaced four conversion apps with modblo sections in a weekend. AOV is up 14%." },
      { "type": "text", "id": "name", "label": "Name", "default": "Maya Lin" },
      { "type": "text", "id": "role", "label": "Role", "default": "Founder, North Coast Apparel" },
      { "type": "image_picker", "id": "avatar", "label": "Avatar" }
    ]
  }],
  "max_blocks": 12,
  "presets": [{
    "name": "Animated Testimonials",
    "blocks": [
      { "type": "testimonial" },
      { "type": "testimonial" },
      { "type": "testimonial" }
    ]
  }]
}
{% endschema %}