{%- comment -%}
  MIT License · (c) 2026 Lintel · https://lintelagency.com/resources/shopify-sections
{%- endcomment -%}
{%- comment -%}
  UGC gallery: customer photos in an Instagram-style grid, uploaded by the merchant, each with an
  optional credit and a link to the product in it (name and price from the store). No Instagram
  API, no third-party embed, no tracking: photos are served by Shopify like any theme image. Ask
  customers before you post their photos. Pure Liquid and CSS; no JavaScript.
  Depends on: snippets/lib-image.liquid, snippets/lib-button.liquid
{%- endcomment -%}

{%- liquid
  assign s = section.settings
  assign heading_tag = s.heading_tag | default: 'h2'
  assign cols = s.columns | plus: 0
  assign img_vw = 100 | divided_by: cols
  assign cols_m = s.columns_mobile | plus: 0
  assign img_vw_m = 100 | divided_by: cols_m
  assign img_sizes = '(min-width: 750px) ' | append: img_vw | append: 'vw, ' | append: img_vw_m | append: 'vw'
-%}

<div
  class="lib-ugc lib-ugc--{{ s.section_width }}"
  {% if s.anchor_id != blank %}
    id="{{ s.anchor_id | handleize }}"
  {% endif %}
  data-show="{{ s.show_on }}"
  data-ratio="{{ s.image_ratio }}"
  {% if s.animate %}
    data-animate
  {% endif %}
  style="
    --lib-bg: {{ s.color_bg }};
    {% if s.color_bg_gradient != blank %}--lib-bg-image: {{ s.color_bg_gradient }};{% endif %}
    --lib-text: {{ s.color_text }};
    --lib-accent: {{ s.color_accent }};
    --lib-accent-text: {{ s.color_accent_text }};
    --lib-chip: {{ s.color_chip }};
    --lib-chip-text: {{ s.color_chip_text }};
    --lib-cols: {{ cols }};
    --lib-cols-m: {{ cols_m }};
    --lib-gap: {{ s.gap }}px;
    --lib-radius: {{ s.radius }}px;
    --lib-pt: {{ s.padding_top }}px;
    --lib-pb: {{ s.padding_bottom }}px;
    --lib-pt-m: {{ s.padding_top_mobile }}px;
    --lib-pb-m: {{ s.padding_bottom_mobile }}px;
  "
>
  <div class="lib-ugc__inner">
    {%- if s.heading != blank or s.text != blank -%}
      <header class="lib-ugc__header" data-align="{{ s.text_alignment }}" data-align-m="{{ s.text_alignment_mobile }}">
        {%- if s.heading != blank -%}
          <{{ heading_tag }} class="lib-ugc__heading lib-ugc__heading--{{ s.heading_size }}">
            {{- s.heading -}}
          </{{ heading_tag }}>
        {%- endif -%}
        {%- if s.text != blank -%}
          <div class="lib-ugc__text">{{ s.text }}</div>
        {%- endif -%}
      </header>
    {%- endif -%}

    {%- if section.blocks.size > 0 -%}
      <ul class="lib-ugc__grid" role="list">
        {%- for block in section.blocks -%}
          {%- assign b = block.settings -%}
          {%- assign p = b.product -%}
          <li class="lib-ugc__item" {{ block.shopify_attributes }}>
            <figure class="lib-ugc__figure">
              <div class="lib-ugc__media">
                {%- render 'lib-image', image: b.image, image_mobile: b.image_mobile, class: 'lib-ugc__img', sizes: img_sizes, placeholder: 'lifestyle-2' -%}
              </div>
              {%- if b.credit != blank or p != blank -%}
                <figcaption class="lib-ugc__caption">
                  {%- if b.credit != blank -%}
                    <span class="lib-ugc__credit">{{ b.credit | escape }}</span>
                  {%- endif -%}
                  {%- if p != blank and s.show_product -%}
                    <a class="lib-ugc__chip" href="{{ p.url }}">
                      {%- if s.product_prefix != blank -%}<span class="lib-ugc__prefix">{{ s.product_prefix | escape }}</span>{%- endif -%}
                      <span class="lib-ugc__product">{{ p.title | escape }}</span>
                      {%- if s.show_price -%}<span class="lib-ugc__price">{{ p.price | money }}</span>{%- endif -%}
                    </a>
                  {%- endif -%}
                </figcaption>
              {%- endif -%}
            </figure>
          </li>
        {%- endfor -%}
      </ul>
    {%- endif -%}

    {%- if s.button_label != blank -%}
      <div class="lib-ugc__more">
        {%- render 'lib-button', label: s.button_label, url: s.button_url, style: s.button_style, new_tab: s.button_new_tab -%}
      </div>
    {%- endif -%}
  </div>
</div>

{% stylesheet %}
  .lib-ugc {
    background-color: var(--lib-bg);
    background-image: var(--lib-bg-image, none);
    color: var(--lib-text);
    padding: var(--lib-pt) 1rem var(--lib-pb);
  }
  .lib-ugc__inner { max-width: 1200px; margin: 0 auto; }
  .lib-ugc--full { padding-inline: var(--lib-gap); }
  .lib-ugc--full .lib-ugc__inner { max-width: none; }
  @media (max-width: 749px) {
    .lib-ugc { padding-top: var(--lib-pt-m); padding-bottom: var(--lib-pb-m); }
    .lib-ugc[data-show='desktop'] { display: none; }
  }
  @media (min-width: 750px) {
    .lib-ugc[data-show='mobile'] { display: none; }
  }

  .lib-ugc__header { max-width: 42rem; margin-bottom: clamp(1.25rem, 3vw, 2rem); }
  .lib-ugc__heading {
    margin: 0;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .lib-ugc__heading--small { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
  .lib-ugc__heading--large { font-size: clamp(2rem, 4vw, 3.25rem); }
  .lib-ugc__text { margin-top: 0.6rem; font-size: 1rem; line-height: 1.6; opacity: 0.85; }
  .lib-ugc__text > :first-child { margin-top: 0; }
  .lib-ugc__text > :last-child { margin-bottom: 0; }
  .lib-ugc__header[data-align='center'] { margin-inline: auto; text-align: center; }
  @media (max-width: 749px) {
    .lib-ugc__header[data-align-m='left'] { margin-inline: 0; text-align: left; }
    .lib-ugc__header[data-align-m='center'] { margin-inline: auto; text-align: center; }
  }

  .lib-ugc__grid {
    display: grid;
    grid-template-columns: repeat(var(--lib-cols), minmax(0, 1fr));
    gap: var(--lib-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  @media (max-width: 749px) {
    .lib-ugc__grid { grid-template-columns: repeat(var(--lib-cols-m), minmax(0, 1fr)); }
  }
  .lib-ugc__item { min-width: 0; }
  .lib-ugc__figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--lib-radius); }
  .lib-ugc__media { aspect-ratio: 1; background: color-mix(in srgb, var(--lib-text) 8%, transparent); }
  .lib-ugc[data-ratio='portrait'] .lib-ugc__media { aspect-ratio: 4 / 5; }
  .lib-ugc__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
  svg.lib-ugc__img { fill: color-mix(in srgb, var(--lib-text) 22%, transparent); }

  .lib-ugc__caption {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.6rem;
    pointer-events: none;
  }
  .lib-ugc__credit {
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: rgb(0 0 0 / 0.55);
    color: #fff;
    font-size: 0.75rem;
    line-height: 1.3;
  }
  .lib-ugc__chip {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.35rem;
    max-width: 100%;
    min-height: 2.25rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background: var(--lib-chip);
    color: var(--lib-chip-text);
    font-size: 0.8125rem;
    line-height: 1.25;
    text-decoration: none;
    box-shadow: 0 2px 10px rgb(0 0 0 / 0.12);
    pointer-events: auto;
  }
  .lib-ugc__prefix { opacity: 0.75; }
  .lib-ugc__product { font-weight: 600; }
  .lib-ugc__price { opacity: 0.8; }
  .lib-ugc__chip:hover .lib-ugc__product { text-decoration: underline; text-underline-offset: 0.2em; }
  .lib-ugc__chip:focus-visible { outline: 2px solid var(--lib-accent); outline-offset: 2px; }
  @media (max-width: 749px) {
    .lib-ugc__prefix,
    .lib-ugc__price { display: none; }
  }

  .lib-ugc__more { display: flex; justify-content: center; margin-top: clamp(1.5rem, 3vw, 2.25rem); }

  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .lib-ugc[data-animate] .lib-ugc__figure:hover .lib-ugc__img { transform: scale(1.04); }
  }
  @media (prefers-reduced-motion: reduce) {
    .lib-ugc__img { transition: none; }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "Lib · UGC gallery",
  "tag": "section",
  "class": "lib-section",
  "max_blocks": 24,
  "settings": [
    { "type": "paragraph", "content": "Upload photos customers shared with you, with their permission. Nothing loads from Instagram or another service." },
    { "type": "header", "content": "Content" },
    { "type": "inline_richtext", "id": "heading", "label": "Heading", "default": "In your homes" },
    {
      "type": "select",
      "id": "heading_tag",
      "label": "Heading tag",
      "info": "Use H1 only when this is the page's main heading.",
      "options": [
        { "value": "h1", "label": "H1" },
        { "value": "h2", "label": "H2" },
        { "value": "h3", "label": "H3" },
        { "value": "p", "label": "Paragraph" }
      ],
      "default": "h2"
    },
    {
      "type": "select",
      "id": "heading_size",
      "label": "Heading size",
      "options": [
        { "value": "small", "label": "Small" },
        { "value": "medium", "label": "Medium" },
        { "value": "large", "label": "Large" }
      ],
      "default": "medium"
    },
    { "type": "richtext", "id": "text", "label": "Intro text" },
    { "type": "text", "id": "button_label", "label": "Button text" },
    { "type": "url", "id": "button_url", "label": "Button link" },
    {
      "type": "select",
      "id": "button_style",
      "label": "Button style",
      "options": [
        { "value": "primary", "label": "Solid" },
        { "value": "outline", "label": "Outline" },
        { "value": "text", "label": "Text link" }
      ],
      "default": "outline"
    },
    { "type": "checkbox", "id": "button_new_tab", "label": "Open button link in a new tab", "default": false },

    { "type": "header", "content": "Product links" },
    { "type": "checkbox", "id": "show_product", "label": "Show the product in each photo", "default": true },
    { "type": "text", "id": "product_prefix", "label": "Text before the product name", "info": "Hidden on mobile to save space.", "default": "Shop" },
    { "type": "checkbox", "id": "show_price", "label": "Show price", "info": "Hidden on mobile to save space.", "default": true },

    { "type": "header", "content": "Layout" },
    { "type": "range", "id": "columns", "label": "Columns on desktop", "min": 2, "max": 6, "step": 1, "default": 3 },
    { "type": "range", "id": "columns_mobile", "label": "Columns on mobile", "min": 1, "max": 3, "step": 1, "default": 2 },
    {
      "type": "select",
      "id": "image_ratio",
      "label": "Photo shape",
      "options": [
        { "value": "square", "label": "Square" },
        { "value": "portrait", "label": "Portrait (4:5)" }
      ],
      "default": "square"
    },
    { "type": "range", "id": "gap", "label": "Space between photos", "min": 0, "max": 24, "step": 2, "unit": "px", "default": 8 },
    { "type": "range", "id": "radius", "label": "Corner radius", "min": 0, "max": 24, "step": 2, "unit": "px", "default": 10 },
    {
      "type": "select",
      "id": "section_width",
      "label": "Width",
      "options": [
        { "value": "page", "label": "Page width" },
        { "value": "full", "label": "Full width" }
      ],
      "default": "page"
    },
    {
      "type": "select",
      "id": "text_alignment",
      "label": "Heading alignment on desktop",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" }
      ],
      "default": "center"
    },
    {
      "type": "select",
      "id": "text_alignment_mobile",
      "label": "Heading alignment on mobile",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" }
      ],
      "default": "left"
    },

    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "color_bg", "label": "Background", "default": "#FFFFFF" },
    { "type": "color_background", "id": "color_bg_gradient", "label": "Background gradient", "info": "Optional. Covers the background color." },
    { "type": "color", "id": "color_text", "label": "Text", "default": "#1F1B17" },
    { "type": "color", "id": "color_accent", "label": "Accent (button, focus)", "default": "#7A5A3A" },
    { "type": "color", "id": "color_accent_text", "label": "Text on accent", "default": "#FFFFFF" },
    { "type": "color", "id": "color_chip", "label": "Product label background", "default": "#FFFFFF" },
    { "type": "color", "id": "color_chip_text", "label": "Product label text", "default": "#1F1B17" },

    { "type": "header", "content": "Spacing and visibility" },
    { "type": "range", "id": "padding_top", "label": "Top padding on desktop", "min": 0, "max": 200, "step": 4, "unit": "px", "default": 64 },
    { "type": "range", "id": "padding_bottom", "label": "Bottom padding on desktop", "min": 0, "max": 200, "step": 4, "unit": "px", "default": 64 },
    { "type": "range", "id": "padding_top_mobile", "label": "Top padding on mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 40 },
    { "type": "range", "id": "padding_bottom_mobile", "label": "Bottom padding on mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 40 },
    {
      "type": "select",
      "id": "show_on",
      "label": "Show on",
      "options": [
        { "value": "all", "label": "All devices" },
        { "value": "desktop", "label": "Desktop only" },
        { "value": "mobile", "label": "Mobile only" }
      ],
      "default": "all"
    },
    { "type": "text", "id": "anchor_id", "label": "Anchor ID", "info": "Optional. Link to this section with #your-id." },

    { "type": "header", "content": "Motion" },
    { "type": "checkbox", "id": "animate", "label": "Zoom photos slightly on hover", "info": "Never when reduced motion is on.", "default": true }
  ],
  "blocks": [
    {
      "type": "photo",
      "name": "Photo",
      "settings": [
        { "type": "image_picker", "id": "image", "label": "Photo", "info": "Set the alt text in the image's details." },
        { "type": "image_picker", "id": "image_mobile", "label": "Mobile photo", "info": "Optional. Below 750px." },
        { "type": "text", "id": "credit", "label": "Credit", "info": "Optional, for example the customer's first name or handle, with their permission." },
        { "type": "product", "id": "product", "label": "Product in the photo" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Lib · UGC gallery",
      "blocks": [{ "type": "photo" }, { "type": "photo" }, { "type": "photo" }, { "type": "photo" }, { "type": "photo" }, { "type": "photo" }]
    }
  ]
}
{% endschema %}