Social Proof Feed

{%- comment -%}
  modblo. Social Proof Feed
  Replaces Fomo / Provely / Sales Pop-style apps.
  Cycles through configured "X just bought Y" notifications in a corner toast.
  Theme blocks let you add unlimited entries, first/last name, city, product,
  product link, time-ago label, optional product image.
{%- endcomment -%}

{%- if section.blocks.size > 0 -%}
<div class="modblo-sp" data-modblo-sp
     data-section-id="{{ section.id }}"
     data-position="{{ section.settings.position | default: 'bl' }}"
     data-delay="{{ section.settings.first_delay | default: 8 }}"
     data-display="{{ section.settings.display_seconds | default: 5 }}"
     data-gap="{{ section.settings.gap_seconds | default: 10 }}"
     data-dismissible="{{ section.settings.dismissible }}"
     style="--modblo-sp-bg: {{ section.settings.bg }};
            --modblo-sp-fg: {{ section.settings.fg }};
            --modblo-sp-accent: {{ section.settings.accent }};">

  {%- for block in section.blocks -%}
    {%- if block.type == 'notification' -%}
      <template data-modblo-sp-tpl>
        <article class="modblo-sp__toast" {{ block.shopify_attributes }}>
          {%- if block.settings.image -%}
            {{ block.settings.image | image_url: width: 96 | image_tag:
              loading: 'lazy', widths: '48,96', sizes: '48px',
              class: 'modblo-sp__img' }}
          {%- elsif block.settings.icon != blank -%}
            <span class="modblo-sp__icon" aria-hidden="true">{{ block.settings.icon }}</span>
          {%- endif -%}
          <div class="modblo-sp__body">
            <p class="modblo-sp__line">
              <strong>{{ block.settings.name }}</strong>
              {% if block.settings.city != blank %}from {{ block.settings.city }}{% endif %}
              {{ block.settings.action | default: 'just bought' }}
              {%- if block.settings.product_url != blank -%}
                <a href="{{ block.settings.product_url }}">{{ block.settings.product }}</a>
              {%- else -%}
                <span>{{ block.settings.product }}</span>
              {%- endif -%}
            </p>
            <p class="modblo-sp__meta">
              <span class="modblo-sp__verified" aria-hidden="true">
                <svg viewBox="0 0 16 16" width="11" height="11" fill="currentColor"><path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.78 6.28-4.5 4.5a.75.75 0 0 1-1.06 0L4.22 8.78a.75.75 0 1 1 1.06-1.06L7 9.44l3.97-3.97a.75.75 0 1 1 1.06 1.06z"/></svg>
                Verified buyer
              </span>
              <span>·</span>
              <span>{{ block.settings.time_ago | default: '12 minutes ago' }}</span>
            </p>
          </div>
          {%- comment -%} Dismiss button injected by JS when dismissible {%- endcomment -%}
        </article>
      </template>
    {%- endif -%}
  {%- endfor -%}
</div>

<style>
  .modblo-sp { position: fixed; z-index: 70; pointer-events: none; }
  .modblo-sp[data-position="bl"] { left: 16px; bottom: 16px; }
  .modblo-sp[data-position="br"] { right: 16px; bottom: 16px; }
  .modblo-sp[data-position="tl"] { left: 16px; top: 16px; }
  .modblo-sp[data-position="tr"] { right: 16px; top: 16px; }

  .modblo-sp__toast {
    pointer-events: auto;
    display: flex; gap: 12px; align-items: center;
    width: min(360px, calc(100vw - 32px));
    padding: 12px 16px 12px 12px;
    background: var(--modblo-sp-bg, #fff); color: var(--modblo-sp-fg, #0b0b0c);
    border-radius: 14px;
    box-shadow: 0 12px 32px -12px rgba(0,0,0,.22), 0 0 0 1px color-mix(in oklab, var(--modblo-sp-fg) 6%, transparent);
    opacity: 0; transform: translateY(12px);
    transition: opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
    position: relative;
  }
  .modblo-sp[data-position^="t"] .modblo-sp__toast { transform: translateY(-12px); }
  .modblo-sp__toast.is-visible { opacity: 1; transform: translateY(0); }

  .modblo-sp__img, .modblo-sp__icon {
    width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; object-fit: cover;
    display: grid; place-items: center;
    background: color-mix(in oklab, var(--modblo-sp-fg) 6%, transparent);
    font-size: 20px;
  }
  .modblo-sp__body { min-width: 0; flex: 1; }
  .modblo-sp__line {
    margin: 0 0 3px; font-size: 13px; line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .modblo-sp__line a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
  .modblo-sp__line strong { font-weight: 600; }
  .modblo-sp__meta {
    margin: 0; font-size: 11px; opacity: .65;
    display: flex; align-items: center; gap: 6px;
  }
  .modblo-sp__verified { display: inline-flex; align-items: center; gap: 4px; color: var(--modblo-sp-accent, #16a34a); font-weight: 600; opacity: 1; }

  .modblo-sp__x {
    position: absolute; top: 6px; right: 6px;
    width: 22px; height: 22px; border-radius: 6px;
    background: transparent; border: 0; color: inherit; cursor: pointer;
    opacity: .35; font-size: 16px; line-height: 1;
  }
  .modblo-sp__x:hover { opacity: 1; }
</style>

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

    var STORAGE_KEY = 'cbSpDismissed-{{ section.id }}';
    if (root.dataset.dismissible === 'true' && sessionStorage.getItem(STORAGE_KEY) === '1') return;

    var templates = Array.from(root.querySelectorAll('[data-modblo-sp-tpl]'));
    if (templates.length === 0) return;

    var firstDelay = parseInt(root.dataset.delay, 10) * 1000;
    var displayMs = parseInt(root.dataset.display, 10) * 1000;
    var gapMs = parseInt(root.dataset.gap, 10) * 1000;
    var dismissible = root.dataset.dismissible === 'true';

    // Shuffle once for variety
    var order = templates.map(function (_, i) { return i; });
    for (var i = order.length - 1; i > 0; i--) {
      var j = Math.floor(Math.random() * (i + 1));
      var tmp = order[i]; order[i] = order[j]; order[j] = tmp;
    }
    var idx = 0;
    var current = null;

    function showNext() {
      var node = templates[order[idx]].content.firstElementChild.cloneNode(true);
      if (dismissible) {
        var x = document.createElement('button');
        x.type = 'button';
        x.className = 'modblo-sp__x';
        x.setAttribute('aria-label', 'Dismiss notifications');
        x.textContent = '×';
        x.addEventListener('click', function () {
          sessionStorage.setItem(STORAGE_KEY, '1');
          if (current) current.remove();
        });
        node.appendChild(x);
      }
      root.appendChild(node);
      // Trigger transition
      requestAnimationFrame(function () { node.classList.add('is-visible'); });
      current = node;

      setTimeout(function () {
        node.classList.remove('is-visible');
        setTimeout(function () { node.remove(); }, 400);
        current = null;
        idx = (idx + 1) % order.length;
        setTimeout(showNext, gapMs);
      }, displayMs);
    }

    setTimeout(showNext, firstDelay);
  })();
</script>
{%- endif -%}

{% schema %}
{
  "name": "Social Proof Feed",
  "tag": "section",
  "settings": [
    { "type": "header", "content": "Position & timing" },
    { "type": "select", "id": "position", "label": "Corner position", "default": "bl",
      "options": [
        { "value": "bl", "label": "Bottom-left" },
        { "value": "br", "label": "Bottom-right" },
        { "value": "tl", "label": "Top-left" },
        { "value": "tr", "label": "Top-right" }
      ]
    },
    { "type": "range", "id": "first_delay", "label": "First notification (s)", "min": 2, "max": 30, "step": 1, "default": 8 },
    { "type": "range", "id": "display_seconds", "label": "Display duration (s)", "min": 3, "max": 15, "step": 1, "default": 5 },
    { "type": "range", "id": "gap_seconds", "label": "Gap between (s)", "min": 5, "max": 60, "step": 1, "default": 10 },
    { "type": "checkbox", "id": "dismissible", "label": "Allow visitor to dismiss", "default": true },
    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "bg", "label": "Background", "default": "#ffffff" },
    { "type": "color", "id": "fg", "label": "Foreground", "default": "#0b0b0c" },
    { "type": "color", "id": "accent", "label": "Accent (verified badge)", "default": "#16a34a" }
  ],
  "blocks": [
    {
      "type": "notification",
      "name": "Notification",
      "settings": [
        { "type": "image_picker", "id": "image", "label": "Product image (optional)" },
        { "type": "text", "id": "icon", "label": "Icon fallback (emoji)", "default": "🛍" },
        { "type": "text", "id": "name", "label": "First name", "default": "Sarah" },
        { "type": "text", "id": "city", "label": "City", "default": "Brooklyn, NY" },
        { "type": "text", "id": "action", "label": "Action verb", "default": "just bought" },
        { "type": "text", "id": "product", "label": "Product name", "default": "Lumen Merino Crew" },
        { "type": "url", "id": "product_url", "label": "Product link" },
        { "type": "text", "id": "time_ago", "label": "Time-ago label", "default": "12 minutes ago" }
      ]
    }
  ],
  "presets": [{
    "name": "Social Proof Feed",
    "blocks": [
      { "type": "notification", "settings": { "name": "Sarah", "city": "Brooklyn, NY", "product": "Lumen Merino Crew", "time_ago": "8 minutes ago" } },
      { "type": "notification", "settings": { "name": "Marcus", "city": "Austin, TX", "product": "Cedar Beanie", "time_ago": "23 minutes ago" } },
      { "type": "notification", "settings": { "name": "Yuki", "city": "Portland, OR", "product": "Wool Socks", "time_ago": "1 hour ago" } },
      { "type": "notification", "settings": { "name": "Priya", "city": "Toronto, ON", "product": "Care Kit", "time_ago": "2 hours ago" } }
    ]
  }]
}
{% endschema %}