{%- comment -%}
  UGC Video Spotlight — one customer video beside a verified quote.
  Accepts a Shopify-hosted video or an external MP4 URL.
{%- endcomment -%}

{%- liquid
  assign s = section.settings
  assign uid = section.id
-%}

{% style %}
  .ugc-{{ uid }} { padding-top: {{ s.padding_top }}px; padding-bottom: {{ s.padding_bottom }}px; }
  .ugc-{{ uid }}__grid {
    display: grid; gap: {{ s.gap }}px; align-items: center;
    max-width: {{ s.max_width }}px; margin: 0 auto;
  }
  .ugc-{{ uid }}__media {
    position: relative; overflow: hidden; border-radius: {{ s.radius }}px;
    aspect-ratio: {{ s.ratio }}; background: rgba(0,0,0,.05);
  }
  .ugc-{{ uid }}__media video,
  .ugc-{{ uid }}__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ugc-{{ uid }}__stars { display: flex; gap: 3px; margin-bottom: 10px; color: {{ s.star_color }}; }
  .ugc-{{ uid }}__stars svg { width: 17px; height: 17px; }
  .ugc-{{ uid }}__quote { margin: 0 0 12px; font-size: {{ s.quote_size }}px; line-height: 1.35; }
  .ugc-{{ uid }}__who { display: flex; align-items: center; gap: 9px; font-size: 14px; }
  .ugc-{{ uid }}__who img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
  .ugc-{{ uid }}__verified { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: {{ s.verified_color }}; }
  .ugc-{{ uid }}__cta {
    display: inline-block; margin-top: 14px; padding: 11px 22px; border-radius: 8px;
    background: {{ s.cta_bg }}; color: {{ s.cta_text }}; text-decoration: none; font-weight: 600;
  }
  @media screen and (min-width: 750px) {
    .ugc-{{ uid }}__grid { grid-template-columns: {% if s.media_side == 'right' %}1fr {{ s.media_width }}fr{% else %}{{ s.media_width }}fr 1fr{% endif %}; }
    .ugc-{{ uid }}__media { order: {% if s.media_side == 'right' %}2{% else %}1{% endif %}; }
  }
{% endstyle %}

<div class="ugc-{{ uid }} color-{{ s.color_scheme }} gradient">
  <div class="page-width">
    <div class="ugc-{{ uid }}__grid">
      <div class="ugc-{{ uid }}__media">
        {%- if s.video != blank -%}
          {{ s.video | video_tag: image_size: '800x', autoplay: s.autoplay, loop: s.loop, muted: true, controls: s.controls }}
        {%- elsif s.video_url != blank -%}
          <video {% if s.autoplay %}autoplay muted playsinline{% endif %}{% if s.loop %} loop{% endif %}{% if s.controls %} controls{% endif %}
                 {% if s.poster_url != blank %}poster="{{ s.poster_url }}"{% endif %} preload="metadata">
            <source src="{{ s.video_url }}" type="video/mp4">
          </video>
        {%- elsif s.poster_url != blank -%}
          <img src="{{ s.poster_url }}" alt="" loading="lazy" width="800" height="1000">
        {%- else -%}
          {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
        {%- endif -%}
      </div>

      <div>
        {%- if s.rating > 0 -%}
          <div class="ugc-{{ uid }}__stars" aria-label="{{ s.rating }} out of 5">
            {%- for i in (1..s.rating) -%}
              <svg viewBox="0 0 24 24" fill="currentColor"><path d="m12 2 3 6.6 7 .8-5.2 4.7 1.4 7L12 17.6 5.8 21l1.4-7L2 9.4l7-.8z"/></svg>
            {%- endfor -%}
          </div>
        {%- endif -%}
        {%- if s.quote != blank -%}<blockquote class="ugc-{{ uid }}__quote">{{ s.quote }}</blockquote>{%- endif -%}
        <div class="ugc-{{ uid }}__who">
          {%- if s.avatar != blank -%}
            {{ s.avatar | image_url: width: 80 | image_tag: loading: "lazy", alt: "" }}
          {%- elsif s.avatar_url != blank -%}
            <img src="{{ s.avatar_url }}" alt="" loading="lazy" width="34" height="34">
          {%- endif -%}
          <span>
            <strong>{{ s.author | escape }}</strong>
            {%- if s.verified -%}
              <span class="ugc-{{ uid }}__verified">
                <svg viewBox="0 0 24 24" width="13" height="13" fill="currentColor"><path d="M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5z" opacity=".18"/><path d="m9 12 2 2 4-4" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
                {{ s.verified_label | escape }}
              </span>
            {%- endif -%}
          </span>
        </div>
        {%- if s.cta_label != blank -%}
          <a class="ugc-{{ uid }}__cta" href="{{ s.cta_link | default: '#' }}">{{ s.cta_label | escape }}</a>
        {%- endif -%}
      </div>
    </div>
  </div>
</div>

{% schema %}
{
  "name": "UGC Video Spotlight",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": [
      "header",
      "footer"
    ]
  },
  "settings": [
    {
      "type": "video",
      "id": "video",
      "label": "Video"
    },
    {
      "type": "text",
      "id": "video_url",
      "label": "Video URL (MP4)",
      "info": "Used only when no video is picked."
    },
    {
      "type": "text",
      "id": "poster_url",
      "label": "Poster image URL"
    },
    {
      "type": "checkbox",
      "id": "autoplay",
      "label": "Autoplay (muted)",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "loop",
      "label": "Loop",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "controls",
      "label": "Show controls",
      "default": false
    },
    {
      "type": "header",
      "content": "Quote"
    },
    {
      "type": "range",
      "id": "rating",
      "min": 0,
      "max": 5,
      "step": 1,
      "label": "Star rating",
      "default": 5
    },
    {
      "type": "richtext",
      "id": "quote",
      "label": "Quote",
      "default": "<p>The quality genuinely surprised me. Softer than anything I've bought locally.</p>"
    },
    {
      "type": "text",
      "id": "author",
      "label": "Author",
      "default": "Nusrat A."
    },
    {
      "type": "image_picker",
      "id": "avatar",
      "label": "Avatar"
    },
    {
      "type": "text",
      "id": "avatar_url",
      "label": "Avatar URL"
    },
    {
      "type": "checkbox",
      "id": "verified",
      "label": "Show verified badge",
      "default": true
    },
    {
      "type": "text",
      "id": "verified_label",
      "label": "Verified label",
      "default": "Verified buyer"
    },
    {
      "type": "text",
      "id": "cta_label",
      "label": "Button label",
      "default": "Shop now"
    },
    {
      "type": "url",
      "id": "cta_link",
      "label": "Button link"
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "select",
      "id": "media_side",
      "label": "Video side",
      "default": "left",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ]
    },
    {
      "type": "range",
      "id": "media_width",
      "min": 1,
      "max": 3,
      "step": 1,
      "label": "Video width ratio",
      "default": 1
    },
    {
      "type": "select",
      "id": "ratio",
      "label": "Video ratio",
      "default": "9 / 16",
      "options": [
        {
          "value": "9 / 16",
          "label": "Vertical"
        },
        {
          "value": "1 / 1",
          "label": "Square"
        },
        {
          "value": "16 / 9",
          "label": "Wide"
        }
      ]
    },
    {
      "type": "range",
      "id": "gap",
      "min": 8,
      "max": 80,
      "step": 4,
      "unit": "px",
      "label": "Gap",
      "default": 36
    },
    {
      "type": "range",
      "id": "max_width",
      "min": 400,
      "max": 1400,
      "step": 20,
      "unit": "px",
      "label": "Max width",
      "default": 900
    },
    {
      "type": "range",
      "id": "radius",
      "min": 0,
      "max": 32,
      "step": 2,
      "unit": "px",
      "label": "Corner radius",
      "default": 14
    },
    {
      "type": "range",
      "id": "quote_size",
      "min": 14,
      "max": 34,
      "step": 1,
      "unit": "px",
      "label": "Quote size",
      "default": 19
    },
    {
      "type": "color",
      "id": "star_color",
      "label": "Star colour",
      "default": "#e8b431"
    },
    {
      "type": "color",
      "id": "verified_color",
      "label": "Verified colour",
      "default": "#1e8f4e"
    },
    {
      "type": "color",
      "id": "cta_bg",
      "label": "Button background",
      "default": "#111111"
    },
    {
      "type": "color",
      "id": "cta_text",
      "label": "Button text",
      "default": "#ffffff"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "Colour scheme",
      "default": "scheme-1"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Top padding",
      "default": 44
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Bottom padding",
      "default": 44
    }
  ],
  "presets": [
    {
      "name": "UGC Video Spotlight"
    }
  ]
}
{% endschema %}
