(() => {
  // ====== Config (CA019 for ZIP 94104, Year 2026) ======
  const PAY_GRADES = [
    "E-1","E-2","E-3","E-4","E-5","E-6","E-7","E-8","E-9",
    "W-1","W-2","W-3","W-4","W-5","O1E","O2E","O3E",
    "O-1","O-2","O-3","O-4","O-5","O-6","O-7/O-7+"
  ];

  const RATES_2026_CA019 = {
    withDep: {
      "E-1":4764,"E-2":4764,"E-3":4764,"E-4":4764,"E-5":5127,"E-6":5454,"E-7":5490,"E-8":5529,"E-9":5799,
      "W-1":5472,"W-2":5505,"W-3":5559,"W-4":5892,"W-5":6297,
      "O1E":5493,"O2E":5547,"O3E":5955,
      "O-1":5172,"O-2":5451,"O-3":5556,"O-4":6444,"O-5":7089,"O-6":7155,"O-7/O-7+":7215
    },
    withoutDep: {
      "E-1":3573,"E-2":3573,"E-3":3573,"E-4":3573,"E-5":4086,"E-6":4443,"E-7":4782,"E-8":5196,"E-9":5286,
      "W-1":4644,"W-2":5193,"W-3":5301,"W-4":5454,"W-5":5496,
      "O1E":5124,"O2E":5268,"O3E":5445,
      "O-1":4401,"O-2":5007,"O-3":5331,"O-4":5481,"O-5":5499,"O-6":5532,"O-7/O-7+":5634
    }
  };

  // ====== Styles (tuned to your page) ======
  const css = `
    #sffs-bah { max-width: 640px; margin: 0 auto; font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:#334155; }
    #sffs-bah .card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 1px 2px rgba(0,0,0,.03); padding:20px; }
    #sffs-bah .title { font-size:20px; font-weight:700; margin:4px 0 12px; color:#111827; }
    #sffs-bah .sub { font-size:13px; color:#6b7280; margin-bottom:8px; }
    #sffs-bah .grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
    #sffs-bah label { display:block; font-size:14px; font-weight:600; margin:0 0 6px; color:#111827; }
    #sffs-bah select { width:100%; border:1px solid #e5e7eb; border-radius:10px; padding:10px 12px; font-size:16px; background:#fff; color:#111827; }
    #sffs-bah .seg { display:flex; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; }
    #sffs-bah .seg button { flex:1; padding:10px 12px; border:0; background:#f3f4f6; color:#4b5563; font-weight:600; cursor:pointer; }
    #sffs-bah .seg button.active { background:#ef4444; color:#fff; }
    #sffs-bah .amount-label { font-size:13px; color:#6b7280; margin-top:12px; }
    #sffs-bah .amount { font-size:34px; font-weight:800; color:#111827; margin-top:6px; }
    #sffs-bah .disclaimer { margin-top:8px; font-size:12px; color:#6b7280; }
    @media (max-width: 640px){ #sffs-bah .grid { grid-template-columns:1fr; } }
  `;

  function fmtUSD(n){ return "$" + Number(n || 0).toLocaleString(); }

  function render(el) {
    el.innerHTML = `
      <div class="card" role="group" aria-label="SFFS BAH Calculator">
        <div class="title">Basic Allowance for Housing (BAH)</div>
        <p class="sub">Duty Station: San Francisco, CA — MHA <strong>CA019</strong> (ZIP 94104). Year: <strong>2026</strong>.</p>

        <div class="grid">
          <div>
            <label for="pg">Pay Grade</label>
            <select id="pg" aria-label="Pay Grade">
              ${PAY_GRADES.map(pg => `<option value="${pg}">${pg}</option>`).join("")}
            </select>
          </div>
          <div>
            <label>Dependents</label>
            <div class="seg" role="tablist" aria-label="Dependents">
              <button id="dep-yes" type="button" role="tab" aria-selected="true" class="active">Yes</button>
              <button id="dep-no" type="button" role="tab" aria-selected="false">No</button>
            </div>
          </div>
        </div>

        <div class="amount-label">Monthly BAH</div>
        <div id="amt" class="amount">$0</div>
        <div class="disclaimer">
          *This calculator is for estimating BAH only, please contact the VA for your actual eligibility.
        </div>
      </div>
    `;

    const $pg = el.querySelector("#pg");
    const $yes = el.querySelector("#dep-yes");
    const $no = el.querySelector("#dep-no");
    const $amt = el.querySelector("#amt");

    let withDep = true;
    $pg.value = "E-1";

    function compute() {
      const table = withDep ? RATES_2026_CA019.withDep : RATES_2026_CA019.withoutDep;
      $amt.textContent = fmtUSD(table[$pg.value]);
    }

    function setDep(yes) {
      withDep = yes;
      $yes.classList.toggle("active", yes);
      $no.classList.toggle("active", !yes);
      $yes.setAttribute("aria-selected", String(yes));
      $no.setAttribute("aria-selected", String(!yes));
      compute();
    }

    $pg.addEventListener("change", compute);
    $yes.addEventListener("click", () => setDep(true));
    $no.addEventListener("click", () => setDep(false));

    compute();
  }

  const host = document.getElementById("sffs-bah");
  if (!host) return;

  const style = document.createElement("style");
  style.textContent = css;
  document.head.appendChild(style);

  render(host);
})();