// crm.jsx — Primeways CRM (Part 2a) · frame + Dashboard, Pipeline, Lead, Customer, Job, Photo Vault
(function () {
  const R = React, h = R.createElement;
  const { C, SURFACES } = window.PWKit;
  const { Media, Btn, Tag, Ico, CRMShell, KPI, Card } = window;
  const MW = 1340, MH = 952;

  function Frame({ active, title, sub, actions, children, bg }) {
    const dot = (c) => h('span', { style: { width: 12, height: 12, borderRadius: 99, background: c, border: '0.5px solid rgba(0,0,0,0.18)' } });
    return h('div', { style: { width: MW, height: MH, borderRadius: 14, overflow: 'hidden', background: '#fff', boxShadow: '0 0 0 1px rgba(0,0,0,0.16), 0 18px 50px rgba(0,0,0,0.34)', display: 'flex', flexDirection: 'column', fontFamily: C.fontB } },
      h('div', { style: { height: 40, flexShrink: 0, display: 'flex', alignItems: 'center', padding: '0 16px', background: C.ink900, position: 'relative' } },
        h('div', { style: { display: 'flex', gap: 8, zIndex: 1 } }, dot('#ff5f57'), dot('#febc2e'), dot('#28c840')),
        h('span', { style: { position: 'absolute', left: 0, right: 0, textAlign: 'center', fontFamily: C.fontH, fontWeight: 700, fontSize: 12.5, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)', pointerEvents: 'none' } }, 'Primeways System')),
      h('div', { style: { flex: 1, minHeight: 0, display: 'flex' } }, h(CRMShell, { active, title, sub, actions, contentBg: bg }, children)));
  }
  function Avatar({ name, size = 38, tone = C.blue }) {
    const ini = name.split(' ').map((w) => w[0]).slice(0, 2).join('');
    return h('div', { style: { width: size, height: size, borderRadius: 99, background: tone, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: C.fontH, fontWeight: 800, fontSize: size * 0.36, flexShrink: 0 } }, ini);
  }
  function Row({ children, gap = 14, style }) { return h('div', { style: { display: 'flex', gap, ...style } }, children); }
  const cap = (s) => s.charAt(0).toUpperCase() + s.slice(1);

  /* ---------- 1 · DASHBOARD ---------- */
  function Dashboard() {
    const activity = [['file', 'Quote sent', 'Mr Smith · Tarmac drive · £4,250', '12m'], ['checkC', 'Quote accepted', 'D. Patel · Resin · £6,900', '1h'], ['phone', 'Missed call recovered', 'New lead via text-back · Lichfield', '2h'], ['camera', 'After photos added', 'Wilnecote job · ready for social', '3h'], ['star', 'New review', 'Google · 5★ · Sarah M.', '5h']];
    const hot = [['Karen Doyle', 'Resin · 70m²', '£6,900', 'hot'], ['Tom Reilly', 'Tarmac · 2 cars', '£3,800', 'hot'], ['J. Wilson', 'Block paving', '£5,200', 'warning']];
    return h(Frame, { active: 'Dashboard', title: 'Dashboard', sub: 'Good morning, Primeways — here\'s your week', actions: h(Btn, { size: 'sm', variant: 'primary', icon: 'plus' }, 'Add Lead') },
      h('div', { style: { display: 'flex', flexDirection: 'column', gap: 16, height: '100%' } },
        h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(6,1fr)', gap: 12 } },
          h(KPI, { label: 'New leads', value: '14', delta: '+5 vs last wk', icon: 'spark', accent: true }),
          h(KPI, { label: 'Quotes sent', value: '9', delta: '+2', icon: 'file' }),
          h(KPI, { label: 'Accepted', value: '£42k', delta: '+18%', icon: 'pound' }),
          h(KPI, { label: 'Jobs live', value: '6', icon: 'hammer' }),
          h(KPI, { label: 'Reviews due', value: '5', icon: 'star' }),
          h(KPI, { label: 'Calls saved', value: '3', delta: 'recovered', icon: 'phone' })),
        h('div', { style: { display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 16, flex: 1, minHeight: 0 } },
          // left
          h('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
            h(Card, { title: 'Pipeline this month', action: h(Tag, { tone: 'brand' }, '£128k potential') },
              h('div', { style: { display: 'flex', flexDirection: 'column', gap: 10 } },
                [['New enquiries', 14, C.blue300, '£64k'], ['Quotes sent', 9, C.blue400, '£48k'], ['Quotes accepted', 5, C.blue, '£42k'], ['Jobs scheduled', 6, C.success, '£51k'], ['Completed', 4, C.ink600, '£33k']].map((b, i) =>
                  h('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 12 } },
                    h('span', { style: { width: 120, fontFamily: C.fontH, fontWeight: 700, fontSize: 12, textTransform: 'uppercase', color: C.ink600 } }, b[0]),
                    h('div', { style: { flex: 1, height: 24, background: C.ink100, borderRadius: 4, overflow: 'hidden' } }, h('div', { style: { width: `${b[1] / 14 * 100}%`, height: '100%', background: b[2], borderRadius: 4 } })),
                    h('span', { style: { width: 40, textAlign: 'right', fontFamily: C.fontH, fontWeight: 800, fontSize: 13, color: C.ink900 } }, b[1]),
                    h('span', { style: { width: 48, textAlign: 'right', fontFamily: C.fontB, fontSize: 12.5, color: C.ink500 } }, b[3]))))),
            h(Card, { title: 'Recent activity', style: { flex: 1 } },
              h('div', { style: { display: 'flex', flexDirection: 'column' } }, activity.map((a, i) =>
                h('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 12, padding: '10px 0', borderBottom: i < activity.length - 1 ? `1px solid ${C.border}` : 'none' } },
                  h('div', { style: { width: 34, height: 34, borderRadius: 8, background: C.blue50, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } }, h(Ico, { name: a[0], size: 17, color: C.blue })),
                  h('div', { style: { flex: 1 } }, h('div', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 13, color: C.ink900 } }, a[1]), h('div', { style: { fontFamily: C.fontB, fontSize: 12.5, color: C.ink500 } }, a[2])),
                  h('span', { style: { fontFamily: C.fontB, fontSize: 12, color: C.ink400 } }, a[3])))))),
          // right widgets
          h('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
            h(Card, { title: 'Hot leads', action: h('span', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 11, color: C.blue, textTransform: 'uppercase' } }, 'View all') },
              h('div', { style: { display: 'flex', flexDirection: 'column', gap: 10 } }, hot.map((l, i) =>
                h('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 10 } }, h(Avatar, { name: l[0], size: 34, tone: l[3] === 'hot' ? C.danger : C.warning }),
                  h('div', { style: { flex: 1 } }, h('div', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 13, color: C.ink900 } }, l[0]), h('div', { style: { fontFamily: C.fontB, fontSize: 12, color: C.ink500 } }, l[1])),
                  h('div', { style: { textAlign: 'right' } }, h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 13, color: C.ink900 } }, l[2]), h(Tag, { tone: l[3] === 'hot' ? 'hot' : 'warning' }, l[3] === 'hot' ? 'Hot' : 'Warm')))))),
            h(Card, { title: 'Jobs needing photos' },
              h('div', { style: { display: 'flex', flexDirection: 'column', gap: 8 } }, [['Wilnecote drive', 'After photos'], ['Lichfield patio', 'During photos']].map((j, i) =>
                h('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 10, padding: '8px 10px', background: C.ink50, borderRadius: 8 } }, h(Ico, { name: 'camera', size: 16, color: C.accent600 }), h('span', { style: { flex: 1, fontFamily: C.fontH, fontWeight: 700, fontSize: 12.5, color: C.ink800 } }, j[0]), h(Tag, { tone: 'accent' }, j[1]))))),
            h(Card, { title: 'Weather watch', action: h(Ico, { name: 'rain', size: 18, color: C.blue }) },
              h('div', { style: { display: 'flex', gap: 12, alignItems: 'center' } },
                h('div', { style: { width: 44, height: 44, borderRadius: 10, background: C.warning100, display: 'flex', alignItems: 'center', justifyContent: 'center' } }, h(Ico, { name: 'rain', size: 24, color: C.warning })),
                h('div', null, h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 13.5, color: C.ink900 } }, 'Heavy rain Thursday'), h('div', { style: { fontFamily: C.fontB, fontSize: 12.5, color: C.ink500 } }, '2 tarmac jobs may need rescheduling'))))))));
  }

  /* ---------- 2 · LEAD PIPELINE (kanban) ---------- */
  const STAGES = ['New Enquiry', 'Contacted', 'Photos Requested', 'Site Visit Booked', 'Quote Sent', 'Follow-Up', 'Accepted'];
  const STAGE_DATA = {
    'New Enquiry': [['Karen Doyle', 'Resin · 70m²', 'B79', 'Website', 'hot', '£6,900', true], ['Mark Evans', 'Tarmac · 2 cars', 'B77', 'Visualiser', 'hot', '', true]],
    'Contacted': [['Tom Reilly', 'Tarmac drive', 'WS14', 'Google', 'warning', '£3,800', false], ['Sue Akhtar', 'Block paving', 'B78', 'Facebook', 'cold', '', true]],
    'Photos Requested': [['J. Wilson', 'Block · 2 cars', 'B79', 'Missed call', 'warning', '', true]],
    'Site Visit Booked': [['R. Cole', 'Commercial yard', 'CV11', 'Referral', 'hot', '£18k', false]],
    'Quote Sent': [['D. Patel', 'Resin + patio', 'B74', 'Website', 'warning', '£9,400', true], ['H. Brooks', 'Tarmac', 'B77', 'Yell', 'cold', '£4,100', false]],
    'Follow-Up': [['L. Green', 'Gravel drive', 'CV9', 'Google', 'warning', '£2,600', false]],
    'Accepted': [['Mr Smith', 'Tarmac drive', 'B77', 'Checkatrade', 'hot', '£4,250', true]],
  };
  function LeadMini({ d }) {
    return h('div', { style: { background: '#fff', border: `1px solid ${C.border}`, borderRadius: 8, padding: 11, display: 'flex', flexDirection: 'column', gap: 8, boxShadow: C.shadowXs, cursor: 'grab' } },
      h('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' } },
        h('span', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 13, color: C.ink900 } }, d[0]),
        h('span', { style: { width: 8, height: 8, borderRadius: 8, background: d[4] === 'hot' ? C.danger : d[4] === 'warning' ? C.warning : C.blue300 } })),
      h('div', { style: { fontFamily: C.fontB, fontSize: 12, color: C.ink600 } }, d[1]),
      h('div', { style: { display: 'flex', alignItems: 'center', gap: 7, fontFamily: C.fontB, fontSize: 11.5, color: C.ink500 } }, h(Ico, { name: 'pin', size: 12, color: C.ink400 }), d[2], h('span', { style: { width: 3, height: 3, borderRadius: 3, background: C.ink300 } }), d[3]),
      h('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderTop: `1px solid ${C.border}`, paddingTop: 7 } },
        h('span', { style: { display: 'flex', gap: 6, alignItems: 'center' } }, d[6] && h(Ico, { name: 'image', size: 13, color: C.blue }), d[5] && h('span', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 12, color: C.ink900 } }, d[5])),
        h('span', { style: { fontFamily: C.fontB, fontSize: 10.5, color: C.ink400 } }, d[4] === 'hot' ? 'Call today' : '2d ago')));
  }
  function Pipeline() {
    return h(Frame, { active: 'Lead Pipeline', title: 'Lead Pipeline', sub: '15-stage driveway pipeline · 12 active leads', bg: '#EDEFF2', actions: h(Row, { gap: 8 }, h(Btn, { size: 'sm', variant: 'outline', icon: 'filter' }, 'Filter'), h(Btn, { size: 'sm', variant: 'primary', icon: 'plus' }, 'New Lead')) },
      h('div', { style: { display: 'flex', gap: 12, height: '100%', overflow: 'hidden' } },
        STAGES.map((st, i) => h('div', { key: st, style: { width: 196, flexShrink: 0, display: 'flex', flexDirection: 'column', gap: 10 } },
          h('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '2px 4px' } },
            h('span', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 11.5, letterSpacing: '0.04em', textTransform: 'uppercase', color: C.ink700 } }, st),
            h('span', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 11, color: C.ink500, background: '#fff', borderRadius: 99, padding: '2px 8px', border: `1px solid ${C.border}` } }, (STAGE_DATA[st] || []).length)),
          h('div', { style: { height: 3, borderRadius: 99, background: [C.blue300, C.blue400, C.accent, C.blue, C.blue600, C.warning, C.success][i] } }),
          h('div', { style: { display: 'flex', flexDirection: 'column', gap: 9 } }, (STAGE_DATA[st] || []).map((d, j) => h(LeadMini, { key: j, d }))))),
        h('div', { style: { width: 196, flexShrink: 0, display: 'flex', flexDirection: 'column', gap: 10, opacity: 0.6 } },
          h('div', { style: { padding: '2px 4px', fontFamily: C.fontH, fontWeight: 800, fontSize: 11.5, textTransform: 'uppercase', color: C.ink500 } }, 'Deposit Paid →'),
          h('div', { style: { fontFamily: C.fontB, fontSize: 12, color: C.ink400, padding: 8 } }, '+8 more stages: Deposit, Scheduled, In Progress, Completed, Review, Aftercare'))));
  }

  /* ---------- 3 · LEAD DETAIL ---------- */
  function LeadDetail() {
    const timeline = [['spark', 'Lead created', 'Submitted via AI Visualiser with 3 photos', 'Today, 9:14am'], ['send', 'Auto-reply sent', 'SMS + email confirmation delivered', 'Today, 9:14am'], ['phone', 'Called customer', 'Spoke to Karen — keen, wants resin', 'Today, 10:02am'], ['calendar', 'Site visit booked', 'Thu 13 Jun, 2:00pm — assigned to Dave', 'Today, 10:08am']];
    return h(Frame, { active: 'Lead Pipeline', title: 'Lead · Karen Doyle', sub: 'Resin-bound driveway enquiry', actions: h(Row, { gap: 8 }, h(Btn, { size: 'sm', variant: 'outline', icon: 'phone' }, 'Call'), h(Btn, { size: 'sm', variant: 'primary', icon: 'file' }, 'Create Quote')) },
      h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1.5fr 1fr', gap: 16, height: '100%' } },
        // left — contact
        h('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
          h(Card, null,
            h('div', { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10, textAlign: 'center' } },
              h(Avatar, { name: 'Karen Doyle', size: 64, tone: C.danger }),
              h('div', null, h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 18, color: C.ink900 } }, 'Karen Doyle'), h(Tag, { tone: 'hot', dot: true }, 'Hot lead · 92')),
              h('div', { style: { display: 'flex', gap: 8, width: '100%' } }, h(Btn, { size: 'sm', variant: 'primary', icon: 'phone', style: { flex: 1 } }, 'Call'), h(Btn, { size: 'sm', variant: 'outline', icon: 'msg', style: { flex: 1 } }, 'SMS'), h(Btn, { size: 'sm', variant: 'outline', icon: 'mail', style: { flex: 1 } }, ''))),
            h('div', { style: { borderTop: `1px solid ${C.border}`, marginTop: 14, paddingTop: 14, display: 'flex', flexDirection: 'column', gap: 11 } },
              [['phone', '07911 552 080'], ['mail', 'k.doyle@email.com'], ['pin', '14 Oak Rise, Tamworth B79 7DN'], ['spark', 'Source: AI Visualiser'], ['clock', 'Timeline: within 1 month']].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: 15, color: C.blue }), d[1])))),
          h(Card, { title: 'Service interested in' },
            h('div', { style: { display: 'flex', flexDirection: 'column', gap: 8 } }, h(Tag, { tone: 'brand' }, 'Resin Bound'), h('div', { style: { fontFamily: C.fontB, fontSize: 12.5, color: C.ink600 } }, 'Approx 70m² · golden quartz finish · replacing old tarmac')))),
        // middle — photos + AI + notes
        h('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
          h(Card, { title: 'AI Visualiser concept', action: h(Tag, { tone: 'accent' }, 'Submitted') }, h(window.SITE._shared.BeforeAfter, { height: 200, pos: 48, after: 'resin' })),
          h(Card, { title: 'Uploaded photos (3)' },
            h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8 } }, ['old', 'old', 'old'].map((k, i) => h(Media, { key: i, surface: k, h: 80, radius: 6, label: ['Front', 'Close-up', 'Drainage'][i] })))),
          h(Card, { title: 'Notes', style: { flex: 1 } }, h('p', { style: { margin: 0, fontFamily: C.fontB, fontSize: 13, lineHeight: 1.55, color: C.ink600 } }, 'Drainage issue near the garage — water pools after rain. Keen on the modern look, neighbour had resin done. Budget approx £7k. Prefers a weekday start.'))),
        // right — actions + activity
        h('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
          h(Card, { title: 'Next action' },
            h('div', { style: { display: 'flex', flexDirection: 'column', gap: 10 } },
              h('div', { style: { background: C.success100, borderRadius: 8, padding: '10px 12px', display: 'flex', alignItems: 'center', gap: 10 } }, h(Ico, { name: 'calendar', size: 18, color: C.success }), h('div', null, h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 12.5, color: C.success } }, 'Site visit Thu 13 Jun, 2pm'), h('div', { style: { fontFamily: C.fontB, fontSize: 11.5, color: C.ink600 } }, 'Assigned: Dave'))),
              h(Btn, { size: 'sm', variant: 'primary', icon: 'file' }, 'Create Quote'), h(Btn, { size: 'sm', variant: 'outline', icon: 'plus' }, 'Add Job'))),
          h(Card, { title: 'Activity & automations', style: { flex: 1 } },
            h('div', { style: { display: 'flex', flexDirection: 'column' } }, timeline.map((t, i) =>
              h('div', { key: i, style: { display: 'flex', gap: 11, paddingBottom: 14, position: 'relative' } },
                i < timeline.length - 1 && h('div', { style: { position: 'absolute', left: 15, top: 30, bottom: 0, width: 2, background: C.border } }),
                h('div', { style: { width: 32, height: 32, borderRadius: 99, background: C.blue50, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, zIndex: 1 } }, h(Ico, { name: t[0], size: 15, color: C.blue })),
                h('div', null, h('div', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 12.5, color: C.ink900 } }, t[1]), h('div', { style: { fontFamily: C.fontB, fontSize: 11.5, color: C.ink500 } }, t[2]), h('div', { style: { fontFamily: C.fontB, fontSize: 10.5, color: C.ink400, marginTop: 2 } }, t[3])))))))));
  }

  /* ---------- 4 · CUSTOMER PROFILE ---------- */
  function Customer() {
    const jobs = [['Tarmac driveway', '2026 · completed', '£4,250', 'success', 'tarmac'], ['Patio enquiry', 'Future opportunity', 'Est. £3,200', 'warning', 'patio'], ['Commercial yard quote', 'Pending decision', '£18,000', 'brand', 'concrete']];
    return h(Frame, { active: 'Customers', title: 'Mr & Mrs Smith', sub: 'Customer since 2024 · Wilnecote, Tamworth', actions: h(Row, { gap: 8 }, h(Btn, { size: 'sm', variant: 'outline', icon: 'msg' }, 'Message'), h(Btn, { size: 'sm', variant: 'primary', icon: 'plus' }, 'New Job')) },
      h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 16, height: '100%' } },
        h('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
          h(Card, null,
            h('div', { style: { display: 'flex', alignItems: 'center', gap: 14 } }, h(Avatar, { name: 'John Smith', size: 56 }), h('div', null, h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 18, color: C.ink900 } }, 'Mr & Mrs Smith'), h('div', { style: { display: 'flex', gap: 6, marginTop: 4 } }, h(Tag, { tone: 'success' }, 'Reviewed'), h(Tag, { tone: 'accent' }, 'Referrer')))),
            h('div', { style: { borderTop: `1px solid ${C.border}`, marginTop: 14, paddingTop: 14, display: 'flex', flexDirection: 'column', gap: 10 } }, [['phone', '07700 900 410'], ['mail', 'smith.home@email.com'], ['pin', '8 Meadow Way, Wilnecote B77 5LP']].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: 15, color: C.blue }), d[1])))),
          h(Card, { title: 'Lifetime value' },
            h('div', { style: { display: 'flex', alignItems: 'baseline', gap: 8 } }, h('span', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 34, color: C.ink900 } }, '£4,250'), h(Tag, { tone: 'brand' }, '+£21.2k potential')),
            h('div', { style: { display: 'flex', gap: 6, marginTop: 12, flexWrap: 'wrap' } }, ['Tarmac customer', 'High-value', 'Future patio upsell', 'Referral opportunity'].map((t) => h(Tag, { key: t, tone: 'neutral' }, t)))),
          h(Card, { title: 'Communication history' }, h('div', { style: { display: 'flex', flexDirection: 'column', gap: 8 } }, [['Review request sent', '5★ Google'], ['Aftercare 6-month check', 'Replied happy'], ['Patio follow-up', 'No reply yet']].map((c, i) => h('div', { key: i, style: { display: 'flex', justifyContent: 'space-between', fontFamily: C.fontB, fontSize: 12.5, color: C.ink600 } }, h('span', null, c[0]), h('span', { style: { color: C.ink400 } }, c[1])))))),
        h('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
          h(Card, { title: 'Jobs (3)', action: h(Btn, { size: 'sm', variant: 'ghost', icon: 'plus' }, 'Add') },
            h('div', { style: { display: 'flex', flexDirection: 'column', gap: 10 } }, jobs.map((j, i) =>
              h('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 14, border: `1px solid ${C.border}`, borderRadius: 10, padding: 12 } },
                h('div', { style: { width: 56, height: 56, borderRadius: 8, ...SURFACES[j[4]].css, flexShrink: 0 } }),
                h('div', { style: { flex: 1 } }, h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 15, color: C.ink900 } }, j[0]), h('div', { style: { fontFamily: C.fontB, fontSize: 12.5, color: C.ink500 } }, j[1])),
                h('div', { style: { textAlign: 'right' } }, h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 15, color: C.ink900 } }, j[2]), h(Tag, { tone: j[3] }, j[1].split(' ')[0])),
                h(Ico, { name: 'chevR', size: 18, color: C.ink300 })))),
          ),
          h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, flex: 1 } },
            h(Card, { title: 'Quote history' }, h('div', { style: { display: 'flex', flexDirection: 'column', gap: 9 } }, [['Tarmac drive', '£4,250', 'success'], ['Commercial yard', '£18,000', 'brand'], ['Patio', '£3,200', 'neutral']].map((q, i) => h('div', { key: i, style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' } }, h('span', { style: { fontFamily: C.fontB, fontSize: 13, color: C.ink700 } }, q[0]), h(Row, { gap: 8 }, h('span', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 13, color: C.ink900 } }, q[1]), h(Tag, { tone: q[2] }, q[2] === 'success' ? 'Won' : q[2] === 'brand' ? 'Open' : 'Draft')))))),
            h(Card, { title: 'Reviews & referrals' }, h('div', { style: { display: 'flex', flexDirection: 'column', gap: 10 } }, h('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } }, h(window.SITE._shared.Stars, { n: 5, size: 15 }), h('span', { style: { fontFamily: C.fontB, fontSize: 12, color: C.ink500 } }, 'Google · 5★')), h('p', { style: { margin: 0, fontFamily: C.fontB, fontSize: 12, lineHeight: 1.5, color: C.ink600 } }, '“Turned up on time, tidied up every day, finish is spot on.”'), h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, background: C.accent100, borderRadius: 8, padding: '8px 10px' } }, h(Ico, { name: 'gift', size: 16, color: C.accent600 }), h('span', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 12, color: C.accent600 } }, 'Referred 2 neighbours'))))))));
  }

  /* ---------- 5 · JOB RECORD ---------- */
  function JobRecord() {
    const checklist = [['Measurements confirmed', true], ['Quote accepted', true], ['Deposit paid', true], ['Materials ordered', true], ['Skip booked', true], ['Team assigned', true], ['Before photos taken', true], ['Base prepared', false], ['Surface laid', false], ['After photos', false]];
    return h(Frame, { active: 'Jobs', title: 'Job · Wilnecote Tarmac Drive', sub: 'JOB-2026-041 · Mr & Mrs Smith', actions: h(Row, { gap: 8 }, h(Btn, { size: 'sm', variant: 'outline', icon: 'msg' }, 'Update Customer'), h(Btn, { size: 'sm', variant: 'primary', icon: 'camera' }, 'Add Photos')) },
      h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1.4fr 1fr', gap: 16, height: '100%' } },
        h('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
          h(Card, { title: 'Job details' }, h('div', { style: { display: 'flex', flexDirection: 'column', gap: 11 } }, [['Service', 'Tarmac driveway'], ['Address', '8 Meadow Way, B77 5LP'], ['Value', '£4,250'], ['Start', 'Mon 17 Jun'], ['Duration', '3 days'], ['Team', 'Dave, Mike, Sam']].map((d, i) => h('div', { key: i, style: { display: 'flex', justifyContent: 'space-between', fontFamily: C.fontB, fontSize: 13 } }, h('span', { style: { color: C.ink500 } }, d[0]), h('span', { style: { fontFamily: C.fontH, fontWeight: 700, color: C.ink900 } }, d[1]))))),
          h(Card, { title: 'Status' }, h('div', { style: { display: 'flex', flexDirection: 'column', gap: 10 } }, [['Stage', 'In Progress', 'brand'], ['Deposit', 'Paid £1,275', 'success'], ['Balance', 'Due on completion', 'warning'], ['Review', 'Not yet sent', 'neutral']].map((s, i) => h('div', { key: i, style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } }, h('span', { style: { fontFamily: C.fontB, fontSize: 13, color: C.ink500 } }, s[0]), h(Tag, { tone: s[2] }, s[1])))))),
        h('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
          h(Card, { title: 'Photos', action: h(Tag, { tone: 'brand' }, 'Before · During · After') },
            h('div', { style: { display: 'flex', flexDirection: 'column', gap: 10 } },
              [['Before', 'old', 'old'], ['During', 'concrete', 'tarmac'], ['After', 'tarmac', 'tarmac']].map((g, i) => h('div', { key: i },
                h('div', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 11, textTransform: 'uppercase', color: C.ink500, marginBottom: 6 } }, g[0]),
                h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6 } }, [g[1], g[2], g[1]].map((k, j) => h(Media, { key: j, surface: k, h: 58, radius: 6 }))))))),
          h(Card, { title: 'Materials & measurements', style: { flex: 1 } }, h('div', { style: { display: 'flex', flexDirection: 'column', gap: 8 } }, [['Area', '92 m²'], ['Type 1 MOT', '14 tonnes'], ['Tarmac', '6 tonnes'], ['Edging', '38 lin. m'], ['Skip', '8-yard, booked'].slice(0, 2)].map((m, i) => h('div', { key: i, style: { display: 'flex', justifyContent: 'space-between', fontFamily: C.fontB, fontSize: 13, padding: '6px 0', borderBottom: `1px solid ${C.border}` } }, h('span', { style: { color: C.ink600 } }, m[0]), h('span', { style: { fontFamily: C.fontH, fontWeight: 700, color: C.ink900 } }, m[1])))))),
        h('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
          h(Card, { title: 'Checklist', action: h('span', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 12, color: C.blue } }, '7/10'), style: { flex: 1 } },
            h('div', { style: { display: 'flex', flexDirection: 'column', gap: 9 } }, checklist.map((c, i) => h('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 10 } },
              h('span', { style: { width: 20, height: 20, borderRadius: 6, background: c[1] ? C.success : '#fff', border: `1.5px solid ${c[1] ? C.success : C.ink300}`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } }, c[1] && h(Ico, { name: 'check', size: 13, color: '#fff' })),
              h('span', { style: { fontFamily: C.fontB, fontSize: 13, color: c[1] ? C.ink400 : C.ink800, textDecoration: c[1] ? 'line-through' : 'none' } }, c[0]))))))));
  }

  /* ---------- 6 · JOB PHOTO VAULT ---------- */
  function PhotoVault() {
    const tabs = ['Before', 'During', 'After', 'Customer-approved', 'Ready for website', 'Ready for social'];
    const grid = [['after', 'tarmac', true, true], ['after', 'tarmac', true, false], ['after', 'resin', false, true], ['after', 'block', true, true], ['during', 'concrete', false, false], ['after', 'patio', true, true], ['after', 'tarmac', false, true], ['after', 'gravel', true, false]];
    return h(Frame, { active: 'Photo Vault', title: 'Job Photo Vault', sub: 'Wilnecote Tarmac Drive · 24 photos', actions: h(Row, { gap: 8 }, h(Btn, { size: 'sm', variant: 'outline', icon: 'download' }, 'Download'), h(Btn, { size: 'sm', variant: 'primary', icon: 'upload' }, 'Upload')) },
      h('div', { style: { display: 'flex', flexDirection: 'column', gap: 14, height: '100%' } },
        h('div', { style: { display: 'flex', gap: 8, flexWrap: 'wrap' } }, tabs.map((t, i) => h('span', { key: t, style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 12.5, padding: '8px 14px', borderRadius: 99, cursor: 'pointer', color: i === 2 ? '#fff' : C.ink700, background: i === 2 ? C.blue : '#fff', border: `1px solid ${i === 2 ? C.blue : C.border}` } }, t, h('span', { style: { marginLeft: 7, opacity: 0.7 } }, [6, 8, 10, 7, 5, 4][i])))),
        h('div', { style: { flex: 1, display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gridAutoRows: 'min-content', gap: 14, overflow: 'hidden' } },
          grid.map((g, i) => h('div', { key: i, style: { borderRadius: 10, overflow: 'hidden', border: `1px solid ${C.border}`, background: '#fff', boxShadow: C.shadowSm } },
            h('div', { style: { position: 'relative' } }, h(Media, { surface: g[1], h: 130 }),
              g[2] && h('span', { style: { position: 'absolute', top: 8, left: 8, width: 22, height: 22, borderRadius: 99, background: C.success, display: 'flex', alignItems: 'center', justifyContent: 'center' } }, h(Ico, { name: 'check', size: 13, color: '#fff' })),
              g[3] && h('span', { style: { position: 'absolute', top: 8, right: 8, fontFamily: C.fontH, fontWeight: 800, fontSize: 9, textTransform: 'uppercase', background: C.accent, color: C.ink900, padding: '3px 6px', borderRadius: 4 } }, 'Social')),
            h('div', { style: { padding: '9px 11px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' } },
              h(Tag, { tone: 'neutral' }, cap(SURFACES[g[1]].label.split(' ')[0])),
              h(Row, { gap: 6 }, h(Ico, { name: 'spark', size: 15, color: C.blue }), h(Ico, { name: 'share', size: 15, color: C.ink400 })))))),
        h('div', { style: { display: 'flex', alignItems: 'center', gap: 12, background: C.blue50, borderRadius: 10, padding: '12px 16px' } },
          h(Ico, { name: 'spark', size: 20, color: C.blue }), h('span', { style: { flex: 1, fontFamily: C.fontB, fontSize: 13, color: C.ink700 } }, 'Tag a surface and location, then generate a social post or a website case study in one click.'),
          h(Btn, { size: 'sm', variant: 'primary', icon: 'spark' }, 'Generate Social Post'), h(Btn, { size: 'sm', variant: 'outline', icon: 'file' }, 'Case Study'))));
  }

  window.CRM = Object.assign(window.CRM || {}, { Dashboard, Pipeline, LeadDetail, Customer, JobRecord, PhotoVault, _f: { Frame, Avatar, Row, MW, MH } });
})();