/* ============================================================================
   MOWDEW — Scheduled work & repairs (trust + transparency)
   The "no surprise charges" loop: the OWNER schedules a work item (filter
   replacement, repair, custom…) with a date and a cost → the HOMEOWNER gets
   it for approval BEFORE anyone shows up → once approved the PRO sees it on
   his day and marks it complete → it lands in the homeowner's timeline as a
   first-class card, right between regular visits. Heterogeneous timeline:
   visits, replacements, repairs — every event on the record.
   Loads after mowdew-kit (+ frame/data on mobile). Exposed on window.
   ========================================================================= */

/* ─── The finite work catalogue (+ custom) ──────────────────────────── */
const WORK_TYPES = [
  { key: 'filter',  label: 'Filter replacement',  icon: 'filter',  tone: 'aqua',  cents: 18000, every: 'Every 6 months' },
  { key: 'pump',    label: 'Pump repair',          icon: 'zap',     tone: 'yellow', cents: 24000 },
  { key: 'salt',    label: 'Salt cell clean',      icon: 'beaker',  tone: 'blue',  cents: 9000 },
  { key: 'rescue',  label: 'Green-to-clean rescue', icon: 'flask',  tone: 'green', cents: 30000 },
  { key: 'custom',  label: 'Something else',        icon: 'notes',  tone: 'ink' },
];
const WORK_TONE = {
  aqua:  { bg: 'var(--aqua-50)',  fg: 'var(--aqua-700)',  solid: 'var(--aqua-500)' },
  yellow:{ bg: 'var(--yellow-50)', fg: 'var(--yellow-700)', solid: 'var(--yellow-500)' },
  blue:  { bg: 'var(--blue-50)',  fg: 'var(--blue-700)',  solid: 'var(--blue-500)' },
  green: { bg: 'var(--green-50)', fg: 'var(--green-700)', solid: 'var(--green-500)' },
  ink:   { bg: 'var(--ink-50)',   fg: 'var(--ink-700)',   solid: 'var(--ink-900)' },
};

/* Emma's work items — one awaiting her OK, one already on the record */
const WORKITEMS = [
  { id: 'w1', type: 'filter', label: 'Filter replacement', date: 'Sat, Jun 14', cost: 18000, state: 'pending',
    note: 'Cartridge filters wear out every 6 months — this keeps the water (and the pump) healthy.' },
  { id: 'w2', type: 'salt', label: 'Salt cell clean', date: 'Thu, Apr 24', cost: 9000, state: 'done', by: 'Marco',
    note: 'Descaled and inspected — cell is good for another season.' },
];

/* mono record-mark for work states */
function WorkState({ state }) {
  const m = {
    pending:  ['yellow', 'NEEDS YOUR OK'],
    sent:     ['yellow', 'WAITING ON APPROVAL'],
    approved: ['green', 'APPROVED'],
    done:     ['blue', 'DONE · ON THE RECORD'],
  }[state] || ['ink', state.toUpperCase()];
  return <Mono tone={m[0] === 'yellow' ? 'ink' : m[0] === 'blue' ? 'blue' : 'green'} icon={state === 'done' ? 'shield' : state === 'approved' ? 'check' : 'clock'}>{m[1]}</Mono>;
}

/* ─── HOMEOWNER · upcoming approval card (top of the feed) ──────────── */
function HomeWorkUpcoming({ w = WORKITEMS[0], toast }) {
  const [state, setState] = React.useState(w.state); // pending | approved
  const t = WORK_TYPES.find(x => x.key === w.type) || WORK_TYPES[0];
  const tone = WORK_TONE[t.tone];
  return (
    <div className="card" style={{ padding: 14, border: state === 'pending' ? '1.5px dashed var(--yellow-500)' : '1px solid var(--green-100)', boxShadow: state === 'pending' ? '0 0 0 3px var(--yellow-50), var(--shadow-sm)' : 'var(--shadow-sm)' }} data-comment-anchor="work-approve-card">
      <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
        <span style={{ width: 42, height: 42, borderRadius: 12, background: tone.solid, display: 'grid', placeItems: 'center', color: '#fff', flexShrink: 0 }}><Icon name={t.icon} size={21} /></span>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontWeight: 700, fontSize: 14.5, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{w.label}</div>
          <div style={{ fontSize: 12, color: 'var(--ink-500)', whiteSpace: 'nowrap' }}>{w.date} · {fmtMoney(w.cost)}{t.every ? ` · ${t.every.toLowerCase()}` : ''}</div>
        </div>
        <WorkState state={state} />
      </div>
      <div style={{ marginTop: 11, background: 'var(--paper)', border: '1px solid var(--ink-100)', borderRadius: 12, padding: '10px 13px', fontSize: 12.5, color: 'var(--ink-700)', lineHeight: 1.5 }}>
        <b>Diego scheduled this</b> — {w.note} Nothing happens (and nothing is billed) until you approve.
      </div>
      {state === 'pending' ? (
        <div style={{ display: 'flex', gap: 8, marginTop: 11 }}>
          <button onClick={() => { setState('approved'); toast && toast(`Approved — on the calendar for ${w.date}`, 'green'); }} className="btn btn-primary" style={{ flex: 1.4, minHeight: 44 }}><Icon name="check" size={17} />Approve · {fmtMoney(w.cost)}</button>
          <button onClick={() => toast && toast('Diego will get your question', 'blue')} className="btn btn-secondary" style={{ flex: 1, minHeight: 44 }}><Icon name="message" size={16} />Ask Diego</button>
        </div>
      ) : (
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 11, background: 'var(--green-50)', borderRadius: 11, padding: '9px 12px', fontSize: 12.5, fontWeight: 600, color: 'var(--green-800)' }}>
          <Icon name="check-circle" size={15} style={{ flexShrink: 0 }} />Approved — it'll appear in your timeline like any visit. The {fmtMoney(w.cost)} lands on your invoice only after it's done.
        </div>
      )}
    </div>
  );
}

/* ─── HOMEOWNER · completed work card (inside the timeline) ─────────── */
function HomeWorkDone({ w = WORKITEMS[1] }) {
  const t = WORK_TYPES.find(x => x.key === w.type) || WORK_TYPES[0];
  const tone = WORK_TONE[t.tone];
  return (
    <div style={{ display: 'flex', gap: 12, position: 'relative' }} data-comment-anchor="work-done-card">
      <div style={{ flexShrink: 0, zIndex: 1 }}>
        <span style={{ width: 36, height: 36, borderRadius: '50%', background: tone.solid, display: 'grid', placeItems: 'center', color: '#fff', border: '3px solid var(--paper)', boxShadow: 'var(--shadow-sm)' }}>
          <Icon name={t.icon} size={16} strokeWidth={2.4} />
        </span>
      </div>
      <div className="card" style={{ flex: 1, minWidth: 0, padding: 13 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontWeight: 700, fontSize: 14, lineHeight: 1.2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{w.label}</div>
            <div style={{ fontSize: 11.5, color: 'var(--ink-500)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{w.date} · {w.by} · approved by you</div>
          </div>
          <Chip tone="done" icon="check">Done</Chip>
        </div>
        <div style={{ marginTop: 9, fontSize: 12.5, color: 'var(--ink-700)', lineHeight: 1.5 }}>{w.note}</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 9, fontSize: 12, color: 'var(--ink-500)', flexWrap: 'wrap' }}>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 14, color: 'var(--ink-900)', flexShrink: 0 }}>{fmtMoney(w.cost)}</span>
          <span style={{ flex: 1, minWidth: 0, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>billed on your May invoice</span>
          <Mono tone="blue" icon="shield">RECORDED</Mono>
        </div>
      </div>
    </div>
  );
}

/* ─── PRO · scheduled work on his day ───────────────────────────────── */
function ProWorkCard({ toast }) {
  const [state, setState] = React.useState('approved'); // approved | done
  const w = WORKITEMS[0];
  const t = WORK_TYPES.find(x => x.key === w.type);
  return (
    <div style={{ padding: '16px 18px 0' }} data-comment-anchor="pro-work-card">
      <SectionHead tone="aqua" icon="filter" style={{ marginBottom: 10 }} meta={<span style={{ whiteSpace: 'nowrap' }}>approved by the homeowner</span>}>Scheduled work</SectionHead>
      <div className="card" style={{ padding: 14, borderColor: state === 'done' ? 'var(--green-100)' : 'var(--aqua-100)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
          <IconBadge icon={t.icon} tone="aqua" size={42} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontWeight: 700, fontSize: 14, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>Crestline Ave pool · {w.label}</div>
            <div style={{ fontSize: 12, color: 'var(--ink-500)', whiteSpace: 'nowrap' }}>{w.date} · part you need: C-7468 cartridge</div>
          </div>
          {state === 'done' ? <Chip tone="done" icon="check">Done</Chip> : <Mono tone="green" icon="check">APPROVED</Mono>}
        </div>
        {state === 'approved' ? (
          <>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 11, background: 'var(--aqua-50)', borderRadius: 11, padding: '9px 12px', fontSize: 12, color: 'var(--ink-700)', lineHeight: 1.5 }}>
              <Icon name="check-circle" size={15} style={{ color: 'var(--aqua-700)', flexShrink: 0 }} />Homeowner approved it in advance — do the swap, snap a photo, mark it done.
            </div>
            <button onClick={() => { setState('done'); toast && toast('Filter replacement on the record — homeowner can see it', 'green'); }} className="btn btn-dark btn-block" style={{ minHeight: 46, marginTop: 11 }}><Icon name="check-circle" size={18} />Mark complete</button>
          </>
        ) : (
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 11, background: 'var(--green-50)', borderRadius: 11, padding: '9px 12px', fontSize: 12.5, fontWeight: 600, color: 'var(--green-800)' }}>
            <Icon name="check-circle" size={15} style={{ flexShrink: 0 }} />On the record — it's already in the homeowner's timeline.
          </div>
        )}
      </div>
    </div>
  );
}

/* ─── OWNER · "Work & repairs" card on customer detail (mobile) ─────── */
function OwnerWorkCardM({ c, go }) {
  const w = WORKITEMS[0];
  return (
    <div style={{ marginTop: 10 }} data-comment-anchor="owner-work-card">
      <div className="card" style={{ padding: 13 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
          <IconBadge icon="filter" tone="aqua" size={38} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontWeight: 700, fontSize: 13.5, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{w.label} · {fmtMoney(w.cost)}</div>
            <div style={{ fontSize: 11.5, color: 'var(--ink-500)', whiteSpace: 'nowrap' }}>{w.date} · waiting on {c.name.split(' ')[0]}'s OK</div>
          </div>
          <Mono tone="ink" icon="clock">SENT</Mono>
        </div>
        <button onClick={() => go('o_schedule_work', { id: c.id })} className="btn btn-secondary btn-block" style={{ minHeight: 42, marginTop: 11 }}><Icon name="filter" size={16} />Schedule work or a repair</button>
      </div>
    </div>
  );
}

/* ─── OWNER · schedule-work screen (mobile) ─────────────────────────── */
function OwnerScheduleWorkM({ go, params, toast }) {
  const c = CUSTOMERS.find(x => x.id === (params && params.id)) || CUSTOMERS[1];
  const equip = (window.equipFor ? window.equipFor(c.id) : []);
  const [eqId, setEqId] = React.useState((params && params.equip) || null);
  const [eqFree, setEqFree] = React.useState('');
  const eqSel = equip.find(e => e.id === eqId) || null;
  const [type, setType] = React.useState('filter');
  const [custom, setCustom] = React.useState('');
  const [date, setDate] = React.useState('Sat, Jun 14');
  const [cost, setCost] = React.useState(18000);
  const [sent, setSent] = React.useState(false);
  const t = WORK_TYPES.find(x => x.key === type);
  const pick = (k) => { setType(k); const wt = WORK_TYPES.find(x => x.key === k); if (wt.cents) setCost(wt.cents); };
  const first = c.name.split(' ')[0];

  if (sent) {
    return (
      <Screen padBottom={26} footer={<ActionBar><button onClick={() => go('o_customer', { id: c.id })} className="btn btn-primary btn-block">Back to {first}</button></ActionBar>}>
        <TopBar title="Schedule work" onBack={() => go('o_customer', { id: c.id })} />
        <div style={{ padding: '30px 18px 0', textAlign: 'center' }}>
          <span style={{ width: 76, height: 76, borderRadius: '50%', background: 'var(--green-700)', display: 'inline-grid', placeItems: 'center', color: '#fff', boxShadow: 'var(--shadow-green)' }}><Icon name="send" size={36} /></span>
          <h1 style={{ marginTop: 14, fontSize: 25 }}>Sent for approval</h1>
          <p style={{ fontSize: 14, color: 'var(--ink-500)', marginTop: 6, lineHeight: 1.55, maxWidth: 300, marginLeft: 'auto', marginRight: 'auto' }}>
            {first} just got it — <b>{type === 'custom' ? (custom || 'Custom work') : t.label}, {date}, {fmtMoney(cost)}</b>. Nothing happens until they approve, and the price they approve is the price they pay. No surprises at the invoice.
          </p>
          {eqSel && (
            <div style={{ maxWidth: 320, margin: '16px auto 0' }}>
              <EquipRepairChain stage={1} />
              <div style={{ fontSize: 12, color: 'var(--ink-500)', marginTop: 12, lineHeight: 1.45 }}>Linked to <b style={{ color: 'var(--ink-900)' }}>{(window.EQUIP_TYPES[eqSel.type] || {}).label} · {eqSel.make}</b> — once it's done, it appends to that item's service history.</div>
            </div>
          )}
        </div>
      </Screen>
    );
  }

  return (
    <Screen padBottom={24} footer={
      <ActionBar><button onClick={() => setSent(true)} className="btn btn-primary btn-block" style={{ minHeight: 48 }}><Icon name="send" size={18} />Send to {first} for approval</button></ActionBar>}>
      <TopBar title="Schedule work" subtitle="Approved up front — billed only when done" onBack={() => go('o_customer', { id: c.id })} />
      {/* customer */}
      <div style={{ padding: '4px 18px 0' }}>
        <div className="card" style={{ padding: '11px 13px', display: 'flex', alignItems: 'center', gap: 11 }}>
          <Avatar name={c.name} size={36} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontWeight: 700, fontSize: 13.5 }}>{c.name}</div>
            <div style={{ fontSize: 11.5, color: 'var(--ink-500)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{c.addr}, {c.city} · {c.svc}</div>
          </div>
          <Icon name="chevron-down" size={16} style={{ color: 'var(--ink-300)' }} />
        </div>
      </div>
      {/* what */}
      <div style={{ padding: '14px 18px 0' }}>
        <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--ink-700)', marginBottom: 8 }}>What's the work?</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          {WORK_TYPES.map(wt => {
            const on = type === wt.key;
            const tn = WORK_TONE[wt.tone];
            return (
              <button key={wt.key} onClick={() => pick(wt.key)} style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '11px 12px', borderRadius: 13, border: on ? `2px solid ${tn.fg}` : '1.5px solid var(--ink-100)', background: on ? tn.bg : '#fff', cursor: 'pointer', textAlign: 'left', gridColumn: wt.key === 'custom' ? '1 / -1' : 'auto' }}>
                <span style={{ width: 30, height: 30, borderRadius: 9, background: on ? tn.solid : 'var(--ink-50)', display: 'grid', placeItems: 'center', color: on ? '#fff' : 'var(--ink-600,#6E6B60)', flexShrink: 0 }}><Icon name={wt.icon} size={16} /></span>
                <span style={{ flex: 1, minWidth: 0 }}>
                  <span style={{ display: 'block', fontWeight: 700, fontSize: 12.5, color: on ? tn.fg : 'var(--ink-900)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{wt.label}</span>
                  {wt.every && <span style={{ display: 'block', fontSize: 10, color: 'var(--ink-500)' }}>{wt.every}</span>}
                </span>
              </button>
            );
          })}
        </div>
        {type === 'custom' && (
          <input className="input" placeholder="Describe it — e.g. heater inspection" value={custom} onChange={e => setCustom(e.target.value)} style={{ marginTop: 8, padding: '12px 13px', fontSize: 14 }} />
        )}
      </div>
      {/* against which equipment — ties the repair to a tracked part */}
      {equip.length > 0 && (
        <div style={{ padding: '14px 0 0' }}>
          <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--ink-700)', marginBottom: 8, padding: '0 18px' }}>Against which equipment? <span style={{ color: 'var(--ink-400,#A8A498)', fontWeight: 600 }}>· optional</span></div>
          <div style={{ display: 'flex', gap: 8, overflowX: 'auto', padding: '2px 18px 4px', WebkitOverflowScrolling: 'touch', scrollbarWidth: 'none' }}>
            {equip.map(e => {
              const on = eqId === e.id; const et = window.EQUIP_TYPES[e.type] || {};
              return (
                <button key={e.id} onClick={() => { setEqId(on ? null : e.id); setEqFree(''); }} style={{ flex: '0 0 auto', width: 132, display: 'flex', flexDirection: 'column', gap: 6, padding: '11px 11px', borderRadius: 14, border: on ? '2px solid var(--aqua-500)' : '1.5px solid var(--ink-100)', background: on ? 'var(--aqua-50)' : '#fff', cursor: 'pointer', textAlign: 'left' }}>
                  <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <EquipPaper type={e.type} size={36} />
                    <span style={{ width: 19, height: 19, borderRadius: '50%', border: on ? 'none' : '2px solid var(--ink-200)', background: on ? 'var(--aqua-700)' : 'transparent', display: 'grid', placeItems: 'center', color: '#fff', flexShrink: 0 }}>{on && <Icon name="check" size={11} strokeWidth={3} />}</span>
                  </span>
                  <span style={{ display: 'block', fontWeight: 700, fontSize: 12.5, color: on ? 'var(--aqua-700)' : 'var(--ink-900)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{et.label} · {e.make}</span>
                  <span style={{ display: 'block', fontSize: 10.5, color: 'var(--ink-500)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{e.model}</span>
                </button>
              );
            })}
            {/* freeform — something not on the record yet */}
            <button onClick={() => { setEqId('free'); }} style={{ flex: '0 0 auto', width: 132, display: 'flex', flexDirection: 'column', gap: 6, padding: '11px 11px', borderRadius: 14, border: eqId === 'free' ? '2px solid var(--aqua-500)' : '1.5px dashed var(--ink-200)', background: eqId === 'free' ? 'var(--aqua-50)' : '#fff', cursor: 'pointer', textAlign: 'left' }}>
              <span style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--ink-50)', display: 'grid', placeItems: 'center', color: 'var(--ink-500)' }}><Icon name="plus" size={19} strokeWidth={2.4} /></span>
              <span style={{ display: 'block', fontWeight: 700, fontSize: 12.5, color: eqId === 'free' ? 'var(--aqua-700)' : 'var(--ink-900)' }}>Something else</span>
              <span style={{ display: 'block', fontSize: 10.5, color: 'var(--ink-500)' }}>Not on the record</span>
            </button>
          </div>
          {eqId === 'free' && (
            <div style={{ padding: '10px 18px 0' }}>
              <input className="input" value={eqFree} onChange={e => setEqFree(e.target.value)} placeholder="Name the part — e.g. waterline tile, deck drain" style={{ padding: '12px 13px', fontSize: 14 }} />
            </div>
          )}
          {eqSel && <div style={{ padding: '0 18px', fontSize: 11.5, color: 'var(--ink-500)', marginTop: 9, display: 'flex', alignItems: 'flex-start', gap: 7, lineHeight: 1.45 }}><Icon name="ledger" size={13} style={{ color: 'var(--aqua-700)', flexShrink: 0, marginTop: 1 }} />When done, this appends to {eqSel.make} {(window.EQUIP_TYPES[eqSel.type] || {}).label.toLowerCase()}'s service history.</div>}
          {eqId === 'free' && eqFree.trim() && <div style={{ padding: '0 18px', fontSize: 11.5, color: 'var(--ink-500)', marginTop: 9, display: 'flex', alignItems: 'flex-start', gap: 7, lineHeight: 1.45 }}><Icon name="ledger" size={13} style={{ color: 'var(--aqua-700)', flexShrink: 0, marginTop: 1 }} />Logged against "{eqFree.trim()}" — you can add it to the equipment record later.</div>}
        </div>
      )}
      {/* when */}
      <div style={{ padding: '14px 18px 0' }}>
        <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--ink-700)', marginBottom: 8 }}>When?</div>
        <div style={{ display: 'flex', gap: 7, flexWrap: 'wrap', marginBottom: 10 }}>
          {['Sat, Jun 14', 'Tue, Jun 17', 'Sat, Jun 21'].map(dd => (
            <button key={dd} onClick={() => setDate(dd)} style={{ padding: '9px 13px', borderRadius: 11, border: date === dd ? '2px solid var(--green-500)' : '1.5px solid var(--ink-200)', background: date === dd ? 'var(--green-50)' : '#fff', color: date === dd ? 'var(--green-800)' : 'var(--ink-700)', fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, cursor: 'pointer' }}>{dd}</button>
          ))}
        </div>
        <MiniCalendar value={date} onChange={setDate} />
      </div>
      {/* cost */}
      <div style={{ padding: '14px 18px 0' }}>
        <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--ink-700)', marginBottom: 8 }}>Cost — {first} approves exactly this</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, background: '#fff', border: '1.5px solid var(--ink-200)', borderRadius: 'var(--radius-md)', padding: '0 14px' }}>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 20, color: 'var(--ink-400,#A8A498)' }}>$</span>
          <input value={(cost / 100).toFixed(0)} onChange={e => setCost(Math.round((+e.target.value.replace(/[^0-9]/g, '') || 0) * 100))} inputMode="numeric" style={{ flex: 1, border: 'none', outline: 'none', padding: '13px 0', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 20, background: 'transparent', width: '100%' }} />
          <span style={{ fontSize: 12.5, color: 'var(--ink-500)', fontWeight: 600 }}>parts &amp; labor</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 7, marginTop: 10, fontSize: 11.5, color: 'var(--ink-500)', lineHeight: 1.5 }}>
          <Icon name="shield" size={13} style={{ color: 'var(--blue-700)', flexShrink: 0, marginTop: 1 }} />
          {first} approves before anyone shows up; it bills only after the pro marks it done. That's the whole point — no end-of-year surprises.
        </div>
      </div>
    </Screen>
  );
}

/* ─── OWNER · desktop “Work & repairs” card (inline schedule form) ──── */
function OwnerWorkCardDesk({ c, toast }) {
  const [open, setOpen] = React.useState(false);
  const [type, setType] = React.useState('filter');
  const [date, setDate] = React.useState('Sat, Jun 14');
  const [cost, setCost] = React.useState(18000);
  const [items, setItems] = React.useState([{ ...WORKITEMS[0] }]);
  const first = c.name.split(' ')[0];
  const send = () => {
    const t = WORK_TYPES.find(x => x.key === type);
    setItems(it => [{ id: 'w' + (it.length + 9), type, label: t.label, date, cost, state: 'sent' }, ...it]);
    setOpen(false);
    toast && toast(`Sent to ${first} for approval — ${t.label}, ${fmtMoney(cost)}`, 'aqua');
  };
  return (
    <div className="card" style={{ padding: 18 }} data-comment-anchor="owner-work-desk">
      <SectionHead tone="aqua" icon="filter" style={{ marginBottom: 14 }} meta={`${first} approves before anyone shows up`}>Work &amp; repairs</SectionHead>
      <div style={{ display: 'grid', gap: 9 }}>
        {items.map(w => (
          <div key={w.id} style={{ display: 'flex', alignItems: 'center', gap: 11, background: 'var(--paper)', border: '1px solid var(--ink-100)', borderRadius: 13, padding: '10px 13px' }}>
            <IconBadge icon={(WORK_TYPES.find(x => x.key === w.type) || WORK_TYPES[0]).icon} tone="aqua" size={34} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontWeight: 700, fontSize: 13.5, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{w.label} · {fmtMoney(w.cost)}</div>
              <div style={{ fontSize: 11.5, color: 'var(--ink-500)', whiteSpace: 'nowrap' }}>{w.date}</div>
            </div>
            <Mono tone="ink" icon="clock">WAITING ON {first.toUpperCase()}</Mono>
          </div>
        ))}
      </div>
      {!open ? (
        <button onClick={() => setOpen(true)} className="btn btn-secondary" style={{ marginTop: 12, minHeight: 42 }}><Icon name="filter" size={16} />Schedule work or a repair</button>
      ) : (
        <div style={{ marginTop: 12, border: '1.5px dashed var(--aqua-200,#A9E6EB)', borderRadius: 14, padding: 14 }}>
          <div style={{ display: 'flex', gap: 7, flexWrap: 'wrap' }}>
            {WORK_TYPES.map(wt => {
              const on = type === wt.key; const tn = WORK_TONE[wt.tone];
              return <button key={wt.key} onClick={() => { setType(wt.key); if (wt.cents) setCost(wt.cents); }} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '8px 12px', borderRadius: 11, border: on ? `2px solid ${tn.fg}` : '1.5px solid var(--ink-200)', background: on ? tn.bg : '#fff', color: on ? tn.fg : 'var(--ink-700)', fontSize: 12.5, fontWeight: 700, cursor: 'pointer' }}><Icon name={wt.icon} size={14} />{wt.label}</button>;
            })}
          </div>
          <div style={{ display: 'flex', gap: 10, marginTop: 11, alignItems: 'center', flexWrap: 'wrap' }}>
            <span style={{ display: 'inline-flex', gap: 6 }}>
              {['Sat, Jun 14', 'Tue, Jun 17'].map(dd => (
                <button key={dd} onClick={() => setDate(dd)} style={{ padding: '8px 11px', borderRadius: 10, border: date === dd ? '2px solid var(--green-500)' : '1.5px solid var(--ink-200)', background: date === dd ? 'var(--green-50)' : '#fff', fontFamily: 'var(--font-mono)', fontSize: 11.5, fontWeight: 700, color: date === dd ? 'var(--green-800)' : 'var(--ink-700)', cursor: 'pointer' }}>{dd}</button>
              ))}
            </span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, border: '1.5px solid var(--ink-200)', borderRadius: 10, padding: '0 10px' }}>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 15, color: 'var(--ink-400,#A8A498)' }}>$</span>
              <input value={(cost / 100).toFixed(0)} onChange={e => setCost(Math.round((+e.target.value.replace(/[^0-9]/g, '') || 0) * 100))} style={{ width: 56, border: 'none', outline: 'none', padding: '8px 0', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 15, background: 'transparent' }} />
            </span>
            <button onClick={send} className="btn btn-primary" style={{ minHeight: 40, marginLeft: 'auto' }}><Icon name="send" size={15} />Send for approval</button>
          </div>
          <div style={{ fontSize: 11.5, color: 'var(--ink-500)', marginTop: 10 }}>Bills only after it's done — the price {first} approves is the price {first} pays.</div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { WORK_TYPES, WORK_TONE, WORKITEMS, WorkState, HomeWorkUpcoming, HomeWorkDone, ProWorkCard, OwnerWorkCardM, OwnerScheduleWorkM, OwnerWorkCardDesk });