{%- comment -%}
  Community Grid — Parke inspired.

  Parke's whole brand runs on customer photos rather than studio shots.
  A masonry-ish grid of real UGC, each tile optionally tagged to a
  product so the social proof is shoppable.

  Supports external image URLs so demo templates populate without assets.
{%- endcomment -%}

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

{% style %}
  .cg-{{ uid }} { padding-top: {{ s.padding_top }}px; padding-bottom: {{ s.padding_bottom }}px; }
  .cg-{{ uid }}__head { text-align: center; margin-bottom: {{ s.heading_gap }}px; }
  .cg-{{ uid }}__title {
    margin: 0 0 6px; font-size: {{ s.heading_size }}px;
    {% if s.heading_uppercase %}text-transform: uppercase; letter-spacing: .1em;{% endif %}
  }
  .cg-{{ uid }}__handle { margin: 0; font-size: 14px; opacity: .7; }
  .cg-{{ uid }}__grid {
    display: grid; gap: {{ s.gap }}px;
    grid-template-columns: repeat({{ s.columns }}, minmax(0,1fr));
  }
  .cg-{{ uid }}__tile {
    position: relative; display: block; overflow: hidden;
    border-radius: {{ s.corner_radius }}px;
    aspect-ratio: {{ s.ratio }};
    background: rgba(0,0,0,.04);
    text-decoration: none; color: inherit;
  }
  .cg-{{ uid }}__tile img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .6s cubic-bezier(.2,.6,.2,1);
  }
  .cg-{{ uid }}__tile:hover img { transform: scale(1.05); }
  .cg-{{ uid }}__tag {
    position: absolute; left: 10px; bottom: 10px; z-index: 2;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 11px; border-radius: 999px;
    background: {{ s.tag_bg }}; color: {{ s.tag_text }};
    font-size: 12px; font-weight: 600;
    opacity: 0; transform: translateY(6px);
    transition: opacity .25s ease, transform .25s ease;
    max-width: calc(100% - 20px);
  }
  .cg-{{ uid }}__tile:hover .cg-{{ uid }}__tag,
  .cg-{{ uid }}__tile:focus-visible .cg-{{ uid }}__tag { opacity: 1; transform: translateY(0); }
  {%- if s.always_show_tag -%}
  .cg-{{ uid }}__tag { opacity: 1; transform: none; }
  {%- endif -%}
  .cg-{{ uid }}__tag span {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .cg-{{ uid }}__credit {
    position: absolute; right: 10px; top: 10px; z-index: 2;
    font-size: 11px; padding: 4px 8px; border-radius: 999px;
    background: rgba(0,0,0,.45); color: #fff;
  }
  @media screen and (max-width: 989px) {
    .cg-{{ uid }}__grid { grid-template-columns: repeat({{ s.columns_tablet }}, minmax(0,1fr)); }
  }
  @media screen and (max-width: 749px) {
    .cg-{{ uid }}__grid { grid-template-columns: repeat({{ s.columns_mobile }}, minmax(0,1fr)); }
    .cg-{{ uid }}__title { font-size: {{ s.heading_size | times: 0.7 | round }}px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .cg-{{ uid }}__tile img, .cg-{{ uid }}__tag { transition: none; }
  }
{% endstyle %}

<div class="cg-{{ uid }} color-{{ s.color_scheme }} gradient">
  <div class="{% if s.full_width %}{% else %}page-width{% endif %}">
    {%- if s.heading != blank or s.handle != blank -%}
      <div class="cg-{{ uid }}__head">
        {%- if s.heading != blank -%}<h2 class="cg-{{ uid }}__title">{{ s.heading | escape }}</h2>{%- endif -%}
        {%- if s.handle != blank -%}
          {%- if s.handle_link != blank -%}
            <p class="cg-{{ uid }}__handle"><a href="{{ s.handle_link }}" style="color:inherit">{{ s.handle | escape }}</a></p>
          {%- else -%}
            <p class="cg-{{ uid }}__handle">{{ s.handle | escape }}</p>
          {%- endif -%}
        {%- endif -%}
      </div>
    {%- endif -%}

    <div class="cg-{{ uid }}__grid">
      {%- for block in section.blocks -%}
        {%- liquid
          assign bs = block.settings
          assign p = bs.product
          assign href = bs.link
          if p != blank and href == blank
            assign href = p.url
          endif
          assign tag = bs.tag_label
          if p != blank and tag == blank
            assign tag = p.title
          endif
        -%}
        <a class="cg-{{ uid }}__tile" href="{{ href | default: '#' }}" {{ block.shopify_attributes }}>
          {%- if bs.image != blank -%}
            {{ bs.image | image_url: width: 900 | image_tag:
                 loading: "lazy", widths: "300,450,600,900", alt: tag | default: "" }}
          {%- elsif bs.image_url != blank -%}
            <img src="{{ bs.image_url }}" alt="{{ tag | escape }}" loading="lazy" width="900" height="1100">
          {%- else -%}
            {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
          {%- endif -%}

          {%- if bs.credit != blank -%}
            <span class="cg-{{ uid }}__credit">{{ bs.credit | escape }}</span>
          {%- endif -%}

          {%- if tag != blank -%}
            <span class="cg-{{ uid }}__tag">
              <span>{{ tag | escape }}</span>
              {%- if p != blank and s.show_price -%}<span>{{ p.price | money }}</span>{%- endif -%}
            </span>
          {%- endif -%}
        </a>
      {%- endfor -%}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Community (parke)",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": [
      "header",
      "footer"
    ]
  },
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "The community"
    },
    {
      "type": "text",
      "id": "handle",
      "label": "Handle / subtitle",
      "default": "@leona.shop.bd"
    },
    {
      "type": "url",
      "id": "handle_link",
      "label": "Handle link"
    },
    {
      "type": "checkbox",
      "id": "heading_uppercase",
      "label": "Uppercase heading",
      "default": true
    },
    {
      "type": "range",
      "id": "heading_size",
      "min": 16,
      "max": 64,
      "step": 2,
      "unit": "px",
      "label": "Heading size",
      "default": 26
    },
    {
      "type": "range",
      "id": "heading_gap",
      "min": 0,
      "max": 64,
      "step": 4,
      "unit": "px",
      "label": "Space below heading",
      "default": 24
    },
    {
      "type": "header",
      "content": "Grid"
    },
    {
      "type": "checkbox",
      "id": "full_width",
      "label": "Full width",
      "default": false
    },
    {
      "type": "range",
      "id": "columns",
      "min": 2,
      "max": 8,
      "step": 1,
      "label": "Columns",
      "default": 5
    },
    {
      "type": "range",
      "id": "columns_tablet",
      "min": 2,
      "max": 6,
      "step": 1,
      "label": "Columns (tablet)",
      "default": 3
    },
    {
      "type": "range",
      "id": "columns_mobile",
      "min": 1,
      "max": 4,
      "step": 1,
      "label": "Columns (mobile)",
      "default": 2
    },
    {
      "type": "range",
      "id": "gap",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Gap",
      "default": 8
    },
    {
      "type": "select",
      "id": "ratio",
      "label": "Tile ratio",
      "default": "4 / 5",
      "options": [
        {
          "value": "1 / 1",
          "label": "Square"
        },
        {
          "value": "4 / 5",
          "label": "Portrait"
        },
        {
          "value": "3 / 4",
          "label": "Tall"
        }
      ]
    },
    {
      "type": "range",
      "id": "corner_radius",
      "min": 0,
      "max": 28,
      "step": 2,
      "unit": "px",
      "label": "Corner radius",
      "default": 0
    },
    {
      "type": "header",
      "content": "Shoppable tag"
    },
    {
      "type": "checkbox",
      "id": "always_show_tag",
      "label": "Always show tag",
      "default": false,
      "info": "Otherwise it appears on hover."
    },
    {
      "type": "checkbox",
      "id": "show_price",
      "label": "Show price in tag",
      "default": true
    },
    {
      "type": "color",
      "id": "tag_bg",
      "label": "Tag background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "tag_text",
      "label": "Tag text",
      "default": "#111111"
    },
    {
      "type": "header",
      "content": "Section"
    },
    {
      "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
    }
  ],
  "blocks": [
    {
      "type": "post",
      "name": "Photo",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "text",
          "id": "image_url",
          "label": "Image URL",
          "info": "Used only when no image is picked."
        },
        {
          "type": "product",
          "id": "product",
          "label": "Tagged product"
        },
        {
          "type": "text",
          "id": "tag_label",
          "label": "Tag label",
          "info": "Defaults to the product title."
        },
        {
          "type": "text",
          "id": "credit",
          "label": "Credit",
          "info": "e.g. @customer"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link override"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Community (parke)",
      "blocks": [
        {
          "type": "post"
        },
        {
          "type": "post"
        },
        {
          "type": "post"
        },
        {
          "type": "post"
        },
        {
          "type": "post"
        }
      ]
    }
  ]
}
{% endschema %}
