{%- comment -%}
  Category Tiles — Anthropologie inspired.

  Observed on anthropologie.com: a dense "More to Explore" browse block —
  many small category tiles, image on top, short label under, packed
  tightly so the eye scans a whole department at once.

  Each tile is a block. Pull from a collection (image + title fill in) or
  set them manually.
{%- endcomment -%}

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

{% style %}
  .ct-{{ uid }} { padding-top: {{ s.padding_top }}px; padding-bottom: {{ s.padding_bottom }}px; }
  .ct-{{ uid }}__head { text-align: {{ s.heading_align }}; margin-bottom: {{ s.heading_gap }}px; }
  .ct-{{ uid }}__title {
    margin: 0; font-size: {{ s.heading_size }}px;
    {% if s.heading_uppercase %}text-transform: uppercase; letter-spacing: .1em;{% endif %}
  }
  .ct-{{ uid }}__grid {
    display: grid; gap: {{ s.gap }}px;
    grid-template-columns: repeat({{ s.columns }}, minmax(0, 1fr));
  }
  .ct-{{ uid }}__tile {
    display: block; text-decoration: none; color: inherit;
    text-align: {{ s.label_align }};
  }
  .ct-{{ uid }}__media {
    overflow: hidden; border-radius: {{ s.corner_radius }}px;
    aspect-ratio: {{ s.ratio }}; background: rgba(0,0,0,.04);
  }
  .ct-{{ uid }}__media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .6s cubic-bezier(.2,.6,.2,1);
  }
  {%- if s.zoom -%}
  .ct-{{ uid }}__tile:hover .ct-{{ uid }}__media img { transform: scale(1.05); }
  {%- endif -%}
  .ct-{{ uid }}__label {
    margin: {{ s.label_gap }}px 0 0;
    font-size: {{ s.label_size }}px;
    {% if s.label_uppercase %}text-transform: uppercase; letter-spacing: .08em;{% endif %}
    {% if s.label_underline %}text-decoration: underline; text-underline-offset: 3px;{% endif %}
  }
  .ct-{{ uid }}__count { display: block; font-size: {{ s.label_size | minus: 2 }}px; opacity: .6; margin-top: 2px; }
  @media screen and (max-width: 989px) {
    .ct-{{ uid }}__grid { grid-template-columns: repeat({{ s.columns_tablet }}, minmax(0,1fr)); }
  }
  @media screen and (max-width: 749px) {
    .ct-{{ uid }}__grid { grid-template-columns: repeat({{ s.columns_mobile }}, minmax(0,1fr)); gap: {{ s.gap | times: 0.7 | round }}px; }
    .ct-{{ uid }}__title { font-size: {{ s.heading_size | times: 0.7 | round }}px; }
  }
  @media (prefers-reduced-motion: reduce) { .ct-{{ uid }}__media img { transition: none; } }
{% endstyle %}

<div class="ct-{{ uid }} color-{{ s.color_scheme }} gradient">
  <div class="page-width">
    {%- if s.heading != blank -%}
      <div class="ct-{{ uid }}__head">
        <h2 class="ct-{{ uid }}__title">{{ s.heading | escape }}</h2>
      </div>
    {%- endif -%}

    <div class="ct-{{ uid }}__grid">
      {%- for block in section.blocks -%}
        {%- liquid
          assign col = block.settings.collection
          assign label = block.settings.label
          assign img = block.settings.image
          assign link = block.settings.link
          if col != blank
            if label == blank
              assign label = col.title
            endif
            if img == blank
              assign img = col.featured_image
            endif
            if link == blank
              assign link = col.url
            endif
          endif
        -%}
        <a class="ct-{{ uid }}__tile" href="{{ link | default: '#' }}" {{ block.shopify_attributes }}>
          <div class="ct-{{ uid }}__media">
            {%- if img != blank -%}
              {{ img | image_url: width: 800 | image_tag:
                   loading: "lazy", widths: "200,300,400,600,800",
                   alt: label | default: "" }}
            {%- elsif block.settings.image_url != blank -%}
              <img src="{{ block.settings.image_url }}" alt="{{ label | escape }}" loading="lazy" width="800" height="1000">
            {%- else -%}
              {{ 'collection-1' | placeholder_svg_tag: 'placeholder-svg' }}
            {%- endif -%}
          </div>
          {%- if label != blank -%}
            <p class="ct-{{ uid }}__label">
              {{ label | escape }}
              {%- if s.show_count and col != blank -%}
                <span class="ct-{{ uid }}__count">{{ col.all_products_count }} items</span>
              {%- endif -%}
            </p>
          {%- endif -%}
        </a>
      {%- endfor -%}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Tiles (anthropologie)",
  "tag": "section",
  "class": "section",
  "disabled_on": { "groups": ["header", "footer"] },
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "More to explore" },
    { "type": "select", "id": "heading_align", "label": "Heading alignment", "default": "center",
      "options": [ {"value":"left","label":"Left"}, {"value":"center","label":"Centre"} ] },
    { "type": "range", "id": "heading_size", "min": 16, "max": 64, "step": 2, "unit": "px", "label": "Heading size", "default": 28 },
    { "type": "checkbox", "id": "heading_uppercase", "label": "Uppercase heading", "default": false },
    { "type": "range", "id": "heading_gap", "min": 0, "max": 72, "step": 4, "unit": "px", "label": "Space below heading", "default": 28 },
    { "type": "header", "content": "Grid" },
    { "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": 4, "max": 48, "step": 2, "unit": "px", "label": "Gap", "default": 16 },
    { "type": "select", "id": "ratio", "label": "Tile ratio", "default": "3 / 4",
      "options": [ {"value":"1 / 1","label":"Square"}, {"value":"3 / 4","label":"Portrait"}, {"value":"4 / 5","label":"Tall"}, {"value":"4 / 3","label":"Landscape"} ] },
    { "type": "range", "id": "corner_radius", "min": 0, "max": 32, "step": 2, "unit": "px", "label": "Corner radius", "default": 0 },
    { "type": "checkbox", "id": "zoom", "label": "Zoom on hover", "default": true },
    { "type": "header", "content": "Labels" },
    { "type": "select", "id": "label_align", "label": "Label alignment", "default": "center",
      "options": [ {"value":"left","label":"Left"}, {"value":"center","label":"Centre"} ] },
    { "type": "range", "id": "label_size", "min": 10, "max": 24, "step": 1, "unit": "px", "label": "Label size", "default": 13 },
    { "type": "range", "id": "label_gap", "min": 2, "max": 24, "step": 1, "unit": "px", "label": "Space above label", "default": 10 },
    { "type": "checkbox", "id": "label_uppercase", "label": "Uppercase labels", "default": true },
    { "type": "checkbox", "id": "label_underline", "label": "Underline labels", "default": false },
    { "type": "checkbox", "id": "show_count", "label": "Show product count", "default": false },
    { "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": "tile",
      "name": "Tile",
      "settings": [
        { "type": "collection", "id": "collection", "label": "Collection", "info": "Image, title and link fill in automatically." },
        { "type": "header", "content": "Manual override" },
        { "type": "image_picker", "id": "image", "label": "Image" },
        { "type": "text", "id": "image_url", "label": "Image URL", "info": "Used only when no image is picked." },
        { "type": "text", "id": "label", "label": "Label" },
        { "type": "url", "id": "link", "label": "Link" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Tiles (anthropologie)",
      "blocks": [ {"type":"tile"}, {"type":"tile"}, {"type":"tile"}, {"type":"tile"}, {"type":"tile"} ]
    }
  ]
}
{% endschema %}
