Popup System

{%- comment -%}
  modblo. Popup System
  Replaces Privy / OptiMonk / Justuno-style popup apps.
  Email capture with: scroll trigger, time delay, exit-intent (desktop),
  dismiss-with-memory (localStorage), success state, GDPR consent line.
  Posts to Shopify's customer endpoint, wires straight into your
  Klaviyo / Mailchimp / SMSBump flows via the customer create webhook.
{%- endcomment -%}

<div class="modblo-pop" data-modblo-pop
     data-section-id="{{ section.id }}"
     data-trigger="{{ section.settings.trigger }}"
     data-delay="{{ section.settings.delay_seconds }}"
     data-scroll="{{ section.settings.scroll_pct }}"
     data-frequency="{{ section.settings.frequency_days }}"
     style="--modblo-pop-bg: {{ section.settings.bg }};
            --modblo-pop-fg: {{ section.settings.fg }};
            --modblo-pop-accent: {{ section.settings.accent }};">
  <div class="modblo-pop__overlay" data-modblo-pop-close></div>

  <div class="modblo-pop__panel" role="dialog" aria-modal="true" aria-labelledby="modblo-pop-h-{{ section.id }}">
    <button type="button" class="modblo-pop__x" data-modblo-pop-close aria-label="Close popup">×</button>

    {%- if section.settings.image -%}
      <div class="modblo-pop__media">
        {{ section.settings.image | image_url: width: 600 | image_tag:
          loading: 'lazy', widths: '300,600', sizes: '(max-width:640px) 100vw, 320px',
          class: 'modblo-pop__img' }}
      </div>
    {%- endif -%}

    <div class="modblo-pop__body">
      <div class="modblo-pop__view modblo-pop__view--form" data-modblo-pop-view="form">
        {%- if section.settings.eyebrow != blank -%}
          <p class="modblo-pop__eyebrow">{{ section.settings.eyebrow }}</p>
        {%- endif -%}
        <h2 class="modblo-pop__h" id="modblo-pop-h-{{ section.id }}">{{ section.settings.heading }}</h2>
        <p class="modblo-pop__sub">{{ section.settings.subheading }}</p>

        <form class="modblo-pop__form" data-modblo-pop-form>
          <input type="hidden" name="form_type" value="customer">
          <input type="hidden" name="utf8" value="✓">
          <input type="hidden" name="contact[tags]" value="{{ section.settings.tag | default: 'popup-signup' }}">
          <input type="hidden" name="contact[accepts_marketing]" value="true">

          <div class="modblo-pop__field">
            <input
              type="email"
              name="contact[email]"
              placeholder="{{ section.settings.placeholder | default: 'Email address' }}"
              required
              aria-label="Email address"
            >
            <button type="submit" class="modblo-pop__submit">
              {{ section.settings.cta | default: 'Get the code' }}
            </button>
          </div>

          {%- if section.settings.consent_text != blank -%}
            <p class="modblo-pop__consent">{{ section.settings.consent_text }}</p>
          {%- endif -%}
        </form>

        <button type="button" class="modblo-pop__skip" data-modblo-pop-close>
          {{ section.settings.skip_label | default: 'No thanks' }}
        </button>
      </div>

      <div class="modblo-pop__view modblo-pop__view--success" data-modblo-pop-view="success" hidden>
        <div class="modblo-pop__check" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M20 6 9 17l-5-5"/>
          </svg>
        </div>
        <h2 class="modblo-pop__h">{{ section.settings.success_heading | default: 'You're in.' }}</h2>
        <p class="modblo-pop__sub">{{ section.settings.success_message | default: 'Check your inbox, your code is on the way.' }}</p>
        {%- if section.settings.success_code != blank -%}
          <div class="modblo-pop__code">
            <span>{{ section.settings.success_code }}</span>
            <button type="button" class="modblo-pop__copy" data-modblo-pop-copy="{{ section.settings.success_code }}">Copy</button>
          </div>
        {%- endif -%}
        <button type="button" class="modblo-pop__submit modblo-pop__submit--secondary" data-modblo-pop-close>
          Keep shopping
        </button>
      </div>
    </div>
  </div>
</div>

<style>
  .modblo-pop { position: fixed; inset: 0; z-index: 90; visibility: hidden; pointer-events: none; }
  .modblo-pop.is-open { visibility: visible; pointer-events: auto; }
  .modblo-pop__overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.55);
    opacity: 0; transition: opacity .3s ease;
  }
  .modblo-pop.is-open .modblo-pop__overlay { opacity: 1; }
  .modblo-pop__panel {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -45%) scale(.96);
    width: min(560px, calc(100% - 32px));
    max-height: calc(100vh - 32px); overflow-y: auto;
    background: var(--modblo-pop-bg, #fff); color: var(--modblo-pop-fg, #0b0b0c);
    border-radius: 20px;
    box-shadow: 0 32px 80px -24px rgba(0,0,0,.45);
    opacity: 0; transition: opacity .3s ease, transform .35s cubic-bezier(.16,1,.3,1);
    display: grid; grid-template-columns: 1fr;
  }
  .modblo-pop.is-open .modblo-pop__panel { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .modblo-pop__panel:has(.modblo-pop__media) { grid-template-columns: 240px 1fr; }

  .modblo-pop__media { background: color-mix(in oklab, var(--modblo-pop-fg) 6%, transparent); }
  .modblo-pop__img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .modblo-pop__body { padding: 36px 32px 28px; position: relative; }
  .modblo-pop__x {
    position: absolute; top: 12px; right: 12px;
    width: 32px; height: 32px; border-radius: 8px;
    background: transparent; border: 0; color: inherit; cursor: pointer;
    font-size: 22px; line-height: 1; opacity: .55;
    transition: opacity .2s, background .2s;
  }
  .modblo-pop__x:hover { opacity: 1; background: color-mix(in oklab, var(--modblo-pop-fg) 6%, transparent); }

  .modblo-pop__eyebrow {
    text-transform: uppercase; letter-spacing: .14em;
    font-size: 11px; font-weight: 700; color: var(--modblo-pop-accent, #6366f1); margin: 0 0 10px;
  }
  .modblo-pop__h { font-size: clamp(22px, 3vw, 28px); letter-spacing: -.02em; line-height: 1.15; margin: 0 0 10px; }
  .modblo-pop__sub { font-size: 14px; opacity: .7; margin: 0 0 22px; line-height: 1.5; }

  .modblo-pop__field { display: flex; gap: 8px; flex-wrap: wrap; }
  .modblo-pop__field input {
    flex: 1; min-width: 200px;
    padding: 12px 14px; font-size: 14px;
    background: color-mix(in oklab, var(--modblo-pop-fg) 4%, transparent);
    color: inherit; border: 1px solid color-mix(in oklab, var(--modblo-pop-fg) 14%, transparent);
    border-radius: 10px;
  }
  .modblo-pop__field input:focus { outline: none; border-color: var(--modblo-pop-accent, #6366f1); }

  .modblo-pop__submit {
    background: var(--modblo-pop-accent, #6366f1); color: #fff;
    border: 0; border-radius: 10px; padding: 12px 22px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: opacity .2s;
  }
  .modblo-pop__submit:hover { opacity: .92; }
  .modblo-pop__submit--secondary {
    background: color-mix(in oklab, var(--modblo-pop-fg) 6%, transparent);
    color: inherit; margin-top: 16px;
  }

  .modblo-pop__consent { font-size: 11px; opacity: .55; margin: 10px 0 0; line-height: 1.5; }
  .modblo-pop__skip {
    background: transparent; border: 0; color: inherit; opacity: .55;
    font-size: 12px; cursor: pointer; padding: 8px; margin-top: 14px;
    text-decoration: underline; text-underline-offset: 3px;
  }

  .modblo-pop__check {
    width: 64px; height: 64px; border-radius: 50%;
    background: color-mix(in oklab, var(--modblo-pop-accent, #6366f1) 12%, transparent);
    color: var(--modblo-pop-accent, #6366f1);
    display: grid; place-items: center; margin: 0 auto 16px;
  }
  .modblo-pop__view--success { text-align: center; }
  .modblo-pop__code {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin: 16px 0 0; padding: 12px 16px;
    background: color-mix(in oklab, var(--modblo-pop-fg) 5%, transparent);
    border-radius: 10px; font-family: ui-monospace, "SF Mono", monospace;
    font-size: 16px; font-weight: 700; letter-spacing: .08em;
  }
  .modblo-pop__copy { background: transparent; border: 0; color: var(--modblo-pop-accent, #6366f1); font-weight: 600; cursor: pointer; font-size: 12px; }

  @media (max-width: 640px) {
    .modblo-pop__panel { width: calc(100% - 16px); }
    .modblo-pop__panel:has(.modblo-pop__media) { grid-template-columns: 1fr; }
    .modblo-pop__media { max-height: 160px; }
    .modblo-pop__body { padding: 28px 22px 22px; }
  }
</style>

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

    var STORAGE_KEY = 'cbPop-{{ section.id }}';
    var freqDays = parseInt(pop.dataset.frequency, 10) || 7;
    var trigger = pop.dataset.trigger; // 'time' | 'scroll' | 'exit'
    var delay = parseInt(pop.dataset.delay, 10) || 6;
    var scrollPct = parseInt(pop.dataset.scroll, 10) || 40;

    function shouldShow() {
      var stored = localStorage.getItem(STORAGE_KEY);
      if (!stored) return true;
      var data = JSON.parse(stored);
      if (data.subscribed) return false;
      var elapsed = (Date.now() - data.dismissed) / (1000 * 60 * 60 * 24);
      return elapsed >= freqDays;
    }

    function open() {
      if (!shouldShow()) return;
      pop.classList.add('is-open');
      document.body.style.overflow = 'hidden';
    }
    function close() {
      pop.classList.remove('is-open');
      document.body.style.overflow = '';
      var existing = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
      localStorage.setItem(STORAGE_KEY, JSON.stringify({
        dismissed: Date.now(),
        subscribed: existing.subscribed || false,
      }));
    }

    pop.querySelectorAll('[data-modblo-pop-close]').forEach(function (el) {
      el.addEventListener('click', close);
    });
    document.addEventListener('keydown', function (e) {
      if (e.key === 'Escape' && pop.classList.contains('is-open')) close();
    });

    // Triggers
    if (trigger === 'time') {
      setTimeout(open, delay * 1000);
    } else if (trigger === 'scroll') {
      var fired = false;
      function onScroll() {
        if (fired) return;
        var max = document.documentElement.scrollHeight - window.innerHeight;
        if (max > 0 && (window.scrollY / max) * 100 >= scrollPct) {
          fired = true;
          open();
          window.removeEventListener('scroll', onScroll);
        }
      }
      window.addEventListener('scroll', onScroll, { passive: true });
    } else if (trigger === 'exit') {
      var fired = false;
      document.addEventListener('mouseout', function (e) {
        if (fired) return;
        if (e.clientY <= 0 && !e.relatedTarget) {
          fired = true;
          open();
        }
      });
      // Mobile fallback: time-based after 30s
      setTimeout(function () { if (!fired) { fired = true; open(); } }, 30000);
    }

    // Form submission
    var form = pop.querySelector('[data-modblo-pop-form]');
    if (form) {
      form.addEventListener('submit', function (e) {
        e.preventDefault();
        var fd = new FormData(form);
        var body = new URLSearchParams();
        fd.forEach(function (v, k) { body.append(k, v); });
        fetch('/contact', { method: 'POST', body: body, headers: { 'Accept': 'application/json' } })
          .then(function () {
            pop.querySelector('[data-modblo-pop-view="form"]').hidden = true;
            pop.querySelector('[data-modblo-pop-view="success"]').hidden = false;
            localStorage.setItem(STORAGE_KEY, JSON.stringify({
              dismissed: Date.now(), subscribed: true,
            }));
          });
      });
    }

    // Copy code
    var copyBtn = pop.querySelector('[data-modblo-pop-copy]');
    if (copyBtn) {
      copyBtn.addEventListener('click', function () {
        navigator.clipboard.writeText(copyBtn.dataset.cbPopCopy);
        copyBtn.textContent = 'Copied';
        setTimeout(function () { copyBtn.textContent = 'Copy'; }, 1500);
      });
    }
  })();
</script>

{% schema %}
{
  "name": "Popup System",
  "tag": "section",
  "settings": [
    { "type": "header", "content": "Trigger" },
    { "type": "select", "id": "trigger", "label": "Trigger type", "default": "time",
      "options": [
        { "value": "time", "label": "Time delay" },
        { "value": "scroll", "label": "Scroll depth" },
        { "value": "exit", "label": "Exit intent (desktop)" }
      ]
    },
    { "type": "range", "id": "delay_seconds", "label": "Time delay (seconds)", "min": 2, "max": 60, "step": 1, "default": 6,
      "info": "Used when trigger = Time delay." },
    { "type": "range", "id": "scroll_pct", "label": "Scroll depth (%)", "min": 10, "max": 90, "step": 5, "default": 40,
      "info": "Used when trigger = Scroll depth." },
    { "type": "range", "id": "frequency_days", "label": "Re-show after dismiss (days)", "min": 1, "max": 30, "step": 1, "default": 7 },
    { "type": "header", "content": "Content" },
    { "type": "image_picker", "id": "image", "label": "Image (optional)" },
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Members get more" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "10% off your first order." },
    { "type": "textarea", "id": "subheading", "label": "Subheading", "default": "Plus first dibs on new drops, restocks, and member-only sales." },
    { "type": "text", "id": "placeholder", "label": "Email placeholder", "default": "Email address" },
    { "type": "text", "id": "cta", "label": "Submit label", "default": "Get the code" },
    { "type": "text", "id": "skip_label", "label": "Skip label", "default": "No thanks" },
    { "type": "text", "id": "consent_text", "label": "Consent line",
      "default": "By subscribing you agree to receive marketing emails. Unsubscribe anytime." },
    { "type": "text", "id": "tag", "label": "Customer tag", "default": "popup-signup",
      "info": "Tag applied to created customer, use this in Klaviyo/Mailchimp segments." },
    { "type": "header", "content": "Success state" },
    { "type": "text", "id": "success_heading", "label": "Success heading", "default": "You're in." },
    { "type": "textarea", "id": "success_message", "label": "Success message",
      "default": "Check your inbox, your code is on the way." },
    { "type": "text", "id": "success_code", "label": "Success code (optional)",
      "info": "Show a discount code immediately. Leave blank to deliver via email instead." },
    { "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", "default": "#6366f1" }
  ],
  "presets": [{ "name": "Popup System" }]
}
{% endschema %}