/* eslint-disable */
/* © 2026 K2B NETWORK SOLUTIONS LLC. All rights reserved.
   Proprietary and confidential. Unauthorized copying, distribution, or use of
   this file, via any medium, is strictly prohibited. Original work product. */
// K2B Network Solutions — Missouri Title Application (TITLE-MO).
// Faithful recreation of Missouri DOR Form 108 — Application for Missouri
// Title and License. Used by Title Clerks after a deal is funded.

const mo$ = (n) => "$" + (n || 0).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });

// Tiny field atoms styled like a paper DOR form
const MOFBox = ({ label, value, set, w = "100%", hot, mono = true, num }) => (
  <label style={{ display: "flex", flexDirection: "column", border: "1px solid #000",
                  fontFamily: "var(--font-ui)", fontSize: 9, color: "#000",
                  background: "#FFFFFF", boxSizing: "border-box" }}>
    <span style={{ padding: "1px 4px", borderBottom: "1px solid #000", background: "#F0F0F0",
                   fontWeight: 700, letterSpacing: "0.02em" }}>{label}</span>
    <input
      value={value}
      onChange={(e) => set && set(e.target.value)}
      readOnly={!set}
      title={!set ? "Computed — not editable" : undefined}
      style={{
        // Read-only (computed) boxes are visibly dim so they never look like
        // fields that silently discard input (P2-3).
        background: !set ? "#EEEEEE" : hot ? "var(--k2b-yellow)" : "#FFFFFF",
        border: "none", padding: "2px 4px",
        color: !set ? "#555" : "var(--k2b-navy)", cursor: !set ? "default" : "text",
        fontFamily: mono ? "'Courier Prime', monospace" : "var(--font-ui)",
        fontSize: 13, fontWeight: mono ? 700 : 400,
        width: w, textAlign: num ? "right" : "left",
      }}
    />
  </label>
);

const MOCheckBox = ({ label, on, set, inline }) => (
  <label style={{ display: "inline-flex", alignItems: "center", gap: 4, fontSize: 11,
                   fontFamily: "var(--font-ui)", marginRight: inline ? 12 : 0 }}>
    <span onClick={() => set && set(!on)}
          style={{ width: 14, height: 14, border: "1px solid #000", display: "inline-flex",
                    alignItems: "center", justifyContent: "center", background: "#FFFFFF",
                    fontWeight: 700, cursor: "pointer", fontFamily: "'Courier Prime', monospace" }}>
      {on ? "X" : ""}
    </span>
    <span>{label}</span>
  </label>
);

// ── Active-deal context for title work ─────────────────────────────
// Desking keeps the shared Buyer's Order draft updated (dealType, lender and
// the auto-selected titling entity). GMF rule:
//   LEASE   → vehicle is TITLED TO the lessor, ACAR Leasing Ltd. d/b/a
//             GM Financial Leasing — the customer (lessee) is the registrant.
//   FINANCE → the customer is the owner; AmeriCredit Financial Services, Inc.
//             d/b/a GM Financial is recorded as lienholder.
// Blank-safe: with no deal on file the demo defaults below stand, and every
// field stays hand-editable either way.
const moDealCtx = () => {
  let bo = {};
  try { bo = (window.loadJbForm && window.loadJbForm("buyersOrder")) || {}; } catch (e) { bo = {}; }
  const isLease = /lease/i.test(String(bo.dealType || ""));
  let ent = (bo.lienholder && bo.lienholder.name) ? bo.lienholder : null;
  if (!ent) {
    try {
      ent = (window.jbLenders && window.jbLenders.lienholderFor)
        ? window.jbLenders.lienholderFor(bo.lender || "", isLease ? "Lease" : "Retail") : null;
    } catch (e) { ent = null; }
  }
  // The linked DMS deal (when the desk / F&I linked one) — vehicle, VIN and
  // figures come from it first, then the Buyer's Order draft, else BLANK.
  let deal = null;
  try {
    const id = localStorage.getItem("jb_fw_deal") || (window.jbDeskDeal && window.jbDeskDeal.id) || null;
    deal = (id && window.DMS && window.DMS.deals) ? (window.DMS.deals().find(x => x.id === id) || null) : null;
  } catch (e) { deal = null; }
  let unit = null;
  try { unit = (deal && deal.stock && window.DMS && window.DMS._unit) ? window.DMS._unit(deal.stock) : null; } catch (e) { unit = null; }
  return { bo, deal, unit, isLease, ent, hasDeal: !!(bo.dealType || bo.lastName || bo.vin || deal) };
};
const moUp = (s) => String(s || "").toUpperCase();
const moNum = (v) => { const n = parseFloat(String(v ?? "").replace(/[^0-9.\-]/g, "")); return isNaN(n) ? 0 : n; };
// "2026 CHEV TRAVERSE LT AWD" → { year, make, model }
const moSplitYmm = (s) => {
  const p = String(s || "").trim().split(/\s+/).filter(Boolean);
  if (!p.length) return { year: "", make: "", model: "" };
  const year = /^\d{4}$/.test(p[0]) ? p.shift() : "";
  const make = p.shift() || "";
  return { year, make, model: p.join(" ") };
};

const TitleAppMO = ({ onClose, go }) => {
  // Active deal (lease/finance + titling entity) — captured once on open.
  const [D] = React.useState(moDealCtx);
  const BO = D.bo;
  const DL = D.deal || {}, U = D.unit || {};
  const ymm = moSplitYmm(BO.yrMkMdl || DL.vehicle || (U.yr ? `${U.yr} ${U.mk} ${U.mdl}` : ""));
  // VIN / vehicle — from the deal context only; BLANK when absent (B-05).
  // No hard-coded VIN / vehicle / prices / plate ever reach this legal form.
  const [vin, setVin]         = React.useState(() => moUp(BO.vin || DL.vin || U.vin || ""));
  const [year, setYear]       = React.useState(() => String(U.yr || ymm.year || ""));
  const [make, setMake]       = React.useState(() => moUp(U.mk || ymm.make || ""));
  const [model, setModel]     = React.useState(() => moUp(U.mdl || ymm.model || ""));
  const [body, setBody]       = React.useState(() => moUp(BO.body || U.body || ""));
  const [color, setColor]     = React.useState(() => moUp(BO.color || U.color || ""));
  const [odo, setOdo]         = React.useState(() => String(BO.odometer || U.miles || ""));
  const [odoStatus, setOdoStatus] = React.useState("actual"); // actual / exempt / inexcess
  const [titleNo, setTitleNo] = React.useState("");
  const [prevTitleNo, setPrevTitleNo] = React.useState("");
  const [prevState, setPrevState]     = React.useState("");

  // Owners — on a GMF LEASE the OWNER is the lessor entity (ACAR Leasing Ltd.)
  // and the customer goes in as lessee/registrant (Owner 2 + note line below).
  const [o1, setO1] = React.useState(() =>
    D.isLease && D.ent
      ? { last: moUp(D.ent.name), first: "", mi: "", dob: "", ssn: "", dl: "" }
      : (BO.lastName || BO.firstName)
        ? { last: moUp(BO.lastName), first: moUp(BO.firstName), mi: moUp(BO.middle), dob: "", ssn: "", dl: moUp(BO.dlNum) }
        : (DL.buyer
          ? (() => { const nm = String(DL.buyer); const [ln, fn] = nm.includes(",") ? nm.split(",").map(x => x.trim()) : [nm.split(" ").slice(-1)[0], nm.split(" ").slice(0, -1).join(" ")];
              return { last: moUp(ln), first: moUp(fn), mi: "", dob: "", ssn: "", dl: "" }; })()
          : { last: "", first: "", mi: "", dob: "", ssn: "", dl: "" }));
  const [o2, setO2] = React.useState(() =>
    D.isLease && D.ent && (BO.lastName || BO.firstName)
      ? { last: moUp(BO.lastName), first: moUp(BO.firstName), mi: moUp(BO.middle), dob: "", ssn: "", dl: moUp(BO.dlNum) }
      : { last: "", first: "", mi: "", dob: "", ssn: "", dl: "" });
  const [andOr, setAndOr] = React.useState(() => D.isLease && D.ent ? "NONE" : "AND");
  // Lease note — spells out lessee/registrant since the DOR-108 grid only has
  // owner slots. Editable like every other box.
  const [leaseNote, setLeaseNote] = React.useState(() => D.isLease && D.ent
    ? `LEASE — TITLED TO LESSOR; LESSEE/REGISTRANT: ${moUp([BO.firstName, BO.lastName].filter(Boolean).join(" ")) || "(CUSTOMER)"}`
    : "");

  // Address — lessor's titling address on a lease; customer's otherwise.
  // Customer address: Buyer's Order first, then the deal record; blank otherwise.
  const custStreet = BO.street || DL.street || "", custCity = BO.city || DL.city || "";
  const custState = BO.state || DL.state || "", custZip = BO.zip || DL.zip || DL.postal || "";
  const [addr, setAddr]   = React.useState(() => D.isLease && D.ent ? moUp(D.ent.address) : moUp(custStreet));
  const [city, setCity]   = React.useState(() => D.isLease && D.ent ? moUp(D.ent.city) : moUp(custCity));
  const [county, setCounty] = React.useState("");
  const [state, setState] = React.useState(() => D.isLease && D.ent ? moUp(D.ent.state) : moUp(custState || (custStreet ? "MO" : "")));
  const [zip, setZip]     = React.useState(() => D.isLease && D.ent ? moUp(D.ent.zip) : moUp(custZip));

  // Lien — FINANCE: lienholder is the retail entity (AmeriCredit d/b/a GM
  // Financial). LEASE: no separate lien; the lessor above holds title.
  // Blank (no lien) when nothing on the deal says who the lender is.
  const finEnt = !D.isLease ? D.ent : null;
  const lenderName = BO.lender || DL.lender || "";
  const [lienOn, setLienOn] = React.useState(() => !D.isLease && !!(finEnt || lenderName));
  const [lienHolder, setLienHolder] = React.useState(() => D.isLease && D.ent ? "" : finEnt ? moUp(finEnt.name) : moUp(lenderName));
  const [lienAddr,   setLienAddr]   = React.useState(() => D.isLease && D.ent ? "" : finEnt ? moUp(finEnt.address) : "");
  const [lienCity,   setLienCity]   = React.useState(() => D.isLease && D.ent ? "" : finEnt ? moUp([[finEnt.city, finEnt.state].filter(Boolean).join(", "), finEnt.zip].filter(Boolean).join(" ")) : "");
  const [lienDate,   setLienDate]   = React.useState(() => new Date().toLocaleDateString("en-US"));

  // Purchase / sales tax — from the Buyer's Order / deal; 0 when absent.
  const [purchDate, setPurchDate]   = React.useState(() => new Date().toLocaleDateString("en-US"));
  const [purchPrice, setPurchPrice] = React.useState(() => moNum(BO.salePrice) || +DL.salePrice || 0);
  const [tradeAllow, setTradeAllow] = React.useState(() => moNum(BO.tradeAllow) || +DL.tradeAllow || 0);
  const [rebate, setRebate]         = React.useState(() => moNum(BO.rebate) || +DL.rebate || 0);
  // MO state rate (RSMo § 144.020) — the local rate depends on the buyer's
  // address and is entered per deal.
  const [stateRate, setStateRate]   = React.useState(4.225);
  const [localRate, setLocalRate]   = React.useState(0);

  // Plate — nothing assumed; the title clerk picks the action and keys the plate.
  const [plateAction, setPlateAction] = React.useState("new"); // new / transfer / personalized
  const [plate, setPlate]             = React.useState("");

  // Tax/Fee derived (per MO DOR § 144.069)
  const taxableSale = Math.max(0, purchPrice - tradeAllow - rebate);
  const stateTax = taxableSale * (stateRate / 100);
  const localTax = taxableSale * (localRate / 100);
  const titleFee = 8.50;
  const processFee = 6.00;
  const regFee = 51.25;
  const total = stateTax + localTax + titleFee + processFee + regFee;

  return (
    <div className="k2b-window" style={{ width: "100%", maxWidth: 1220, height: 760, margin: "0 auto", background: "#C0C0C0" }}>
      <K2BTitlebar title="TITLE-MO - Application for Missouri Title and License (DOR-108)"
                    onClose={onClose} onMin={() => {}} onMax={() => {}} />

      <div style={{ flex: 1, padding: "8px 12px", background: "#C0C0C0",
                    display: "flex", flexDirection: "column", gap: 8, minHeight: 0 }}>

        {/* top action strip */}
        <div style={{ display: "flex", alignItems: "center", gap: 8, fontFamily: "'Courier Prime', monospace", fontSize: 13 }}>
          <span style={{ color: "var(--k2b-maroon)", fontWeight: 700 }}>Form...:</span>
          <span style={{ background: "#FFFFE1", border: "1px solid #808080", padding: "0 6px", color: "var(--k2b-blue-data-dk)" }}>DOR-108 (Rev 02-2024)</span>
          <span style={{ color: "var(--k2b-maroon)", fontWeight: 700 }}>Deal..:</span>
          <span className="k2b-active-field" style={{ width: 110 }}>{DL.id || BO.orderNum || "—"}</span>
          <span style={{ color: "var(--k2b-maroon)", fontWeight: 700 }}>Dealer.:</span>
          <span style={{ background: "#FFFFE1", border: "1px solid #808080", padding: "0 6px", color: "var(--k2b-blue-data-dk)" }}>{"D" + ((window.K2BStore && window.K2BStore.pageId()) || "") + " — " + K2BPrint.party.print()}</span>
          <div style={{ flex: 1 }} />
          <span style={{ color: "var(--k2b-green)", fontWeight: 700 }}>● MO DOR ELT ready</span>
        </div>

        {/* The paper form */}
        <div style={{ background: "#FFFFFF", border: "1px solid #000",
                       padding: 12, overflow: "auto", flex: 1, minHeight: 0,
                       fontFamily: "var(--font-ui)" }}>
          {/* Form heading — DOR style */}
          <div style={{ borderBottom: "2px solid #000", paddingBottom: 6, marginBottom: 8,
                         display: "grid", gridTemplateColumns: "120px 1fr 200px", gap: 8, alignItems: "center" }}>
            <div style={{ border: "1px solid #000", padding: "6px 10px", textAlign: "center", fontWeight: 700, color: "#000" }}>
              <div style={{ fontSize: 11 }}>MISSOURI DEPARTMENT<br />OF REVENUE</div>
            </div>
            <div style={{ textAlign: "center" }}>
              <div style={{ fontSize: 17, fontWeight: 700, letterSpacing: "0.04em", color: "#000" }}>
                APPLICATION FOR MISSOURI TITLE AND LICENSE
              </div>
              <div style={{ fontSize: 11, color: "#000" }}>Form 108 (Revised 02-2024) — Title Office Use</div>
            </div>
            <div style={{ border: "1px solid #000", padding: "4px 6px", fontSize: 10, color: "#000" }}>
              <div>OFFICE USE ONLY</div>
              <div>Stamp / Cert. No.:</div>
              <div style={{ height: 22 }} />
            </div>
          </div>

          {/* Section 1 — Vehicle */}
          <MOSectionHead n="1" title="VEHICLE INFORMATION" />
          <div style={{ display: "grid", gridTemplateColumns: "2.2fr 0.7fr 0.9fr 1.4fr 0.6fr", gap: 6 }}>
            <MOFBox label="VEHICLE IDENTIFICATION NUMBER (VIN)" value={vin} set={setVin} hot />
            <MOFBox label="YEAR"  value={year}  set={setYear} />
            <MOFBox label="MAKE"  value={make}  set={setMake} />
            <MOFBox label="MODEL" value={model} set={setModel} />
            <MOFBox label="BODY" value={body} set={setBody} />
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1.4fr 1fr 1.6fr", gap: 6, marginTop: 6 }}>
            <MOFBox label="COLOR" value={color} set={setColor} />
            <MOFBox label="ODOMETER" value={odo} set={setOdo} num />
            <div style={{ border: "1px solid #000", padding: "2px 6px", background: "#FFFFFF" }}>
              <div style={{ fontSize: 9, fontWeight: 700, background: "#F0F0F0", borderBottom: "1px solid #000", margin: "-2px -6px 4px", padding: "1px 6px" }}>ODOMETER STATUS</div>
              <MOCheckBox label="Actual"     on={odoStatus === "actual"}    set={() => setOdoStatus("actual")} />
              <br />
              <MOCheckBox label="Exempt"     on={odoStatus === "exempt"}    set={() => setOdoStatus("exempt")} />
              <MOCheckBox label="Not Actual" on={odoStatus === "notactual"} set={() => setOdoStatus("notactual")} />
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1.6fr 0.5fr", gap: 4 }}>
              <MOFBox label="PRIOR TITLE NO." value={prevTitleNo} set={setPrevTitleNo} />
              <MOFBox label="STATE" value={prevState} set={(v) => setPrevState(moUp(v).slice(0, 2))} />
            </div>
          </div>

          {/* Section 2 — Owner(s) */}
          <MOSectionHead n="2" title="OWNER(S) — Name in which title is to be issued" />
          {D.isLease && D.ent && (
            <div style={{ margin: "0 0 6px" }}>
              <MOFBox label="LEASE — LESSOR IS TITLED OWNER · LESSEE/REGISTRANT NOTE" value={leaseNote} set={setLeaseNote} hot mono={false} />
            </div>
          )}
          <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1.5fr 0.4fr 1fr 1.2fr 1.2fr", gap: 6 }}>
            <MOFBox label="OWNER 1 — LAST NAME" value={o1.last}  set={(v) => setO1(s => ({ ...s, last: v }))} hot />
            <MOFBox label="FIRST NAME"          value={o1.first} set={(v) => setO1(s => ({ ...s, first: v }))} hot />
            <MOFBox label="M.I."                value={o1.mi}    set={(v) => setO1(s => ({ ...s, mi: v }))} />
            <MOFBox label="DATE OF BIRTH"       value={o1.dob}   set={(v) => setO1(s => ({ ...s, dob: v }))} />
            <MOFBox label="DRIVER LICENSE NO."  value={o1.dl}    set={(v) => setO1(s => ({ ...s, dl: v }))} />
            <MOFBox label="SSN / FEIN"          value={o1.ssn}   set={(v) => setO1(s => ({ ...s, ssn: v }))} />
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 8, margin: "6px 0" }}>
            <span style={{ fontWeight: 700, fontSize: 11 }}>JOINT OWNERSHIP:</span>
            <MOCheckBox label="AND  (both signatures required to transfer)"  on={andOr === "AND"}  set={() => setAndOr("AND")} inline />
            <MOCheckBox label="OR  (either signature transfers)"             on={andOr === "OR"}   set={() => setAndOr("OR")} inline />
            <MOCheckBox label="NONE  (single owner)"                          on={andOr === "NONE"} set={() => setAndOr("NONE")} inline />
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1.5fr 0.4fr 1fr 1.2fr 1.2fr", gap: 6 }}>
            <MOFBox label={D.isLease && D.ent ? "LESSEE/REGISTRANT — LAST NAME" : "OWNER 2 — LAST NAME"} value={o2.last}  set={(v) => setO2(s => ({ ...s, last: v }))} />
            <MOFBox label="FIRST NAME"          value={o2.first} set={(v) => setO2(s => ({ ...s, first: v }))} />
            <MOFBox label="M.I."                value={o2.mi}    set={(v) => setO2(s => ({ ...s, mi: v }))} />
            <MOFBox label="DATE OF BIRTH"       value={o2.dob}   set={(v) => setO2(s => ({ ...s, dob: v }))} />
            <MOFBox label="DRIVER LICENSE NO."  value={o2.dl}    set={(v) => setO2(s => ({ ...s, dl: v }))} />
            <MOFBox label="SSN / FEIN"          value={o2.ssn}   set={(v) => setO2(s => ({ ...s, ssn: v }))} />
          </div>

          {/* Section 3 — Address */}
          <MOSectionHead n="3" title={D.isLease && D.ent ? "OWNER (LESSOR) ADDRESS — entity titling address" : "OWNER ADDRESS (Missouri residence required)"} />
          <div style={{ display: "grid", gridTemplateColumns: "2.4fr 1.2fr 1.2fr 0.5fr 0.7fr", gap: 6 }}>
            <MOFBox label="STREET ADDRESS"        value={addr}    set={setAddr} />
            <MOFBox label="CITY"                  value={city}    set={setCity} />
            <MOFBox label="COUNTY (Missouri)"     value={county}  set={setCounty} />
            <MOFBox label="STATE"                 value={state}   set={setState} />
            <MOFBox label="ZIP"                   value={zip}     set={setZip} />
          </div>

          {/* Section 4 — Lienholder */}
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
            <MOSectionHead n="4" title="LIENHOLDER" inline />
            <div style={{ paddingRight: 4 }}>
              <MOCheckBox label="Lien filed" on={lienOn} set={setLienOn} inline />
              <MOCheckBox label="No lien"    on={!lienOn} set={(v) => setLienOn(!v)} inline />
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1.4fr 1.4fr 0.8fr", gap: 6, opacity: lienOn ? 1 : 0.45 }}>
            <MOFBox label="LIENHOLDER NAME"   value={lienHolder} set={setLienHolder} hot={lienOn} />
            <MOFBox label="LIENHOLDER ADDRESS" value={lienAddr}  set={setLienAddr} />
            <MOFBox label="CITY / STATE / ZIP" value={lienCity}  set={setLienCity} />
            <MOFBox label="DATE OF LIEN"      value={lienDate}   set={setLienDate} />
          </div>

          {/* Section 5 — Purchase + sales tax */}
          <MOSectionHead n="5" title="PURCHASE / SALES TAX COMPUTATION (RSMo § 144.069)" />
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr", gap: 6 }}>
            <MOFBox label="DATE OF PURCHASE" value={purchDate}             set={setPurchDate} />
            <MOFBox label="PURCHASE PRICE"   value={purchPrice.toFixed(2)} set={(v) => setPurchPrice(parseFloat(v) || 0)} num />
            <MOFBox label="TRADE-IN ALLOW."  value={tradeAllow.toFixed(2)} set={(v) => setTradeAllow(parseFloat(v) || 0)} num />
            <MOFBox label="REBATE"           value={rebate.toFixed(2)}     set={(v) => setRebate(parseFloat(v) || 0)} num />
            <MOFBox label="TAXABLE NET"      value={taxableSale.toFixed(2)} num />
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "0.7fr 1fr 0.7fr 1fr 1fr", gap: 6, marginTop: 6 }}>
            <MOFBox label="STATE TAX %"  value={stateRate.toFixed(3)} set={(v) => setStateRate(parseFloat(v) || 0)} num />
            <MOFBox label="STATE TAX $"  value={stateTax.toFixed(2)} num />
            <MOFBox label="LOCAL %"      value={localRate.toFixed(3)} set={(v) => setLocalRate(parseFloat(v) || 0)} num />
            <MOFBox label="LOCAL TAX $"  value={localTax.toFixed(2)} num />
            <MOFBox label="TITLE FEE"    value={titleFee.toFixed(2)} num />
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr", gap: 6, marginTop: 6 }}>
            <MOFBox label="PROCESSING FEE" value={processFee.toFixed(2)} num />
            <MOFBox label="REGISTRATION"   value={regFee.toFixed(2)} num />
            <MOFBox label="LATE FEE"       value="0.00" num />
            <MOFBox label="OTHER"          value="0.00" num />
            <div style={{ border: "2px solid var(--k2b-navy)", background: "var(--k2b-yellow)", padding: "2px 6px",
                          fontFamily: "var(--font-ui)" }}>
              <div style={{ fontSize: 10, fontWeight: 700, color: "var(--k2b-navy)" }}>TOTAL DUE</div>
              <div style={{ fontFamily: "'Courier Prime', monospace", fontSize: 16, color: "var(--k2b-navy)",
                             fontWeight: 700, textAlign: "right" }}>{mo$(total)}</div>
            </div>
          </div>

          {/* Section 6 — Plate */}
          <MOSectionHead n="6" title="LICENSE PLATE" />
          <div style={{ display: "grid", gridTemplateColumns: "auto auto auto 1.2fr 1fr", gap: 8, alignItems: "center" }}>
            <MOCheckBox label="NEW PLATE"          on={plateAction === "new"}          set={() => setPlateAction("new")} />
            <MOCheckBox label="TRANSFER FROM TRADE" on={plateAction === "transfer"}    set={() => setPlateAction("transfer")} />
            <MOCheckBox label="PERSONALIZED"        on={plateAction === "personalized"} set={() => setPlateAction("personalized")} />
            <MOFBox label="PLATE NUMBER" value={plate} set={setPlate} hot={plateAction !== "new"} />
            <MOFBox label="EXPIRATION"   value="" />
          </div>

          {/* Section 7 — Signatures */}
          <MOSectionHead n="7" title="CERTIFICATION / SIGNATURES" />
          <div style={{ fontSize: 11, color: "#000", marginBottom: 6 }}>
            I certify under penalty of perjury, pursuant to RSMo § 575.040, that the
            information provided herein is true and correct. I authorize the
            Missouri Department of Revenue to title and register the vehicle
            described above.
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1.6fr 1fr", gap: 6 }}>
            <MOFBox label="OWNER 1 SIGNATURE"  value="/s/ Mia D. Brewer"      mono={false} />
            <MOFBox label="DATE"               value="05/13/2026" />
            <MOFBox label="OWNER 2 SIGNATURE"  value=""                       mono={false} />
            <MOFBox label="DATE"               value="" />
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1.6fr 1fr", gap: 6, marginTop: 6 }}>
            <MOFBox label="DEALER AGENT SIGNATURE"   value="/s/ Jared Brewer"      mono={false} />
            <MOFBox label="DEALER LIC. #"            value={K2BPrint.party.licenseNo()} />
            <MOFBox label="DEALER NOTARY (optional)" value=""                      mono={false} />
            <MOFBox label="DATE"                     value="05/13/2026" />
          </div>
        </div>

        {/* totals strip */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 6 }}>
          {[
            ["Taxable Net",    taxableSale],
            ["State Tax",      stateTax],
            ["Local Tax",      localTax],
            ["Fees",           titleFee + processFee + regFee],
            ["TOTAL DUE DOR",  total],
          ].map(([l, v], i) => (
            <div key={i} style={{ background: i === 4 ? "var(--k2b-navy)" : "#FFFFFF",
                                   color: i === 4 ? "#FFFFFF" : "var(--k2b-navy)",
                                   border: "1px solid #808080", padding: "4px 8px",
                                   fontFamily: "'Courier Prime', monospace", fontSize: 12 }}>
              <div style={{ color: i === 4 ? "var(--k2b-yellow)" : "var(--k2b-maroon)", fontWeight: 700 }}>{l}</div>
              <div style={{ fontSize: 16, textAlign: "right", fontWeight: 700,
                             color: i === 4 ? "var(--k2b-yellow)" : "var(--k2b-blue-data-dk)" }}>{mo$(v)}</div>
            </div>
          ))}
        </div>

        {/* F-keys */}
        <div style={{ display: "flex", gap: 6 }}>
          <K2BButton small onClick={onClose}>ESC-Close</K2BButton>
          <K2BButton small onClick={() => alert("MO Title Application (TITLEMO)\n\nESC   Close\nF2    Pick vehicle from inventory\nF3    Pull buyer info from credit app\nF4    Lookup VIN against the MO DOR database\nF5    Recompute Missouri use tax + fees\nF6    Print DOR-108 Application for Title\nF7    Print Power of Attorney (DOR-4054)\nF8    Transmit ELT (Electronic Lien & Title) to DOR\nF9    Print mailing envelope")}>F1-Help</K2BButton>
          <K2BButton small onClick={() => go && go("inventory")}>F2-Pick Vehicle</K2BButton>
          <K2BButton small onClick={() => go && go("creditapp")}>F3-Buyer Info</K2BButton>
          <K2BButton small onClick={() => window.k2bToast && window.k2bToast("VIN looked up — MO DOR confirms no liens recorded.", "ok", 2800)}>F4-Lookup VIN</K2BButton>
          <K2BButton small onClick={() => window.k2bToast && window.k2bToast("Missouri state tax recomputed @ 4.225% + local @ 3.000% = 7.225%. Title fee $8.50, processing $6.00.", "ok", 3400)}>F5-Recompute Tax</K2BButton>
          <K2BButton small onClick={() => {
            const d = (window.loadJbForm && window.loadJbForm("buyersOrder")) || {};
            const html = `${window.dealerHeadHtml()}
              <div class="doc-title">MISSOURI DOR-108</div>
              <div class="doc-sub">Application for Missouri Title and License</div>
              <h3 class="sect">Owner${D.isLease && D.ent ? " (Lessor / Titled Owner)" : ""}</h3>
              <div class="field-grid">
                <div class="fg-row">
                  <div class="fg-cell"><span class="lab">Name (Last, First, MI)</span><div class="val">${[o1.last, o1.first, o1.mi].filter(Boolean).join(", ")}</div></div>
                  <div class="fg-cell"><span class="lab">Driver License #</span><div class="val">${o1.dl || ""}</div></div>
                </div>
                <div class="fg-row">
                  <div class="fg-cell"><span class="lab">Street Address</span><div class="val">${addr || d.street || ""}</div></div>
                  <div class="fg-cell"><span class="lab">City / State / Zip</span><div class="val">${[city || d.city, state || d.state || "MO", zip || d.zip].filter(Boolean).join(", ")}</div></div>
                </div>
                ${D.isLease && D.ent ? `<div class="fg-row">
                  <div class="fg-cell"><span class="lab">Lease</span><div class="val">${leaseNote}</div></div>
                  <div class="fg-cell"><span class="lab">Lessee / Registrant</span><div class="val">${[o2.last, o2.first, o2.mi].filter(Boolean).join(", ")}</div></div>
                </div>` : ""}
              </div>
              <h3 class="sect">Vehicle</h3>
              <div class="field-grid">
                <div class="fg-row">
                  <div class="fg-cell"><span class="lab">VIN</span><div class="val mono">${d.vin || ""}</div></div>
                  <div class="fg-cell"><span class="lab">Year / Make / Model</span><div class="val">${d.yrMkMdl || ""}</div></div>
                </div>
                <div class="fg-row">
                  <div class="fg-cell"><span class="lab">Body Style</span><div class="val">${d.body || ""}</div></div>
                  <div class="fg-cell"><span class="lab">Color</span><div class="val">${d.color || ""}</div></div>
                </div>
                <div class="fg-row">
                  <div class="fg-cell"><span class="lab">Odometer Reading</span><div class="val mono">${d.odometer || ""}</div></div>
                  <div class="fg-cell"><span class="lab">Date of Purchase</span><div class="val">${new Date().toLocaleDateString()}</div></div>
                </div>
              </div>
              <h3 class="sect">Lien-holder</h3>
              ${lienOn ? `<div class="field-grid">
                <div class="fg-row">
                  <div class="fg-cell"><span class="lab">Lienholder Name</span><div class="val">${lienHolder || d.lender || "GM FINANCIAL"}</div></div>
                  <div class="fg-cell"><span class="lab">Date of Lien</span><div class="val">${lienDate || new Date().toLocaleDateString()}</div></div>
                </div>
                <div class="fg-row">
                  <div class="fg-cell"><span class="lab">Lienholder Address</span><div class="val">${lienAddr || ""}</div></div>
                  <div class="fg-cell"><span class="lab">City / State / Zip</span><div class="val">${lienCity || ""}</div></div>
                </div>
              </div>` : `<p style="font-size:9.5pt;">No lien recorded${D.isLease && D.ent ? " — vehicle is titled to the lessor shown in the Owner section; the lessee is the registrant." : "."}</p>`}
              <p style="font-size: 9pt; margin-top: 12px;">
                I (we) certify, under penalties of perjury, that the information contained on this form is, to the best of my (our) knowledge,
                true and accurate. I (we) further certify that the vehicle described above is being titled in Missouri.
              </p>
              <div class="sig-row">
                <div class="sig-box">Owner Signature · Date</div>
                <div class="sig-box">Co-Owner Signature · Date</div>
              </div>
              <div class="sig-row">
                <div class="sig-box">Dealer Signature — ${K2BPrint.esc(K2BPrint.party.legal())}</div>
                <div class="sig-box">Dealer License #${K2BPrint.esc(K2BPrint.party.licenseNo())}${K2BPrint.gm() && K2BPrint.brand().gm.dealerCode ? " · Dealer Code " + K2BPrint.esc(K2BPrint.brand().gm.dealerCode) : ""}</div>
              </div>`;
            window.k2bPrint && window.k2bPrint(html, { title: "DOR-108 Application for Title" });
          }}>🖨 F6-Print DOR-108</K2BButton>
          <K2BButton small onClick={() => {
            const d = (window.loadJbForm && window.loadJbForm("buyersOrder")) || {};
            const e = (s) => String(s || "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
            const html = `${window.dealerHeadHtml()}
              <div class="doc-title">DOR-4054 — POWER OF ATTORNEY</div>
              <div class="doc-sub">To Apply for / Receive Title for a Motor Vehicle</div>
              <p>I, <b>${e([d.firstName, d.lastName].filter(Boolean).join(" "))}</b>, having lawful purchasing authority,
                 do hereby make, constitute and appoint <b>${e(K2BPrint.party.legal())}</b>, ${e(K2BPrint.party.addr1())},
                 ${e(K2BPrint.party.addr2())}, my true and lawful agent and attorney-in-fact for me and in my name, place, and stead,
                 to act in any matter relating to the application for, and receipt of, a Missouri Certificate of Title for the
                 following motor vehicle:</p>
              <div class="field-grid">
                <div class="fg-row">
                  <div class="fg-cell"><span class="lab">VIN</span><div class="val mono">${e(d.vin)}</div></div>
                  <div class="fg-cell"><span class="lab">Year / Make / Model</span><div class="val">${e(d.yrMkMdl)}</div></div>
                </div>
              </div>
              <div class="sig-row">
                <div class="sig-box">Owner Signature · Date</div>
                <div class="sig-box">Notary Public · Commission Expiration</div>
              </div>`;
            window.k2bPrint && window.k2bPrint(html, { title: "DOR-4054 Power of Attorney" });
          }}>🖨 F7-Print POA</K2BButton>
          <K2BButton small onClick={() => window.k2bToast && window.k2bToast("ELT transmitted to MO DOR — confirmation MO-ELT-26-44912. Title in process.", "ok", 3400)}>F8-Transmit ELT</K2BButton>
          <K2BButton small onClick={() => {
            const html = `<div class="doc-title">MAILING ENVELOPE</div>
              <div style="border:2px solid #000; padding: 24px 18px; margin: 30px 0; font-size: 11pt;">
                <div style="font-size: 9pt; color: #555;">From:</div>
                <div><b>${K2BPrint.esc(K2BPrint.party.print())}</b></div>
                <div>${K2BPrint.esc(K2BPrint.party.addr1())}</div>
                <div>${K2BPrint.esc(K2BPrint.party.addr2())}</div>
                <div style="margin-top: 70px; text-align: center;">
                  <div style="font-size: 9pt; color: #555;">To:</div>
                  <div style="font-size: 13pt; font-weight: 700;">Missouri Department of Revenue</div>
                  <div>Motor Vehicle Bureau</div>
                  <div>301 W High Street, Room 370</div>
                  <div>Jefferson City, MO 65101</div>
                </div>
              </div>`;
            window.k2bPrint && window.k2bPrint(html, { title: "Title Mailing Envelope" });
          }}>🖨 F9-Print Envelope</K2BButton>
        </div>
      </div>
    </div>
  );
};

const MOSectionHead = ({ n, title, inline }) => (
  <div style={{ background: "#000", color: "#FFFFFF", padding: "2px 6px",
                fontFamily: "var(--font-ui)", fontWeight: 700, fontSize: 11,
                letterSpacing: "0.04em", margin: inline ? 0 : "8px 0 4px" }}>
    {n}. {title}
  </div>
);

Object.assign(window, { TitleAppMO });