// crm2.jsx — Primeways CRM (Part 2b) · Quotes, automations, calendar, marketing, settings
(function () {
  const R = React, h = R.createElement;
  const { C, SURFACES } = window.PWKit;
  const { Media, Btn, Tag, Ico, Logo, CRMShell, KPI, Card } = window;
  const { Frame, Avatar, Row } = window.CRM._f;
  const { Stars, BeforeAfter } = window.SITE._shared;

  /* ---------- 7 · SMART QUOTE BUILDER (admin) ---------- */
  function QuoteBuilder() {
    const lines = [['Excavate & remove old tarmac (92m²)', '£980'], ['Type 1 MOT sub-base, compacted', '£1,140'], ['Hot-rolled tarmac wearing course', '£1,520'], ['Block-paved edging (38 lin.m)', '£610'], ['Waste removal & skip', '£280']];
    return h(Frame, { active: 'Quotes', title: 'Quote Builder', sub: 'QUO-2026-118 · Karen Doyle · Draft', actions: h(Row, { gap: 8 }, h(Btn, { size: 'sm', variant: 'outline', icon: 'eye' }, 'Preview'), h(Btn, { size: 'sm', variant: 'primary', icon: 'send' }, 'Send Quote')) },
      h('div', { style: { display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 16, height: '100%' } },
        h('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
          h(Card, { title: 'Scope of work' },
            h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 10, marginBottom: 14 } },
              [['Surface', 'Resin bound'], ['Area', '70 m²'], ['Excavation', 'Yes'], ['Drainage', 'Aco channel']].map((d, i) => h('div', { key: i, style: { background: C.ink50, borderRadius: 8, padding: '9px 11px' } }, h('div', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 10, textTransform: 'uppercase', color: C.ink500 } }, d[0]), h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 13.5, color: C.ink900, marginTop: 2 } }, d[1])))),
            h('div', { style: { display: 'flex', flexDirection: 'column' } }, lines.map((l, i) => h('div', { key: i, style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px 0', borderBottom: `1px solid ${C.border}` } }, h('span', { style: { fontFamily: C.fontB, fontSize: 13.5, color: C.ink700 } }, l[0]), h('span', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 13.5, color: C.ink900 } }, l[1])))),
            h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginTop: 12, color: C.blue } }, h(Ico, { name: 'plus', size: 16 }), h('span', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 12.5, textTransform: 'uppercase' } }, 'Add line item'))),
          h(Card, { title: 'Photos attached' }, h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 8 } }, ['old', 'old', 'resin', 'resin'].map((k, i) => h(Media, { key: i, surface: k, h: 64, radius: 6 }))))),
        h('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
          h(Card, { title: 'Totals' }, h('div', { style: { display: 'flex', flexDirection: 'column', gap: 9 } },
            [['Subtotal', '£4,530'], ['VAT (20%)', '£906'], ['Deposit (30%)', '£1,631']].map((t, i) => h('div', { key: i, style: { display: 'flex', justifyContent: 'space-between', fontFamily: C.fontB, fontSize: 13.5, color: C.ink600 } }, h('span', null, t[0]), h('span', { style: { fontFamily: C.fontH, fontWeight: 700, color: C.ink900 } }, t[1]))),
            h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderTop: `2px solid ${C.ink900}`, marginTop: 6, paddingTop: 12 } }, h('span', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 14, textTransform: 'uppercase' } }, 'Total'), h('span', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 26, color: C.ink900 } }, '£5,436')))),
          h(Card, { title: 'Quote status' }, h('div', { style: { display: 'flex', flexDirection: 'column', gap: 10 } }, [['Draft created', 'check', 'success'], ['Preview ready', 'check', 'success'], ['Send to customer', 'send', 'brand'], ['Opened', 'clock', 'neutral'], ['Accepted', 'clock', 'neutral']].map((s, i) => h('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 11 } }, h('div', { style: { width: 26, height: 26, borderRadius: 99, background: s[2] === 'success' ? C.success : s[2] === 'brand' ? C.blue : C.ink150, display: 'flex', alignItems: 'center', justifyContent: 'center' } }, h(Ico, { name: s[1], size: 14, color: s[2] === 'neutral' ? C.ink400 : '#fff' })), h('span', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 13, color: s[2] === 'neutral' ? C.ink400 : C.ink900 } }, s[0]))))),
          h(Card, { title: 'Payment & terms' }, h('div', { style: { display: 'flex', flexDirection: 'column', gap: 8, fontFamily: C.fontB, fontSize: 12.5, color: C.ink600 } }, h('div', null, '30% deposit · balance on completion'), h('div', null, '12-month workmanship guarantee'), h('div', null, 'Quote valid 30 days'))))));
  }

  /* ---------- 7b · CUSTOMER QUOTE VIEW (branded) ---------- */
  function CustomerQuote() {
    return h('div', { style: { width: 920, minHeight: 1080, background: C.ink100, fontFamily: C.fontB } },
      h('div', { style: { background: C.ink900, backgroundImage: 'var(--overlay-brand)', padding: '26px 40px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' } },
        h(Logo, { white: true, height: 30 }), h('div', { style: { textAlign: 'right', color: '#fff' } }, h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 13, letterSpacing: '0.1em', textTransform: 'uppercase', color: C.accent } }, 'Your Quote'), h('div', { style: { fontFamily: C.fontB, fontSize: 13, opacity: 0.8 } }, 'QUO-2026-118 · 10 Jun 2026'))),
      h('div', { style: { padding: '32px 40px', display: 'flex', flexDirection: 'column', gap: 22 } },
        h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' } },
          h('div', null, h('div', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 12, textTransform: 'uppercase', color: C.ink500 } }, 'Prepared for'), h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 22, color: C.ink900, marginTop: 3 } }, 'Karen Doyle'), h('div', { style: { fontFamily: C.fontB, fontSize: 14, color: C.ink600 } }, '14 Oak Rise, Tamworth B79 7DN')),
          h('div', { style: { textAlign: 'right' } }, h('div', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 12, textTransform: 'uppercase', color: C.ink500 } }, 'Total inc. VAT'), h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 36, color: C.blue } }, '£5,436'))),
        h('div', { style: { background: '#fff', borderRadius: 12, overflow: 'hidden', border: `1px solid ${C.border}` } }, h(BeforeAfter, { height: 240, pos: 48, after: 'resin', radius: 0 })),
        h('div', { style: { background: '#fff', borderRadius: 12, border: `1px solid ${C.border}`, padding: 24 } },
          h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 16, textTransform: 'uppercase', color: C.ink900, marginBottom: 14 } }, 'Resin-Bound Driveway · 70m²'),
          h('div', { style: { display: 'flex', flexDirection: 'column' } }, [['Excavate & remove old surface', '£980'], ['Type 1 MOT sub-base, compacted', '£1,140'], ['Golden quartz resin-bound surface', '£1,520'], ['Block-paved edging & Aco drainage', '£890']].map((l, i) => h('div', { key: i, style: { display: 'flex', justifyContent: 'space-between', padding: '11px 0', borderBottom: `1px solid ${C.border}`, fontFamily: C.fontB, fontSize: 14, color: C.ink700 } }, h('span', null, l[0]), h('span', { style: { fontFamily: C.fontH, fontWeight: 700, color: C.ink900 } }, l[1]))))),
        h('div', { style: { display: 'flex', gap: 12 } }, h(Btn, { variant: 'accent', size: 'lg', icon: 'checkC', style: { flex: 1, justifyContent: 'center' } }, 'Accept Quote'), h(Btn, { variant: 'outline', size: 'lg', icon: 'msg' }, 'Ask a Question')),
        h('div', { style: { display: 'flex', alignItems: 'center', gap: 16, background: '#fff', borderRadius: 12, border: `1px solid ${C.border}`, padding: 18 } },
          h(Stars, { n: 5, size: 17 }), h('span', { style: { fontFamily: C.fontB, fontSize: 13.5, color: C.ink600 } }, 'Rated 4.9 on Google · Family-run since 1999 · Fully insured · 12-month guarantee'))));
  }

  /* ---------- 8 · QUOTE FOLLOW-UP ENGINE ---------- */
  function FollowUp() {
    const steps = [['send', 'Quote sent', 'Instant', 'Confirmation email + SMS', 'success'], ['bell', 'Not opened after 2 days', '+2 days', 'Friendly reminder SMS', 'brand'], ['msg', 'Opened, not accepted (3d)', '+3 days', 'Follow-up: “any questions?”', 'brand'], ['phone', 'No response after 7 days', '+7 days', 'Second follow-up + call task', 'warning'], ['refresh', 'No response after 30 days', '+30 days', 'Lost-quote reactivation offer', 'neutral']];
    return h(Frame, { active: 'Automations', title: 'Quote Follow-Up Engine', sub: 'Never let a quote go cold', actions: h(Btn, { size: 'sm', variant: 'primary', icon: 'plus' }, 'New Automation') },
      h('div', { style: { display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 16, height: '100%' } },
        h(Card, { title: 'Workflow', action: h(Tag, { tone: 'success', dot: true }, 'Active') },
          h('div', { style: { display: 'flex', flexDirection: 'column' } }, steps.map((s, i) => h('div', { key: i, style: { display: 'flex', gap: 14, paddingBottom: 18, position: 'relative' } },
            i < steps.length - 1 && h('div', { style: { position: 'absolute', left: 21, top: 44, bottom: 0, width: 2, background: C.border } }),
            h('div', { style: { width: 44, height: 44, borderRadius: 12, background: s[4] === 'success' ? C.success : s[4] === 'warning' ? C.warning : s[4] === 'neutral' ? C.ink400 : C.blue, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, zIndex: 1 } }, h(Ico, { name: s[0], size: 21, color: '#fff' })),
            h('div', { style: { flex: 1, background: C.ink50, borderRadius: 10, padding: '12px 14px' } }, h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } }, h('span', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 14, color: C.ink900 } }, s[1]), h(Tag, { tone: 'neutral' }, s[2])), h('div', { style: { fontFamily: C.fontB, fontSize: 13, color: C.ink600, marginTop: 4, display: 'flex', alignItems: 'center', gap: 7 } }, h(Ico, { name: 'arrow', size: 14, color: C.blue }), s[3]))))),
        ),
        h('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
          h(Card, { title: 'This month' }, h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 } }, [['Reminders sent', '34'], ['Re-opened', '12'], ['Recovered', '£14.2k'], ['Win rate', '+22%']].map((k, i) => h('div', { key: i, style: { background: C.ink50, borderRadius: 8, padding: 12 } }, h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 22, color: C.ink900 } }, k[1]), h('div', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 11, textTransform: 'uppercase', color: C.ink500 } }, k[0]))))),
          h(Card, { title: 'Other automations' }, h('div', { style: { display: 'flex', flexDirection: 'column', gap: 10 } }, [['Quote accepted → Deposit due', true], ['Deposit paid → Job scheduled', true], ['Job complete → Review request', true], ['Aftercare 6 & 12 month', true]].map((a, i) => h('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 10 } }, h('div', { style: { width: 34, height: 20, borderRadius: 99, background: C.success, position: 'relative', flexShrink: 0 } }, h('div', { style: { position: 'absolute', top: 2, right: 2, width: 16, height: 16, borderRadius: 99, background: '#fff' } })), h('span', { style: { fontFamily: C.fontB, fontSize: 13, color: C.ink700 } }, a[0]))))))));
  }

  /* ---------- 9 · SITE VISIT CALENDAR ---------- */
  function Calendar() {
    const days = ['Mon 10', 'Tue 11', 'Wed 12', 'Thu 13', 'Fri 14'];
    const ev = [[0, '09:00', 'Tarmac survey', 'Wilnecote', C.blue], [1, '11:30', 'Resin site visit', 'Lichfield', C.success], [2, '14:00', 'Commercial yard', 'Nuneaton', C.ink700], [3, '14:00', 'Karen Doyle', 'Tamworth', C.danger], [4, '10:00', 'Patio measure', 'Fazeley', C.accent600]];
    return h(Frame, { active: 'Site Visits', title: 'Site Visit Calendar', sub: 'Week of 10 June 2026', actions: h(Btn, { size: 'sm', variant: 'primary', icon: 'plus' }, 'Book Visit') },
      h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 300px', gap: 16, height: '100%' } },
        h(Card, { pad: 0 }, h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', height: '100%' } }, days.map((d, i) => h('div', { key: d, style: { borderRight: i < 4 ? `1px solid ${C.border}` : 'none', display: 'flex', flexDirection: 'column' } },
          h('div', { style: { padding: '12px 0', textAlign: 'center', borderBottom: `1px solid ${C.border}`, fontFamily: C.fontH, fontWeight: 800, fontSize: 13, color: i === 3 ? C.blue : C.ink700, background: i === 3 ? C.blue50 : 'transparent' } }, d),
          h('div', { style: { flex: 1, padding: 8, display: 'flex', flexDirection: 'column', gap: 8 } }, ev.filter((e) => e[0] === i).map((e, j) => h('div', { key: j, style: { background: '#fff', borderLeft: `3px solid ${e[4]}`, borderRadius: 6, padding: '8px 9px', boxShadow: C.shadowSm } }, h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 11.5, color: C.ink900 } }, e[1]), h('div', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 12, color: C.ink800, marginTop: 2 } }, e[2]), h('div', { style: { fontFamily: C.fontB, fontSize: 10.5, color: C.ink500, display: 'flex', alignItems: 'center', gap: 4, marginTop: 3 } }, h(Ico, { name: 'pin', size: 11, color: C.ink400 }), e[3])))))))),
        h('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
          h(Card, { title: 'Thu 13 · Karen Doyle' }, h('div', { style: { display: 'flex', flexDirection: 'column', gap: 10 } },
            [['clock', '2:00 – 2:45pm'], ['pin', '14 Oak Rise, B79 7DN'], ['user', 'Assigned: Dave'], ['layers', 'Resin · 70m²']].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('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 6, marginTop: 4 } }, ['old', 'old', 'old'].map((k, i) => h(Media, { key: i, surface: k, h: 48, radius: 5 }))),
            h(Btn, { size: 'sm', variant: 'outline', icon: 'route' }, 'Directions'))),
          h(Card, { title: 'Reminders' }, h('div', { style: { display: 'flex', flexDirection: 'column', gap: 9 } }, [['Booking confirmation', 'Sent'], ['Day-before reminder', 'Scheduled'], ['Morning-of reminder', 'Scheduled'], ['Photo request before visit', 'Sent']].map((r, i) => h('div', { key: i, style: { display: 'flex', justifyContent: 'space-between', fontFamily: C.fontB, fontSize: 12.5 } }, h('span', { style: { color: C.ink700 } }, r[0]), h(Tag, { tone: r[1] === 'Sent' ? 'success' : 'neutral' }, r[1]))))))));
  }

  /* ---------- 10 · MISSED CALL TEXT-BACK ---------- */
  function MissedCall() {
    const log = [['07700 900 233', '11:42am', 'Auto-text sent', 'Replied — new lead', 'success'], ['07911 552 080', '10:15am', 'Auto-text sent', 'Replied — booked visit', 'success'], ['07458 113 920', '9:03am', 'Auto-text sent', 'No reply yet', 'warning'], ['Withheld', 'Yesterday', 'No text (withheld)', 'Call back task', 'neutral']];
    return h(Frame, { active: 'Automations', title: 'Missed Call Text-Back', sub: 'Stop missed calls becoming lost jobs', actions: h(Btn, { size: 'sm', variant: 'outline', icon: 'settings' }, 'Settings') },
      h('div', { style: { display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16, height: '100%' } },
        h(Card, { title: 'Missed call log', action: h(Tag, { tone: 'success' }, '3 recovered today') },
          h('div', { style: { display: 'flex', flexDirection: 'column' } }, log.map((l, i) => h('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 12, padding: '12px 0', borderBottom: i < log.length - 1 ? `1px solid ${C.border}` : 'none' } },
            h('div', { style: { width: 38, height: 38, borderRadius: 99, background: C.danger100, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } }, h(Ico, { name: 'phone', size: 17, color: C.danger })),
            h('div', { style: { flex: 1 } }, h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 13.5, color: C.ink900 } }, l[0]), h('div', { style: { fontFamily: C.fontB, fontSize: 12, color: C.ink500 } }, l[1] + ' · ' + l[2])),
            h(Tag, { tone: l[4] }, l[3])))),
        ),
        h('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
          h(Card, { title: 'Auto-reply message' }, h('div', { style: { background: C.blue, color: '#fff', borderRadius: '12px 12px 12px 3px', padding: '12px 14px', fontFamily: C.fontB, fontSize: 13, lineHeight: 1.5 } }, 'Hi, thanks for calling Primeways. Sorry we missed you. Are you looking for a quote for a driveway, patio, tarmac or groundwork project?'),
            h('div', { style: { marginTop: 12, display: 'flex', flexDirection: 'column', gap: 9 } }, [['Auto SMS reply', true], ['Reply becomes a lead', true], ['Assign to pipeline', true], ['Call-back reminder', true]].map((s, i) => h('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 10 } }, h('div', { style: { width: 34, height: 20, borderRadius: 99, background: C.success, position: 'relative' } }, h('div', { style: { position: 'absolute', top: 2, right: 2, width: 16, height: 16, borderRadius: 99, background: '#fff' } })), h('span', { style: { fontFamily: C.fontB, fontSize: 13, color: C.ink700 } }, s[0]))))),
          h(Card, { title: 'Impact' }, h('div', { style: { display: 'flex', alignItems: 'baseline', gap: 8 } }, h('span', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 30, color: C.ink900 } }, '£9,800'), h('span', { style: { fontFamily: C.fontB, fontSize: 12.5, color: C.ink500 } }, 'recovered this month'))))));
  }

  /* ---------- 11 · REVIEW AUTOMATION ---------- */
  function ReviewAuto() {
    const flow = [['checkC', 'Job completed'], ['msg', 'Thank-you message'], ['star', 'Review request'], ['bell', 'Reminder (3d)']];
    return h(Frame, { active: 'Reviews', title: 'Review Automation', sub: 'Turn happy customers into 5★ reviews', actions: h(Btn, { size: 'sm', variant: 'primary', icon: 'send' }, 'Request Reviews') },
      h('div', { style: { display: 'flex', flexDirection: 'column', gap: 16, height: '100%' } },
        h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 12 } },
          h(KPI, { label: 'Avg rating', value: '4.9', icon: 'star', accent: true }), h(KPI, { label: 'Requests pending', value: '5', icon: 'send' }), h(KPI, { label: 'Received (30d)', value: '12', delta: '+4', icon: 'star' }), h(KPI, { label: 'Not yet asked', value: '8', icon: 'users' })),
        h('div', { style: { display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 16, flex: 1, minHeight: 0 } },
          h(Card, { title: 'Smart review flow' }, h('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
            h('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } }, flow.map((f, i) => h(R.Fragment, { key: i }, h('div', { style: { flex: 1, background: C.ink50, borderRadius: 10, padding: '12px 8px', textAlign: 'center' } }, h('div', { style: { width: 36, height: 36, margin: '0 auto 6px', borderRadius: 10, background: C.blue50, display: 'flex', alignItems: 'center', justifyContent: 'center' } }, h(Ico, { name: f[0], size: 18, color: C.blue })), h('div', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 11, color: C.ink800 } }, f[1])), i < flow.length - 1 && h(Ico, { name: 'chevR', size: 16, color: C.ink300 })))),
            h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 } },
              h('div', { style: { background: C.success100, borderRadius: 10, padding: 14 } }, h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 } }, h(Ico, { name: 'checkC', size: 18, color: C.success }), h('span', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 12.5, color: C.success } }, 'Positive (4–5★)')), h('p', { style: { margin: 0, fontFamily: C.fontB, fontSize: 12, color: C.ink600 } }, 'Send Google / Facebook / Checkatrade review links')),
              h('div', { style: { background: C.warning100, borderRadius: 10, padding: 14 } }, h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 } }, h(Ico, { name: 'shield', size: 18, color: C.warning }), h('span', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 12.5, color: C.warning } }, 'Needs attention')), h('p', { style: { margin: 0, fontFamily: C.fontB, fontSize: 12, color: C.ink600 } }, 'Private feedback form first — resolve before public review'))))),
          h(Card, { title: 'Recent reviews' }, h('div', { style: { display: 'flex', flexDirection: 'column', gap: 12 } }, [['Sarah M.', 'google', '5'], ['D. Patel', 'checkC', '5'], ['Mark T.', 'fb', '5']].map((r, i) => h('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 10, borderBottom: i < 2 ? `1px solid ${C.border}` : 'none', paddingBottom: 12 } }, h(Avatar, { name: r[0], size: 34, tone: C.ink400 }), h('div', { style: { flex: 1 } }, h('div', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 13, color: C.ink900 } }, r[0]), h(Stars, { n: 5, size: 12 })), h(Ico, { name: r[1], size: 17, color: C.ink500 }))))))));
  }

  /* ---------- 12 · AI SOCIAL POST GENERATOR ---------- */
  function SocialGen() {
    return h(Frame, { active: 'AI Marketing', title: 'AI Social Post Generator', sub: 'Wilnecote Tarmac Drive · job complete', actions: h(Btn, { size: 'sm', variant: 'primary', icon: 'share' }, 'Schedule Post') },
      h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 16, height: '100%' } },
        h('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
          h(Card, { title: 'Selected photos' }, h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 } }, ['old', 'tarmac', 'tarmac', 'tarmac'].map((k, i) => h('div', { key: i, style: { position: 'relative' } }, h(Media, { surface: k, h: 90, radius: 8, label: i === 0 ? 'Before' : 'After' }))))),
          h(Card, { title: 'Platform' }, h('div', { style: { display: 'flex', gap: 8 } }, [['fb', 'Facebook', true], ['insta', 'Instagram', true], ['google', 'Google', false]].map((p, i) => h('div', { key: i, style: { flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, padding: '12px 0', borderRadius: 10, border: `1.5px solid ${p[2] ? C.blue : C.border}`, background: p[2] ? C.blue50 : '#fff' } }, h(Ico, { name: p[0], size: 20, color: p[2] ? C.blue : C.ink400 }), h('span', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 11, color: p[2] ? C.blue : C.ink500 } }, p[1])))))),
        h(Card, { title: 'Generated caption', action: h(Tag, { tone: 'accent' }, h(Ico, { name: 'spark', size: 12 }), 'AI draft') },
          h('div', { style: { display: 'flex', flexDirection: 'column', gap: 14 } },
            h('div', { style: { background: C.ink50, borderRadius: 10, padding: 16, fontFamily: C.fontB, fontSize: 13.5, lineHeight: 1.6, color: C.ink700 } }, 'Another driveway transformation completed in Tamworth! 🚧 This project included removal of the existing surface, preparation of the base and a fresh tarmac finish for a cleaner, longer-lasting result. Family-run, fully insured — and free quotes across the Midlands.'),
            h('div', { style: { display: 'flex', flexWrap: 'wrap', gap: 6 } }, ['#Tamworth', '#Driveways', '#Tarmac', '#Midlands', '#Primeways', '#DrivewayTransformation'].map((t) => h(Tag, { key: t, tone: 'brand' }, t))),
            h('div', { style: { display: 'flex', gap: 10 } }, h(Btn, { size: 'sm', variant: 'outline', icon: 'edit' }, 'Edit'), h(Btn, { size: 'sm', variant: 'outline', icon: 'refresh' }, 'Regenerate'), h(Btn, { size: 'sm', variant: 'primary', icon: 'image' }, 'Add to Website Gallery')),
            h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginTop: 4, fontFamily: C.fontB, fontSize: 12.5, color: C.ink500 } }, h(Ico, { name: 'checkC', size: 15, color: C.success }), 'Approved by you — ready to publish')))));
  }

  /* ---------- 13 · WEBSITE CASE STUDY GENERATOR ---------- */
  function CaseStudy() {
    return h(Frame, { active: 'AI Marketing', title: 'Website Case Study', sub: 'Generate a project page from a completed job', actions: h(Row, { gap: 8 }, h(Btn, { size: 'sm', variant: 'outline' }, 'Save Draft'), h(Btn, { size: 'sm', variant: 'primary', icon: 'share' }, 'Publish to Website')) },
      h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 16, height: '100%' } },
        h(Card, { title: 'Project details' }, h('div', { style: { display: 'flex', flexDirection: 'column', gap: 12 } },
          [['Project title', 'Tarmac Driveway Transformation, Wilnecote'], ['Location', 'Wilnecote, Tamworth'], ['Service', 'Tarmac driveway · 92m²'], ['Timescale', '3 days']].map((f, i) => h('div', { key: i }, h('div', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 11, textTransform: 'uppercase', color: C.ink500, marginBottom: 5 } }, f[0]), h('div', { style: { fontFamily: C.fontB, fontSize: 13.5, color: C.ink800, background: C.ink50, borderRadius: 6, padding: '10px 12px' } }, f[1]))),
          h('div', null, h('div', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 11, textTransform: 'uppercase', color: C.ink500, marginBottom: 5 } }, 'Summary (AI drafted)'), h('div', { style: { fontFamily: C.fontB, fontSize: 12.5, lineHeight: 1.5, color: C.ink700, background: C.ink50, borderRadius: 6, padding: '10px 12px' } }, 'A tired, cracked tarmac drive replaced with a smooth, hard-wearing finish — including full excavation, a new compacted base and crisp block edging.')))),
        // preview
        h(Card, { title: 'Website preview', action: h(Tag, { tone: 'success' }, 'Live preview') }, h('div', { style: { borderRadius: 10, overflow: 'hidden', border: `1px solid ${C.border}` } },
          h(BeforeAfter, { height: 150, pos: 50, radius: 0 }),
          h('div', { style: { padding: 16, display: 'flex', flexDirection: 'column', gap: 8 } },
            h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 17, textTransform: 'uppercase', color: C.ink900 } }, 'Tarmac Driveway, Wilnecote'),
            h('div', { style: { display: 'flex', gap: 8 } }, h(Tag, { tone: 'brand' }, 'Tarmac'), h(Tag, { tone: 'neutral' }, '92m²'), h(Tag, { tone: 'neutral' }, '3 days')),
            h('p', { style: { margin: 0, fontFamily: C.fontB, fontSize: 12.5, lineHeight: 1.55, color: C.ink600 } }, 'A tired, cracked tarmac drive replaced with a smooth, hard-wearing finish — full excavation, new compacted base and crisp block edging.'),
            h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, background: C.ink50, borderRadius: 8, padding: '10px 12px' } }, h(Stars, { n: 5, size: 13 }), h('span', { style: { fontFamily: C.fontB, fontSize: 11.5, color: C.ink600 } }, '“Finish is spot on.” — Mr Smith')),
            h(Btn, { size: 'sm', variant: 'accent', iconR: 'arrow' }, 'Want something similar?'))))));
  }

  /* ---------- 14 · SETTINGS / INTEGRATIONS ---------- */
  function Settings() {
    const ints = [['pound', 'Xero', 'Connected · accounts only', 'success'], ['mail', 'Email (SMTP)', 'Connected', 'success'], ['msg', 'SMS gateway', 'Connected', 'success'], ['spark', 'Website forms', '4 forms connected', 'success'], ['fb', 'Facebook / Instagram', 'Connected', 'success'], ['google', 'Google reviews', 'Link added', 'success']];
    return h(Frame, { active: 'Settings', title: 'Settings & Integrations', sub: 'Connect the tools you already use' },
      h('div', { style: { display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16, height: '100%' } },
        h('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
          h(Card, { title: 'Integrations' }, h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 } }, ints.map((it, i) => h('div', { key: i, style: { border: `1px solid ${C.border}`, borderRadius: 10, padding: 14, display: 'flex', alignItems: 'center', gap: 12 } }, h('div', { style: { width: 40, height: 40, borderRadius: 10, background: C.ink50, display: 'flex', alignItems: 'center', justifyContent: 'center' } }, h(Ico, { name: it[0], size: 20, color: C.blue })), h('div', { style: { flex: 1 } }, h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 13.5, color: C.ink900 } }, it[1]), h('div', { style: { fontFamily: C.fontB, fontSize: 11.5, color: C.ink500 } }, it[2])), h('span', { style: { width: 9, height: 9, borderRadius: 9, background: C.success } }))))),
          h('div', { style: { display: 'flex', alignItems: 'center', gap: 14, background: C.blue50, border: `1px solid ${C.blue100}`, borderRadius: 12, padding: 16 } }, h(Ico, { name: 'pound', size: 24, color: C.blue }), h('div', null, h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 13.5, color: C.blue600, textTransform: 'uppercase' } }, 'Xero stays for your accounts'), h('p', { style: { margin: '4px 0 0', fontFamily: C.fontB, fontSize: 13, color: C.ink600, lineHeight: 1.5 } }, 'This system sits before and around Xero — it handles sales, leads, jobs, photos and follow-up. Accepted quotes and deposits sync across so you never double-key.')))),
        h('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
          h(Card, { title: 'Team members' }, h('div', { style: { display: 'flex', flexDirection: 'column', gap: 10 } }, [['Dave (Owner)', 'Admin'], ['Mike', 'Field team'], ['Sam', 'Field team'], ['Office', 'Scheduling']].map((t, i) => h('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 10 } }, h(Avatar, { name: t[0], size: 32, tone: C.ink400 }), h('span', { style: { flex: 1, fontFamily: C.fontH, fontWeight: 700, fontSize: 13, color: C.ink900 } }, t[0]), h(Tag, { tone: 'neutral' }, t[1]))))),
          h(Card, { title: 'Templates' }, h('div', { style: { display: 'flex', flexDirection: 'column', gap: 8 } }, ['Quote templates (4)', 'Message templates (12)', 'Weather delay templates (8)', 'Aftercare emails (6)'].map((t, i) => h('div', { key: i, style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: C.fontB, fontSize: 13, color: C.ink700 } }, t, h(Ico, { name: 'chevR', size: 15, color: C.ink300 }))))))));
  }

  /* ---------- 15 · COMMERCIAL CLIENT AREA ---------- */
  function Commercial() {
    const sites = [['Tamworth Retail Park', '3 car parks · 2,400m²', 'In maintenance', 'success'], ['Mercia Business Units', 'Access road resurface', 'Quote sent £34k', 'brand'], ['Ventura Warehouse', 'Yard & loading bay', 'Scheduled Aug', 'warning']];
    return h(Frame, { active: 'Customers', title: 'Commercial · Mercia Group', sub: 'Account manager: Dave · 3 sites', actions: h(Btn, { size: 'sm', variant: 'primary', icon: 'plus' }, 'New Site Quote') },
      h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 16, height: '100%' } },
        h('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
          h(Card, null, h('div', { style: { display: 'flex', alignItems: 'center', gap: 12 } }, h('div', { style: { width: 52, height: 52, borderRadius: 12, background: C.blue, display: 'flex', alignItems: 'center', justifyContent: 'center' } }, h(Ico, { name: 'building', size: 26, color: '#fff' })), h('div', null, h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 17, color: C.ink900 } }, 'Mercia Group'), h(Tag, { tone: 'brand' }, 'Commercial client'))), h('div', { style: { borderTop: `1px solid ${C.border}`, marginTop: 14, paddingTop: 14, display: 'flex', flexDirection: 'column', gap: 9 } }, [['user', 'Contact: Janet Hill'], ['phone', '01827 000 120'], ['pound', 'LTV: £126,000']].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: 'Documents' }, h('div', { style: { display: 'flex', flexDirection: 'column', gap: 8 } }, ['Framework agreement.pdf', 'Site 1 — RAMS.pdf', 'Invoice history'].map((d, i) => h('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 10, fontFamily: C.fontB, fontSize: 12.5, color: C.ink700 } }, h(Ico, { name: 'file', size: 15, color: C.ink400 }), d))))),
        h(Card, { title: 'Sites (3)', action: h(Btn, { size: 'sm', variant: 'ghost', icon: 'plus' }, 'Add Site') }, h('div', { style: { display: 'flex', flexDirection: 'column', gap: 12 } }, sites.map((s, 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: 60, height: 60, borderRadius: 8, ...SURFACES.concrete.css, flexShrink: 0 } }), h('div', { style: { flex: 1 } }, h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 15, color: C.ink900 } }, s[0]), h('div', { style: { fontFamily: C.fontB, fontSize: 12.5, color: C.ink500 } }, s[1])), h(Tag, { tone: s[3] }, s[2]), h(Ico, { name: 'chevR', size: 18, color: C.ink300 })))))));
  }

  /* ---------- 16 · PAST CUSTOMER DATABASE ---------- */
  function PastCustomers() {
    const rows = [['Mr & Mrs Smith', 'Tarmac', '2026', '£4,250', ['High-value', 'Patio upsell']], ['D. Patel', 'Resin + patio', '2026', '£9,400', ['Reviewed', 'Referral']], ['L. Green', 'Gravel', '2025', '£2,600', ['Maintenance due']], ['R. Cole', 'Commercial', '2025', '£18,000', ['Commercial', 'High-value']], ['H. Brooks', 'Block paving', '2024', '£5,200', ['Driveway maintenance']], ['Sue Akhtar', 'Patio', '2024', '£3,800', ['Future driveway']]];
    return h(Frame, { active: 'Customers', title: 'Past Customer Database', sub: '482 customers · segment & reactivate', actions: h(Row, { gap: 8 }, h(Btn, { size: 'sm', variant: 'outline', icon: 'filter' }, 'Segment'), h(Btn, { size: 'sm', variant: 'primary', icon: 'send' }, 'Reactivation Campaign')) },
      h('div', { style: { display: 'flex', flexDirection: 'column', gap: 14, height: '100%' } },
        h('div', { style: { display: 'flex', gap: 8, flexWrap: 'wrap' } }, ['All (482)', 'Tarmac', 'Resin', 'Block paving', 'Patio', 'Commercial', 'High-value', 'Referral opp.', 'Maintenance due'].map((t, i) => h('span', { key: t, style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 12, padding: '7px 13px', borderRadius: 99, cursor: 'pointer', color: i === 0 ? '#fff' : C.ink700, background: i === 0 ? C.blue : '#fff', border: `1px solid ${i === 0 ? C.blue : C.border}` } }, t))),
        h(Card, { pad: 0, style: { flex: 1 } }, h('div', { style: { display: 'grid', gridTemplateColumns: '1.4fr 1fr 0.7fr 0.9fr 1.6fr 0.5fr', padding: '12px 18px', borderBottom: `1px solid ${C.border}`, fontFamily: C.fontH, fontWeight: 700, fontSize: 11, textTransform: 'uppercase', color: C.ink500, letterSpacing: '0.04em' } }, ['Customer', 'Service', 'Year', 'Value', 'Tags', ''].map((th, i) => h('span', { key: i }, th))),
          rows.map((r, i) => h('div', { key: i, style: { display: 'grid', gridTemplateColumns: '1.4fr 1fr 0.7fr 0.9fr 1.6fr 0.5fr', alignItems: 'center', padding: '12px 18px', borderBottom: i < rows.length - 1 ? `1px solid ${C.border}` : 'none' } },
            h('div', { style: { display: 'flex', alignItems: 'center', gap: 10 } }, h(Avatar, { name: r[0], size: 30, tone: C.ink400 }), h('span', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 13, color: C.ink900 } }, r[0])),
            h('span', { style: { fontFamily: C.fontB, fontSize: 13, color: C.ink600 } }, r[1]), h('span', { style: { fontFamily: C.fontB, fontSize: 13, color: C.ink600 } }, r[2]), h('span', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 13, color: C.ink900 } }, r[3]),
            h('div', { style: { display: 'flex', gap: 5, flexWrap: 'wrap' } }, r[4].map((t) => h(Tag, { key: t, tone: t.includes('High') ? 'accent' : t.includes('Referral') || t.includes('Reviewed') ? 'success' : 'neutral' }, t))),
            h(Ico, { name: 'dots', size: 16, color: C.ink400 }))))));
  }

  window.CRM = Object.assign(window.CRM || {}, { QuoteBuilder, CustomerQuote, FollowUp, Calendar, MissedCall, ReviewAuto, SocialGen, CaseStudy, Settings, Commercial, PastCustomers });
})();