// apps.jsx — Primeways business app (Part 3) · iOS screens for staff/admin
(function () {
  const R = React, h = R.createElement;
  const { C, SURFACES } = window.PWKit;
  const { Media, Btn, Tag, Ico, Mark, AppHead, TabBar, AppScreen, QA } = window;
  const Avatar = window.CRM._f.Avatar;

  const TABS = [['grid', 'Home'], ['spark', 'Leads'], ['hammer', 'Jobs'], ['image', 'Photos'], ['msg', 'Chat']];
  const Dev = (active, head, body) => h(IOSDevice, { width: 402, height: 874 }, h(AppScreen, { head, tabbar: h(TabBar, { active, tabs: TABS }) }, h('div', { style: { padding: 16, display: 'flex', flexDirection: 'column', gap: 14, height: '100%', overflow: 'hidden' } }, body)));
  const PCard = ({ title, action, children, pad = 14, style }) => h('div', { style: { background: '#fff', borderRadius: 16, border: `1px solid ${C.border}`, boxShadow: C.shadowSm, overflow: 'hidden', ...style } }, title && h('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 14px 0' } }, h('span', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 13, textTransform: 'uppercase', color: C.ink900 } }, title), action), h('div', { style: { padding: pad } }, children));
  const Lab = ({ children }) => h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase', color: C.ink500 } }, children);

  /* 1 · HOME DASHBOARD */
  function Home() {
    return Dev('Home', h(AppHead, { sub: 'Tuesday 10 June', title: 'Good morning, Dave', accent: true, big: true, right: h('div', { style: { position: 'relative' } }, h(Ico, { name: 'bell', size: 22, color: '#fff' }), h('span', { style: { position: 'absolute', top: -2, right: -2, width: 8, height: 8, borderRadius: 8, background: C.accent } })) }),
      h(R.Fragment, null,
        h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10 } }, [['plus', 'Add Lead', true], ['camera', 'Job Photo'], ['file', 'Quote'], ['msg', 'Update'], ['calendar', 'Book Visit'], ['phone', 'Call']].map((q, i) => h(QA, { key: i, icon: q[0], label: q[1], accent: q[2] }))),
        h(PCard, { title: 'Today · 2 site visits', action: h(Tag, { tone: 'brand' }, 'Map') }, h('div', { style: { display: 'flex', flexDirection: 'column', gap: 10 } }, [['09:00', 'Tarmac survey', 'Wilnecote', C.blue], ['14:00', 'Karen Doyle · Resin', 'Tamworth', C.danger]].map((v, i) => h('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 11 } }, h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 13, color: v[3], width: 44 } }, v[0]), h('div', { style: { flex: 1 } }, h('div', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 13.5, color: C.ink900 } }, v[1]), h('div', { style: { fontFamily: C.fontB, fontSize: 12, color: C.ink500 } }, v[2])), h(Ico, { name: 'route', size: 18, color: C.blue }))))),
        h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 } },
          h(PCard, null, h(Lab, null, 'New leads'), h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 30, color: C.ink900 } }, '4'), h('div', { style: { fontFamily: C.fontB, fontSize: 11.5, color: C.success } }, '2 hot · respond today')),
          h(PCard, null, h(Lab, null, 'Quotes to send'), h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 30, color: C.ink900 } }, '3'), h('div', { style: { fontFamily: C.fontB, fontSize: 11.5, color: C.ink500 } }, '£14.6k value'))),
        h(PCard, { style: { background: C.warning100, border: 'none' } }, h('div', { style: { display: 'flex', alignItems: 'center', gap: 12 } }, h(Ico, { name: 'rain', size: 24, color: C.warning }), h('div', null, h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 13, color: C.ink900 } }, 'Weather: heavy rain Thursday'), h('div', { style: { fontFamily: C.fontB, fontSize: 12, color: C.ink600 } }, '2 tarmac jobs may need moving'))))));
  }

  /* 2 · LEAD INBOX */
  function Leads() {
    const leads = [['Karen Doyle', 'Resin · 70m²', 'Tamworth', 'spark', 'Visualiser', 'hot'], ['Mark Evans', 'Tarmac · 2 cars', 'Tamworth', 'file', 'Quote form', 'hot'], ['New caller', 'Driveway enquiry', 'Lichfield', 'phone', 'Missed call', 'warning'], ['Sue Akhtar', 'Block paving', 'Polesworth', 'fb', 'Facebook', 'cold'], ['T. Reilly', 'Tarmac drive', 'Burntwood', 'spark', 'Website', 'warning']];
    return Dev('Leads', h(AppHead, { sub: '4 new today', title: 'Lead Inbox', right: h(Ico, { name: 'filter', size: 21, color: C.ink700 }) }),
      h('div', { style: { display: 'flex', flexDirection: 'column', gap: 10, overflow: 'hidden' } }, leads.map((l, i) => h(PCard, { key: i, pad: 12 }, h('div', { style: { display: 'flex', alignItems: 'center', gap: 11 } },
        h(Avatar, { name: l[0], size: 42, tone: l[5] === 'hot' ? C.danger : l[5] === 'warning' ? C.warning : C.blue }),
        h('div', { style: { flex: 1, minWidth: 0 } }, h('div', { style: { display: 'flex', alignItems: 'center', gap: 6 } }, h('span', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 14.5, color: C.ink900 } }, l[0]), l[5] === 'hot' && h('span', { style: { width: 7, height: 7, borderRadius: 7, background: C.danger } })),
          h('div', { style: { fontFamily: C.fontB, fontSize: 12.5, color: C.ink600 } }, l[1]),
          h('div', { style: { display: 'flex', alignItems: 'center', gap: 6, marginTop: 3 } }, h(Ico, { name: 'pin', size: 12, color: C.ink400 }), h('span', { style: { fontFamily: C.fontB, fontSize: 11.5, color: C.ink500 } }, l[2]), h('span', { style: { width: 3, height: 3, borderRadius: 3, background: C.ink300 } }), h(Ico, { name: l[3], size: 12, color: C.blue }), h('span', { style: { fontFamily: C.fontB, fontSize: 11.5, color: C.ink500 } }, l[4]))),
        h('div', { style: { display: 'flex', flexDirection: 'column', gap: 7 } }, h('div', { style: { width: 38, height: 38, borderRadius: 99, background: C.blue, display: 'flex', alignItems: 'center', justifyContent: 'center' } }, h(Ico, { name: 'phone', size: 17, color: '#fff' })), h('div', { style: { width: 38, height: 38, borderRadius: 99, background: C.ink100, display: 'flex', alignItems: 'center', justifyContent: 'center' } }, h(Ico, { name: 'msg', size: 17, color: C.ink700 }))))))));
  }

  /* 3 · SITE VISIT MODE */
  function SiteVisit() {
    return Dev('Jobs', h(AppHead, { sub: 'Site Visit · 2:00pm', title: 'Karen Doyle', right: h(Ico, { name: 'route', size: 22, color: C.blue }) }),
      h(R.Fragment, null,
        h(PCard, { pad: 12 }, h('div', { style: { display: 'flex', flexDirection: 'column', gap: 8 } }, [['pin', '14 Oak Rise, Tamworth B79 7DN'], ['layers', 'Resin bound · approx 70m²'], ['clock', 'Replacing old tarmac · drainage issue']].map((d, i) => h('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 10, fontFamily: C.fontB, fontSize: 13, color: C.ink700 } }, h(Ico, { name: d[0], size: 16, color: C.blue }), d[1])))),
        h(PCard, { title: 'Customer photos' }, h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8 } }, ['old', 'old', 'old'].map((k, i) => h(Media, { key: i, surface: k, h: 70, radius: 8, label: ['Front', 'Close', 'Drain'][i] })))),
        h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 } },
          h('div', { style: { background: C.blue600, backgroundImage: 'var(--overlay-brand)', borderRadius: 16, padding: 14, display: 'flex', flexDirection: 'column', gap: 6, color: '#fff' } }, h(Ico, { name: 'camera', size: 22, color: '#fff' }), h('span', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 13, textTransform: 'uppercase' } }, 'Take Photos')),
          h('div', { style: { background: '#fff', border: `1px solid ${C.border}`, borderRadius: 16, padding: 14, display: 'flex', flexDirection: 'column', gap: 6 } }, h(Ico, { name: 'mic', size: 22, color: C.blue }), h('span', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 13, textTransform: 'uppercase', color: C.ink900 } }, 'Voice Note'))),
        h(PCard, { title: 'Site notes' }, h('div', { style: { display: 'flex', flexDirection: 'column', gap: 8 } }, [['Access', 'Good — driveway off road'], ['Drainage', 'Aco channel needed by garage'], ['Sub-base', 'Excavate ~150mm']].map((n, i) => h('div', { key: i, style: { display: 'flex', justifyContent: 'space-between', fontFamily: C.fontB, fontSize: 12.5 } }, h('span', { style: { color: C.ink500 } }, n[0]), h('span', { style: { fontFamily: C.fontH, fontWeight: 700, color: C.ink900, textAlign: 'right', maxWidth: 200 } }, n[1]))))),
        h(Btn, { variant: 'accent', size: 'lg', iconR: 'arrow', style: { width: '100%', justifyContent: 'center' } }, 'Create Quote Draft')));
  }

  /* 4 · JOB PHOTO CAPTURE (camera-first) */
  function PhotoCapture() {
    return h(IOSDevice, { width: 402, height: 874, dark: true }, h('div', { style: { height: '100%', display: 'flex', flexDirection: 'column', background: '#000' } },
      h('div', { style: { paddingTop: 58, padding: '58px 16px 12px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' } }, h('span', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 17, color: '#fff' } }, 'Wilnecote Drive'), h(Tag, { tone: 'accent' }, 'After')),
      h('div', { style: { flex: 1, position: 'relative', margin: '0 12px', borderRadius: 18, overflow: 'hidden' } }, h(Media, { surface: 'tarmac', style: { height: '100%' } }),
        // framing corners
        ...[[12, 12, 'lt'], [12, 12, 'rt'], [12, 12, 'lb'], [12, 12, 'rb']].map((c, i) => h('div', { key: i, style: { position: 'absolute', width: 28, height: 28, [i < 2 ? 'top' : 'bottom']: 16, [i % 2 ? 'right' : 'left']: 16, borderTop: i < 2 ? '3px solid rgba(255,255,255,0.9)' : 'none', borderBottom: i >= 2 ? '3px solid rgba(255,255,255,0.9)' : 'none', borderLeft: i % 2 === 0 ? '3px solid rgba(255,255,255,0.9)' : 'none', borderRight: i % 2 ? '3px solid rgba(255,255,255,0.9)' : 'none' } })),
        h('div', { style: { position: 'absolute', top: 16, left: '50%', transform: 'translateX(-50%)', display: 'flex', gap: 8, background: 'rgba(0,0,0,0.5)', borderRadius: 99, padding: 4 } }, ['Before', 'During', 'After'].map((t, i) => h('span', { key: t, style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 11, padding: '6px 12px', borderRadius: 99, color: i === 2 ? C.ink900 : 'rgba(255,255,255,0.8)', background: i === 2 ? C.accent : 'transparent' } }, t)))),
      h('div', { style: { padding: '16px 16px 26px', display: 'flex', flexDirection: 'column', gap: 14 } },
        h('div', { style: { display: 'flex', alignItems: 'center', gap: 10, justifyContent: 'center' } }, h('label', { style: { display: 'flex', alignItems: 'center', gap: 8, color: '#fff', fontFamily: C.fontB, fontSize: 12.5 } }, h('span', { style: { width: 18, height: 18, borderRadius: 4, background: C.accent, display: 'flex', alignItems: 'center', justifyContent: 'center' } }, h(Ico, { name: 'check', size: 12, color: C.ink900 })), 'Mark ready for marketing'), h('span', { style: { color: 'rgba(255,255,255,0.4)' } }, '·'), h('label', { style: { display: 'flex', alignItems: 'center', gap: 8, color: 'rgba(255,255,255,0.7)', fontFamily: C.fontB, fontSize: 12.5 } }, h('span', { style: { width: 18, height: 18, borderRadius: 4, border: '2px solid rgba(255,255,255,0.4)' } }), 'Customer OK')),
        h('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-around' } },
          h(Media, { surface: 'old', style: { width: 44, height: 44, borderRadius: 8, border: '2px solid rgba(255,255,255,0.3)' } }),
          h('div', { style: { width: 72, height: 72, borderRadius: 99, border: '4px solid #fff', display: 'flex', alignItems: 'center', justifyContent: 'center' } }, h('div', { style: { width: 58, height: 58, borderRadius: 99, background: '#fff' } })),
          h('div', { style: { width: 44, height: 44, borderRadius: 8, background: 'rgba(255,255,255,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'center' } }, h(Ico, { name: 'image', size: 20, color: '#fff' }))))));
  }

  /* 5 · JOB CHECKLIST */
  function Checklist() {
    const items = [['Materials ordered', true], ['Skip booked', true], ['Base prepared', true], ['Edging set out', true], ['Surface laid', false], ['Area cleaned', false], ['After photos taken', false], ['Customer notified', false], ['Review request sent', false]];
    const done = items.filter((i) => i[1]).length;
    return Dev('Jobs', h(AppHead, { sub: 'Wilnecote Tarmac · day 2', title: 'Job Checklist', right: h('span', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 15, color: C.blue } }, `${done}/${items.length}`) }),
      h(R.Fragment, null,
        h('div', { style: { height: 8, borderRadius: 99, background: C.ink150, overflow: 'hidden' } }, h('div', { style: { width: `${done / items.length * 100}%`, height: '100%', background: C.success, borderRadius: 99 } })),
        h(PCard, { pad: 6 }, h('div', { style: { display: 'flex', flexDirection: 'column' } }, items.map((it, i) => h('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 12, padding: '12px 10px', borderBottom: i < items.length - 1 ? `1px solid ${C.border}` : 'none' } }, h('span', { style: { width: 24, height: 24, borderRadius: 7, background: it[1] ? C.success : '#fff', border: `2px solid ${it[1] ? C.success : C.ink300}`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } }, it[1] && h(Ico, { name: 'check', size: 15, color: '#fff' })), h('span', { style: { fontFamily: C.fontB, fontSize: 14.5, color: it[1] ? C.ink400 : C.ink800, textDecoration: it[1] ? 'line-through' : 'none' } }, it[0])))))));
  }

  /* 6 · CUSTOMER MESSAGING */
  function Messaging() {
    const msgs = [['in', 'Hi, are you still on track for Monday?'], ['out', 'Morning Karen — yes, team arrives 8am Monday. We\'ll text when on the way.'], ['in', 'Perfect, thanks!'], ['out', 'No problem. Here\'s what to prepare before we start 👇'], ['tpl', 'Job prep checklist sent']];
    return Dev('Chat', h(AppHead, { left: h(Avatar, { name: 'Karen Doyle', size: 36, tone: C.danger }), sub: 'SMS · Resin job', title: 'Karen Doyle', right: h(Ico, { name: 'phone', size: 21, color: C.blue }) }),
      h('div', { style: { display: 'flex', flexDirection: 'column', gap: 10, flex: 1, overflow: 'hidden' } },
        msgs.map((m, i) => m[0] === 'tpl' ? h('div', { key: i, style: { alignSelf: 'center', display: 'flex', alignItems: 'center', gap: 7, background: C.blue50, borderRadius: 99, padding: '6px 12px' } }, h(Ico, { name: 'clipboard', size: 13, color: C.blue }), h('span', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 11, color: C.blue } }, m[1])) :
          h('div', { key: i, style: { alignSelf: m[0] === 'out' ? 'flex-end' : 'flex-start', maxWidth: '78%', background: m[0] === 'out' ? C.blue : '#fff', color: m[0] === 'out' ? '#fff' : C.ink800, border: m[0] === 'out' ? 'none' : `1px solid ${C.border}`, borderRadius: m[0] === 'out' ? '16px 16px 4px 16px' : '16px 16px 16px 4px', padding: '10px 13px', fontFamily: C.fontB, fontSize: 13.5, lineHeight: 1.45 } }, m[1])),
        h('div', { style: { marginTop: 'auto', display: 'flex', gap: 8 } }, ['Template', 'On the way', 'Attach photo'].map((t, i) => h('span', { key: t, style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 11, padding: '7px 11px', borderRadius: 99, background: C.ink100, color: C.ink700 } }, t))),
        h('div', { style: { display: 'flex', alignItems: 'center', gap: 10, background: '#fff', border: `1px solid ${C.border}`, borderRadius: 99, padding: '8px 8px 8px 16px' } }, h('span', { style: { flex: 1, fontFamily: C.fontB, fontSize: 13.5, color: C.ink400 } }, 'Message…'), h('div', { style: { width: 36, height: 36, borderRadius: 99, background: C.blue, display: 'flex', alignItems: 'center', justifyContent: 'center' } }, h(Ico, { name: 'send', size: 17, color: '#fff' })))));
  }

  /* 7 · JOB SCHEDULE */
  function Schedule() {
    const jobs = [['Today', [['Tarmac drive', 'Wilnecote', 'Day 2 of 3', C.blue, true], ['Resin survey', 'Tamworth', '2:00pm', C.danger, false]]], ['Tomorrow', [['Patio build', 'Fazeley', 'Day 1', C.success, false]]], ['Thu 13', [['Block paving', 'Lichfield', 'Weather risk', C.warning, true]]]];
    return Dev('Jobs', h(AppHead, { sub: 'This week', title: 'Schedule', right: h(Ico, { name: 'calendar', size: 21, color: C.ink700 }) }),
      h('div', { style: { display: 'flex', flexDirection: 'column', gap: 14, overflow: 'hidden' } }, jobs.map((g, i) => h('div', { key: i },
        h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase', color: C.ink500, marginBottom: 8 } }, g[0]),
        h('div', { style: { display: 'flex', flexDirection: 'column', gap: 8 } }, g[1].map((j, k) => h(PCard, { key: k, pad: 12 }, h('div', { style: { display: 'flex', alignItems: 'center', gap: 12 } }, h('div', { style: { width: 4, alignSelf: 'stretch', borderRadius: 4, background: j[3] } }), h('div', { style: { flex: 1 } }, h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 14.5, color: C.ink900 } }, j[0]), h('div', { style: { display: 'flex', alignItems: 'center', gap: 6, fontFamily: C.fontB, fontSize: 12, color: C.ink500 } }, h(Ico, { name: 'pin', size: 12, color: C.ink400 }), j[1])), h('div', { style: { textAlign: 'right' } }, h(Tag, { tone: j[3] === C.warning ? 'warning' : 'neutral' }, j[2]), j[4] && h('div', { style: { marginTop: 4 } }, h(Ico, { name: j[3] === C.warning ? 'rain' : 'users', size: 16, color: j[3] }))))))))))); 
  }

  /* 8 · AI ASSISTANT */
  function Assistant() {
    const prompts = ['Write a follow-up for Karen\'s quote', 'Summarise today\'s site visit', 'Create a social caption from these photos', 'Draft a customer update', 'Turn my notes into a quote scope'];
    return Dev('Home', h(AppHead, { accent: true, sub: 'Primeways AI', title: 'Assistant', left: h(Mark, { size: 34, dark: true }) }),
      h('div', { style: { display: 'flex', flexDirection: 'column', gap: 12, flex: 1, overflow: 'hidden' } },
        h('div', { style: { alignSelf: 'flex-end', maxWidth: '82%', background: C.blue, color: '#fff', borderRadius: '16px 16px 4px 16px', padding: '11px 14px', fontFamily: C.fontB, fontSize: 13.5 } }, 'Write a follow-up for Karen\'s resin quote — she opened it but hasn\'t replied.'),
        h('div', { style: { maxWidth: '88%', background: '#fff', border: `1px solid ${C.border}`, borderRadius: '16px 16px 16px 4px', padding: 14, display: 'flex', flexDirection: 'column', gap: 8 } }, h('div', { style: { display: 'flex', alignItems: 'center', gap: 7 } }, h(Ico, { name: 'spark', size: 15, color: C.blue }), h('span', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 11, textTransform: 'uppercase', color: C.blue } }, 'Draft message')), h('p', { style: { margin: 0, fontFamily: C.fontB, fontSize: 13, lineHeight: 1.5, color: C.ink700 } }, 'Hi Karen, just checking you got a chance to look over your resin driveway quote. Happy to talk through the finish options or answer any questions — no rush at all. We could pencil you in for July if that helps. — Dave, Primeways'), h('div', { style: { display: 'flex', gap: 8, marginTop: 4 } }, h(Btn, { size: 'sm', variant: 'primary', icon: 'send' }, 'Send'), h(Btn, { size: 'sm', variant: 'outline', icon: 'edit' }, 'Edit'))),
        h('div', { style: { marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 7 } }, prompts.slice(1).map((p, i) => h('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 9, background: '#fff', border: `1px solid ${C.border}`, borderRadius: 12, padding: '10px 12px' } }, h(Ico, { name: 'spark', size: 15, color: C.blue }), h('span', { style: { fontFamily: C.fontB, fontSize: 12.5, color: C.ink700 } }, p))))));
  }

  /* 9 · NOTIFICATIONS */
  function Notifications() {
    const n = [['spark', 'New lead received', 'Karen Doyle · Resin · via Visualiser', '2m', C.blue, true], ['checkC', 'Quote accepted', 'D. Patel accepted £9,400', '1h', C.success, true], ['msg', 'Customer replied', 'Mr Smith: “Looks great, thanks!”', '2h', C.blue, false], ['calendar', 'Site visit tomorrow', 'Karen Doyle · 2:00pm · Tamworth', '3h', C.warning, false], ['star', 'New review', 'Google · 5★ from Sarah M.', '5h', C.accent600, false], ['rain', 'Weather warning', 'Heavy rain Thu — review 2 jobs', '6h', C.warning, false]];
    return Dev('Home', h(AppHead, { sub: 'You\'re all caught up by 9am', title: 'Notifications' }),
      h('div', { style: { display: 'flex', flexDirection: 'column', gap: 9, overflow: 'hidden' } }, n.map((it, i) => h('div', { key: i, style: { display: 'flex', gap: 12, alignItems: 'flex-start', background: it[5] ? C.blue50 : '#fff', border: `1px solid ${it[5] ? C.blue100 : C.border}`, borderRadius: 14, padding: 13 } }, h('div', { style: { width: 38, height: 38, borderRadius: 10, background: '#fff', border: `1px solid ${C.border}`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } }, h(Ico, { name: it[0], size: 18, color: it[4] })), h('div', { style: { flex: 1 } }, h('div', { style: { display: 'flex', justifyContent: 'space-between' } }, h('span', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 13.5, color: C.ink900 } }, it[1]), h('span', { style: { fontFamily: C.fontB, fontSize: 11, color: C.ink400 } }, it[3])), h('div', { style: { fontFamily: C.fontB, fontSize: 12.5, color: C.ink600, marginTop: 2 } }, it[2]))))));
  }

  /* 10 · OFFLINE MODE */
  function Offline() {
    return Dev('Photos', h(AppHead, { sub: 'On-site · poor signal', title: 'Offline Mode', right: h(Ico, { name: 'wifiOff', size: 20, color: C.warning }) }),
      h(R.Fragment, null,
        h('div', { style: { background: C.warning100, borderRadius: 16, padding: 16, display: 'flex', alignItems: 'center', gap: 12 } }, h(Ico, { name: 'wifiOff', size: 24, color: C.warning }), h('div', null, h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 13.5, color: C.ink900 } }, 'Working offline'), h('div', { style: { fontFamily: C.fontB, fontSize: 12, color: C.ink600 } }, 'Everything saves locally and syncs when you\'re back online'))),
        h(PCard, { title: 'Waiting to sync' }, h('div', { style: { display: 'flex', flexDirection: 'column', gap: 11 } }, [['camera', '8 job photos', 'Wilnecote drive'], ['mic', '2 voice notes', 'Transcribed'], ['file', '1 quote draft', 'Karen Doyle'], ['clipboard', 'Checklist updates', '3 items']].map((s, i) => h('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 12 } }, h('div', { style: { width: 36, height: 36, borderRadius: 9, background: C.ink50, display: 'flex', alignItems: 'center', justifyContent: 'center' } }, h(Ico, { name: s[0], size: 17, color: C.blue })), h('div', { style: { flex: 1 } }, h('div', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 13.5, color: C.ink900 } }, s[1]), h('div', { style: { fontFamily: C.fontB, fontSize: 11.5, color: C.ink500 } }, s[2])), h(Ico, { name: 'clock', size: 16, color: C.ink400 }))))),
        h(Btn, { variant: 'primary', size: 'lg', icon: 'refresh', style: { width: '100%', justifyContent: 'center' } }, 'Sync 14 Items Now'),
        h('div', { style: { textAlign: 'center', fontFamily: C.fontB, fontSize: 11.5, color: C.ink400 } }, 'Last synced 09:42 · auto-syncs on reconnect')));
  }

  window.APPS = Object.assign(window.APPS || {}, { biz: { Home, Leads, SiteVisit, PhotoCapture, Checklist, Messaging, Schedule, Assistant, Notifications, Offline } });
})();