Shoppable Hotspots

{%- comment -%}
  modblo, Shoppable Hotspots
  Replaces Shop The Look / Lookbook / Hotspot apps.
  Drop a hero image, drop pins on it, each pin opens a small product card
  with title, price, and add-to-cart. Theme blocks let you place each pin
  by absolute % offset from the top-left.
{%- endcomment -%}

{%- if section.settings.image != blank -%}
<section class="modblo-hs" data-modblo-hs
         data-section-id="{{ section.id }}"
         style="--modblo-hs-bg: {{ section.settings.bg }};
                --modblo-hs-fg: {{ section.settings.fg }};
                --modblo-hs-pin: {{ section.settings.pin_color }};
                --modblo-hs-accent: {{ section.settings.accent }};">
  <div class="modblo-hs__inner page-width">
    {%- if section.settings.eyebrow != blank -%}
      <p class="modblo-hs__eyebrow">{{ section.settings.eyebrow }}</p>
    {%- endif -%}
    {%- if section.settings.heading != blank -%}
      <h2 class="modblo-hs__h">{{ section.settings.heading }}</h2>
    {%- endif -%}

    <div class="modblo-hs__stage">
      {{ section.settings.image | image_url: width: 1600 | image_tag:
        loading: 'lazy', widths: '600,1000,1600',
        sizes: '(max-width: 768px) 100vw, 1100px',
        class: 'modblo-hs__img' }}

      {%- for block in section.blocks -%}
        {%- if block.type == 'pin' -%}
          {%- assign pin_product = block.settings.product -%}
          {%- if pin_product != blank -%}
            {%- assign pin_var = pin_product.selected_or_first_available_variant -%}
            <div class="modblo-hs__pin"
                 data-modblo-hs-pin
                 style="left: {{ block.settings.x | default: 50 }}%; top: {{ block.settings.y | default: 50 }}%;"
                 {{ block.shopify_attributes }}>

              <button type="button" class="modblo-hs__dot" aria-label="Shop {{ pin_product.title }}" data-modblo-hs-toggle>
                <span class="modblo-hs__dot-pulse" aria-hidden="true"></span>
                <span class="modblo-hs__dot-core" aria-hidden="true">+</span>
              </button>

              <div class="modblo-hs__card" data-modblo-hs-card hidden>
                {%- if pin_product.featured_image -%}
                  {{ pin_product.featured_image | image_url: width: 240 | image_tag:
                    loading: 'lazy', widths: '120,240', sizes: '120px',
                    class: 'modblo-hs__card-img' }}
                {%- endif -%}
                <div class="modblo-hs__card-body">
                  <p class="modblo-hs__card-title">{{ pin_product.title }}</p>
                  <p class="modblo-hs__card-price">
                    <strong>{{ pin_var.price | money }}</strong>
                    {%- if pin_product.compare_at_price > pin_product.price -%}
                      <s>{{ pin_var.compare_at_price | money }}</s>
                    {%- endif -%}
                  </p>
                  <div class="modblo-hs__card-actions">
                    <a href="{{ pin_product.url }}" class="modblo-hs__card-link">View</a>
                    <form action="/cart/add" method="post" class="modblo-hs__card-form">
                      <input type="hidden" name="id" value="{{ pin_var.id }}">
                      <button type="submit" class="modblo-hs__card-add" {% unless pin_var.available %}disabled{% endunless %}>
                        {%- if pin_var.available -%}+ Add{%- else -%}Sold out{%- endif -%}
                      </button>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          {%- endif -%}
        {%- endif -%}
      {%- endfor -%}
    </div>
  </div>
</section>

<style>
  .modblo-hs { background: var(--modblo-hs-bg, #fff); color: var(--modblo-hs-fg, #0b0b0c); padding: clamp(48px, 6vw, 96px) 0; }
  .modblo-hs__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
  .modblo-hs__eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: 12px; font-weight: 700; color: var(--modblo-hs-accent, #6366f1); margin: 0 0 12px; text-align: center; }
  .modblo-hs__h { font-size: clamp(28px, 4vw, 44px); letter-spacing: -.02em; margin: 0 0 32px; text-align: center; }

  .modblo-hs__stage { position: relative; border-radius: 20px; overflow: hidden; }
  .modblo-hs__img { display: block; width: 100%; height: auto; }

  .modblo-hs__pin { position: absolute; transform: translate(-50%, -50%); }

  .modblo-hs__dot {
    position: relative; width: 32px; height: 32px;
    background: transparent; border: 0; cursor: pointer;
    display: grid; place-items: center;
  }
  .modblo-hs__dot-pulse {
    position: absolute; inset: 0; border-radius: 50%;
    background: var(--modblo-hs-pin, #ffffff);
    opacity: .35;
    animation: modblo-hs-pulse 1.8s ease-out infinite;
  }
  .modblo-hs__dot-core {
    position: relative; width: 22px; height: 22px;
    background: var(--modblo-hs-pin, #ffffff);
    color: var(--modblo-hs-fg, #0b0b0c);
    border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 700; font-size: 14px; line-height: 1;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    transition: transform .15s;
  }
  .modblo-hs__dot:hover .modblo-hs__dot-core { transform: scale(1.1); }
  .modblo-hs__pin.is-open .modblo-hs__dot-core { transform: rotate(45deg); }
  .modblo-hs__pin.is-open .modblo-hs__dot-pulse { animation: none; opacity: 0; }

  @keyframes modblo-hs-pulse {
    0%   { transform: scale(1);   opacity: .45; }
    100% { transform: scale(2.6); opacity: 0; }
  }

  .modblo-hs__card {
    position: absolute;
    top: calc(100% + 14px); left: 50%;
    transform: translateX(-50%);
    width: 260px;
    background: var(--modblo-hs-bg, #fff); color: var(--modblo-hs-fg, #0b0b0c);
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 16px 40px -12px rgba(0,0,0,.35);
    display: flex; gap: 10px;
    z-index: 5;
  }
  .modblo-hs__card[hidden] { display: none; }
  .modblo-hs__card::before {
    content: "";
    position: absolute; left: 50%; top: -7px;
    transform: translateX(-50%) rotate(45deg);
    width: 14px; height: 14px;
    background: var(--modblo-hs-bg, #fff);
  }

  .modblo-hs__card-img { width: 72px; height: 72px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
  .modblo-hs__card-body { flex: 1; min-width: 0; }
  .modblo-hs__card-title { font-size: 13px; font-weight: 600; margin: 0 0 4px; line-height: 1.3; }
  .modblo-hs__card-price { font-size: 12px; margin: 0 0 8px; display: flex; gap: 6px; align-items: baseline; }
  .modblo-hs__card-price s { opacity: .55; }

  .modblo-hs__card-actions { display: flex; gap: 6px; }
  .modblo-hs__card-link {
    flex: 1; text-align: center;
    padding: 6px; font-size: 11px; font-weight: 600;
    color: inherit; text-decoration: none;
    background: color-mix(in oklab, var(--modblo-hs-fg) 6%, transparent);
    border-radius: 6px;
  }
  .modblo-hs__card-form { flex: 1; }
  .modblo-hs__card-add {
    width: 100%; padding: 6px;
    background: var(--modblo-hs-accent, #6366f1); color: #fff;
    border: 0; border-radius: 6px;
    font-size: 11px; font-weight: 600; cursor: pointer;
  }
  .modblo-hs__card-add[disabled] { opacity: .5; cursor: not-allowed; }

  @media (max-width: 640px) {
    .modblo-hs__card { width: 220px; }
    .modblo-hs__card-img { width: 56px; height: 56px; }
  }
</style>

<script>
  (function () {
    var root = document.querySelector('[data-modblo-hs][data-section-id="{{ section.id }}"]');
    if (!root) return;

    var pins = Array.from(root.querySelectorAll('[data-modblo-hs-pin]'));

    function closeAll(except) {
      pins.forEach(function (p) {
        if (p === except) return;
        p.classList.remove('is-open');
        var c = p.querySelector('[data-modblo-hs-card]');
        if (c) c.hidden = true;
      });
    }

    pins.forEach(function (pin) {
      var btn = pin.querySelector('[data-modblo-hs-toggle]');
      var card = pin.querySelector('[data-modblo-hs-card]');
      if (!btn || !card) return;

      btn.addEventListener('click', function (e) {
        e.stopPropagation();
        var isOpen = pin.classList.contains('is-open');
        closeAll();
        if (!isOpen) {
          pin.classList.add('is-open');
          card.hidden = false;
        }
      });
    });

    document.addEventListener('click', function () { closeAll(); });
    document.addEventListener('keydown', function (e) {
      if (e.key === 'Escape') closeAll();
    });

    // Cart AJAX submit
    root.querySelectorAll('.modblo-hs__card-form').forEach(function (form) {
      form.addEventListener('submit', function (e) {
        e.preventDefault();
        var btn = form.querySelector('button');
        var original = btn.textContent;
        btn.disabled = true; btn.textContent = 'Adding…';
        fetch('/cart/add.js', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ id: form.querySelector('[name="id"]').value, quantity: 1 }),
        }).then(function () {
          btn.textContent = '✓ Added';
          document.dispatchEvent(new CustomEvent('cart:updated'));
          setTimeout(function () { btn.disabled = false; btn.textContent = original; }, 1600);
        }).catch(function () {
          btn.disabled = false; btn.textContent = original;
        });
      });
    });
  })();
</script>

{% schema %}
{
  "name": "Shoppable Hotspots",
  "tag": "section",
  "settings": [
    { "type": "header", "content": "Image" },
    { "type": "image_picker", "id": "image", "label": "Lookbook image",
      "info": "Use a high-quality 16:9 or 4:3 lifestyle image. Pins are placed by % offset." },
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Shop the look" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Shop the editorial." },
    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "bg", "label": "Background", "default": "#ffffff" },
    { "type": "color", "id": "fg", "label": "Foreground", "default": "#0b0b0c" },
    { "type": "color", "id": "pin_color", "label": "Pin color", "default": "#ffffff" },
    { "type": "color", "id": "accent", "label": "Accent (CTA)", "default": "#6366f1" }
  ],
  "blocks": [
    {
      "type": "pin",
      "name": "Pin",
      "settings": [
        { "type": "product", "id": "product", "label": "Product" },
        { "type": "range", "id": "x", "label": "X position (%)", "min": 0, "max": 100, "step": 1, "default": 50 },
        { "type": "range", "id": "y", "label": "Y position (%)", "min": 0, "max": 100, "step": 1, "default": 50 }
      ]
    }
  ],
  "max_blocks": 8,
  "presets": [{ "name": "Shoppable Hotspots" }]
}
{% endschema %}
{%- endif -%}