<!-- Signature counter block -->
<div id="signature-counter" style="
  text-align:center;
  font-size:28px;
  font-weight:600;
  margin:20px 0 8px;
">
  Loading signatures…
</div>

<!-- Optional progress bar (you can delete this whole <div> if you don't want it) -->
<div style="
  max-width:420px;
  margin:0 auto 10px;
  height:10px;
  background:#eeeeee;
  border-radius:999px;
  overflow:hidden;
">
  <div id="signature-counter-bar" style="
    height:100%;
    width:0%;
    background:#00a3e0;
    transition:width 0.5s ease;
  "></div>
</div>

<script>
(function () {
  var counterEl = document.getElementById('signature-counter');
  if (!counterEl) return;

  // Build possible keys that might be used inside session.json
  function buildKeyCandidates() {
    var loc = window.location;
    var path = loc.pathname || "/";
    if (!path.endsWith("/")) path += "/";

    // With protocol
    var fullHttps = loc.protocol + "//" + loc.host + path;
    var fullHttp  = "http://" + loc.host + path;

    // Without protocol (in case the JSON key omits it)
    var noProto = loc.host + path;

    var candidates = [fullHttps, fullHttp, noProto];

    // Also versions without "www."
    if (loc.host.indexOf("www.") === 0) {
      var hostNoWww = loc.host.replace(/^www\./, "");
      candidates.push(
        loc.protocol + "//" + hostNoWww + path,
        "http://" + hostNoWww + path,
        hostNoWww + path
      );
    }

    return candidates;
  }

  var keyCandidates = buildKeyCandidates();

  function findConfig(data) {
    // Try all candidate keys
    for (var i = 0; i < keyCandidates.length; i++) {
      var k = keyCandidates[i];
      if (Object.prototype.hasOwnProperty.call(data, k)) {
        return data[k];
      }
    }
    // Fallback: if there's only one entry in session.json, just use that
    var keys = Object.keys(data || {});
    if (keys.length === 1) return data[keys[0]];
    return null;
  }

  fetch("/session.json?cb=" + Date.now(), { cache: "no-store" })
    .then(function (resp) {
      if (!resp.ok) throw new Error("session.json not found");
      return resp.json();
    })
    .then(function (data) {
      var cfg = findConfig(data);
      if (!cfg) throw new Error("No matching petition key in session.json");

      // Fields as per the tutorial: no_of_leads + total
      var count = Number(
        cfg.no_of_leads ||
        cfg.noofleads ||
        cfg.lead_count ||
        cfg.noOfLeads ||
        0
      );

      var goal = Number(
        cfg.total ||
        cfg.lead_goal ||
        cfg.goal ||
        cfg.total_signatures ||
        0
      );

      if (!isFinite(count) || count < 0) count = 0;
      if (!isFinite(goal) || goal < 0) goal = 0;

      if (goal > 0) {
        counterEl.textContent = count + " / " + goal + " signatures";
      } else {
        counterEl.textContent = count + " signatures";
      }

      // Update progress bar if present
      var barEl = document.getElementById("signature-counter-bar");
      if (barEl && goal > 0) {
        var pct = Math.max(0, Math.min(100, (count / goal) * 100));
        barEl.style.width = pct + "%";
      }
    })
    .catch(function (err) {
      console.error("Signature counter error:", err);
      counterEl.textContent = "Signature counter unavailable";
    });
})();
</script>