{%- comment -%}
  Shop the Look — shoppable hotspots pinned to an editorial image.
  The staple fashion-brand section (Revolve, House of CB, Aritzia).
  Each hotspot is a block: position it by % so it stays put at any size.
{%- endcomment -%}

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

{% style %}
  .stl-{{ uid }} {
    padding-top: {{ s.padding_top }}px;
    padding-bottom: {{ s.padding_bottom }}px;
  }
  .stl-{{ uid }}__wrap {
    position: relative;
    max-width: {{ s.max_width }}px;
    margin: 0 auto;
    border-radius: {{ s.corner_radius }}px;
    overflow: hidden;
  }
  .stl-{{ uid }}__img { display: block; width: 100%; height: auto; }
  .stl-{{ uid }}__ph {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 3 / 4; background: rgba(0,0,0,.04);
  }
  .stl-{{ uid }}__dot {
    position: absolute;
    width: {{ s.dot_size }}px; height: {{ s.dot_size }}px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: {{ s.dot_color }};
    border: 2px solid {{ s.dot_border_color }};
    cursor: pointer; padding: 0;
    display: grid; place-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
  }
  {%- if s.pulse -%}
  .stl-{{ uid }}__dot::after {
    content: ''; position: absolute; inset: -6px;
    border-radius: 50%; border: 2px solid {{ s.dot_color }};
    animation: stlPulse-{{ uid }} 2s ease-out infinite;
  }
  @keyframes stlPulse-{{ uid }} {
    0%   { transform: scale(.7); opacity: .9; }
    100% { transform: scale(1.4); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .stl-{{ uid }}__dot::after { animation: none; }
  }
  {%- endif -%}
  .stl-{{ uid }}__card {
    position: absolute; z-index: 3;
    width: {{ s.card_width }}px; max-width: 62vw;
    background: {{ s.card_bg }}; color: {{ s.card_text }};
    border-radius: {{ s.card_radius }}px;
    box-shadow: 0 8px 30px rgba(0,0,0,.18);
    padding: 10px; gap: 10px;
    display: none; align-items: center;
    transform: translate(-50%, calc(-100% - {{ s.dot_size | plus: 12 }}px));
    text-decoration: none;
  }
  .stl-{{ uid }}__hot[aria-expanded="true"] + .stl-{{ uid }}__card { display: flex; }
  .stl-{{ uid }}__card img {
    width: 56px; height: 68px; object-fit: cover; border-radius: 6px; flex: 0 0 auto;
  }
  .stl-{{ uid }}__meta { min-width: 0; }
  .stl-{{ uid }}__title {
    font-size: 13px; line-height: 1.3; margin: 0 0 3px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .stl-{{ uid }}__price { font-size: 13px; font-weight: 600; margin: 0; }
  .stl-{{ uid }}__heading { text-align: {{ s.heading_align }}; margin-bottom: 22px; }
{% endstyle %}

<div class="stl-{{ uid }} color-{{ s.color_scheme }} gradient">
  <div class="page-width">
    {%- if s.heading != blank -%}
      <div class="stl-{{ uid }}__heading">
        <h2 class="{{ s.heading_size }}">{{ s.heading | escape }}</h2>
        {%- if s.subheading != blank -%}<p>{{ s.subheading }}</p>{%- endif -%}
      </div>
    {%- endif -%}

    <div class="stl-{{ uid }}__wrap">
      {%- if s.image != blank -%}
        {%- capture img_class -%}stl-{{ uid }}__img{%- endcapture -%}
        {{ s.image | image_url: width: 1600 | image_tag:
             class: img_class, loading: "lazy",
             widths: "400,600,900,1200,1600", alt: s.image.alt | default: s.heading }}
      {%- else -%}
        <div class="stl-{{ uid }}__ph">{{ 'image' | placeholder_svg_tag }}</div>
      {%- endif -%}

      {%- for block in section.blocks -%}
        {%- liquid
          assign p = block.settings.product
          assign label = block.settings.label
          if p != blank and label == blank
            assign label = p.title
          endif
        -%}
        <button
          type="button"
          class="stl-{{ uid }}__dot stl-{{ uid }}__hot"
          style="left: {{ block.settings.x }}%; top: {{ block.settings.y }}%;"
          aria-expanded="false"
          aria-label="{{ label | default: 'Shop this item' | escape }}"
          {{ block.shopify_attributes }}
        ></button>
        <a
          class="stl-{{ uid }}__card"
          style="left: {{ block.settings.x }}%; top: {{ block.settings.y }}%;"
          {% if p != blank %}href="{{ p.url }}"{% else %}href="{{ block.settings.link | default: '#' }}"{% endif %}
        >
          {%- if p != blank and p.featured_image -%}
            {{ p.featured_image | image_url: width: 160 | image_tag: loading: "lazy", alt: "" }}
          {%- elsif block.settings.image != blank -%}
            {{ block.settings.image | image_url: width: 160 | image_tag: loading: "lazy", alt: "" }}
          {%- endif -%}
          <span class="stl-{{ uid }}__meta">
            <span class="stl-{{ uid }}__title">{{ label | default: 'Shop this item' | escape }}</span>
            {%- if p != blank -%}
              <span class="stl-{{ uid }}__price">{{ p.price | money }}</span>
            {%- elsif block.settings.price_text != blank -%}
              <span class="stl-{{ uid }}__price">{{ block.settings.price_text | escape }}</span>
            {%- endif -%}
          </span>
        </a>
      {%- endfor -%}
    </div>
  </div>
</div>

<script>
  (() => {
    const root = document.currentScript.previousElementSibling;
    if (!root) return;
    const dots = root.querySelectorAll('.stl-{{ uid }}__hot');
    const closeAll = (except) => dots.forEach(d => { if (d !== except) d.setAttribute('aria-expanded','false'); });
    dots.forEach(d => d.addEventListener('click', e => {
      e.stopPropagation();
      const open = d.getAttribute('aria-expanded') === 'true';
      closeAll(d);
      d.setAttribute('aria-expanded', open ? 'false' : 'true');
    }));
    document.addEventListener('click', () => closeAll(null));
    root.addEventListener('keydown', e => { if (e.key === 'Escape') closeAll(null); });
  })();
</script>

{% schema %}
{
  "name": "Shop the Look",
  "tag": "section",
  "class": "section",
  "disabled_on": { "groups": ["header", "footer"] },
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Shop the look" },
    { "type": "richtext", "id": "subheading", "label": "Subheading" },
    { "type": "select", "id": "heading_size", "label": "Heading size", "default": "h1",
      "options": [ {"value":"h2","label":"Small"}, {"value":"h1","label":"Medium"}, {"value":"h0","label":"Large"} ] },
    { "type": "select", "id": "heading_align", "label": "Heading alignment", "default": "center",
      "options": [ {"value":"left","label":"Left"}, {"value":"center","label":"Centre"} ] },
    { "type": "image_picker", "id": "image", "label": "Look image" },
    { "type": "range", "id": "max_width", "min": 600, "max": 1600, "step": 50, "unit": "px", "label": "Max image width", "default": 1000 },
    { "type": "range", "id": "corner_radius", "min": 0, "max": 40, "step": 2, "unit": "px", "label": "Corner radius", "default": 12 },
    { "type": "header", "content": "Hotspots" },
    { "type": "range", "id": "dot_size", "min": 14, "max": 44, "step": 2, "unit": "px", "label": "Dot size", "default": 26 },
    { "type": "color", "id": "dot_color", "label": "Dot colour", "default": "#ffffff" },
    { "type": "color", "id": "dot_border_color", "label": "Dot border", "default": "#111111" },
    { "type": "checkbox", "id": "pulse", "label": "Pulse animation", "default": true },
    { "type": "header", "content": "Product card" },
    { "type": "range", "id": "card_width", "min": 180, "max": 340, "step": 10, "unit": "px", "label": "Card width", "default": 240 },
    { "type": "range", "id": "card_radius", "min": 0, "max": 24, "step": 2, "unit": "px", "label": "Card radius", "default": 10 },
    { "type": "color", "id": "card_bg", "label": "Card background", "default": "#ffffff" },
    { "type": "color", "id": "card_text", "label": "Card 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": 40 },
    { "type": "range", "id": "padding_bottom", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "Bottom padding", "default": 40 }
  ],
  "blocks": [
    {
      "type": "hotspot",
      "name": "Hotspot",
      "settings": [
        { "type": "product", "id": "product", "label": "Product", "info": "Title, image and price fill in automatically." },
        { "type": "range", "id": "x", "min": 0, "max": 100, "step": 1, "unit": "%", "label": "Horizontal position", "default": 50 },
        { "type": "range", "id": "y", "min": 0, "max": 100, "step": 1, "unit": "%", "label": "Vertical position", "default": 50 },
        { "type": "header", "content": "Manual override" },
        { "type": "text", "id": "label", "label": "Label", "info": "Leave blank to use the product title." },
        { "type": "text", "id": "price_text", "label": "Price text", "info": "Only used when no product is picked." },
        { "type": "image_picker", "id": "image", "label": "Image", "info": "Only used when no product is picked." },
        { "type": "url", "id": "link", "label": "Link", "info": "Only used when no product is picked." }
      ]
    }
  ],
  "presets": [
    {
      "name": "Shop the Look",
      "blocks": [ { "type": "hotspot" }, { "type": "hotspot" }, { "type": "hotspot" } ]
    }
  ]
}
{% endschema %}
