/* ============================================================================
   MOWDEW PRO — Worker mobile app (MOBILE ONLY)
   Privacy-first: the Pro NEVER sees customer names — only a property label
   like "Crestline Ave pool". No pricing, no payment. Just the route, auto
   check-in/out, before/after + chemistry capture, and field notes to the office.
   ========================================================================= */

const PRO = { name: 'Marco Ruiz', role: 'Pool & garden Pro' };

// name-hidden route stops
const PRO_STOPS = [
  { id: 's1', label: 'Oak Ridge Ct', vert: 'garden', svc: 'Mow & edge', status: 'done', in: '9:06 AM', out: '9:41 AM', dur: '35 min', eta: null, geo: true },
  { id: 's2', label: 'Crestline Ave', vert: 'pool', svc: 'Pool service', status: 'onsite', in: '10:12 AM', out: null, dur: null, eta: null, geo: true },
  { id: 's3', label: 'Brookhaven Ln', vert: 'garden', svc: 'Mow & blow', status: 'upcoming', in: null, out: null, dur: null, eta: '11:15 AM', geo: true },
  { id: 's4', label: 'Marin Vista', vert: 'pool', svc: 'Pool service', status: 'upcoming', in: null, out: null, dur: null, eta: '2:30 PM', movedFrom: '12:30 PM', geo: true },
  { id: 's5', label: 'Cypress Ct', vert: 'pool', svc: 'Pool service', status: 'upcoming', in: null, out: null, dur: null, eta: '1:20 PM', geo: false, isNew: true },
];

// field notes sent to the office (owner), not the customer
const PRO_NOTES_LOG = [
  { id: 'n1', label: 'Crestline Ave', vert: 'pool', t: 'Customer asked if we can add a monthly filter deep-clean. Routing to you.', at: '10:31 AM', status: 'sent' },
  { id: 'n2', label: 'Oak Ridge Ct', vert: 'garden', t: 'Back gate latch is loose — flagged for the owner to mention.', at: '9:38 AM', status: 'seen' },
  { id: 'n3', label: 'Marin Vista', vert: 'pool', t: 'Skimmer basket cracked, replaced from truck stock.', at: 'Yesterday', status: 'seen' },
];

function proChip(s) {
  if (s.status === 'done') return <Chip tone="done" icon="check">Done</Chip>;
  if (s.status === 'onsite') return <Chip tone="live" pulse>On-site</Chip>;
  return <Chip tone="soon">Upcoming</Chip>;
}

/* privacy banner */
function PrivacyNote({ style = {} }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 9, background: 'var(--ink-50)', border: '1px solid var(--ink-100)', borderRadius: 'var(--radius-md)', padding: '9px 12px', ...style }}>
      <Icon name="eye-off" size={16} style={{ color: 'var(--ink-500)', flexShrink: 0 }} />
      <span style={{ fontSize: 12, color: 'var(--ink-600,#6E6B60)' }}>Customer names stay private. You see property labels only.</span>
    </div>
  );
}

/* ============================== PRO · TODAY / ROUTE ==================
   Calm by design: ONE stop — the active (or next) one — gets the hero
   treatment and the only button. Every other stop is a quiet numbered row.
   No status pills; record-mark type only.                                 */
function ProToday({ go, openFab, toast }) {
  const doneCount = PRO_STOPS.filter(s => s.status === 'done').length;
  const active = PRO_STOPS.find(s => s.status === 'onsite') || PRO_STOPS.find(s => s.status === 'upcoming');
  const av = VERT(active.vert);
  const onsite = active.status === 'onsite';
  return (
    <Screen padBottom={26} footer={<TabBar role="provider" active="pro_today" go={go} onFab={openFab} />}>
      <div style={{ padding: '8px 18px 2px', display: 'flex', alignItems: 'center', gap: 12 }}>
        <Logo size={34} />
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 12.5, color: 'var(--ink-500)', fontWeight: 600 }}>Tue, May 12 · {doneCount} of {PRO_STOPS.length} done</div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 21, letterSpacing: '-0.02em' }}>Hi, Marco</div>
        </div>
        <button onClick={() => go('p_notifs')} aria-label="Notifications" style={{ width: 42, height: 42, borderRadius: '50%', border: '1px solid var(--ink-100)', background: '#fff', display: 'grid', placeItems: 'center', cursor: 'pointer', position: 'relative' }}>
          <Icon name="bell" size={20} />
          {notifUnreadCount('pro') > 0 && <span style={{ position: 'absolute', top: -3, right: -3, minWidth: 19, height: 19, borderRadius: 99, background: 'var(--alert-500)', color: '#fff', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 11, display: 'grid', placeItems: 'center', padding: '0 5px', border: '2px solid #fff' }}>{notifUnreadCount('pro')}</span>}
        </button>
      </div>

      {/* map */}
      <div style={{ padding: '10px 18px 0' }}><RouteMap onExpand={() => {}} /></div>

      {/* heading-to-next — ETA only, no live trail */}
      <ProHeadingCard toast={toast} />

      {/* THE one thing that matters now */}
      <div style={{ padding: '16px 18px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 9 }}>
          <span className={onsite ? 'tn-pulse' : ''} style={{ width: 9, height: 9, borderRadius: '50%', background: onsite ? 'var(--blue-500)' : 'var(--yellow-500)', flexShrink: 0 }} />
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, fontWeight: 600, letterSpacing: '.14em', color: onsite ? 'var(--blue-700)' : 'var(--yellow-700)' }}>{onsite ? 'ON-SITE NOW' : 'UP NEXT'}</span>
        </div>
        <div onClick={() => go('pro_visit', { id: active.id })} className="card" style={{ padding: 16, cursor: 'pointer', minWidth: 0, boxSizing: 'border-box', borderColor: onsite ? 'var(--blue-300)' : 'var(--ink-100)', boxShadow: onsite ? '0 0 0 3px var(--blue-50), var(--shadow-md)' : 'var(--shadow-md)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 13 }}>
            <IconBadge icon={av.icon} tone={av.tone} size={50} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 18, letterSpacing: '-0.02em', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{active.label} {av.name.toLowerCase()}</div>
              <div style={{ fontSize: 13, color: 'var(--ink-500)', marginTop: 2 }}>{active.svc}{onsite ? ` · on-site since ${active.in}` : ` · ETA ${active.eta}`}</div>
            </div>
          </div>
          <button onClick={(e) => { e.stopPropagation(); go('pro_visit', { id: active.id }); }} className="btn btn-blue btn-block" style={{ minHeight: 48, marginTop: 13 }}>
            {onsite ? 'Open visit' : 'Start this stop'}<Icon name="arrow-right" size={18} />
          </button>
        </div>
      </div>

      {/* everything else — one quiet list */}
      <div style={{ padding: '18px 18px 0' }}>
        <SectionHead tone="ink" icon="route" style={{ marginBottom: 10 }} meta={<span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, whiteSpace: 'nowrap' }}><Icon name="target" size={12} strokeWidth={2.4} />auto check-in on</span>}>The rest of today</SectionHead>
        <div className="card" style={{ overflow: 'hidden' }}>
          {PRO_STOPS.filter(st => st.id !== active.id).map((st, ri) => {
            const i = PRO_STOPS.indexOf(st);
            const v = VERT(st.vert);
            const isDone = st.status === 'done';
            return (
              <div key={st.id} onClick={() => go('pro_visit', { id: st.id })} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', borderTop: ri ? '1px solid var(--ink-100)' : 'none', cursor: 'pointer', opacity: isDone ? 0.55 : 1 }}>
                <span style={{ width: 26, height: 26, borderRadius: '50%', flexShrink: 0, display: 'grid', placeItems: 'center', background: isDone ? 'var(--green-50)' : 'var(--ink-50)', color: isDone ? 'var(--green-700)' : 'var(--ink-600,#6E6B60)', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 12 }}>
                  {isDone ? <Icon name="check" size={14} strokeWidth={3} /> : i + 1}
                </span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: 700, fontSize: 13.5, color: isDone ? 'var(--ink-500)' : 'var(--ink-900)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{st.label} {v.name.toLowerCase()}</div>
                  {(st.movedFrom || st.isNew) && !isDone && (
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '.05em', marginTop: 2, color: st.isNew ? 'var(--green-800)' : 'var(--yellow-700)' }}>
                      {st.isNew ? 'NEW ON YOUR ROUTE' : `MOVED · WAS ${st.movedFrom}`}
                    </div>
                  )}
                </div>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600, color: 'var(--ink-400,#A8A498)', whiteSpace: 'nowrap', flexShrink: 0 }}>
                  {isDone ? `${st.in} – ${st.out}` : `ETA ${st.eta}`}
                </span>
              </div>
            );
          })}
        </div>
      </div>

      {/* approved work on his day — homeowner OK'd it in advance */}
      <ProWorkCard toast={toast} />
    </Screen>
  );
}

/* ============================== PRO · ACTIVE VISIT (+ CHEMISTRY) ===== */
function ProVisit({ go, params, toast }) {
  const s = PRO_STOPS.find(x => x.id === params.id) || PRO_STOPS[1];
  const v = VERT(s.vert);
  const isPool = s.vert === 'pool';
  const [sec, setSec] = React.useState(764);
  const [before, setBefore] = React.useState(s.vert + '-before');
  const [after, setAfter] = React.useState(null);
  const [chem, setChem] = React.useState(null); // null | 'scanning' | reading
  const [notes, setNotes] = React.useState('');
  const [flag, setFlag] = React.useState(false);
  React.useEffect(() => { const t = setInterval(() => setSec(x => x + 1), 1000); return () => clearInterval(t); }, []);

  const reading = { ph: 7.4, cl: 0.8, alk: 100 };
  const scanChem = () => { setChem('scanning'); setTimeout(() => setChem(reading), 900); };
  const cap = (which) => { if (which === 'after') setAfter(s.vert + '-after'); };

  const Tile = ({ which, val, scene }) => (
    <div onClick={() => cap(which)} style={{ cursor: 'pointer' }}>
      {val ? <PhotoTile scene={scene} label={which.toUpperCase()} time={which === 'before' ? s.in : fmtClock(sec)} height={128} />
           : <PhotoTile scene="empty" label={which.toUpperCase()} height={128} icon="camera">Tap to capture</PhotoTile>}
    </div>
  );

  return (
    <Screen padBottom={26} footer={
      <ActionBar>
        <button onClick={() => go('pro_today')} className="btn btn-secondary" style={{ flex: 0.7 }}>Pause</button>
        <button onClick={() => { toast('Checked out · verified', 'green'); go('pro_today'); }} className="btn btn-dark" style={{ flex: 1.6 }}><Icon name="check-circle" size={20} />Check out · {fmtClock(sec)}</button>
      </ActionBar>}>
      <TopBar title={`${s.label} ${v.name.toLowerCase()}`} subtitle={s.svc} onBack={() => go('pro_today')} right={<span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, background: 'var(--ink-50)', borderRadius: 99, padding: '5px 10px', fontSize: 11, fontWeight: 700, color: 'var(--ink-500)' }}><Icon name="lock" size={12} />Private</span>} />

      {/* verified on-site hero */}
      <div style={{ padding: '4px 18px 0' }}>
        <div style={{ background: 'var(--ink-900)', borderRadius: 'var(--radius-2xl)', padding: '18px 18px 16px', color: '#fff', position: 'relative', overflow: 'hidden' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
            <Tag tone={isPool ? 'aqua' : 'green'} onDark style={{ whiteSpace: 'nowrap' }}>On-site now</Tag>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: 'rgba(70,182,240,.2)', border: '1px solid rgba(70,182,240,.4)', color: '#9Fd6F8', padding: '4px 10px', borderRadius: 99, fontSize: 11.5, fontWeight: 700, whiteSpace: 'nowrap', flexShrink: 0 }}><Icon name="shield" size={13} strokeWidth={2.4} />Verified on-site</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginTop: 14 }}>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '.1em', color: 'rgba(255,255,255,.6)' }}>ON-SITE TIMER</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 46, letterSpacing: '-0.03em', fontVariantNumeric: 'tabular-nums', lineHeight: 1 }}>{fmtClock(sec)}</div>
            </div>
            <div style={{ textAlign: 'right', flexShrink: 0 }}>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'rgba(255,255,255,.8)', fontWeight: 600, whiteSpace: 'nowrap' }}><Icon name="target" size={14} />Auto check-in</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'rgba(255,255,255,.6)', marginTop: 3, whiteSpace: 'nowrap' }}>{s.in} · 40 FT</div>
            </div>
          </div>
        </div>
      </div>

      {/* before / after */}
      <div style={{ padding: '16px 18px 0' }}>
        <SectionHead tone={isPool ? 'aqua' : 'green'} icon="camera" style={{ marginBottom: 12 }} meta={`${(before ? 1 : 0) + (after ? 1 : 0)}/2 captured`}>Before &amp; after</SectionHead>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          <Tile which="before" val={before} scene={s.vert + '-before'} />
          <Tile which="after" val={after} scene={isPool ? 'pool-clean' : 'lawn-after'} />
        </div>
      </div>

      {/* CHEMISTRY — pool only → full logging screen */}
      {isPool && (
        <div style={{ padding: '18px 18px 0' }}>
          <SectionHead tone="aqua" icon="flask" style={{ marginBottom: 12 }}>Water chemistry</SectionHead>
          {!chem || chem === 'scanning' ? (
            <div onClick={() => go('pro_chem', { id: s.id })} className="card" style={{ cursor: 'pointer', padding: 16, borderColor: 'var(--aqua-100)', display: 'flex', alignItems: 'center', gap: 14 }}>
              <span style={{ width: 52, height: 52, borderRadius: 14, background: 'var(--aqua-500)', display: 'grid', placeItems: 'center', color: '#fff', flexShrink: 0 }}><Icon name="flask" size={26} /></span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 16 }}>Log water chemistry</div>
                <div style={{ fontSize: 12.5, color: 'var(--aqua-700)' }}>Snap the test kit or enter readings — shared with the homeowner</div>
              </div>
              <Icon name="arrow-right" size={22} style={{ color: 'var(--aqua-700)' }} />
            </div>
          ) : (
            <div onClick={() => go('pro_chem', { id: s.id })} className="card" style={{ padding: 16, borderColor: 'var(--aqua-100)', cursor: 'pointer' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 6 }}>
                <span style={{ width: 38, height: 38, borderRadius: 11, background: 'var(--aqua-50)', display: 'grid', placeItems: 'center', color: 'var(--aqua-700)', flexShrink: 0 }}><Icon name="check-circle" size={20} /></span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 700, fontSize: 13.5 }}>Readings logged</div>
                  <div style={{ fontSize: 11.5, color: 'var(--ink-500)' }}>{s.in} · shared with the homeowner</div>
                </div>
                <LsiChip lsi={computeLSI(chem)} />
              </div>
              <div style={{ borderTop: '1px solid var(--ink-100)', marginTop: 6 }}>
                <ChemReadout rkey="ph" value={chem.ph} />
                <div style={{ borderTop: '1px solid var(--ink-100)' }} />
                <ChemReadout rkey="cl" value={chem.cl} />
                <div style={{ borderTop: '1px solid var(--ink-100)' }} />
                <ChemReadout rkey="alk" value={chem.alk} />
              </div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, marginTop: 10, fontSize: 12, fontWeight: 600, color: 'var(--aqua-700)' }}><Icon name="flask" size={14} />Tap to edit readings</div>
            </div>
          )}
        </div>
      )}

      {/* equipment on this property — pool only */}
      {isPool && (
        <div style={{ padding: '18px 18px 0' }}>
          <div onClick={() => go('pro_equipment', { id: s.id })} className="card" style={{ cursor: 'pointer', padding: 14, display: 'flex', alignItems: 'center', gap: 12 }}>
            <span style={{ width: 42, height: 42, borderRadius: 12, background: 'var(--aqua-50)', display: 'grid', placeItems: 'center', color: 'var(--aqua-700)', flexShrink: 0 }}><Icon name="flask" size={21} /></span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontWeight: 700, fontSize: 14 }}>Equipment on the record</div>
              <div style={{ fontSize: 12, color: 'var(--ink-500)' }}>5 parts · add or flag for repair</div>
            </div>
            <Icon name="arrow-right" size={20} style={{ color: 'var(--aqua-700)' }} />
          </div>
        </div>
      )}

      {/* field notes -> office */}
      <div style={{ padding: '18px 18px 0' }}>
        <SectionHead tone="green" icon="notes" style={{ marginBottom: 12 }} meta={<span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><Icon name="lock" size={12} />Goes to the office, not the customer</span>}>Field note</SectionHead>
        <textarea value={notes} onChange={e => setNotes(e.target.value)} className="input" rows={2} placeholder="Anything the owner should know or relay…" style={{ resize: 'none', lineHeight: 1.5 }} />
        <button onClick={() => { setNotes(''); toast('Note sent to the office', 'green'); }} disabled={!notes.trim()} className="btn btn-secondary btn-block" style={{ marginTop: 9 }}><Icon name="send" size={17} />Send to office</button>
        <button onClick={() => setFlag(true)} className="btn btn-secondary btn-block" style={{ marginTop: 9 }}><Icon name="camera" size={17} />Flag an issue with a photo</button>
      </div>
      <ProFlagSheet open={flag} onClose={() => setFlag(false)} toast={toast} label={s.label} />
    </Screen>
  );
}

/* ============================== PRO · DONE TODAY ==================== */
function ProDone({ go, openFab }) {
  const done = PRO_STOPS.filter(s => s.status === 'done').concat(PRO_STOPS.filter(s => s.status === 'onsite'));
  return (
    <Screen footer={<TabBar role="provider" active="pro_done" go={go} onFab={openFab} />}>
      <TopBar title="Done today" big subtitle="Verified visits you've completed" />
      <div style={{ padding: '4px 18px 0', display: 'grid', gap: 12 }}>
        {[PRO_STOPS[0]].map(s => {
          const v = VERT(s.vert);
          return (
            <div key={s.id} onClick={() => go('pro_visit', { id: s.id })} className="card" style={{ padding: 14, cursor: 'pointer' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
                <IconBadge icon={v.icon} tone={v.tone} size={44} />
                <div style={{ flex: 1 }}><h3>{s.label} {v.name.toLowerCase()}</h3><div style={{ fontSize: 12.5, color: 'var(--ink-500)' }}>{s.in} – {s.out} · {s.dur}</div></div>
                <Mono tone="blue" icon="shield">AUTO CHECK-IN</Mono>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                <PhotoTile scene="lawn-before" label="BEFORE" height={84} />
                <PhotoTile scene="lawn-after" label="AFTER" height={84} />
              </div>
            </div>
          );
        })}
        <div style={{ textAlign: 'center', padding: '20px 0 8px', color: 'var(--ink-400,#A8A498)' }}>
          <Dewy size={78} mood="happy" />
          <div style={{ fontSize: 13.5, color: 'var(--ink-500)', marginTop: 4, fontWeight: 600 }}>4 more stops on today's route</div>
        </div>
      </div>
    </Screen>
  );
}

/* ============================== PRO · NOTES LOG ===================== */
function ProNotes({ go, openFab, toast }) {
  const [sheet, setSheet] = React.useState(false);
  const [label, setLabel] = React.useState(null);
  const [text, setText] = React.useState('');
  const [extra, setExtra] = React.useState([]);
  const send = () => {
    const stop = PRO_STOPS.find(s => s.id === label) || PRO_STOPS[0];
    setExtra(e => [{ id: 'nx' + Date.now(), label: stop.label, vert: stop.vert, t: text.trim(), at: 'Just now', status: 'sent' }, ...e]);
    setSheet(false); setText(''); setLabel(null);
    toast('Note sent to the office', 'green');
  };
  const notes = [...extra, ...PRO_NOTES_LOG];
  return (
    <Screen footer={<TabBar role="provider" active="pro_notes" go={go} onFab={() => setSheet(true)} />}>
      <TopBar title="Field notes" big subtitle="Requests & flags you've sent to the office" right={<button onClick={() => setSheet(true)} style={{ width: 42, height: 42, borderRadius: 12, border: 'none', background: 'var(--green-700)', display: 'grid', placeItems: 'center', cursor: 'pointer', color: '#fff', boxShadow: 'var(--shadow-green)' }}><Icon name="plus" size={21} strokeWidth={2.4} /></button>} />
      <div style={{ padding: '14px 18px 0', display: 'grid', gap: 11 }}>
        {notes.map(n => {
          const v = VERT(n.vert);
          return (
            <div key={n.id} className="card" style={{ padding: 14 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 9 }}>
                <IconBadge icon={v.icon} tone={v.tone} size={34} />
                <div style={{ flex: 1 }}><div style={{ fontWeight: 700, fontSize: 13.5 }}>{n.label} {v.name.toLowerCase()}</div><div style={{ fontSize: 11.5, color: 'var(--ink-500)' }}>{n.at}</div></div>
                {n.status === 'seen' ? <Chip tone="done" icon="check">Seen</Chip> : <Chip tone="live">Sent</Chip>}
              </div>
              <p style={{ fontSize: 13.5, color: 'var(--ink-700)', lineHeight: 1.5 }}>{n.t}</p>
            </div>
          );
        })}
      </div>

      {/* new note sheet */}
      <Sheet open={sheet} onClose={() => setSheet(false)} title="New field note">
        <div style={{ fontSize: 13, color: 'var(--ink-500)', marginTop: -6, marginBottom: 14 }}>Goes to the office, not the customer. Pick the property — names stay private.</div>
        <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--ink-700)', marginBottom: 8 }}>Which property?</div>
        <div style={{ display: 'grid', gap: 8, marginBottom: 16 }}>
          {PRO_STOPS.map(s => {
            const v = VERT(s.vert); const on = label === s.id;
            return (
              <button key={s.id} onClick={() => setLabel(s.id)} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '11px 13px', borderRadius: 'var(--radius-lg)', border: on ? `2px solid ${v.c500}` : '1.5px solid var(--ink-100)', background: on ? v.c50 : '#fff', cursor: 'pointer', textAlign: 'left' }}>
                <IconBadge icon={v.icon} tone={v.tone} size={34} />
                <div style={{ flex: 1, minWidth: 0 }}><div style={{ fontWeight: 700, fontSize: 13.5 }}>{s.label} {v.name.toLowerCase()}</div><div style={{ fontSize: 11.5, color: 'var(--ink-500)' }}>{s.svc}</div></div>
                <span style={{ width: 22, height: 22, borderRadius: '50%', border: on ? 'none' : '2px solid var(--ink-200)', background: on ? v.c700 : 'transparent', display: 'grid', placeItems: 'center', color: '#fff', flexShrink: 0 }}>{on && <Icon name="check" size={13} strokeWidth={3} />}</span>
              </button>
            );
          })}
        </div>
        <textarea value={text} onChange={e => setText(e.target.value)} className="input" rows={3} placeholder="What should the owner know or relay…" style={{ resize: 'none', lineHeight: 1.5 }} />
        <button onClick={send} disabled={!label || !text.trim()} className="btn btn-primary btn-block" style={{ marginTop: 14 }}><Icon name="send" size={18} />Send to office</button>
      </Sheet>
    </Screen>
  );
}

Object.assign(window, { PRO, PRO_STOPS, ProToday, ProVisit, ProDone, ProNotes, PrivacyNote, proChip });