/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 17:77 Expected identifier but found whitespace
Line 20:1 Expected identifier but found "%"
Line 22:0 Unexpected "{"
Line 22:1 Expected identifier but found "%"
Line 24:0 Unexpected "{"
Line 24:1 Expected identifier but found "%"
Line 25:27 Unexpected "{"
Line 25:38 Expected ":"
... and 148 more hidden warnings

**/
{% doc %}
  UGC video testimonials block for the CycleGrow™ product information area.
  Shows up to three vertical Shopify-hosted videos in a compact row.
  One muted video starts automatically; when it ends, another video is selected at random.
{% enddoc %}

{% assign ai_gen_id = block.id | replace: '_', '' | downcase %}

{% style %}
  .ugc-video-testimonials-{{ ai_gen_id }} {
    width: 100%;
    background: {{ block.settings.background_color }};
    padding: {{ block.settings.padding_top }}px {{ block.settings.padding_horizontal }}px {{ block.settings.padding_bottom }}px;
  }

  .ugc-video-testimonials__container-{{ ai_gen_id }} {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
  }

  .ugc-video-testimonials__heading-{{ ai_gen_id }} {
    margin: 0 0 18px;
    text-align: {{ block.settings.heading_alignment }};
    color: {{ block.settings.heading_color }};
  }

  .ugc-video-testimonials__eyebrow-{{ ai_gen_id }} {
    margin: 0 0 7px;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .ugc-video-testimonials__title-{{ ai_gen_id }} {
    margin: 0;
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
  }

  .ugc-video-testimonials__grid-{{ ai_gen_id }} {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: {{ block.settings.gap }}px;
  }

  .ugc-video-testimonials__card-{{ ai_gen_id }} {
    position: relative;
    min-width: 0;
    overflow: hidden;
    aspect-ratio: 9 / 16;
    border-radius: {{ block.settings.video_border_radius }}px;
    background: #efe7e9;
    box-shadow: 0 8px 22px rgba(53, 21, 34, 0.10);
  }

  .ugc-video-testimonials__video-{{ ai_gen_id }} {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #efe7e9;
    cursor: pointer;
  }

  .ugc-video-testimonials__empty-{{ ai_gen_id }} {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 12px;
    color: #6e1738;
    text-align: center;
    font-size: 1.2rem;
    background: #fff;
    border: 1px dashed rgba(110, 23, 56, 0.25);
  }

  @media screen and (max-width: 749px) {
    .ugc-video-testimonials-{{ ai_gen_id }} {
      padding:
        {{ block.settings.padding_top | times: 0.7 }}px
        {{ block.settings.padding_horizontal | times: 0.7 }}px
        {{ block.settings.padding_bottom | times: 0.7 }}px;
    }

    .ugc-video-testimonials__heading-{{ ai_gen_id }} {
      margin-bottom: 14px;
    }

    .ugc-video-testimonials__eyebrow-{{ ai_gen_id }} {
      font-size: 0.95rem;
    }

    .ugc-video-testimonials__title-{{ ai_gen_id }} {
      font-size: 2.25rem;
    }

    .ugc-video-testimonials__grid-{{ ai_gen_id }} {
      gap: {{ block.settings.gap | times: 0.7 }}px;
    }

    .ugc-video-testimonials__card-{{ ai_gen_id }} {
      border-radius: {{ block.settings.video_border_radius | times: 0.8 }}px;
    }
  }
{% endstyle %}

<ugc-video-testimonials-{{ ai_gen_id }}
  class="ugc-video-testimonials-{{ ai_gen_id }}"
  {{ block.shopify_attributes }}
>
  <div class="ugc-video-testimonials__container-{{ ai_gen_id }}">
    {% if block.settings.show_heading %}
      <div class="ugc-video-testimonials__heading-{{ ai_gen_id }}">
        {% if block.settings.eyebrow != blank %}
          <p class="ugc-video-testimonials__eyebrow-{{ ai_gen_id }}">
            {{ block.settings.eyebrow }}
          </p>
        {% endif %}

        {% if block.settings.heading != blank %}
          <h2 class="ugc-video-testimonials__title-{{ ai_gen_id }}">
            {{ block.settings.heading }}
          </h2>
        {% endif %}
      </div>
    {% endif %}

    <div class="ugc-video-testimonials__grid-{{ ai_gen_id }}">
      {% for index in (1..3) %}
        {% assign video_key = 'video_' | append: index %}
        {% assign poster_key = 'poster_image_' | append: index %}
        {% assign video_item = block.settings[video_key] %}
        {% assign poster_item = block.settings[poster_key] %}

        {% if video_item != blank %}
          <div class="ugc-video-testimonials__card-{{ ai_gen_id }}">
            <video
              class="ugc-video-testimonials__video-{{ ai_gen_id }}"
              muted
              playsinline
              preload="metadata"
              aria-label="Customer video testimonial {{ index }}"
              {% if poster_item != blank %}
                poster="{{ poster_item | image_url: width: 600 }}"
              {% endif %}
            >
              {% for source in video_item.sources %}
                <source src="{{ source.url }}" type="{{ source.mime_type }}">
              {% endfor %}
            </video>
          </div>
        {% elsif request.design_mode %}
          <div class="ugc-video-testimonials__card-{{ ai_gen_id }}">
            <div class="ugc-video-testimonials__empty-{{ ai_gen_id }}">
              Add video {{ index }}
            </div>
          </div>
        {% endif %}
      {% endfor %}
    </div>
  </div>
</ugc-video-testimonials-{{ ai_gen_id }}>

<script>
  (() => {
    const tagName = 'ugc-video-testimonials-{{ ai_gen_id }}';

    if (customElements.get(tagName)) return;

    class UGCVideoTestimonials extends HTMLElement {
      connectedCallback() {
        this.videos = Array.from(
          this.querySelectorAll('.ugc-video-testimonials__video-{{ ai_gen_id }}')
        );

        if (!this.videos.length) return;

        this.currentIndex = -1;

        this.videos.forEach((video, index) => {
          video.muted = true;
          video.playsInline = true;
          video.addEventListener('ended', () => this.playRandomVideo(index));

          video.addEventListener('click', () => {
            this.playVideo(index);
          });
        });

        this.playRandomVideo();
      }

      getRandomIndex(excludedIndex = -1) {
        if (this.videos.length === 1) return 0;

        const availableIndexes = this.videos
          .map((_, index) => index)
          .filter((index) => index !== excludedIndex);

        return availableIndexes[Math.floor(Math.random() * availableIndexes.length)];
      }

      playRandomVideo(excludedIndex = this.currentIndex) {
        this.playVideo(this.getRandomIndex(excludedIndex));
      }

      playVideo(index) {
        if (!this.videos[index]) return;

        this.videos.forEach((video, videoIndex) => {
          if (videoIndex !== index) {
            video.pause();
            video.currentTime = 0;
          }
        });

        const activeVideo = this.videos[index];
        activeVideo.muted = true;
        activeVideo.currentTime = 0;
        this.currentIndex = index;

        const playPromise = activeVideo.play();

        if (playPromise !== undefined) {
          playPromise.catch(() => {
            /* Mobile browsers may wait until the visitor interacts with the page. */
          });
        }
      }
    }

    customElements.define(tagName, UGCVideoTestimonials);
  })();
</script>

{% schema %}
{
  "name": "UGC video testimonials",
  "settings": [
    {
      "type": "header",
      "content": "Heading"
    },
    {
      "type": "checkbox",
      "id": "show_heading",
      "label": "Show heading",
      "default": true
    },
    {
      "type": "text",
      "id": "eyebrow",
      "label": "Eyebrow",
      "default": "REAL CUSTOMER STORIES"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "What customers are saying"
    },
    {
      "type": "select",
      "id": "heading_alignment",
      "label": "Heading alignment",
      "default": "center",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ]
    },
    {
      "type": "header",
      "content": "Videos"
    },
    {
      "type": "video",
      "id": "video_1",
      "label": "Video 1"
    },
    {
      "type": "image_picker",
      "id": "poster_image_1",
      "label": "Poster image 1 (optional)"
    },
    {
      "type": "video",
      "id": "video_2",
      "label": "Video 2"
    },
    {
      "type": "image_picker",
      "id": "poster_image_2",
      "label": "Poster image 2 (optional)"
    },
    {
      "type": "video",
      "id": "video_3",
      "label": "Video 3"
    },
    {
      "type": "image_picker",
      "id": "poster_image_3",
      "label": "Poster image 3 (optional)"
    },
    {
      "type": "header",
      "content": "Style"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background",
      "default": "#F8E8ED"
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Heading color",
      "default": "#351522"
    },
    {
      "type": "range",
      "id": "video_border_radius",
      "min": 0,
      "max": 32,
      "step": 2,
      "unit": "px",
      "label": "Video border radius",
      "default": 16
    },
    {
      "type": "range",
      "id": "gap",
      "min": 4,
      "max": 24,
      "step": 2,
      "unit": "px",
      "label": "Space between videos",
      "default": 10
    },
    {
      "type": "header",
      "content": "Spacing"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 80,
      "step": 4,
      "unit": "px",
      "label": "Top padding",
      "default": 24
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 80,
      "step": 4,
      "unit": "px",
      "label": "Bottom padding",
      "default": 28
    },
    {
      "type": "range",
      "id": "padding_horizontal",
      "min": 0,
      "max": 40,
      "step": 4,
      "unit": "px",
      "label": "Horizontal padding",
      "default": 12
    }
  ],
  "presets": [
    {
      "name": "UGC video testimonials"
    }
  ]
}
{% endschema %}