<!-- =============================================================
     MEALBOLT™ Bolus Calculator — Squarespace Drop‑in Snippet
     ---------------------------------------------------------
     HOW TO USE
       1. Copy everything in this file (⌘A → ⌘C).
       2. In Squarespace, add a **Code** block where you want the calculator.
       3. Paste (⌘V) and save. That’s it — no build tools or React needed.

     WHAT IT DOES
       • Collects meal + personal settings → runs MEALBOLT logic.
       • Persists ICR, CF, and Target BG in localStorage so visitors only
         enter them once.
       • Mobile‑friendly, minimal CSS, no external libraries required.

     NOTE  Squarespace limits inline <script> by default. When prompted,
           confirm you want to allow code injection for this block.
================================================================ -->

<style>
  /* ==== Basic styling – tweak to match your site ==== */
  #mealbolt-calculator {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    max-width: 600px;
    margin: 2rem auto;
    padding: 1.5rem;
    border: 1px solid #ddd;
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
  }
  #mealbolt-calculator h2 { margin-top: 1.5rem; }
  #mealbolt-calculator label { display:block; font-size: .875rem; margin-bottom: .25rem; }
  #mealbolt-calculator input {
    width: 100%;
    padding: .5rem .75rem;
    border: 1px solid #ccc;
    border-radius: .5rem;
    font-size: .875rem;
    margin-bottom: 1rem;
  }
  #mealbolt-calculator button {
    display: block;
    width: 100%;
    padding: .75rem 1rem;
    background:#0d9488; /* teal‑600 */
    color:#fff;
    font-weight: 600;
    border:none;
    border-radius:.5rem;
    cursor:pointer;
  }
  #mealbolt-calculator button:hover { background:#0f766e; }
  #mealbolt-result {
    background:#f9fafb;
    margin-top:1.5rem;
    padding:1rem 1.25rem;
    border-radius:.5rem;
    font-size:.9rem;
  }
  #mealbolt-result p { margin:.5rem 0; }
  #mealbolt-error { color:#dc2626; font-weight:600; }
</style>

<div id="mealbolt-calculator">
  <h1>MEALBOLT™ Bolus Calculator</h1>

  <label>Carbs (g)*
    <input type="number" id="mb-carbs" min="0" step="any" required>
  </label>
  <label>Fiber (g)
    <input type="number" id="mb-fiber" min="0" step="any" value="0">
  </label>
  <label>Fat (g)
    <input type="number" id="mb-fat" min="0" step="any" value="0">
  </label>
  <label>Starting BG (mg/dL)
    <input type="number" id="mb-bg" min="0" step="any">
  </label>
  <label>Target BG (mg/dL)
    <input type="number" id="mb-target" min="0" step="any" value="100">
  </label>
  <label>Insulin on Board (U)
    <input type="number" id="mb-iob" min="0" step="any" value="0">
  </label>
  <label>Insulin‑to‑Carb Ratio  (grams per U)*
    <input type="number" id="mb-icr" min="0" step="any" required>
  </label>
  <label>Correction Factor  (mg/dL per U)*
    <input type="number" id="mb-cf" min="0" step="any" required>
  </label>
  <button id="mb-calc">Calculate</button>

  <div id="mealbolt-result" style="display:none;"></div>
</div>

<script>
(function(){
  /* ---------- helpers ---------- */
  const $ = (id) => document.getElementById(id);
  const num = (v) => (v === "" ? 0 : parseFloat(v));

  /* ---------- persist profile ---------- */
  const stored = JSON.parse(localStorage.getItem("mealboltProfile") || "{}");
  if(stored.icr) $("mb-icr").value = stored.icr;
  if(stored.cf) $("mb-cf").value = stored.cf;
  if(stored.target) $("mb-target").value = stored.target;

  ["mb-icr","mb-cf","mb-target"].forEach((id)=>{
    $(id).addEventListener("change", () => {
      localStorage.setItem("mealboltProfile", JSON.stringify({
        icr: $("mb-icr").value,
        cf: $("mb-cf").value,
        target: $("mb-target").value,
      }));
    });
  });

  /* ---------- main compute ---------- */
  $("mb-calc").addEventListener("click", () => {
    const carbs   = num($("mb-carbs").value);
    const fiber   = num($("mb-fiber").value);
    const fat     = num($("mb-fat").value);
    const bg      = num($("mb-bg").value);
    const target  = num($("mb-target").value);
    const iob     = num($("mb-iob").value);
    const icr     = num($("mb-icr").value);
    const cf      = num($("mb-cf").value);

    const out = $("mealbolt-result");

    if(!carbs || !icr || !cf){
      out.innerHTML = `<p id="mealbolt-error">Please fill in at least: Carbs, ICR, and CF.</p>`;
      out.style.display = "block";
      return;
    }

    /* --- MEALBOLT maths --- */
    const netCarbs = Math.max(carbs - fiber, 0);
    const baseBolus = netCarbs / icr;
    const corrUnits = Math.max((bg - target) / cf, 0) - iob;
    const corrBolus = corrUnits > 0 ? corrUnits : 0;

    let upPct = 1, extPct = 0, duration = 0, prebolus = "15 min";
    if(fat > 15){
      upPct = 0.4; extPct = 0.6; duration = 4; prebolus = "Dose at first bite";
    } else if(fat >= 8){
      upPct = 0.7; extPct = 0.3; duration = 2; prebolus = "10 min";
    }

    const total = baseBolus + corrBolus;
    const upfront = total * upPct;
    const extended = total * extPct;

    /* --- render result --- */
    out.style.display = "block";
    out.innerHTML = corrBolus === null ? "" : `
      <h2>Bolus Recommendation</h2>
      <p><strong>Total Insulin:</strong> ${total.toFixed(2)} U</p>
      <p>Up‑front: <strong>${upfront.toFixed(2)} U</strong></p>
      ${extended > 0 ? `<p>Extended: <strong>${extended.toFixed(2)} U</strong> over ${duration} h</p>` : ``}
      <p><strong>Pre‑bolus:</strong> ${prebolus}</p>
      <hr>
      <p style="font-size:.8rem; color:#555;">(Base ${baseBolus.toFixed(2)} U + Correction ${corrBolus.toFixed(2)} U)</p>
    `;
  });
})();
</script>