/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 17:42 Unexpected "("
Line 32:1 Expected identifier but found "%"
Line 34:0 Unexpected "<"
Line 64:3 Expected identifier but found "%"
Line 65:4 Unexpected "<"
Line 76:98 Unexpected "{"
Line 76:107 Expected ":"
Line 76:132 Unexpected "<"
... and 203 more hidden warnings

**/
{% comment %}
  Fundraiser Landing Section — MOKIPOPS (All-in-One)
  Features:
  - Urgency hero + highlight box
  - Countdown timer (end date/time in ISO-8601)
  - Goal meter with auto-sum from Top Supporters blocks
  - Pops-left counter
  - Donation buttons for $1, $5, $20, $100, $500, $1000 (variants on a single product)
  - Top Supporters carousel
  - Recent Supporter toast (social proof)

  Setup:
  1) Create a product with variants titled exactly: $1, $5, $20, $100, $500, $1000
  2) Select that product in this section’s settings.
  3) Set your goal and (optionally) manual raised amount.
  4) Add supporter blocks if you want to show names/amounts and auto-add to meter.
{% endcomment %}

<section class="mokifund relative mx-auto max-w-5xl px-6 py-12">
  <!-- URGENCY HERO -->
  <div class="text-center mb-8">
    <h1 class="text-3xl md:text-4xl font-extrabold" style="color:#dc2626;">⚡ 7 Days. 20,000 Pops. $1 Each. Let’s GO! ⚡</h1>
    <p class="text-base md:text-lg mt-4 max-w-2xl mx-auto" style="color:#1f2937;">
      The clock is ticking — help us sell 20,000 pops in just 7 days and keep the MOKIPOPS story alive and thriving.
    </p>
  </div>

  <!-- HIGHLIGHT BOX -->
  <div class="rounded-2xl p-6 mb-6 text-gray-900 text-center" style="background:#FFFBEB;border:1px solid #FDE68A;">
    <p class="mb-4">
      This isn’t just another sale — it’s our most exciting challenge yet!
      <strong>For one week only</strong>, grab your favorite MOKIPOPS for <strong>just $1 each</strong>.
      Every purchase pushes our fundraiser meter higher toward our <strong>$20,000 goal</strong>.
    </p>
    <p class="mb-4" style="color:#dc2626; font-weight:700;">
      Once the 7 days are up, this opportunity disappears — jump in now and be part of something BIG.
    </p>
    <ul class="list-disc list-inside text-left max-w-md mx-auto mb-4" style="color:#374151;">
      <li><strong>$1 = 1 Pop</strong> — No limits, buy as many as you want!</li>
      <li>Choose your impact: $1, $5, $20, $100, $500, or $1,000</li>
      <li>Pops for you, for friends, or donated to local causes</li>
    </ul>
    <p class="mb-0" style="color:#047857; font-weight:600;">
      Be the reason we hit our goal — click your amount below and watch the meter move. YOU make the difference.
    </p>
  </div>

  <!-- COUNTDOWN (optional) -->
  {% if section.settings.show_countdown and section.settings.end_datetime != blank %}
    <div id="mokifund-countdown" class="mb-6">
      <div class="text-center">
        <div class="inline-flex items-center gap-3 px-4 py-3 rounded-2xl" style="border:1px solid #fecaca;background:#FEF2F2;">
          <span class="text-sm font-semibold uppercase tracking-wide" style="color:#b91c1c;">Ends In</span>
          <div class="font-mono text-xl md:text-2xl" aria-live="polite">
            <span id="mokifund-d">--</span>d :
            <span id="mokifund-h">--</span>h :
            <span id="mokifund-m">--</span>m :
            <span id="mokifund-s">--</span>s
          </div>
        </div>
        <p id="mokifund-countdown-note" class="mt-2 text-xs" style="color:#4b5563;">Sale ends at {{ section.settings.end_datetime }}</p>
      </div>
    </div>
  {% endif %}

  {%- comment -%} Resolve donation product {%- endcomment -%}
  {%- assign donation_product = section.settings.product_handle -%}
  {%- unless donation_product %}
    {%- assign donation_product = all_products[section.settings.product_handle] -%}
  {%- endunless -%}

  <!-- GOAL METER -->
  <div class="mokifund-meter rounded-2xl p-6 mb-4" style="background:#F3F4F6;">
    {%- assign goal = section.settings.goal_amount | plus: 0 -%}
    {%- assign manual_raised = section.settings.current_raised | plus: 0 -%}

    {%- assign supporters_total = 0 -%}
    {%- for block in section.blocks -%}
      {%- if block.type == 'supporter' and block.settings.amount != blank -%}
        {%- assign supporters_total = supporters_total | plus: block.settings.amount -%}
      {%- endif -%}
    {%- endfor -%}

    {%- if section.settings.auto_sum_supporters -%}
      {%- assign raised = manual_raised | plus: supporters_total -%}
    {%- else -%}
      {%- assign raised = manual_raised -%}
    {%- endif -%}

    {%- assign clamped = raised -%}
    {%- if clamped < 0 -%}{% assign clamped = 0 %}{% endif -%}
    {%- if clamped > goal and goal > 0 -%}{% assign clamped = goal %}{% endif -%}
    {%- if goal > 0 -%}
      {%- assign pct = clamped | times: 100.0 | divided_by: goal -%}
    {%- else -%}
      {%- assign pct = 0 -%}
    {%- endif -%}

    <div class="flex items-center justify-between mb-2">
      <div class="text-sm font-medium" style="color:#374151;">
        Raised: <span id="mokifund-raised">${{ raised | round: 0 }}</span>
      </div>
      <div class="text-sm font-medium" style="color:#374151;">
        Goal: ${{ goal | round: 0 }}
      </div>
    </div>

    <div class="relative w-full h-5 rounded-full overflow-hidden" style="background:#FFFFFF;border:1px solid #E5E7EB;" aria-label="Fundraiser progress" role="progressbar" aria-valuemin="0" aria-valuemax="{{ goal }}" aria-valuenow="{{ clamped }}">
      <div id="mokifund-bar" class="h-full" style="width: {{ pct }}%; background: {{ section.settings.meter_color }};"></div>
    </div>

    <div class="mt-2 text-right text-xs" style="color:#6b7280;">
      <span id="mokifund-percent">{{ pct | round: 1 }}</span>% of goal
    </div>

    <!-- POPS LEFT -->
    <div class="mt-3 text-sm flex items-center justify-between" style="color:#1f2937;">
      {%- assign pops_goal = goal -%}
      {%- assign pops_raised = raised -%}
      {%- if pops_goal < 0 -%}{% assign pops_goal = 0 %}{% endif -%}
      {%- if pops_raised < 0 -%}{% assign pops_raised = 0 %}{% endif -%}
      {%- assign pops_left = pops_goal | minus: pops_raised -%}
      {%- if pops_left < 0 -%}{% assign pops_left = 0 %}{% endif -%}
      <div>
        <span class="font-semibold" id="mokifund-pops-left">{{ pops_left }}</span>
        <span>{% if pops_left == 1 %}pop left{% else %}pops left{% endif %}</span>
      </div>
      <div class="text-xs" style="color:#6b7280;">Goal: {{ pops_goal }} pops • Sold: {{ pops_raised }} pops</div>
    </div>
  </div>

  <!-- DONATION BUTTONS -->
  {% if donation_product %}
    <div class="mokifund-actions grid grid-cols-2 sm:grid-cols-3 gap-4 mb-10">
      {%- assign desired_titles = "$1,$5,$20,$100,$500,$1000" | split: "," -%}
      {%- for label in desired_titles -%}
        {%- assign v = nil -%}
        {%- for var in donation_product.variants -%}
          {%- if var.title == label -%}{% assign v = var %}{% break %}{% endif -%}
        {%- endfor -%}
        <form method="post" action="/cart/add" class="mokifund-card rounded-2xl p-4" style="border:1px solid #e5e7eb;background:#FFFFFF; display:flex; flex-direction:column; align-items:center; justify-content:space-between;">
          <div class="text-lg font-semibold mb-2">{{ label }}</div>
          <input type="hidden" name="id" value="{% if v %}{{ v.id }}{% endif %}">
          <button type="submit"
                  class="mokifund-btn"
                  style="width:100%; border-radius:0.75rem; padding:0.5rem 1rem; font-weight:600; color:#FFFFFF; background: {{ section.settings.button_color }};"
                  {% if v == nil or v.available == false %}disabled{% endif %}>
            {% if v %}
              Add {{ label }}
            {% else %}
              Set up {{ label }} variant
            {% endif %}
          </button>
          {% if v and v.available == false %}
            <div class="mt-2 text-xs" style="color:#dc2626;">Temporarily sold out</div>
          {% endif %}
        </form>
      {%- endfor -%}
    </div>
  {% else %}
    <div class="p-6 rounded-xl mb-8" style="background:#FFFBEB;border:1px solid #FDE68A; color:#92400e;">
      <strong>Heads up:</strong> Select the donation product in this section’s settings to enable the buttons.
    </div>
  {% endif %}

  {% if section.settings.show_notes %}
    <div class="mokifund-notes text-sm" style="color:#4b5563;">
      <ul class="list-disc pl-5 space-y-1">
        <li>All purchases count toward the goal.</li>
        <li>Buy for yourself or donate pops to a local cause.</li>
        <li>Share this page to help us hit the goal faster!</li>
      </ul>
    </div>
  {% endif %}

  <!-- TOP SUPPORTERS -->
  {% if section.settings.show_supporters and section.blocks.size > 0 %}
    <div class="mokifund-supporters mt-12">
      <h2 class="text-xl font-semibold mb-4" style="color:#111827;">Top Supporters</h2>

      <div class="relative overflow-hidden">
        <div class="mokifund-track" style="display:flex; gap:1rem; will-change:transform;">
          {% for block in section.blocks %}
            {% if block.type == 'supporter' %}
              {% assign big = block.settings.amount | plus: 0 %}
              <div class="shrink-0 w-64 rounded-2xl p-4" style="border:1px solid #e5e7eb; background:#FFFFFF;">
                <div class="text-base font-semibold">
                  {% if big >= 500 %}🏅 {% endif %}
                  {{ block.settings.display_name | default: 'Anonymous Supporter' }}
                </div>
                <div class="text-sm mt-1" style="color:#374151;">
                  Contributed <span class="font-medium">${{ big }}</span>
                </div>
                {% if block.settings.note != blank %}
                  <div class="text-xs mt-2 line-clamp-3" style="color:#6b7280;">{{ block.settings.note }}</div>
                {% endif %}
              </div>
            {% endif %}
          {% endfor %}
        </div>
      </div>
    </div>
  {% endif %}

  <!-- SOCIAL PROOF TOAST (data + container) -->
  {% if section.settings.show_toast %}
    <script type="application/json" id="mokifund-supporters-json">
    [
      {%- assign first = true -%}
      {%- for block in section.blocks -%}
        {%- if block.type == 'supporter' -%}
          {%- unless first -%},{%- endunless -%}
          {
            "name": {{ block.settings.display_name | json }},
            "amount": {{ block.settings.amount | plus: 0 }},
            "note": {{ block.settings.note | json }}
          }
          {%- assign first = false -%}
        {%- endif -%}
      {%- endfor -%}
    ]
    </script>

    <div id="mokifund-toast"
         class="fixed z-50 left-4 bottom-4 hidden"
         style="border:1px solid #e5e7eb; background:rgba(255,255,255,0.95); backdrop-filter:saturate(1.2) blur(4px); border-radius:1rem; box-shadow:0 10px 25px rgba(0,0,0,.08); padding:0.75rem 1rem; max-width:20rem;">
      <div class="text-sm" style="color:#111827;">
        <strong id="mokifund-toast-name"></strong>
        <span id="mokifund-toast-text"></span>
      </div>
    </div>
  {% endif %}
</section>

<style>
  .mokifund h1 { line-height: 1.2; }
  .mokifund .line-clamp-3 {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .mokifund-btn[disabled] { opacity: .55; cursor: not-allowed; }
</style>

<script>
  // Animate the progress bar on load
  document.addEventListener('DOMContentLoaded', function () {
    var bar = document.getElementById('mokifund-bar');
    if (bar) bar.style.transition = 'width 800ms ease';
  });

  // Countdown logic
  (function(){
    var iso = {{ section.settings.end_datetime | json }};
    var enableCountdown = {{ section.settings.show_countdown | json }};
    if (!enableCountdown || !iso) return;

    var dEl = document.getElementById('mokifund-d');
    var hEl = document.getElementById('mokifund-h');
    var mEl = document.getElementById('mokifund-m');
    var sEl = document.getElementById('mokifund-s');
    var note = document.getElementById('mokifund-countdown-note');
    var forms = document.querySelectorAll('.mokifund-actions form');
    var buttons = document.querySelectorAll('.mokifund-actions button');

    function pad(n){ return (n < 10 ? '0' : '') + n; }

    function tick(){
      var now = new Date();
      var end = new Date(iso); // ISO string, e.g. 2025-08-19T23:59:59-04:00
      var diff = end - now;

      if (isNaN(end.getTime())) {
        if (note) note.textContent = 'Invalid end date. Please check your settings.';
        return;
      }

      if (diff <= 0) {
        if (dEl) dEl.textContent = '00';
        if (hEl) hEl.textContent = '00';
        if (mEl) mEl.textContent = '00';
        if (sEl) sEl.textContent = '00';
        if (note) note.textContent = 'Campaign ended — thank you for your support!';

        buttons.forEach(function(b){ b.setAttribute('disabled','disabled'); b.textContent = 'Campaign Ended'; });
        forms.forEach(function(f){ f.setAttribute('aria-disabled','true'); });

        var bar = document.getElementById('mokifund-bar');
        if (bar) { bar.style.opacity = 0.4; }

        clearInterval(timer);
        return;
      }

      var totalSeconds = Math.floor(diff / 1000);
      var days = Math.floor(totalSeconds / 86400);
      var hrs  = Math.floor((totalSeconds % 86400) / 3600);
      var mins = Math.floor((totalSeconds % 3600) / 60);
      var secs = totalSeconds % 60;

      if (dEl) dEl.textContent = pad(days);
      if (hEl) hEl.textContent = pad(hrs);
      if (mEl) mEl.textContent = pad(mins);
      if (sEl) sEl.textContent = pad(secs);
    }

    var timer = setInterval(tick, 1000);
    tick();
  })();

  // Supporters carousel (auto-scroll, pause on hover)
  (function(){
    var track = document.querySelector('.mokifund-supporters .mokifund-track');
    if (!track) return;

    var wrapper = track.parentElement;
    var pos = 0;
    var paused = false;

    wrapper.addEventListener('mouseenter', function(){ paused = true; });
    wrapper.addEventListener('mouseleave', function(){ paused = false; });

    function loop(){
      if (!paused) {
        pos -= 0.5;
        track.style.transform = 'translateX(' + pos + 'px)';
        var first = track.children[0];
        if (first) {
          var firstRect = first.getBoundingClientRect();
          var wrapRect = wrapper.getBoundingClientRect();
          if (firstRect.right < wrapRect.left - 8) {
            track.appendChild(first);
            track.style.transform = 'translateX(0px)';
            pos = 0;
          }
        }
      }
      requestAnimationFrame(loop);
    }
    loop();
  })();

  // Recent Supporter toast
  (function(){
    var toastEnabled = {{ section.settings.show_toast | json }};
    if (!toastEnabled) return;

    var raw = document.getElementById('mokifund-supporters-json');
    if (!raw) return;

    var supporters = [];
    try { supporters = JSON.parse(raw.textContent || '[]'); } catch(e){ supporters=[]; }
    supporters = supporters.filter(function(s){ return s && Number(s.amount) > 0; });
    if (!supporters.length) return;

    var toast = document.getElementById('mokifund-toast');
    var nameEl = document.getElementById('mokifund-toast-name');
    var textEl = document.getElementById('mokifund-toast-text');

    var intervalSec = {{ section.settings.toast_interval_sec | default: 12 | json }};
    var showMs = {{ section.settings.toast_show_ms | default: 4800 | json }};
    var prefix = {{ section.settings.toast_prefix | json }} || 'just contributed';

    function pick(){ return supporters[Math.floor(Math.random() * supporters.length)]; }

    function currency(n){
      try { return new Intl.NumberFormat(undefined, { style:'currency', currency:'USD', maximumFractionDigits:0 }).format(n); }
      catch(e){ return '$' + Math.round(n); }
    }

    function showOnce(){
      var s = pick();
      if (!s) return;
      var displayName = (s.name && s.name.trim() !== '') ? s.name : 'Anonymous';
      nameEl.textContent = displayName + ' ';
      textEl.textContent = prefix + ' ' + currency(s.amount) + '!';
      toast.classList.remove('hidden');
      toast.style.opacity = '0';
      toast.style.transition = 'opacity 300ms ease, transform 300ms ease';
      toast.style.transform = 'translateY(8px)';
      requestAnimationFrame(function(){
        toast.style.opacity = '1';
        toast.style.transform = 'translateY(0)';
      });
      setTimeout(function(){
        toast.style.opacity = '0';
        toast.style.transform = 'translateY(8px)';
        setTimeout(function(){ toast.classList.add('hidden'); }, 300);
      }, showMs);
    }

    showOnce();
    setInterval(showOnce, intervalSec * 1000);
  })();
</script>

{% schema %}
{
  "name": "Fundraiser Landing (MOKIPOPS)",
  "settings": [
    {
      "type": "product",
      "id": "product_handle",
      "label": "Donation product (with $1/$5/$20/$100/$500/$1000 variants)"
    },
    {
      "type": "number",
      "id": "goal_amount",
      "label": "Goal amount (USD)",
      "default": 20000,
      "min": 0
    },
    {
      "type": "number",
      "id": "current_raised",
      "label": "Current raised (manual, USD)",
      "default": 0,
      "min": 0
    },
    {
      "type": "checkbox",
      "id": "auto_sum_supporters",
      "label": "Auto-add Top Supporters to meter",
      "default": true
    },
    {
      "type": "color",
      "id": "meter_color",
      "label": "Meter fill color",
      "default": "#10B981"
    },
    {
      "type": "color",
      "id": "button_color",
      "label": "Button color",
      "default": "#111827"
    },
    {
      "type": "checkbox",
      "id": "show_notes",
      "label": "Show helpful notes",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_countdown",
      "label": "Show countdown timer",
      "default": true
    },
    {
      "type": "text",
      "id": "end_datetime",
      "label": "End date & time (ISO-8601)",
      "default": "2025-08-19T23:59:59-04:00",
      "info": "Use ISO format, e.g. 2025-08-19T23:59:59-04:00 (ET)."
    },
    {
      "type": "checkbox",
      "id": "show_supporters",
      "label": "Show Top Supporters",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_toast",
      "label": "Show “Recent Supporter” toast",
      "default": true
    },
    {
      "type": "range",
      "id": "toast_interval_sec",
      "label": "Toast interval (seconds)",
      "min": 6,
      "max": 60,
      "step": 1,
      "default": 12
    },
    {
      "type": "range",
      "id": "toast_show_ms",
      "label": "Toast visible duration (ms)",
      "min": 2000,
      "max": 10000,
      "step": 100,
      "default": 4800
    },
    {
      "type": "text",
      "id": "toast_prefix",
      "label": "Toast text prefix",
      "default": "just contributed"
    }
  ],
  "blocks": [
    {
      "type": "supporter",
      "name": "Supporter",
      "settings": [
        { "type": "text", "id": "display_name", "label": "Name (or Anonymous)", "default": "Anonymous" },
        { "type": "number", "id": "amount", "label": "Amount (USD)", "default": 20, "min": 1 },
        { "type": "text", "id": "note", "label": "Note (optional)", "default": "" }
      ]
    }
  ],
  "presets": [
    { "name": "Fundraiser Landing (MOKIPOPS)", "category": "Custom" }
  ]
}
{% endschema %}