@runwell/shopify-toolkit 0.23.0 → 0.24.0

package/modules/scratch-popup/assets/runwell-scratch-popup.js

@@ -0,0 +1,367 @@
+/* Runwell scratch popup. Mystery-discount email capture with foil scratch-to-reveal.
+
+   Flow (matches the live-vendor pattern: Knowband, Poptin, AppSetup, CI Scratch,
+   Triggerbee, Winify, Superpop):
+     1. SCRATCH    - foil card visible immediately; visitor scratches the foil.
+                     At ~60% erased, the discount AMOUNT (e.g. "10% off") is
+                     revealed. The actual code is NOT shown here.
+     2. EMAIL      - the card stays visible as a trophy. An email form appears
+                     below: "Where should we send your code?". Submit posts the
+                     email to Shopify's /contact endpoint in the background.
+     3. REVEALED   - the discount code is shown with Copy + Shop now (the CTA
+                     auto-applies the code via Shopify's /discount/CODE URL).
+
+   Suppression: 30 days via localStorage.runwell_scratch_seen.
+
+   Discount codes are pre-created on the store (via shopify-discount-create.sh).
+   No backend required: a tier is picked client-side (weighted random); the
+   matching code is bound to the email via Shopify's one-use-per-customer
+   discount setting at checkout. */
+(function () {
+  if (typeof window === 'undefined') return;
+
+  var KEY = 'runwell_scratch_seen';
+  var DAYS = 30;
+
+  var root = document.querySelector('[data-runwell-scratch]');
+  if (!root) return;
+
+  // ---------- Config from data attributes ----------
+  var tiers = [
+    {
+      code: root.dataset.tier1Code,
+      pct: parseInt(root.dataset.tier1Pct, 10),
+      prob: parseFloat(root.dataset.tier1Prob)
+    },
+    {
+      code: root.dataset.tier2Code,
+      pct: parseInt(root.dataset.tier2Pct, 10),
+      prob: parseFloat(root.dataset.tier2Prob)
+    },
+    {
+      code: root.dataset.tier3Code,
+      pct: parseInt(root.dataset.tier3Pct, 10),
+      prob: parseFloat(root.dataset.tier3Prob)
+    }
+  ].filter(function (t) { return t.code && t.pct > 0 && t.prob > 0; });
+
+  var triggerDelaySec = parseInt(root.dataset.triggerDelaySec, 10);
+  if (isNaN(triggerDelaySec)) triggerDelaySec = 8;
+  var exitIntentEnabled = root.dataset.exitIntent === 'true';
+  var thresholdPct = parseInt(root.dataset.scratchThresholdPct, 10);
+  if (isNaN(thresholdPct)) thresholdPct = 60;
+
+  // ---------- Session-suppression ----------
+  function seenRecently() {
+    try {
+      var v = localStorage.getItem(KEY);
+      if (!v) return false;
+      var ts = parseInt(v, 10);
+      if (isNaN(ts)) return false;
+      return (Date.now() - ts) < (DAYS * 24 * 60 * 60 * 1000);
+    } catch (e) { return false; }
+  }
+  function markSeen() {
+    try { localStorage.setItem(KEY, String(Date.now())); } catch (e) { /* ignore */ }
+  }
+
+  if (seenRecently()) return;
+
+  // ---------- Pick tier UP FRONT so the scratch reveal can show the amount ----------
+  function pickTier() {
+    var totalWeight = tiers.reduce(function (s, t) { return s + t.prob; }, 0);
+    if (totalWeight <= 0) return tiers[0];
+    var r = Math.random() * totalWeight;
+    var acc = 0;
+    for (var i = 0; i < tiers.length; i++) {
+      acc += tiers[i].prob;
+      if (r <= acc) return tiers[i];
+    }
+    return tiers[tiers.length - 1];
+  }
+  var selectedTier = tiers.length > 0 ? pickTier() : null;
+
+  // Stamp the discount amount into all "pct" placeholders so it's ready at scratch reveal.
+  if (selectedTier) {
+    var amountText = selectedTier.pct + '% off';
+    root.querySelectorAll('[data-runwell-scratch-pct], [data-runwell-scratch-pct-trophy], [data-runwell-scratch-pct-final]')
+      .forEach(function (el) { el.textContent = amountText; });
+  }
+
+  // ---------- Modal open / close ----------
+  function open() {
+    if (seenRecently()) return;
+    root.setAttribute('aria-hidden', 'false');
+    root.classList.add('is-open');
+    document.body.classList.add('runwell-scratch-open');
+    // Init canvas on open so the foil is ready to scratch.
+    initCanvas();
+  }
+  function close() {
+    root.setAttribute('aria-hidden', 'true');
+    root.classList.remove('is-open');
+    document.body.classList.remove('runwell-scratch-open');
+    markSeen();
+  }
+
+  // ---------- Step navigation ----------
+  function showStep(name) {
+    root.querySelectorAll('[data-runwell-scratch-step]').forEach(function (el) {
+      el.hidden = (el.getAttribute('data-runwell-scratch-step') !== name);
+    });
+  }
+
+  // ---------- Trigger ----------
+  var triggered = false;
+  function maybeOpen() {
+    if (triggered) return;
+    triggered = true;
+    open();
+  }
+  if (triggerDelaySec > 0) {
+    setTimeout(maybeOpen, triggerDelaySec * 1000);
+  } else {
+    maybeOpen();
+  }
+  if (exitIntentEnabled) {
+    document.addEventListener('mouseout', function (e) {
+      if (e.relatedTarget === null && e.clientY <= 0) maybeOpen();
+    });
+    if (window.matchMedia('(max-width: 749px)').matches) {
+      setTimeout(maybeOpen, 30000);
+    }
+  }
+
+  // ---------- Close handlers ----------
+  root.querySelectorAll('[data-runwell-scratch-close]').forEach(function (el) {
+    el.addEventListener('click', close);
+  });
+  document.addEventListener('keydown', function (e) {
+    if (e.key === 'Escape' && root.classList.contains('is-open')) close();
+  });
+
+  // ---------- Step 1: canvas scratch (visible immediately on open) ----------
+  var canvas = root.querySelector('[data-runwell-scratch-canvas]');
+  var ctx = null;
+  var canvasReady = false;
+  var isDrawing = false;
+  var threshold = thresholdPct / 100;
+  var checkTimer = null;
+  var scratchRevealed = false;
+
+  function initCanvas() {
+    if (canvasReady) return;
+    if (!canvas) { advanceToEmail(); return; }
+
+    // Set canvas pixel size to match its CSS size, accounting for DPR.
+    var rect = canvas.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) {
+      // Modal may not have painted yet; retry once.
+      setTimeout(initCanvas, 100);
+      return;
+    }
+    var dpr = window.devicePixelRatio || 1;
+    canvas.width = Math.max(1, Math.floor(rect.width * dpr));
+    canvas.height = Math.max(1, Math.floor(rect.height * dpr));
+
+    ctx = canvas.getContext('2d');
+    if (!ctx) { advanceToEmail(); return; }
+    ctx.scale(dpr, dpr);
+
+    // Foil color from CSS variable.
+    var foilColor = getComputedStyle(root).getPropertyValue('--runwell-scratch-foil').trim() || '#C8B89A';
+    ctx.fillStyle = foilColor;
+    ctx.fillRect(0, 0, rect.width, rect.height);
+
+    // Foil texture: subtle diagonal lines for a tactile look.
+    ctx.strokeStyle = 'rgba(0,0,0,0.07)';
+    ctx.lineWidth = 1;
+    for (var x = -rect.height; x < rect.width; x += 8) {
+      ctx.beginPath();
+      ctx.moveTo(x, 0);
+      ctx.lineTo(x + rect.height, rect.height);
+      ctx.stroke();
+    }
+
+    // Pointer + touch event handlers.
+    canvas.addEventListener('pointerdown', startDraw);
+    canvas.addEventListener('pointermove', draw);
+    canvas.addEventListener('pointerup', endDraw);
+    canvas.addEventListener('pointerleave', endDraw);
+    canvas.addEventListener('pointercancel', endDraw);
+    canvasReady = true;
+  }
+
+  function getPointerPos(e) {
+    var rect = canvas.getBoundingClientRect();
+    return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+  }
+
+  function startDraw(e) {
+    if (scratchRevealed) return;
+    e.preventDefault();
+    try { canvas.setPointerCapture(e.pointerId); } catch (err) {}
+    isDrawing = true;
+    var p = getPointerPos(e);
+    scratchAt(p.x, p.y, true);
+  }
+  function draw(e) {
+    if (!isDrawing || scratchRevealed) return;
+    e.preventDefault();
+    var p = getPointerPos(e);
+    scratchAt(p.x, p.y, false);
+  }
+  function endDraw(e) {
+    if (!isDrawing) return;
+    isDrawing = false;
+    try { canvas.releasePointerCapture(e.pointerId); } catch (err) {}
+  }
+
+  function scratchAt(x, y, isStart) {
+    if (!ctx) return;
+    ctx.globalCompositeOperation = 'destination-out';
+    ctx.beginPath();
+    ctx.arc(x, y, 26, 0, Math.PI * 2);
+    ctx.fill();
+    if (!isStart) scheduleCheck();
+  }
+
+  function scheduleCheck() {
+    if (checkTimer) return;
+    checkTimer = setTimeout(function () {
+      checkTimer = null;
+      if (revealedFractionAboveThreshold()) revealAmount();
+    }, 250);
+  }
+
+  function revealedFractionAboveThreshold() {
+    if (!ctx || !canvas.width || !canvas.height) return false;
+    var img = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    var data = img.data;
+    var sampleW = 40, sampleH = 30;
+    var step = Math.max(1, Math.floor(data.length / 4 / (sampleW * sampleH)));
+    var clear = 0, total = 0;
+    for (var i = 3; i < data.length; i += step * 4) {
+      total++;
+      if (data[i] === 0) clear++;
+    }
+    if (!total) return false;
+    return (clear / total) >= threshold;
+  }
+
+  // ---------- Scratch reveal -> animate to email step ----------
+  function revealAmount() {
+    if (scratchRevealed) return;
+    scratchRevealed = true;
+    var card = root.querySelector('.runwell-scratch__step--scratch .runwell-scratch__card');
+    if (card) card.classList.add('is-revealed');
+    setTimeout(advanceToEmail, 700);
+  }
+
+  function advanceToEmail() {
+    showStep('email');
+    // Focus the email field after step swap.
+    setTimeout(function () {
+      var inp = root.querySelector('[data-runwell-scratch-email]');
+      if (inp) inp.focus();
+    }, 200);
+  }
+
+  // Accessibility fallback: tap-to-reveal button bypasses scratch.
+  var a11yBtn = root.querySelector('[data-runwell-scratch-a11y-reveal]');
+  if (a11yBtn) a11yBtn.addEventListener('click', revealAmount);
+
+  // ---------- Step 2: email submit -> step 3 ----------
+  var emailInput = root.querySelector('[data-runwell-scratch-email]');
+  var emailSubmitBtn = root.querySelector('[data-runwell-scratch-email-submit]');
+  var tagsInput = root.querySelector('[data-runwell-scratch-tags]');
+
+  function submitEmail() {
+    var email = (emailInput.value || '').trim();
+    if (!email || !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) {
+      emailInput.focus();
+      emailInput.classList.add('is-invalid');
+      setTimeout(function () { emailInput.classList.remove('is-invalid'); }, 1200);
+      return;
+    }
+
+    // Background subscribe to Shopify Customers with the scratch-popup tag.
+    try {
+      var formData = new FormData();
+      formData.append('form_type', 'customer');
+      formData.append('utf8', '✓');
+      formData.append('contact[tags]', (tagsInput && tagsInput.getAttribute('value')) || 'newsletter, scratch-popup');
+      formData.append('contact[email]', email);
+      var contactUrl = (window.Shopify && window.Shopify.routes && window.Shopify.routes.root ? window.Shopify.routes.root : '/') + 'contact';
+      fetch(contactUrl, {
+        method: 'POST',
+        body: formData,
+        headers: { 'Accept': 'application/json' },
+        credentials: 'same-origin'
+      }).catch(function () { /* non-fatal */ });
+    } catch (e) { /* ignore */ }
+
+    showCode();
+  }
+
+  if (emailSubmitBtn) {
+    emailSubmitBtn.addEventListener('click', function (e) {
+      e.preventDefault();
+      submitEmail();
+    });
+  }
+  if (emailInput) {
+    emailInput.addEventListener('keydown', function (e) {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        submitEmail();
+      }
+    });
+  }
+
+  // ---------- Step 3: code revealed ----------
+  function showCode() {
+    if (!selectedTier) return;
+    var disp = root.querySelector('[data-runwell-scratch-code-display]');
+    if (disp) disp.textContent = selectedTier.code;
+
+    // Update Shop now CTA to auto-apply the discount via Shopify's
+    // /discount/CODE redirect, then carry the visitor to the configured URL.
+    var shopBtn = root.querySelector('[data-runwell-scratch-shop]');
+    if (shopBtn) {
+      var dest = shopBtn.getAttribute('href') || '/collections/all';
+      shopBtn.setAttribute('href', '/discount/' + selectedTier.code + '?redirect=' + encodeURIComponent(dest));
+    }
+
+    showStep('revealed');
+    markSeen();
+
+    // Auto-copy to clipboard.
+    try {
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(selectedTier.code).catch(function () {});
+      }
+    } catch (e) { /* ignore */ }
+  }
+
+  // Copy button.
+  var copyBtn = root.querySelector('[data-runwell-scratch-copy]');
+  if (copyBtn) {
+    copyBtn.addEventListener('click', function () {
+      if (!selectedTier) return;
+      var text = selectedTier.code;
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(text).catch(function () {});
+      } else {
+        var ta = document.createElement('textarea');
+        ta.value = text;
+        document.body.appendChild(ta);
+        ta.select();
+        try { document.execCommand('copy'); } catch (e) {}
+        document.body.removeChild(ta);
+      }
+      copyBtn.classList.add('is-copied');
+      copyBtn.textContent = 'Copied';
+    });
+  }
+})();

package/modules/scratch-popup/module.json

@@ -0,0 +1,128 @@
+{
+  "name": "scratch-popup",
+  "version": "0.1.0",
+  "status": "ready",
+  "category": "conversion",
+  "description": "Mystery-discount scratch popup. Email capture + foil-card scratch-to-reveal that unlocks a unique discount code per visitor. KH-validated alternative to spin-the-wheel.",
+  "files": {
+    "sections": [
+      "sections/runwell-scratch-popup.liquid"
+    ],
+    "assets": [
+      "assets/runwell-scratch-popup.js",
+      "assets/runwell-scratch-popup.css"
+    ]
+  },
+  "depends_on": {
+    "scopes": [
+      "write_discounts",
+      "read_discounts",
+      "write_customers",
+      "read_customers"
+    ]
+  },
+  "config": {
+    "schema": {
+      "enabled": {
+        "type": "boolean",
+        "default": false,
+        "label": "Enable scratch popup"
+      },
+      "triggers.first_visit_delay_sec": {
+        "type": "number",
+        "default": 8,
+        "label": "First-visit delay (seconds)"
+      },
+      "triggers.exit_intent": {
+        "type": "boolean",
+        "default": true,
+        "label": "Trigger on exit intent"
+      },
+      "triggers.manual_cta_selector": {
+        "type": "string",
+        "default": null,
+        "label": "Manual CTA selector (optional)"
+      },
+      "email_gate": {
+        "type": "boolean",
+        "default": true,
+        "label": "Require email before scratch"
+      },
+      "scratch_threshold_pct": {
+        "type": "number",
+        "default": 60,
+        "label": "Foil-erase percentage before auto-reveal"
+      },
+      "tiers": {
+        "type": "array",
+        "default": [
+          { "code_prefix": "MYSTERY10", "percentage": 10, "probability": 0.60 },
+          { "code_prefix": "MYSTERY15", "percentage": 15, "probability": 0.30 },
+          { "code_prefix": "MYSTERY20", "percentage": 20, "probability": 0.10 }
+        ],
+        "label": "Discount tiers + probability"
+      },
+      "expiry_days": {
+        "type": "number",
+        "default": 30,
+        "label": "Discount-code expiry"
+      },
+      "copy.heading": {
+        "type": "string",
+        "default": "Scratch to reveal your discount",
+        "label": "Modal heading"
+      },
+      "copy.subheading": {
+        "type": "string",
+        "default": "One scratch, one code, just for you.",
+        "label": "Modal subheading"
+      },
+      "copy.email_placeholder": {
+        "type": "string",
+        "default": "you@email.com",
+        "label": "Email field placeholder"
+      },
+      "copy.email_cta": {
+        "type": "string",
+        "default": "Continue",
+        "label": "Email CTA"
+      },
+      "copy.reveal_cta": {
+        "type": "string",
+        "default": "Shop now",
+        "label": "Post-reveal CTA"
+      },
+      "copy.post_reveal_subheading": {
+        "type": "string",
+        "default": "Code copied. Also sent to your inbox.",
+        "label": "Post-reveal subheading"
+      },
+      "design.foil_color": {
+        "type": "color",
+        "default": "#C8B89A",
+        "label": "Foil color"
+      },
+      "design.foil_texture_url": {
+        "type": "string",
+        "default": null,
+        "label": "Optional foil texture image URL"
+      },
+      "design.accent_color": {
+        "type": "color",
+        "default": "#5B7A3E",
+        "label": "Accent color"
+      },
+      "design.card_radius_px": {
+        "type": "number",
+        "default": 16,
+        "label": "Card corner radius (px)"
+      },
+      "klaviyo_list_id": {
+        "type": "string",
+        "default": null,
+        "label": "Klaviyo list ID (optional)"
+      }
+    }
+  },
+  "spec": "SPEC.md"
+}

package/modules/scratch-popup/sections/runwell-scratch-popup.liquid

@@ -0,0 +1,184 @@
+{%- comment -%}
+  Runwell scratch popup. Mystery-discount email capture with foil
+  scratch-to-reveal mechanic. KH-validated alternative to spin-the-wheel.
+
+  Discount codes are pre-created on the store via
+  `infrastructure/scripts/shopify/shopify-discount-create.sh`. Tier codes here
+  must match the codes created on the store side. Default codes:
+    MYSTERY10 (10% off, once-per-customer)
+    MYSTERY15 (15% off, once-per-customer)
+    MYSTERY20 (20% off, once-per-customer)
+{%- endcomment -%}
+{{ 'runwell-scratch-popup.css' | asset_url | stylesheet_tag }}
+
+<div
+  class="runwell-scratch"
+  data-runwell-scratch
+  data-tier1-code="{{ section.settings.tier1_code }}"
+  data-tier1-pct="{{ section.settings.tier1_pct }}"
+  data-tier1-prob="{{ section.settings.tier1_prob }}"
+  data-tier2-code="{{ section.settings.tier2_code }}"
+  data-tier2-pct="{{ section.settings.tier2_pct }}"
+  data-tier2-prob="{{ section.settings.tier2_prob }}"
+  data-tier3-code="{{ section.settings.tier3_code }}"
+  data-tier3-pct="{{ section.settings.tier3_pct }}"
+  data-tier3-prob="{{ section.settings.tier3_prob }}"
+  data-trigger-delay-sec="{{ section.settings.trigger_delay_sec }}"
+  data-exit-intent="{{ section.settings.exit_intent }}"
+  data-scratch-threshold-pct="{{ section.settings.scratch_threshold_pct }}"
+  style="--runwell-scratch-foil: {{ section.settings.foil_color }}; --runwell-scratch-accent: {{ section.settings.accent_color }};"
+  aria-hidden="true"
+  role="dialog"
+  aria-labelledby="runwell-scratch-title"
+>
+  <div class="runwell-scratch__backdrop" data-runwell-scratch-close></div>
+
+  <div class="runwell-scratch__panel">
+    <button class="runwell-scratch__close" type="button" data-runwell-scratch-close aria-label="Close">&times;</button>
+
+    {%- if section.settings.eyebrow != blank -%}
+      <p class="runwell-scratch__eyebrow">{{ section.settings.eyebrow }}</p>
+    {%- endif -%}
+
+    <h2 id="runwell-scratch-title" class="runwell-scratch__heading">{{ section.settings.heading }}</h2>
+
+    {%- if section.settings.subheading != blank -%}
+      <p class="runwell-scratch__subheading">{{ section.settings.subheading }}</p>
+    {%- endif -%}
+
+    {%- comment -%}
+      Flow (corrected 2026-05-11 after live-vendor research):
+        1. SCRATCH    - foil card visible immediately; visitor scratches it
+        2. EMAIL      - card stays as trophy; "Won X% off! Email me my code" form appears
+        3. REVEALED   - code shown with Copy + Shop now (auto-applies via cart URL)
+
+      The scratch is the dopamine hook that earns the email. Showing the email
+      field first kills the mechanic. Pattern matches Knowband, Poptin,
+      AppSetup, CI Scratch, Triggerbee, Winify, Superpop.
+    {%- endcomment -%}
+
+    {%- comment -%} STEP 1 (default visible): scratch surface {%- endcomment -%}
+    <div class="runwell-scratch__step runwell-scratch__step--scratch" data-runwell-scratch-step="scratch">
+      <div class="runwell-scratch__card">
+        <div class="runwell-scratch__reveal" data-runwell-scratch-reveal>
+          <p class="runwell-scratch__reveal-eyebrow">You won</p>
+          <p class="runwell-scratch__reveal-pct" data-runwell-scratch-pct>--%</p>
+          <p class="runwell-scratch__reveal-fineprint">off your order</p>
+        </div>
+        <canvas class="runwell-scratch__canvas" data-runwell-scratch-canvas></canvas>
+        <button
+          type="button"
+          class="runwell-scratch__a11y-reveal"
+          data-runwell-scratch-a11y-reveal
+          aria-label="Reveal discount (accessibility)"
+        >
+          Or tap to reveal
+        </button>
+      </div>
+      <p class="runwell-scratch__scratch-prompt">{{ section.settings.scratch_prompt }}</p>
+    </div>
+
+    {%- comment -%} STEP 2: email capture (after scratch reveals the discount amount) {%- endcomment -%}
+    <div class="runwell-scratch__step runwell-scratch__step--email" data-runwell-scratch-step="email" hidden>
+      <div class="runwell-scratch__card runwell-scratch__card--trophy" data-runwell-scratch-trophy>
+        <p class="runwell-scratch__reveal-eyebrow">You won</p>
+        <p class="runwell-scratch__reveal-pct" data-runwell-scratch-pct-trophy>--%</p>
+        <p class="runwell-scratch__reveal-fineprint">off your order</p>
+      </div>
+      <p class="runwell-scratch__email-prompt">{{ section.settings.email_prompt }}</p>
+      <div class="runwell-scratch__form" data-runwell-scratch-form>
+        <input type="hidden" data-runwell-scratch-tags value="newsletter, scratch-popup">
+        <label class="visually-hidden" for="runwell-scratch-email">Email</label>
+        <input
+          id="runwell-scratch-email"
+          type="email"
+          name="contact[email]"
+          placeholder="{{ section.settings.email_placeholder }}"
+          required
+          data-runwell-scratch-email
+        >
+        <button
+          type="button"
+          class="runwell-scratch__cta runwell-scratch__cta--email"
+          data-runwell-scratch-email-submit
+        >
+          {{ section.settings.email_cta_text }}
+        </button>
+      </div>
+      <p class="runwell-scratch__fineprint">No spam. One use per customer.</p>
+    </div>
+
+    {%- comment -%} STEP 3: code revealed + auto-apply CTA {%- endcomment -%}
+    <div class="runwell-scratch__step runwell-scratch__step--revealed" data-runwell-scratch-step="revealed" hidden>
+      <div class="runwell-scratch__card runwell-scratch__card--trophy">
+        <p class="runwell-scratch__reveal-eyebrow">You won</p>
+        <p class="runwell-scratch__reveal-pct" data-runwell-scratch-pct-final>--%</p>
+        <p class="runwell-scratch__reveal-fineprint">off your order</p>
+      </div>
+      <p class="runwell-scratch__revealed-heading">{{ section.settings.revealed_heading }}</p>
+      <div class="runwell-scratch__code-display">
+        <span data-runwell-scratch-code-display>------</span>
+        <button type="button" class="runwell-scratch__copy" data-runwell-scratch-copy aria-label="Copy code">Copy</button>
+      </div>
+      <a
+        href="{{ section.settings.reveal_cta_url | default: '/collections/all' }}"
+        class="runwell-scratch__cta runwell-scratch__cta--reveal"
+        data-runwell-scratch-shop
+      >
+        {{ section.settings.reveal_cta_text }}
+      </a>
+      <p class="runwell-scratch__fineprint">{{ section.settings.revealed_subheading }}</p>
+    </div>
+  </div>
+</div>
+
+<script src="{{ 'runwell-scratch-popup.js' | asset_url }}" defer="defer"></script>
+
+{% schema %}
+{
+  "name": "Runwell scratch popup",
+  "tag": "section",
+  "class": "section-runwell-scratch",
+  "settings": [
+    { "type": "header", "content": "Copy" },
+    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "A little surprise" },
+    { "type": "text", "id": "heading", "label": "Heading", "default": "Scratch to reveal your discount" },
+    { "type": "textarea", "id": "subheading", "label": "Subheading", "default": "Scratch the foil card below to see how much you saved." },
+    { "type": "text", "id": "scratch_prompt", "label": "Scratch prompt (under the card)", "default": "Drag or tap to scratch" },
+    { "type": "text", "id": "email_prompt", "label": "Email prompt (after scratch)", "default": "Where should we send your code?" },
+    { "type": "text", "id": "email_placeholder", "label": "Email placeholder", "default": "you@email.com" },
+    { "type": "text", "id": "email_cta_text", "label": "Email CTA", "default": "Email me my code" },
+    { "type": "text", "id": "revealed_heading", "label": "Revealed heading", "default": "Here is your code." },
+    { "type": "textarea", "id": "revealed_subheading", "label": "Revealed fineprint", "default": "Copied and sent to your inbox. One use per customer. Auto-applies at checkout." },
+    { "type": "text", "id": "reveal_cta_text", "label": "Revealed CTA", "default": "Shop now" },
+    { "type": "url", "id": "reveal_cta_url", "label": "Revealed CTA URL (discount auto-appends)" },
+
+    { "type": "header", "content": "Tier 1 (most likely)" },
+    { "type": "text", "id": "tier1_code", "label": "Code (must exist as Shopify discount)", "default": "MYSTERY10" },
+    { "type": "range", "id": "tier1_pct", "label": "Percentage off", "min": 1, "max": 50, "step": 1, "default": 10 },
+    { "type": "range", "id": "tier1_prob", "label": "Probability (%)", "min": 0, "max": 100, "step": 5, "default": 60 },
+
+    { "type": "header", "content": "Tier 2 (mid)" },
+    { "type": "text", "id": "tier2_code", "label": "Code", "default": "MYSTERY15" },
+    { "type": "range", "id": "tier2_pct", "label": "Percentage off", "min": 1, "max": 50, "step": 1, "default": 15 },
+    { "type": "range", "id": "tier2_prob", "label": "Probability (%)", "min": 0, "max": 100, "step": 5, "default": 30 },
+
+    { "type": "header", "content": "Tier 3 (rare)" },
+    { "type": "text", "id": "tier3_code", "label": "Code", "default": "MYSTERY20" },
+    { "type": "range", "id": "tier3_pct", "label": "Percentage off", "min": 1, "max": 50, "step": 1, "default": 20 },
+    { "type": "range", "id": "tier3_prob", "label": "Probability (%)", "min": 0, "max": 100, "step": 5, "default": 10 },
+
+    { "type": "header", "content": "Triggers" },
+    { "type": "range", "id": "trigger_delay_sec", "label": "First-visit delay (seconds)", "min": 0, "max": 60, "step": 1, "default": 8 },
+    { "type": "checkbox", "id": "exit_intent", "label": "Also trigger on exit intent", "default": true },
+    { "type": "range", "id": "scratch_threshold_pct", "label": "Foil-erase % before auto-reveal", "min": 30, "max": 90, "step": 5, "default": 60 },
+
+    { "type": "header", "content": "Design" },
+    { "type": "color", "id": "foil_color", "label": "Foil color", "default": "#C8B89A" },
+    { "type": "color", "id": "accent_color", "label": "Accent color", "default": "#5B7A3E" }
+  ],
+  "presets": [
+    { "name": "Runwell scratch popup" }
+  ]
+}
+{% endschema %}