// hybrid-receipt.jsx — Receipt + NumPad/Register, the brand mechanic.

const __HYBRID_CSS = `
  html { scroll-behavior: smooth; }
  :root {
    --bg: #FAF6EB;
    --bg-2: #F2EDDE;
    --bg-3: #E8E1CC;
    --ink: #1A1817;
    --ink-2: #5A554D;
    --ink-3: #8A8378;
    --paper: #FFFFFF;
    --rule: #D6CFBC;
    --accent: #E64A19;
    --accent-soft: #FFE6DD;
    --accent-deep: #A8330E;
  }
  .palette-forest {
    --accent: #1E5E50; --accent-soft: #D9EDE5; --accent-deep: #0E3F35;
  }
  .palette-ink {
    --accent: #1A1817; --accent-soft: #E8E1CC; --accent-deep: #000000;
  }

  body, .ui-font { font-family: 'Geist', -apple-system, sans-serif; color: var(--ink); }
  .display { font-family: 'Bricolage Grotesque', 'Geist', sans-serif; font-weight: 800; letter-spacing: -0.025em; line-height: 0.98; font-variation-settings: "wdth" 95, "opsz" 96; }
  .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
  .eyebrow { font: 600 12px/1 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-2); }
  .h1 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: clamp(48px, 6.4vw, 92px); letter-spacing: -0.025em; line-height: 0.95; color: var(--ink); font-variation-settings: "wdth" 92, "opsz" 96; }
  .h1.hero { font-size: clamp(42px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -0.028em; font-variation-settings: "wdth" 85, "opsz" 96; text-wrap: balance; }
  .h2 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: clamp(34px, 4.2vw, 56px); letter-spacing: -0.022em; line-height: 1; color: var(--ink); font-variation-settings: "wdth" 95, "opsz" 72; }
  .h3 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.015em; line-height: 1.15; color: var(--ink); }
  .lead { font-family: 'Geist', sans-serif; font-size: 18px; line-height: 1.5; color: var(--ink-2); font-weight: 400; }
  .body { font-family: 'Geist', sans-serif; font-size: 15px; line-height: 1.55; color: var(--ink-2); }

  .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font: 600 15px 'Geist', sans-serif; cursor: pointer; transition: transform .15s, background .15s; text-decoration: none; }
  .btn:hover { background: var(--ink); color: var(--bg); }
  .btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 4px 0 var(--accent-deep); }
  .btn.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); transform: translateY(2px); box-shadow: 0 2px 0 var(--accent-deep); }
  .btn.lg { padding: 16px 26px; font-size: 16px; }
  .btn.ghost { border: none; padding: 12px 16px; }
  .btn.ghost:hover { background: var(--bg-2); color: var(--ink); }

  .chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--paper); border: 1px solid var(--rule); font: 500 13px 'Geist', sans-serif; color: var(--ink); }
  .chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
  .chip.dark { background: var(--ink); color: var(--bg); border-color: var(--ink); }

  /* ── RECEIPT ─────────────────────────────────────────────────────── */
  .receipt {
    background: var(--paper);
    padding: 28px 26px 0;
    font-family: 'JetBrains Mono', monospace;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.65;
    position: relative;
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.08)) drop-shadow(0 2px 4px rgba(0,0,0,0.04));
  }
  .receipt::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -16px; height: 16px;
    background-image:
      linear-gradient(135deg, transparent 50%, var(--paper) 50%),
      linear-gradient(45deg,  transparent 50%, var(--paper) 50%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 0;
    background-repeat: repeat-x;
  }
  .receipt-head { text-align: center; }
  .receipt-brand { font-weight: 700; letter-spacing: 0.3em; font-size: 14px; }
  .receipt-meta { color: var(--ink-3); font-size: 11px; letter-spacing: 0.1em; }
  .receipt-rule { border: 0; border-top: 1px dashed var(--ink); margin: 10px 0; opacity: 0.5; }
  .receipt-rule.solid { border-top-style: solid; opacity: 1; }
  .receipt-rule.thick { border-top-width: 2px; }
  .receipt-cols { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; font-size: 11px; color: var(--ink-3); letter-spacing: 0.12em; }
  .receipt-line { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: baseline; }
  .receipt-line .qty { color: var(--ink-3); }
  .receipt-line .item { color: var(--ink); }
  .receipt-line .amt { color: var(--ink); font-weight: 600; }
  .receipt-line.bold .item, .receipt-line.bold .amt { font-weight: 700; }
  .receipt-line.accent .item, .receipt-line.accent .amt { color: var(--accent-deep); }
  .receipt-detail { font-size: 11px; color: var(--ink-3); margin: -4px 0 6px 36px; }
  .alt-divider { text-align: center; font-size: 11px; color: var(--ink-3); letter-spacing: 0.15em; margin: 14px 0 8px; }
  .receipt-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-bottom: 18px; }
  .receipt-foot .tip { font-size: 11px; color: var(--ink-3); }
  .stamp { display: inline-block; padding: 5px 10px; border: 2px solid var(--accent); color: var(--accent-deep); font: 700 11px 'JetBrains Mono', monospace; letter-spacing: 0.18em; transform: rotate(-3deg); border-radius: 2px; }
  .barcode { display: flex; gap: 1px; height: 26px; margin-top: 12px; }
  .barcode span { background: var(--ink); height: 100%; }
  .barcode-num { text-align: center; font-size: 10px; letter-spacing: 0.3em; color: var(--ink-3); margin-top: 4px; padding-bottom: 6px; }

  /* ── REGISTER / NUMPAD ───────────────────────────────────────────── */
  .register {
    background: linear-gradient(180deg, #2a2825 0%, #1a1817 100%);
    padding: 18px;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05);
    position: relative;
  }
  .register::before {
    content: "1ST-VERSE · REGISTER";
    position: absolute; top: -10px; left: 18px;
    background: var(--bg);
    padding: 0 8px;
    font: 700 10px 'JetBrains Mono', monospace; letter-spacing: 0.25em; color: var(--ink-2);
  }
  .register-display {
    background: #f5f5e8;
    padding: 14px 18px;
    border-radius: 8px;
    display: flex; justify-content: space-between; align-items: center;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
    font-family: 'JetBrains Mono', monospace;
    margin-bottom: 14px;
  }
  .register-display .lbl { font-size: 10px; letter-spacing: 0.18em; color: #6b6b6b; text-transform: uppercase; }
  .register-display .val { font: 700 38px/1 'Bricolage Grotesque', sans-serif; color: var(--accent-deep); }
  .register-display .unit { font-size: 11px; color: var(--ink-3); }
  .numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .numkey {
    height: 56px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #f5f5e8 0%, #e6e3d3 100%);
    border-radius: 8px;
    font: 700 22px 'JetBrains Mono', monospace;
    color: var(--ink);
    cursor: pointer;
    user-select: none;
    box-shadow: 0 3px 0 #888479, inset 0 1px 0 rgba(255,255,255,0.6);
    transition: transform .08s, box-shadow .08s;
  }
  .numkey:hover { background: linear-gradient(180deg, #ffffff 0%, #ece9d8 100%); }
  .numkey:active { transform: translateY(2px); box-shadow: 0 1px 0 #888479; }
  .numkey.clear { background: linear-gradient(180deg, var(--accent-soft) 0%, #f5c9b3 100%); color: var(--accent-deep); }
  .numkey.del { color: var(--ink-2); font-size: 18px; }
  .register-actions { display: flex; gap: 8px; margin-top: 14px; }
  .register-btn {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    border: 0;
    background: var(--accent);
    color: #fff;
    font: 700 13px 'JetBrains Mono', monospace; letter-spacing: 0.15em;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--accent-deep);
  }
  .register-btn.ghost { background: #3a3835; color: #fff; box-shadow: 0 3px 0 #000; }
`;

(function injectHybridCss() {
  if (document.getElementById('__hybrid_css')) return;
  const s = document.createElement('style');
  s.id = '__hybrid_css';
  s.textContent = __HYBRID_CSS;
  document.head.appendChild(s);
})();

function calcModel(hours) {
  const hrly = 28;
  const baseInhouse = Math.round(hours * 52 * hrly / 12);
  const overhead = Math.round(baseInhouse * 0.32);
  const totalInhouse = baseInhouse + overhead;
  const firstverse = Math.round(hours * 52 * 17 / 12);
  const savings = Math.max(0, totalInhouse - firstverse);
  return { baseInhouse, overhead, totalInhouse, firstverse, savings, yearly: savings * 12 };
}

function ReceiptLine({ qty, item, detail, amt, bold, accent, big }) {
  const fmt = typeof amt === 'number' ? `$${amt.toLocaleString()}` : amt;
  return (
    <>
      <div className={`receipt-line ${bold ? 'bold' : ''} ${accent ? 'accent' : ''}`} style={big ? { fontSize: 15 } : null}>
        <span className="qty">{qty || ''}</span>
        <span className="item">{item}</span>
        <span className="amt">{fmt}</span>
      </div>
      {detail && <div className="receipt-detail">{detail}</div>}
    </>
  );
}

const __BARS = '21342134123124213412341212321234'.split('').map(n => 1 + parseInt(n, 10) * 1.4);

function Receipt({ hours, dateStamp, variant = 'full' }) {
  const m = calcModel(hours);
  const annual = m.yearly;
  return (
    <div className="receipt">
      <div className="receipt-head">
        <img src="assets/logo-mark-orange.svg" alt="" style={{ width: 36, height: 36, display: 'block', margin: '0 auto 8px', opacity: 0.92 }} />
        <div className="receipt-brand">1ST-VERSE</div>
        <div className="receipt-meta">SUPPORT · COST RECEIPT</div>
        <div className="receipt-meta" style={{ marginTop: 4 }}>{dateStamp || 'TUE 27 MAY 2026 · 14:23'}</div>
      </div>
      <hr className="receipt-rule" />
      <div className="receipt-cols">
        <span>QTY</span><span>ITEM</span><span>AMT</span>
      </div>
      <hr className="receipt-rule" />
      <ReceiptLine qty="1" item="In-house agent" detail={`${hours} hrs/wk · base wage`} amt={m.baseInhouse} />
      <ReceiptLine qty="·" item="Benefits & overhead" detail="taxes, tools, mgmt · +32%" amt={m.overhead} />
      <hr className="receipt-rule" />
      <ReceiptLine item="SUBTOTAL · in-house" amt={m.totalInhouse} bold />

      <div className="alt-divider">— OR, ROUTE TO 1ST-VERSE —</div>
      <ReceiptLine qty="1" item="1st-verse agent" detail={`${hours} hrs/wk · all-in, no overhead`} amt={m.firstverse} accent />

      <hr className="receipt-rule thick solid" />
      <ReceiptLine item="SAVINGS / MO" amt={m.savings} bold accent big />
      <ReceiptLine item="SAVINGS / YR" amt={annual} bold accent big />
      <hr className="receipt-rule" />

      {variant === 'full' && (
        <>
          <div className="receipt-foot">
            <span className="tip">* tip not accepted</span>
            <span className="stamp">PAID IN FULL ★</span>
          </div>
          <div className="barcode">
            {__BARS.map((w, i) => (
              <span key={i} style={{ width: w + 'px', opacity: i % 4 === 0 ? 0.4 : 1 }} />
            ))}
          </div>
          <div className="barcode-num">1V · {hours.toString().padStart(3, '0')} · {annual.toString().padStart(6, '0')}</div>
        </>
      )}
      {variant === 'compact' && (
        <div className="receipt-foot">
          <span className="tip">live preview</span>
          <span className="stamp">★ NEW</span>
        </div>
      )}
    </div>
  );
}

function CashRegister({ hours, setHours }) {
  const keys = ['7','8','9','4','5','6','1','2','3','C','0','⌫'];
  const press = (k) => {
    let str = String(hours);
    if (k === 'C') return setHours(0);
    if (k === '⌫') return setHours(parseInt(str.slice(0, -1) || '0', 10));
    if (str === '0') str = '';
    const next = parseInt((str + k).slice(0, 3), 10);
    setHours(isNaN(next) ? 0 : next);
  };
  return (
    <div className="register">
      <div className="register-display">
        <span className="lbl">Weekly hours</span>
        <span style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
          <span className="lbl">I need</span>
          <span className="val">{hours}</span>
          <span className="unit">hrs/wk</span>
        </span>
      </div>
      <div className="numpad">
        {keys.map((k) => (
          <div key={k}
               className={`numkey ${k === 'C' ? 'clear' : ''} ${k === '⌫' ? 'del' : ''}`}
               onClick={() => press(k)}>{k}</div>
        ))}
      </div>
      <div className="register-actions">
        <button className="register-btn">★ TOTAL</button>
        <button className="register-btn ghost">NO SALE</button>
      </div>
    </div>
  );
}

Object.assign(window, { Receipt, CashRegister, ReceiptLine, calcModel });