// ============================================================================
// Sandbox forms — Quick Estimate + Change Order.
// Both produce a new approval queue row when submitted.
// ============================================================================

// ----------------------------- QUICK ESTIMATE --------------------------------
const DEFAULT_LINES = [
  { desc: 'Trane 4-ton air handler + condenser',  qty: 1,  unit: 'ea',  mat_unit: 4280,  hours: 8,  rate: 95 },
  { desc: 'Ductboard 16ga · plenum + return',     qty: 240,unit: 'lf',  mat_unit: 6.8,   hours: 22, rate: 85 },
  { desc: 'Honeywell controls + thermostats',     qty: 3,  unit: 'ea',  mat_unit: 320,   hours: 4,  rate: 95 },
  { desc: 'Crane + 1-day rigging',                qty: 1,  unit: 'day', mat_unit: 0,     hours: 8,  rate: 145 },
];

const SXEstimate = ({ submitDraft, onJump }) => {
  const [customer, setCustomer] = React.useState('Sunset Plaza Property Group');
  const [project,  setProject]  = React.useState('Suite 220 HVAC replacement — Sunset Plaza II');
  const [contact,  setContact]  = React.useState('Maya Chen · maya@sunsetplaza.com');
  const [overheadPct, setOverheadPct] = React.useState(12);
  const [markupPct,   setMarkupPct]   = React.useState(18);
  const [lines, setLines] = React.useState(DEFAULT_LINES);
  const [submitted, setSubmitted] = React.useState(false);

  function updateLine(i, k, v) {
    setLines(prev => prev.map((row, idx) => idx === i ? { ...row, [k]: v } : row));
  }
  function addLine() {
    setLines(prev => [...prev, { desc: '', qty: 1, unit: 'ea', mat_unit: 0, hours: 0, rate: 95 }]);
  }
  function removeLine(i) {
    setLines(prev => prev.filter((_, idx) => idx !== i));
  }

  const lineCost = (l) => (Number(l.qty) || 0) * (Number(l.mat_unit) || 0) + (Number(l.hours) || 0) * (Number(l.rate) || 0);
  const materialTotal = lines.reduce((s, l) => s + (Number(l.qty) || 0) * (Number(l.mat_unit) || 0), 0);
  const laborTotal    = lines.reduce((s, l) => s + (Number(l.hours) || 0) * (Number(l.rate) || 0), 0);
  const directCost    = materialTotal + laborTotal;
  const overhead      = directCost * (overheadPct / 100);
  const fullyLoaded   = directCost + overhead;
  const markupAmt     = fullyLoaded * (markupPct / 100);
  const bidTotal      = fullyLoaded + markupAmt;
  const margin        = bidTotal === 0 ? 0 : (markupAmt / bidTotal) * 100;

  function submit() {
    const newId = 1043 + Math.floor(Math.random() * 50);
    submitDraft({
      id: newId, kind: 'quick_estimate', tier: 2, department: 'estimating', status: 'pending',
      summary: `${customer} — ${project} · ${lines.length} line items`,
      amount: `$${bidTotal.toFixed(2)}`, amount_cents: Math.round(bidTotal * 100),
      created_by: 'agent.est', at: new Date().toLocaleTimeString([], { hour12: false, hour: '2-digit', minute: '2-digit' }) + ' PT',
      payload: {
        customer, project, contact,
        material_total_cents: Math.round(materialTotal * 100),
        labor_total_cents:    Math.round(laborTotal * 100),
        overhead_cents:       Math.round(overhead * 100),
        markup_cents:         Math.round(markupAmt * 100),
        bid_total_cents:      Math.round(bidTotal * 100),
        margin_pct:           Number(margin.toFixed(2)),
        line_count:           lines.length,
      },
      dri: 'Tom Riggs (Owner)',
    });
    setSubmitted(true);
  }

  return (
    <div style={{ flex: 1, padding: '24px 32px 80px', overflow: 'auto' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 18, flexWrap: 'wrap', gap: 16 }}>
        <div>
          <h1 className="disp" style={{ fontSize: 42, color: 'var(--paper)', margin: 0 }}>QUICK ESTIMATE</h1>
          <Mono style={{ fontSize: 11, color: 'var(--steel-500)', marginTop: 6, display: 'block' }}>
            agent.est · DRAFTING FROM YOUR UNIT-COST LIBRARY · NODE-DEMO
          </Mono>
        </div>
        <Stamp color="var(--paper)">DRAFT · UNSUBMITTED</Stamp>
      </div>

      {/* CUSTOMER + PROJECT */}
      <div style={{ border: '1px solid var(--line)', background: 'var(--ink-800)', padding: '18px 20px', marginBottom: 14 }}>
        <Tick style={{ display: 'block', marginBottom: 10 }}>CUSTOMER &amp; PROJECT</Tick>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          <SXInput label="CUSTOMER" value={customer} onChange={setCustomer} />
          <SXInput label="CONTACT" value={contact} onChange={setContact} />
        </div>
        <div style={{ marginTop: 12 }}>
          <SXInput label="PROJECT" value={project} onChange={setProject} />
        </div>
      </div>

      {/* LINE ITEMS */}
      <div style={{ border: '1px solid var(--line)', background: 'var(--ink-800)', padding: '18px 20px', marginBottom: 14 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10, flexWrap: 'wrap', gap: 8 }}>
          <Tick>LINE ITEMS · MATERIAL × QTY + LABOR × HOURS</Tick>
          <Mono style={{ fontSize: 10, color: 'var(--steel-500)' }}>{lines.length} ITEMS · {fmtUSD(directCost * 100)} DIRECT</Mono>
        </div>

        <div style={{ overflowX: 'auto' }}>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12, minWidth: 720 }}>
            <thead>
              <tr style={{ background: 'var(--ink-900)' }}>
                {['DESCRIPTION','QTY','UNIT','$ / UNIT','HRS','RATE','LINE','—'].map((h, i) => (
                  <th key={i} style={{ textAlign: i === 0 ? 'left' : 'right', padding: '8px 10px', fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: 'var(--steel-500)', textTransform: 'uppercase', borderBottom: '1px solid var(--line)' }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {lines.map((l, i) => (
                <tr key={i}>
                  <td style={tdStyle}><input value={l.desc} onChange={e => updateLine(i, 'desc', e.target.value)} style={inputStyle} /></td>
                  <td style={tdStyle}><input value={l.qty} onChange={e => updateLine(i, 'qty', e.target.value)} style={{ ...inputStyle, textAlign: 'right', fontFamily: 'var(--font-mono)' }} /></td>
                  <td style={tdStyle}><input value={l.unit} onChange={e => updateLine(i, 'unit', e.target.value)} style={{ ...inputStyle, textAlign: 'center', fontFamily: 'var(--font-mono)', width: 56 }} /></td>
                  <td style={tdStyle}><input value={l.mat_unit} onChange={e => updateLine(i, 'mat_unit', e.target.value)} style={{ ...inputStyle, textAlign: 'right', fontFamily: 'var(--font-mono)' }} /></td>
                  <td style={tdStyle}><input value={l.hours} onChange={e => updateLine(i, 'hours', e.target.value)} style={{ ...inputStyle, textAlign: 'right', fontFamily: 'var(--font-mono)' }} /></td>
                  <td style={tdStyle}><input value={l.rate} onChange={e => updateLine(i, 'rate', e.target.value)} style={{ ...inputStyle, textAlign: 'right', fontFamily: 'var(--font-mono)' }} /></td>
                  <td style={{ ...tdStyle, textAlign: 'right', fontFamily: 'var(--font-mono)', color: 'var(--paper)', padding: '8px 10px' }}>{fmtUSD(lineCost(l) * 100, 2)}</td>
                  <td style={{ ...tdStyle, textAlign: 'center', padding: '8px 10px' }}>
                    <button onClick={() => removeLine(i)} style={{ background: 'transparent', border: 0, color: 'var(--steel-500)', cursor: 'pointer', fontFamily: 'var(--font-mono)', fontSize: 14 }}>×</button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div style={{ marginTop: 12, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 8 }}>
          <Btn onClick={addLine}>+ Add line</Btn>
          <Mono style={{ fontSize: 10, color: 'var(--steel-500)' }}>UNIT COSTS PULLED FROM YOUR LIBRARY · OVERRIDE ANY CELL</Mono>
        </div>
      </div>

      {/* PRICING */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 14, marginBottom: 14 }}>
        <div style={{ border: '1px solid var(--line)', background: 'var(--ink-800)', padding: '18px 20px' }}>
          <Tick style={{ display: 'block', marginBottom: 10 }}>OVERHEAD &amp; MARKUP</Tick>
          <SXSlider label="OVERHEAD" value={overheadPct} setValue={setOverheadPct} unit="%" />
          <div style={{ height: 10 }}/>
          <SXSlider label="MARKUP"   value={markupPct}   setValue={setMarkupPct}   unit="%" />
        </div>
        <div style={{ border: '1px solid var(--signal)', background: 'rgba(59,130,246,0.04)', padding: '18px 20px' }}>
          <Tick style={{ display: 'block', marginBottom: 10, color: 'var(--signal)' }}>BID SUMMARY</Tick>
          <SXMoneyRow label="MATERIAL" value={materialTotal} />
          <SXMoneyRow label="LABOR"    value={laborTotal} />
          <SXMoneyRow label={`OVERHEAD (${overheadPct}%)`} value={overhead} />
          <SXMoneyRow label={`MARKUP (${markupPct}%)`}     value={markupAmt} />
          <div style={{ height: 1, background: 'var(--line-strong)', margin: '12px 0 10px' }}/>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <Mono style={{ fontSize: 11, color: 'var(--signal)', letterSpacing: '0.18em' }}>BID TOTAL</Mono>
            <span className="disp" style={{ fontSize: 38, color: 'var(--paper)' }}>{fmtUSD(bidTotal * 100)}</span>
          </div>
          <Mono style={{ fontSize: 11, color: 'var(--paper-dim)', marginTop: 4, display: 'block', textAlign: 'right' }}>
            EXPECTED MARGIN · <span style={{ color: margin >= 15 ? 'var(--green)' : 'var(--amber)' }}>{margin.toFixed(1)}%</span>
          </Mono>
        </div>
      </div>

      {/* SUBMIT */}
      {!submitted ? (
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
          <Btn kind="primary" onClick={submit}>Draft proposal &amp; queue</Btn>
          <Btn>Save as template</Btn>
          <Mono style={{ fontSize: 10, color: 'var(--steel-500)', alignSelf: 'center', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
            DRAFTING ROUTES TO TIER 2 · AWAITS TOM
          </Mono>
        </div>
      ) : (
        <div style={{ padding: 18, border: '1px solid var(--green)', background: 'rgba(34,197,94,0.06)' }}>
          <Mono style={{ fontSize: 11, color: 'var(--green)', letterSpacing: '0.16em' }}>✓ DRAFTED &amp; QUEUED</Mono>
          <div style={{ fontSize: 14, color: 'var(--paper)', marginTop: 6 }}>
            Estimate drafted as <Mono style={{ color: 'var(--signal)' }}>tier 2</Mono> approval row. Tom will see it in the queue.
          </div>
          <div style={{ marginTop: 12, display: 'flex', gap: 8 }}>
            <Btn kind="primary" onClick={() => onJump('queue')}>Open queue →</Btn>
            <Btn onClick={() => setSubmitted(false)}>Draft another</Btn>
          </div>
        </div>
      )}
    </div>
  );
};

// ----------------------------- CHANGE ORDER ----------------------------------
const SXChangeOrder = ({ data, submitDraft, onJump }) => {
  const job = data.job;
  const [coNumber] = React.useState('CO-015');
  const [reason,   setReason]   = React.useState('Owner-directed scope add · 220V drop for chiller');
  const [scope,    setScope]    = React.useState('Pull (1) 100A 220V circuit from Panel A2 to chiller pad, set disconnect, terminate. Re-balance load schedule.');
  const [matAdd,   setMatAdd]   = React.useState(1840);
  const [hoursAdd, setHoursAdd] = React.useState(14);
  const [rate,     setRate]     = React.useState(95);
  const [daysAdd,  setDaysAdd]  = React.useState(2);
  const [submitted, setSubmitted] = React.useState(false);

  const laborAdd   = (Number(hoursAdd) || 0) * (Number(rate) || 0);
  const subtotal   = (Number(matAdd) || 0) + laborAdd;
  const markup     = subtotal * 0.18;
  const totalAdd   = subtotal + markup;
  const totalCents = Math.round(totalAdd * 100);

  const tier = totalAdd >= 10000 ? 3 : 2;

  const contractWas = job.contract_now_cents;
  const contractNew = contractWas + totalCents;

  function submit() {
    submitDraft({
      id: 1500 + Math.floor(Math.random() * 99), kind: 'change_order_draft', tier, department: 'pm', status: 'pending',
      summary: `${coNumber} · ${job.code} — ${reason}, +${fmtUSD(totalCents)} / +${daysAdd} days`,
      amount: fmtUSD(totalCents), amount_cents: totalCents,
      created_by: 'agent.pm',
      at: new Date().toLocaleTimeString([], { hour12: false, hour: '2-digit', minute: '2-digit' }) + ' PT',
      payload: {
        co_number: coNumber, project_code: job.code, reason, scope,
        material_cents: Math.round(matAdd * 100),
        labor_cents:    Math.round(laborAdd * 100),
        markup_cents:   Math.round(markup * 100),
        total_cents:    totalCents,
        days_add:       Number(daysAdd) || 0,
        contract_was_cents: contractWas,
        contract_now_cents: contractNew,
      },
      dri: 'M. Reyes (PM)',
    });
    setSubmitted(true);
  }

  return (
    <div style={{ flex: 1, padding: '24px 32px 80px', overflow: 'auto' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 18, flexWrap: 'wrap', gap: 16 }}>
        <div>
          <Mono style={{ fontSize: 11, color: 'var(--steel-500)', letterSpacing: '0.18em', display: 'block', marginBottom: 4 }}>{job.code} · LAKESIDE HVAC RETROFIT</Mono>
          <h1 className="disp" style={{ fontSize: 42, color: 'var(--paper)', margin: 0 }}>{coNumber} · CHANGE ORDER</h1>
        </div>
        <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
          <Stamp color="var(--paper)">DRAFT</Stamp>
          <Stamp color={tier === 3 ? 'var(--amber)' : 'var(--signal)'}>TIER {tier}</Stamp>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 14 }}>
        {/* LEFT — FORM */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div style={{ border: '1px solid var(--line)', background: 'var(--ink-800)', padding: '18px 20px' }}>
            <Tick style={{ display: 'block', marginBottom: 10 }}>SCOPE OF CHANGE</Tick>
            <SXInput label="REASON" value={reason} onChange={setReason} />
            <div style={{ height: 10 }}/>
            <SXTextarea label="DESCRIPTION OF WORK" value={scope} onChange={setScope} rows={5} />
          </div>

          <div style={{ border: '1px solid var(--line)', background: 'var(--ink-800)', padding: '18px 20px' }}>
            <Tick style={{ display: 'block', marginBottom: 10 }}>COST IMPACT</Tick>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
              <SXNum label="MATERIAL · $" value={matAdd} setValue={setMatAdd} />
              <SXNum label="LABOR · HRS" value={hoursAdd} setValue={setHoursAdd} />
              <SXNum label="RATE · $/HR" value={rate} setValue={setRate} />
            </div>
            <div style={{ marginTop: 10 }}>
              <SXNum label="SCHEDULE IMPACT · DAYS" value={daysAdd} setValue={setDaysAdd} />
            </div>
          </div>

          <div style={{ border: '1px solid var(--line)', background: 'var(--ink-900)', padding: '18px 20px' }}>
            <Tick style={{ display: 'block', marginBottom: 12 }}>DRAFT PREVIEW · WHAT THE PM SEES</Tick>
            <div style={{ background: 'var(--paper-bg)', color: 'var(--ink-900)', padding: 18, fontFamily: 'var(--font-body)' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12, paddingBottom: 12, borderBottom: '2px solid var(--ink-900)' }}>
                <div>
                  <Mono style={{ fontSize: 9, color: '#6b7785', letterSpacing: '0.18em' }}>CHANGE ORDER · {coNumber}</Mono>
                  <div className="disp" style={{ fontSize: 22, color: 'var(--ink-900)', marginTop: 6 }}>{job.code} — {job.name}</div>
                </div>
                <Mono style={{ fontSize: 9, color: '#6b7785', textAlign: 'right' }}>DATE 05.11.26<br/>REV 01</Mono>
              </div>
              <div style={{ fontSize: 12, color: 'var(--ink-900)', lineHeight: 1.55 }}>
                <b>Reason:</b> {reason}<br/>
                <b>Scope:</b> {scope}
              </div>
              <table style={{ width: '100%', marginTop: 14, borderCollapse: 'collapse', fontSize: 12 }}>
                <tbody>
                  <tr><td style={prevTd}>Material</td><td style={{ ...prevTd, textAlign: 'right', fontFamily: 'var(--font-mono)' }}>{fmtUSD(matAdd * 100, 2)}</td></tr>
                  <tr><td style={prevTd}>Labor ({hoursAdd}h @ ${rate}/hr)</td><td style={{ ...prevTd, textAlign: 'right', fontFamily: 'var(--font-mono)' }}>{fmtUSD(laborAdd * 100, 2)}</td></tr>
                  <tr><td style={prevTd}>Markup (18%)</td><td style={{ ...prevTd, textAlign: 'right', fontFamily: 'var(--font-mono)' }}>{fmtUSD(markup * 100, 2)}</td></tr>
                  <tr style={{ borderTop: '2px solid var(--ink-900)' }}>
                    <td style={{ ...prevTd, fontWeight: 700 }}>TOTAL</td>
                    <td style={{ ...prevTd, textAlign: 'right', fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 18 }}>{fmtUSD(totalCents)}</td>
                  </tr>
                </tbody>
              </table>
              <Mono style={{ fontSize: 9, color: '#6b7785', marginTop: 10, display: 'block', letterSpacing: '0.16em' }}>
                SCHEDULE IMPACT · +{daysAdd} DAYS · DRAFTED BY agent.pm · TIER {tier} · AWAITING M. REYES
              </Mono>
            </div>
          </div>
        </div>

        {/* RIGHT — CONTRACT MATH + SUBMIT */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div style={{ border: '1px solid var(--line)', background: 'var(--ink-800)', padding: '18px 20px' }}>
            <Tick style={{ display: 'block', marginBottom: 10 }}>CONTRACT MATH</Tick>
            <SXMoneyRow label="ORIGINAL CONTRACT" value={job.contract_was_cents / 100} cents />
            <SXMoneyRow label="PREVIOUS COs" value={(job.contract_now_cents - job.contract_was_cents) / 100} cents />
            <SXMoneyRow label="THIS CO" value={totalAdd} highlight />
            <div style={{ height: 1, background: 'var(--line-strong)', margin: '12px 0 10px' }}/>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <Mono style={{ fontSize: 11, color: 'var(--signal)', letterSpacing: '0.16em' }}>NEW CONTRACT</Mono>
              <span className="disp" style={{ fontSize: 28, color: 'var(--paper)' }}>{fmtUSD(contractNew)}</span>
            </div>
          </div>

          <div style={{ border: '1px solid var(--line)', background: 'var(--ink-800)', padding: '18px 20px' }}>
            <Tick style={{ display: 'block', marginBottom: 10 }}>SCHEDULE</Tick>
            <SXMoneyRow label="ORIGINAL TARGET" value="08.30.26" text />
            <SXMoneyRow label={`+ ${daysAdd} DAYS`} value="" />
            <div style={{ height: 1, background: 'var(--line-strong)', margin: '12px 0 10px' }}/>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <Mono style={{ fontSize: 11, color: 'var(--signal)', letterSpacing: '0.16em' }}>NEW TARGET</Mono>
              <span className="disp" style={{ fontSize: 22, color: 'var(--paper)' }}>09.0{Math.min(9, 1 + Math.floor((Number(daysAdd) || 0) / 30))}.26</span>
            </div>
          </div>

          {!submitted ? (
            <div style={{ border: '1px solid var(--signal)', background: 'rgba(59,130,246,0.04)', padding: '18px 20px' }}>
              <Tick style={{ display: 'block', marginBottom: 10, color: 'var(--signal)' }}>ROUTING</Tick>
              <Mono style={{ fontSize: 11, color: 'var(--paper)', display: 'block', marginBottom: 12, lineHeight: 1.6 }}>
                TIER <span style={{ color: tier === 3 ? 'var(--amber)' : 'var(--signal)' }}>{tier}</span> · DEPT pm · DRI M. REYES<br/>
                {tier === 3 && <>↪ ESCALATES TO TOM (over $10K)<br/></>}
              </Mono>
              <Btn kind="primary" onClick={submit} style={{ width: '100%', padding: '12px 18px' }}>Submit {coNumber} for approval</Btn>
            </div>
          ) : (
            <div style={{ border: '1px solid var(--green)', background: 'rgba(34,197,94,0.06)', padding: '18px 20px' }}>
              <Mono style={{ fontSize: 11, color: 'var(--green)', letterSpacing: '0.16em' }}>✓ {coNumber} DRAFTED &amp; QUEUED</Mono>
              <div style={{ fontSize: 13, color: 'var(--paper)', marginTop: 6, lineHeight: 1.55 }}>
                Routed to <Mono style={{ color: 'var(--signal)' }}>M. Reyes</Mono> as tier {tier}. Tom will see it on the field iPad too.
              </div>
              <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 6 }}>
                <Btn kind="primary" onClick={() => onJump('queue')}>Open queue →</Btn>
                <Btn onClick={() => onJump('field')}>See it on the iPad →</Btn>
                <Btn onClick={() => setSubmitted(false)}>Draft another</Btn>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

// ----------------------------- FIELD ATOMS ----------------------------------
const tdStyle = { padding: '4px 6px', borderBottom: '1px solid var(--line)' };
const inputStyle = {
  width: '100%', background: 'var(--ink-900)', border: '1px solid var(--line)',
  color: 'var(--paper)', padding: '6px 8px', fontFamily: 'var(--font-body)',
  fontSize: 12, borderRadius: 0, outline: 'none', boxSizing: 'border-box',
};

const SXInput = ({ label, value, onChange }) => (
  <div>
    <Tick size={9} style={{ display: 'block', marginBottom: 5 }}>{label}</Tick>
    <input value={value} onChange={e => onChange(e.target.value)} style={{
      ...inputStyle, padding: '9px 11px', fontSize: 13,
    }}/>
  </div>
);

const SXTextarea = ({ label, value, onChange, rows = 4 }) => (
  <div>
    <Tick size={9} style={{ display: 'block', marginBottom: 5 }}>{label}</Tick>
    <textarea value={value} onChange={e => onChange(e.target.value)} rows={rows} style={{
      ...inputStyle, padding: '9px 11px', fontSize: 13, resize: 'vertical',
      fontFamily: 'var(--font-body)',
    }}/>
  </div>
);

const SXNum = ({ label, value, setValue }) => (
  <div>
    <Tick size={9} style={{ display: 'block', marginBottom: 5 }}>{label}</Tick>
    <input type="number" value={value} onChange={e => setValue(e.target.value)} style={{
      ...inputStyle, padding: '9px 11px', fontSize: 13, fontFamily: 'var(--font-mono)',
    }}/>
  </div>
);

const SXSlider = ({ label, value, setValue, unit }) => (
  <div>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 5 }}>
      <Tick size={9}>{label}</Tick>
      <Mono style={{ fontSize: 14, color: 'var(--signal)', fontWeight: 600 }}>{value}{unit}</Mono>
    </div>
    <input type="range" min={0} max={50} value={value} onChange={e => setValue(Number(e.target.value))} style={{
      width: '100%', accentColor: 'var(--signal)',
    }}/>
  </div>
);

const SXMoneyRow = ({ label, value, highlight, cents, text }) => (
  <div style={{ display: 'flex', justifyContent: 'space-between', padding: '5px 0', alignItems: 'baseline' }}>
    <Mono style={{ fontSize: 10, color: 'var(--steel-500)', letterSpacing: '0.14em' }}>{label}</Mono>
    <Mono style={{
      fontSize: highlight ? 16 : 13,
      color: highlight ? 'var(--signal)' : 'var(--paper)',
      fontWeight: highlight ? 600 : 400,
    }}>{text ? value : (cents ? fmtUSD(value * 100) : fmtUSD(value * 100, 2))}</Mono>
  </div>
);

const prevTd = { padding: '6px 0', color: 'var(--ink-900)', fontSize: 12, borderBottom: '1px solid rgba(14,22,32,0.15)' };

Object.assign(window, {
  SXEstimate, SXChangeOrder,
  SXInput, SXTextarea, SXNum, SXSlider, SXMoneyRow,
});