// kit2.jsx — Primeways concept · app & CRM chrome + composite cards
(function () {
  const R = React, h = R.createElement;
  const { C } = window.PWKit;
  const { Ico, Logo, Mark, Tag, Btn, Media } = window;

  /* ============================================================
     CRM SHELL — left rail + topbar + content (sits inside MacWindow)
     ============================================================ */
  const CRM_NAV = [
    ['grid', 'Dashboard'], ['route', 'Lead Pipeline'], ['users', 'Customers'],
    ['hammer', 'Jobs'], ['image', 'Photo Vault'], ['file', 'Quotes'],
    ['zap', 'Automations'], ['calendar', 'Site Visits'], ['star', 'Reviews'],
    ['spark', 'AI Marketing'], ['settings', 'Settings'],
  ];
  function CRMShell({ active = 'Dashboard', title, sub, actions, children, contentBg = '#F4F5F7', dense }) {
    return h('div', { style: { display: 'flex', width: '100%', height: '100%', fontFamily: C.fontB, background: contentBg } },
      // left rail
      h('aside', { style: { width: 232, flexShrink: 0, background: C.ink900, display: 'flex', flexDirection: 'column', padding: '20px 0' } },
        h('div', { style: { padding: '0 20px 18px' } }, h(Logo, { white: true, height: 26 })),
        h('div', { style: { padding: '0 14px', display: 'flex', flexDirection: 'column', gap: 2, flex: 1 } },
          CRM_NAV.map(([ic, n]) => {
            const on = n === active;
            return h('div', { key: n, style: { display: 'flex', alignItems: 'center', gap: 12, padding: '9px 12px', borderRadius: C.radSm, fontFamily: C.fontH, fontWeight: 700, fontSize: 13, letterSpacing: '0.02em', color: on ? '#fff' : 'rgba(255,255,255,0.6)', background: on ? C.blue : 'transparent', cursor: 'pointer' } },
              h(Ico, { name: ic, size: 18, color: on ? '#fff' : 'rgba(255,255,255,0.55)' }), n,
              n === 'Lead Pipeline' && h('span', { style: { marginLeft: 'auto', fontSize: 10.5, background: C.accent, color: C.ink900, borderRadius: 99, padding: '2px 7px', fontWeight: 800 } }, '12'));
          })),
        h('div', { style: { margin: '0 14px', padding: '12px', borderRadius: C.radMd, background: 'rgba(255,255,255,0.06)', display: 'flex', alignItems: 'center', gap: 10 } },
          h('div', { style: { width: 34, height: 34, borderRadius: 99, background: C.blue400, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: C.fontH, fontWeight: 800, color: '#fff', fontSize: 14 } }, 'PW'),
          h('div', { style: { lineHeight: 1.2 } },
            h('div', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 13, color: '#fff' } }, 'Primeways Admin'),
            h('div', { style: { fontSize: 11, color: 'rgba(255,255,255,0.5)' } }, 'Tamworth HQ')))),
      // main
      h('div', { style: { flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 } },
        h('div', { style: { display: 'flex', alignItems: 'center', gap: 16, padding: '0 26px', height: 66, background: '#fff', borderBottom: `1px solid ${C.border}`, flexShrink: 0 } },
          h('div', null,
            h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 20, letterSpacing: '-0.01em', color: C.ink900, textTransform: 'uppercase' } }, title),
            sub && h('div', { style: { fontSize: 12.5, color: C.ink500, marginTop: 2 } }, sub)),
          h('div', { style: { marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 12 } },
            h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, background: C.ink100, borderRadius: C.radSm, padding: '8px 12px', width: 200, color: C.ink500 } },
              h(Ico, { name: 'search', size: 16 }), h('span', { style: { fontSize: 13 } }, 'Search…')),
            h('div', { style: { position: 'relative', width: 38, height: 38, borderRadius: C.radSm, border: `1px solid ${C.border}`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: C.ink600 } },
              h(Ico, { name: 'bell', size: 18 }), h('span', { style: { position: 'absolute', top: 7, right: 8, width: 7, height: 7, borderRadius: 9, background: C.danger } })),
            actions)),
        h('div', { style: { flex: 1, overflow: 'hidden', padding: dense ? 20 : 24 } }, children)));
  }

  // CRM stat / KPI card
  function KPI({ label, value, delta, deltaTone = 'success', icon, accent }) {
    return h('div', { style: { background: '#fff', border: `1px solid ${C.border}`, borderRadius: C.radLg, padding: '16px 18px', display: 'flex', flexDirection: 'column', gap: 10, boxShadow: C.shadowSm } },
      h('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' } },
        h('span', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 11.5, letterSpacing: '0.06em', textTransform: 'uppercase', color: C.ink500 } }, label),
        h('div', { style: { width: 30, height: 30, borderRadius: C.radSm, background: accent ? 'var(--accent)' : C.blue50, display: 'flex', alignItems: 'center', justifyContent: 'center' } }, h(Ico, { name: icon, size: 16, color: accent ? C.ink900 : C.blue }))),
      h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 30, lineHeight: 1, color: C.ink900 } }, value),
      delta && h('div', { style: { display: 'flex', alignItems: 'center', gap: 5, fontFamily: C.fontB, fontSize: 12.5, fontWeight: 600, color: deltaTone === 'success' ? C.success : deltaTone === 'danger' ? C.danger : C.ink500 } },
        h(Ico, { name: 'trend', size: 14 }), delta));
  }

  function Card({ title, action, children, pad = 18, style }) {
    return h('div', { style: { background: '#fff', border: `1px solid ${C.border}`, borderRadius: C.radLg, boxShadow: C.shadowSm, overflow: 'hidden', display: 'flex', flexDirection: 'column', ...style } },
      title && h('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 18px', borderBottom: `1px solid ${C.border}` } },
        h('span', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 14, letterSpacing: '0.01em', textTransform: 'uppercase', color: C.ink900 } }, title),
        action),
      h('div', { style: { padding: pad, flex: 1 } }, children));
  }

  /* ============================================================
     iOS APP CHROME (used inside IOSDevice)
     ============================================================ */
  // status-safe top header for app screens (sits below the dynamic island)
  function AppHead({ title, sub, dark, right, left, accent, big }) {
    return h('div', { style: { padding: '58px 18px 14px', background: accent ? C.blue600 : (dark ? '#0F0F0F' : '#fff'), backgroundImage: accent ? 'var(--overlay-brand)' : undefined, borderBottom: accent ? 'none' : `1px solid ${dark ? 'rgba(255,255,255,0.08)' : C.border}`, flexShrink: 0 } },
      h('div', { style: { display: 'flex', alignItems: 'center', gap: 10 } },
        left,
        h('div', { style: { flex: 1 } },
          sub && h('div', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: accent ? 'rgba(255,255,255,0.7)' : C.accent600, marginBottom: 3 } }, sub),
          h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: big ? 26 : 21, letterSpacing: '-0.01em', color: accent || dark ? '#fff' : C.ink900, lineHeight: 1.05, textTransform: big ? 'uppercase' : 'none' } }, title)),
        right));
  }

  // bottom tab bar
  function TabBar({ tabs, active, dark }) {
    return h('div', { style: { display: 'flex', padding: '8px 6px 26px', background: dark ? 'rgba(10,10,10,0.92)' : 'rgba(255,255,255,0.94)', borderTop: `1px solid ${dark ? 'rgba(255,255,255,0.08)' : C.border}`, backdropFilter: 'blur(12px)', flexShrink: 0 } },
      tabs.map(([ic, label]) => {
        const on = label === active;
        return h('div', { key: label, style: { flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, color: on ? C.blue : (dark ? 'rgba(255,255,255,0.5)' : C.ink400) } },
          h(Ico, { name: ic, size: 23, sw: on ? 2.4 : 2 }),
          h('span', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 9.5, letterSpacing: '0.03em' } }, label));
      }));
  }

  // generic app screen scaffold inside the device (header + scroll body + tabbar)
  function AppScreen({ head, children, tabbar, bg = '#F2F2F7' }) {
    return h('div', { style: { height: '100%', display: 'flex', flexDirection: 'column', background: bg } },
      head,
      h('div', { style: { flex: 1, overflow: 'hidden' } }, children),
      tabbar);
  }

  function QA({ icon, label, accent }) {
    return h('div', { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, padding: '14px 6px', background: accent ? C.blue600 : '#fff', backgroundImage: accent ? 'var(--overlay-brand)' : undefined, borderRadius: 16, border: accent ? 'none' : `1px solid ${C.border}`, boxShadow: C.shadowSm } },
      h('div', { style: { width: 40, height: 40, borderRadius: 12, background: accent ? 'rgba(255,255,255,0.18)' : C.blue50, display: 'flex', alignItems: 'center', justifyContent: 'center' } }, h(Ico, { name: icon, size: 21, color: accent ? '#fff' : C.blue })),
      h('span', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 11, textAlign: 'center', color: accent ? '#fff' : C.ink800, lineHeight: 1.15 } }, label));
  }

  Object.assign(window, { CRMShell, KPI, Card, AppHead, TabBar, AppScreen, QA });
})();