// Realistic Shopify-admin-style mocks for inclamo variation B.
// Full admin chrome: top app bar with search, left nav with app groups, content area with page header + action bar + rich data.
// Palette stays in inclamo: cream bg, ink, terracotta accent, navy. No real Shopify logos.

const cmsFont = { fontFamily: '-apple-system, "Inter", system-ui, sans-serif' };
const cmsMono = { fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace' };

// Subtle "Shopify-like" success green but pulled toward cream palette
const ADMIN = {
  bg: '#FBFAF6',
  surface: '#FFFFFF',
  surfaceAlt: '#F6F1E6',
  border: '#E6DFCE',
  borderStrong: '#D9D0BA',
  text: '#1F1D18',
  textMuted: '#6E685C',
  textDim: '#9A9385',
  success: '#4A6B3A',
  successBg: '#E9EEDF',
  warn: '#8A6500',
  warnBg: '#F5E7CC',
  danger: '#A03B1C',
  dangerBg: '#F7DDD4',
  info: '#2B4B7C',
  infoBg: '#DCE5F0',
  brand: '#E85D3A',
  brandBg: '#FADDD2',
  rowHover: '#F8F4EA',
  sidebarBg: '#F2ECDD',
  sidebarActive: '#E5DCC5',
  praec: '#E85D3A',
};

// ——— Admin shell ———
const AdminShell = ({ breadcrumbs, pageTitle, pageSubtitle, pageActions, tabs, activeTab, activeItem, children, accent }) => (
  <div style={{
    background: ADMIN.bg,
    borderRadius: 10,
    overflow: 'hidden',
    border: `1px solid ${ADMIN.border}`,
    display: 'grid',
    gridTemplateColumns: '220px 1fr',
    gridTemplateRows: '44px 1fr',
    minHeight: 580,
    ...cmsFont,
    color: ADMIN.text,
    fontSize: 12,
  }}>
    {/* Top app bar (spans both cols) */}
    <div style={{
      gridColumn: '1 / 3', gridRow: 1,
      display: 'flex', alignItems: 'center', gap: 12,
      padding: '0 12px',
      background: ADMIN.sidebarBg,
      borderBottom: `1px solid ${ADMIN.border}`,
    }}>
      {/* Store picker */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8,
        padding: '4px 10px 4px 4px',
        background: ADMIN.surface,
        border: `1px solid ${ADMIN.border}`,
        borderRadius: 8,
      }}>
        <div style={{ width: 22, height: 22, borderRadius: 5, background: ADMIN.text, color: ADMIN.surface, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 700 }}>N</div>
        <span style={{ fontSize: 12, fontWeight: 500 }}>Northline</span>
        <span style={{ fontSize: 9, color: ADMIN.textMuted }}>▾</span>
      </div>
      {/* Search */}
      <div style={{
        flex: 1, maxWidth: 520, margin: '0 auto',
        display: 'flex', alignItems: 'center', gap: 8,
        padding: '6px 10px',
        background: ADMIN.surface,
        border: `1px solid ${ADMIN.border}`,
        borderRadius: 8,
        color: ADMIN.textDim,
      }}>
        <span style={{ fontSize: 12 }}>⌕</span>
        <span style={{ fontSize: 12 }}>Search orders, products, customers…</span>
        <span style={{ marginLeft: 'auto', ...cmsMono, fontSize: 10, color: ADMIN.textDim, padding: '1px 5px', border: `1px solid ${ADMIN.border}`, borderRadius: 4 }}>⌘K</span>
      </div>
      {/* Right controls */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        {['◐', '☀', '◉'].map((g, i) => (
          <div key={i} style={{ width: 26, height: 26, borderRadius: 6, background: 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center', color: ADMIN.textMuted, fontSize: 12 }}>{g}</div>
        ))}
        <div style={{ width: 26, height: 26, borderRadius: '50%', background: ADMIN.info, color: ADMIN.surface, fontSize: 10, fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>AM</div>
      </div>
    </div>

    {/* Sidebar */}
    <div style={{
      gridColumn: 1, gridRow: 2,
      background: ADMIN.sidebarBg,
      borderRight: `1px solid ${ADMIN.border}`,
      padding: '10px 8px',
      display: 'flex', flexDirection: 'column', gap: 1,
      overflow: 'hidden',
    }}>
      {[
        { n: 'Home', i: '⌂' },
        { n: 'Orders', i: '▤', count: 12 },
        { n: 'Drafts', i: '▢', indent: true },
        { n: 'Abandoned', i: '◌', indent: true, count: 3 },
        { n: 'Products', i: '◧' },
        { n: 'Customers', i: '◉' },
        { n: 'Content', i: '¶' },
        { n: 'Finances', i: '$' },
        { n: 'Analytics', i: '⎍' },
        { n: 'Marketing', i: '◐' },
        { n: 'Discounts', i: '%' },
      ].map(it => {
        const active = activeItem === it.n;
        return (
          <div key={it.n} style={{
            display: 'flex', alignItems: 'center', gap: 9,
            padding: it.indent ? '5px 8px 5px 28px' : '5px 8px',
            borderRadius: 6,
            background: active ? ADMIN.sidebarActive : 'transparent',
            color: active ? ADMIN.text : ADMIN.textMuted,
            fontWeight: active ? 600 : 400,
            fontSize: 12.5,
          }}>
            {!it.indent && <span style={{ fontSize: 11, width: 14, textAlign: 'center', opacity: 0.7 }}>{it.i}</span>}
            <span style={{ flex: 1 }}>{it.n}</span>
            {it.count && (
              <span style={{
                fontSize: 10, padding: '1px 6px', borderRadius: 8,
                background: active ? ADMIN.text : ADMIN.borderStrong,
                color: active ? ADMIN.surface : ADMIN.textMuted,
                fontWeight: 600, minWidth: 18, textAlign: 'center',
              }}>{it.count}</span>
            )}
          </div>
        );
      })}

      <div style={{ marginTop: 12, fontSize: 10, color: ADMIN.textDim, ...cmsMono, letterSpacing: '0.08em', textTransform: 'uppercase', padding: '4px 8px' }}>
        Sales channels
      </div>
      {[['Online Store', '◐'], ['Point of Sale', '◧']].map(([n, i]) => (
        <div key={n} style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '5px 8px', borderRadius: 6, color: ADMIN.textMuted, fontSize: 12 }}>
          <span style={{ fontSize: 11, width: 14, textAlign: 'center', opacity: 0.7 }}>{i}</span>
          <span style={{ flex: 1 }}>{n}</span>
        </div>
      ))}

      <div style={{ marginTop: 12, fontSize: 10, color: ADMIN.textDim, ...cmsMono, letterSpacing: '0.08em', textTransform: 'uppercase', padding: '4px 8px' }}>
        Apps
      </div>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 9,
        padding: '5px 8px', borderRadius: 6,
        background: `${accent || ADMIN.brand}12`,
        color: accent || ADMIN.brand, fontWeight: 600, fontSize: 12.5,
      }}>
        <span style={{ width: 14, height: 14, borderRadius: 3, background: accent || ADMIN.brand, color: ADMIN.surface, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 9, fontWeight: 700 }}>p</span>
        <span style={{ flex: 1 }}>inclamo</span>
        <span style={{ width: 6, height: 6, borderRadius: '50%', background: accent || ADMIN.brand, boxShadow: `0 0 0 3px ${(accent || ADMIN.brand)}33` }} />
      </div>
      {[['Klaviyo', '✉'], ['Gorgias', '◔'], ['Recharge', '↻']].map(([n, i]) => (
        <div key={n} style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '5px 8px', borderRadius: 6, color: ADMIN.textMuted, fontSize: 12 }}>
          <span style={{ fontSize: 11, width: 14, textAlign: 'center', opacity: 0.7 }}>{i}</span>
          <span style={{ flex: 1 }}>{n}</span>
        </div>
      ))}

      <div style={{ marginTop: 'auto', paddingTop: 10 }}>
        {['Settings', 'Help'].map(n => (
          <div key={n} style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '5px 8px', borderRadius: 6, color: ADMIN.textMuted, fontSize: 12 }}>
            <span style={{ fontSize: 11, width: 14, opacity: 0.7 }}>⚙</span>
            <span>{n}</span>
          </div>
        ))}
      </div>
    </div>

    {/* Main content */}
    <div style={{ gridColumn: 2, gridRow: 2, display: 'flex', flexDirection: 'column', minHeight: 0, overflow: 'hidden' }}>
      {/* Breadcrumbs */}
      {breadcrumbs && (
        <div style={{ padding: '12px 20px 0', display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, color: ADMIN.textMuted }}>
          {breadcrumbs.map((b, i) => (
            <React.Fragment key={i}>
              <span>{b}</span>
              {i < breadcrumbs.length - 1 && <span style={{ color: ADMIN.textDim }}>›</span>}
            </React.Fragment>
          ))}
        </div>
      )}
      {/* Page header */}
      <div style={{ padding: '8px 20px 14px', borderBottom: tabs ? 'none' : `1px solid ${ADMIN.border}`, display: 'flex', alignItems: 'flex-end', gap: 16 }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: '-apple-system, "Inter", system-ui, sans-serif', fontSize: 22, fontWeight: 650, letterSpacing: '-0.01em', color: ADMIN.text }}>{pageTitle}</div>
          {pageSubtitle && <div style={{ fontSize: 12, color: ADMIN.textMuted, marginTop: 3 }}>{pageSubtitle}</div>}
        </div>
        {pageActions}
      </div>
      {/* Tabs */}
      {tabs && (
        <div style={{ display: 'flex', gap: 2, padding: '0 12px', borderBottom: `1px solid ${ADMIN.border}` }}>
          {tabs.map(t => (
            <div key={t} style={{
              padding: '8px 12px',
              fontSize: 12,
              color: t === activeTab ? ADMIN.text : ADMIN.textMuted,
              fontWeight: t === activeTab ? 600 : 400,
              borderBottom: t === activeTab ? `2px solid ${ADMIN.text}` : '2px solid transparent',
              marginBottom: -1,
            }}>{t}</div>
          ))}
        </div>
      )}
      <div style={{ flex: 1, padding: '16px 20px', overflow: 'hidden' }}>
        {children}
      </div>
    </div>
  </div>
);

// Generic atoms
const Badge = ({ tone = 'neutral', dot, children }) => {
  const tones = {
    neutral: { bg: ADMIN.surfaceAlt, fg: ADMIN.textMuted, dot: ADMIN.textMuted },
    success: { bg: ADMIN.successBg, fg: ADMIN.success, dot: ADMIN.success },
    warn:    { bg: ADMIN.warnBg, fg: ADMIN.warn, dot: ADMIN.warn },
    danger:  { bg: ADMIN.dangerBg, fg: ADMIN.danger, dot: ADMIN.danger },
    info:    { bg: ADMIN.infoBg, fg: ADMIN.info, dot: ADMIN.info },
    brand:   { bg: ADMIN.brandBg, fg: ADMIN.brand, dot: ADMIN.brand },
  };
  const t = tones[tone];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      fontSize: 11, fontWeight: 500,
      padding: '2px 8px', borderRadius: 10,
      background: t.bg, color: t.fg,
      whiteSpace: 'nowrap',
    }}>
      {dot && <span style={{ width: 6, height: 6, borderRadius: '50%', background: t.dot }} />}
      {children}
    </span>
  );
};

const AdminBtn = ({ children, variant = 'ghost', icon }) => {
  const styles = {
    primary: { bg: ADMIN.text, fg: ADMIN.surface, border: ADMIN.text },
    ghost:   { bg: ADMIN.surface, fg: ADMIN.text, border: ADMIN.borderStrong },
    accent:  { bg: ADMIN.brand, fg: ADMIN.surface, border: ADMIN.brand },
  };
  const s = styles[variant];
  return (
    <button style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '6px 12px', borderRadius: 7,
      background: s.bg, color: s.fg,
      border: `1px solid ${s.border}`,
      fontSize: 12, fontWeight: 500,
      cursor: 'pointer', ...cmsFont,
    }}>
      {icon && <span style={{ fontSize: 12 }}>{icon}</span>}
      {children}
    </button>
  );
};

const Card = ({ title, subtitle, action, children, style = {}, noPad = false }) => (
  <div style={{
    background: ADMIN.surface,
    border: `1px solid ${ADMIN.border}`,
    borderRadius: 10,
    overflow: 'hidden',
    ...style,
  }}>
    {(title || action) && (
      <div style={{ padding: '12px 16px', borderBottom: `1px solid ${ADMIN.border}`, display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{ flex: 1 }}>
          {title && <div style={{ fontSize: 13, fontWeight: 600, color: ADMIN.text }}>{title}</div>}
          {subtitle && <div style={{ fontSize: 11, color: ADMIN.textMuted, marginTop: 2 }}>{subtitle}</div>}
        </div>
        {action}
      </div>
    )}
    <div style={{ padding: noPad ? 0 : 14 }}>{children}</div>
  </div>
);

// ——— 01 UPSALES ———
// Realistic order detail page with inclamo live call drawer docked on the right
const UpsellMock = () => (
  <AdminShell
    breadcrumbs={['Orders', '#NL-48291']}
    pageTitle="#NL-48291"
    pageSubtitle={<span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
      <Badge tone="warn" dot>Payment pending</Badge>
      <Badge tone="neutral" dot>Unfulfilled</Badge>
      <span style={{ color: ADMIN.textMuted }}>· 2 min ago · via Online Store</span>
    </span>}
    pageActions={
      <div style={{ display: 'flex', gap: 6 }}>
        <AdminBtn icon="✎">Edit</AdminBtn>
        <AdminBtn icon="⎙">Print</AdminBtn>
        <AdminBtn variant="primary" icon="▶">More actions ▾</AdminBtn>
      </div>
    }
    activeItem="Orders"
  >
    <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 14, height: '100%', minHeight: 0 }}>
      {/* Left col */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, overflow: 'hidden' }}>
        {/* Unfulfilled card */}
        <Card title={<span>Unfulfilled <span style={{ color: ADMIN.textMuted, fontWeight: 400 }}>(2)</span></span>} action={<AdminBtn>Fulfill items</AdminBtn>}>
          {[
            { n: 'Matte Black Lounge Chair', v: 'Walnut · Medium', q: 1, p: 189, sku: 'NL-MBL-WAL-M' },
            { n: 'Walnut Side Table', v: 'Round · 18"', q: 1, p: 119, sku: 'NL-WST-18' },
          ].map((p, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '44px 1fr 60px 80px', gap: 12, alignItems: 'center',
              padding: '10px 0',
              borderTop: i === 0 ? 'none' : `1px solid ${ADMIN.border}`,
            }}>
              <div style={{
                width: 44, height: 44, borderRadius: 6,
                background: `repeating-linear-gradient(135deg, ${ADMIN.surfaceAlt} 0 5px, ${ADMIN.bg} 5px 10px)`,
                border: `1px solid ${ADMIN.border}`,
              }} />
              <div>
                <div style={{ fontSize: 12.5, fontWeight: 500, color: ADMIN.info, marginBottom: 2 }}>{p.n}</div>
                <div style={{ fontSize: 11, color: ADMIN.textMuted }}>{p.v} · SKU {p.sku}</div>
              </div>
              <div style={{ fontSize: 12, color: ADMIN.textMuted }}>${p.p}.00 × {p.q}</div>
              <div style={{ fontSize: 12, fontWeight: 600, textAlign: 'right' }}>${(p.p * p.q).toFixed(2)}</div>
            </div>
          ))}
        </Card>

        {/* Paid / totals */}
        <Card title="Paid" subtitle="Captured · Shop Pay · **** 4821">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 12, lineHeight: 1.4 }}>
            {[
              ['Subtotal', '2 items', '$308.00'],
              ['Shipping', 'Standard', '$12.00'],
              ['Tax', '8.875%', '$27.33'],
            ].map(([k, sub, v]) => (
              <div key={k} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 10, color: ADMIN.textMuted }}>
                <span style={{ whiteSpace: 'nowrap' }}>{k} <span style={{ color: ADMIN.textDim }}>· {sub}</span></span>
                <span style={{ whiteSpace: 'nowrap' }}>{v}</span>
              </div>
            ))}
            <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: 10, borderTop: `1px solid ${ADMIN.border}`, fontWeight: 600, color: ADMIN.text }}>
              <span>Total</span><span>$347.33</span>
            </div>
          </div>
        </Card>

        {/* Timeline */}
        <Card title="Timeline" style={{ flex: 1 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 11.5 }}>
            {[
              { t: 'inclamo placed an outbound confirmation call', s: 'Just now', tone: 'brand' },
              { t: 'Payment captured — Shop Pay', s: '2 min ago', tone: 'success' },
              { t: 'Order placed by Alex Moreno', s: '2 min ago', tone: 'neutral' },
            ].map((e, i) => (
              <div key={i} style={{ display: 'flex', gap: 10 }}>
                <div style={{ width: 7, height: 7, borderRadius: '50%', marginTop: 5, background: e.tone === 'brand' ? ADMIN.brand : e.tone === 'success' ? ADMIN.success : ADMIN.textDim }} />
                <div style={{ flex: 1 }}>
                  <div style={{ color: ADMIN.text }}>{e.t}</div>
                  <div style={{ color: ADMIN.textDim, marginTop: 2 }}>{e.s}</div>
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>

      {/* Right col */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, overflow: 'hidden' }}>
        {/* inclamo live drawer */}
        <Card
          title={<span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            <span style={{ width: 16, height: 16, borderRadius: 4, background: ADMIN.brand, color: ADMIN.surface, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, fontWeight: 700 }}>p</span>
            inclamo · Live upsell
          </span>}
          subtitle="Outbound confirmation · Ava (warm) · EN-US"
          action={<Badge tone="brand" dot>Live 00:47</Badge>}
          style={{ flex: 1, display: 'flex', flexDirection: 'column' }}
        >
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 11.5 }}>
            {/* Transcript */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {[
                { w: 'Agent', t: '"Hi Alex, confirming your chair and side table. Shipping Thursday — sound good?"', me: true },
                { w: 'Alex', t: '"Yes, that works."', me: false },
                { w: 'Agent', t: '"Nice. Customers who bought this chair usually add felt pads — I can include them at 30% off?"', me: true, hl: true },
                { w: 'Alex', t: '"Sure, add them."', me: false },
              ].map((m, i) => (
                <div key={i} style={{ display: 'flex', gap: 8 }}>
                  <div style={{ ...cmsMono, fontSize: 9, letterSpacing: '0.06em', color: m.me ? ADMIN.brand : ADMIN.info, width: 38, paddingTop: 4, textTransform: 'uppercase', flexShrink: 0 }}>{m.w}</div>
                  <div style={{
                    flex: 1, padding: '6px 10px', borderRadius: 8,
                    background: m.hl ? ADMIN.brandBg : ADMIN.bg,
                    border: `1px solid ${m.hl ? ADMIN.brand : ADMIN.border}`,
                    color: ADMIN.text, lineHeight: 1.45,
                  }}>{m.t}</div>
                </div>
              ))}
            </div>

            {/* Cart patch */}
            <div style={{ padding: 10, background: ADMIN.successBg, border: `1px solid ${ADMIN.success}44`, borderRadius: 8 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 }}>
                <span style={{ ...cmsMono, fontSize: 9, color: ADMIN.success, letterSpacing: '0.08em' }}>● CART PATCH APPLIED</span>
                <span style={{ fontSize: 10, color: ADMIN.success }}>+1 item</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12 }}>
                <div style={{ width: 24, height: 24, borderRadius: 4, background: `repeating-linear-gradient(135deg, ${ADMIN.surfaceAlt} 0 4px, ${ADMIN.bg} 4px 8px)`, border: `1px solid ${ADMIN.border}` }} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 11.5, fontWeight: 500 }}>Felt pads (set of 8)</div>
                  <div style={{ fontSize: 10, color: ADMIN.success }}>30% bundle · auto-applied</div>
                </div>
                <span style={{ fontWeight: 600, color: ADMIN.success }}>+$24.90</span>
              </div>
            </div>

            {/* Live waveform bar */}
            <div style={{ padding: '8px 10px', background: ADMIN.text, borderRadius: 8, display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: ADMIN.brand, boxShadow: `0 0 0 3px ${ADMIN.brand}44` }} />
              <div style={{ flex: 1 }}><Waveform bars={32} height={18} color={ADMIN.surface} active /></div>
              <span style={{ ...cmsMono, fontSize: 9, color: 'rgba(255,250,238,0.7)' }}>SPEAKING</span>
            </div>
          </div>
        </Card>

        {/* Customer card */}
        <Card title="Customer">
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
            <div style={{ width: 30, height: 30, borderRadius: '50%', background: ADMIN.info, color: ADMIN.surface, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 600 }}>AM</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12.5, color: ADMIN.info, fontWeight: 500 }}>Alex Moreno</div>
              <div style={{ fontSize: 11, color: ADMIN.textMuted }}>3 orders · $892.40 LTV</div>
            </div>
          </div>
          <div style={{ fontSize: 11, color: ADMIN.textMuted, lineHeight: 1.6 }}>
            alex.m@northline.co · +1 (415) 555-0183<br/>
            Brooklyn, NY · Returning customer
          </div>
        </Card>
      </div>
    </div>
  </AdminShell>
);

// ——— 02 MARKETING ———
// Campaigns index page with live voice campaign row highlighted
const MarketingMock = () => (
  <AdminShell
    breadcrumbs={['Marketing']}
    pageTitle="Marketing"
    pageSubtitle="Manage campaigns across your channels"
    pageActions={
      <div style={{ display: 'flex', gap: 6 }}>
        <AdminBtn icon="⇪">Export</AdminBtn>
        <AdminBtn variant="primary" icon="+">Create campaign</AdminBtn>
      </div>
    }
    tabs={['All', 'Email', 'SMS', 'Voice · inclamo', 'Push']}
    activeTab="Voice · inclamo"
    activeItem="Marketing"
    accent={ADMIN.brand}
  >
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, height: '100%' }}>
      {/* Featured live campaign */}
      <div style={{
        background: ADMIN.surface, border: `1px solid ${ADMIN.brand}55`,
        borderRadius: 10, padding: 16,
        boxShadow: `0 0 0 3px ${ADMIN.brand}11`,
      }}>
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 16 }}>
          <div style={{ flex: 1 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
              <Badge tone="brand" dot>LIVE · 00:14:22</Badge>
              <span style={{ fontSize: 11, color: ADMIN.textMuted }}>Voice · inclamo</span>
            </div>
            <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 2 }}>Q4 Flash Sale — VIP outbound</div>
            <div style={{ fontSize: 11.5, color: ADMIN.textMuted }}>Segment: VIP · last 90d  ·  Voice: Marcus (neutral)  ·  Languages: EN, ES, DE auto-detect</div>
          </div>
          <AdminBtn icon="⏸">Pause</AdminBtn>
          <AdminBtn icon="⎔">View</AdminBtn>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 10, marginTop: 14 }}>
          {[
            { n: '12,430', l: 'Queued', c: ADMIN.textMuted, d: '—' },
            { n: '8,210', l: 'Answered', c: ADMIN.info, d: '66.1%' },
            { n: '1,840', l: 'Converted', c: ADMIN.brand, d: '22.4%' },
            { n: '$42,108', l: 'Revenue', c: ADMIN.success, d: '+$22.88 ARPC' },
            { n: '4.7', l: 'Sentiment', c: ADMIN.success, d: '/ 5.0' },
          ].map(s => (
            <div key={s.l} style={{ padding: 10, background: ADMIN.bg, border: `1px solid ${ADMIN.border}`, borderRadius: 8 }}>
              <div style={{ fontSize: 9, ...cmsMono, letterSpacing: '0.08em', color: ADMIN.textDim, textTransform: 'uppercase', marginBottom: 4 }}>{s.l}</div>
              <div style={{ fontSize: 18, fontWeight: 600, color: s.c, lineHeight: 1 }}>{s.n}</div>
              <div style={{ fontSize: 10, color: ADMIN.textMuted, marginTop: 3 }}>{s.d}</div>
            </div>
          ))}
        </div>

        {/* Chart */}
        <div style={{ marginTop: 14, padding: 12, background: ADMIN.bg, border: `1px solid ${ADMIN.border}`, borderRadius: 8 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10, fontSize: 11 }}>
            <span style={{ color: ADMIN.textMuted }}>Conversions per hour · last 24h</span>
            <div style={{ display: 'flex', gap: 12 }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, color: ADMIN.textMuted }}><span style={{ width: 8, height: 8, background: ADMIN.brand, borderRadius: 2 }} /> Converted</span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, color: ADMIN.textMuted }}><span style={{ width: 8, height: 8, background: ADMIN.info, borderRadius: 2, opacity: 0.35 }} /> Answered</span>
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 3, height: 72 }}>
            {Array.from({ length: 24 }).map((_, i) => {
              const a = 30 + 60 * Math.abs(Math.sin(i * 0.35 + 0.5));
              const c = a * (0.1 + 0.5 * Math.abs(Math.sin(i * 0.7)));
              return (
                <div key={i} style={{ flex: 1, position: 'relative', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
                  <div style={{ height: `${a}%`, background: ADMIN.info, opacity: 0.3, borderRadius: 2 }} />
                  <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: `${c}%`, background: ADMIN.brand, borderRadius: 2 }} />
                </div>
              );
            })}
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6, ...cmsMono, fontSize: 9, color: ADMIN.textDim }}>
            <span>00</span><span>06</span><span>12</span><span>18</span><span>23</span>
          </div>
        </div>
      </div>

      {/* Other campaigns table */}
      <Card noPad style={{ flex: 1 }}>
        <div style={{ padding: '10px 14px', borderBottom: `1px solid ${ADMIN.border}`, display: 'flex', alignItems: 'center', gap: 8 }}>
          <Badge tone="neutral">All</Badge>
          <Badge tone="neutral">Active (3)</Badge>
          <Badge tone="neutral">Draft (5)</Badge>
          <div style={{ marginLeft: 'auto', fontSize: 11, color: ADMIN.textMuted }}>3 more campaigns</div>
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 110px 120px 100px 90px',
          padding: '8px 14px', gap: 8,
          background: ADMIN.bg, borderBottom: `1px solid ${ADMIN.border}`,
          fontSize: 10, ...cmsMono, color: ADMIN.textDim, letterSpacing: '0.06em', textTransform: 'uppercase',
        }}>
          <span>Campaign</span><span>Segment</span><span>Sent</span><span>Conv.</span><span>Status</span>
        </div>
        {[
          { n: 'Cart recovery — $100+', s: 'Abandon ≥$100', sent: '3,140', conv: '14.2%', badge: ['success', 'Active'] },
          { n: 'Win-back — 6mo lapsed', s: 'Lapsed 180d', sent: '8,470', conv: '6.8%', badge: ['success', 'Active'] },
          { n: 'Black Friday preview', s: 'All customers', sent: '—', conv: '—', badge: ['neutral', 'Draft'] },
        ].map((c, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '1fr 110px 120px 100px 90px',
            padding: '10px 14px', gap: 8, alignItems: 'center',
            borderBottom: i < 2 ? `1px solid ${ADMIN.border}` : 'none',
            fontSize: 12,
          }}>
            <span style={{ color: ADMIN.info, fontWeight: 500 }}>{c.n}</span>
            <span style={{ color: ADMIN.textMuted }}>{c.s}</span>
            <span>{c.sent}</span>
            <span>{c.conv}</span>
            <Badge tone={c.badge[0]} dot>{c.badge[1]}</Badge>
          </div>
        ))}
      </Card>
    </div>
  </AdminShell>
);

// ——— 03 SUPPORT ———
// Customer support inbox — realistic list + conversation split view
const SupportMock = () => (
  <AdminShell
    breadcrumbs={['Customers', 'Support inbox']}
    pageTitle="Support inbox"
    pageSubtitle="Voice & chat conversations handled by inclamo"
    pageActions={
      <div style={{ display: 'flex', gap: 6 }}>
        <AdminBtn icon="⚙">View settings</AdminBtn>
        <AdminBtn variant="primary" icon="→">Assign to human</AdminBtn>
      </div>
    }
    tabs={['All (127)', 'Open (23)', 'Needs handoff (4)', 'Resolved (100)']}
    activeTab="All (127)"
    activeItem="Customers"
    accent={ADMIN.brand}
  >
    <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 12, height: '100%', minHeight: 0 }}>
      {/* Left: inbox list */}
      <Card noPad style={{ display: 'flex', flexDirection: 'column', minHeight: 0 }}>
        <div style={{ padding: '8px 12px', borderBottom: `1px solid ${ADMIN.border}`, display: 'flex', alignItems: 'center', gap: 6 }}>
          <input style={{ flex: 1, padding: '5px 10px', border: `1px solid ${ADMIN.border}`, borderRadius: 6, fontSize: 11, ...cmsFont, background: ADMIN.bg }} placeholder="Search conversations…" readOnly />
          <AdminBtn icon="▾">Filter</AdminBtn>
          <AdminBtn icon="⇅">Sort</AdminBtn>
        </div>
        <div style={{ flex: 1, overflow: 'hidden' }}>
          {[
            { n: 'Tomás Nakamura', t: 'Product compatibility — chair legs', time: 'now', lang: 'EN', state: ['warn', '● Needs handoff'], active: true, note: 'inclamo flagged "judgment needed"' },
            { n: 'Maria Rivera', t: 'Where is order #2837?', time: '2m', lang: 'EN', state: ['success', 'Resolved'], note: 'Tracking link sent · 1m 12s' },
            { n: 'Carla Müller', t: 'Refund — damaged packaging', time: '5m', lang: 'DE', state: ['success', 'Resolved'], note: 'Refunded $89 · store credit offered' },
            { n: 'Lucas García', t: 'Change shipping address', time: '8m', lang: 'ES', state: ['success', 'Resolved'], note: 'Address updated · reship scheduled' },
            { n: 'Sofia Rossi', t: 'Cancel subscription', time: '14m', lang: 'IT', state: ['success', 'Resolved'], note: 'Paused 30d · retained' },
            { n: 'James O\'Brien', t: 'Discount not applying', time: '22m', lang: 'EN', state: ['info', 'Active'], note: 'inclamo explaining eligibility' },
          ].map((r, i) => (
            <div key={i} style={{
              padding: '10px 14px',
              borderBottom: i < 5 ? `1px solid ${ADMIN.border}` : 'none',
              background: r.active ? ADMIN.rowHover : 'transparent',
              borderLeft: r.active ? `3px solid ${ADMIN.text}` : '3px solid transparent',
              display: 'flex', gap: 10,
            }}>
              <div style={{ width: 28, height: 28, borderRadius: '50%', background: ADMIN.info, color: ADMIN.surface, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, fontWeight: 600, flexShrink: 0 }}>
                {r.n.split(' ').map(s => s[0]).join('').slice(0, 2)}
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ fontSize: 12, fontWeight: r.active ? 600 : 500, color: ADMIN.text }}>{r.n}</span>
                  <span style={{ ...cmsMono, fontSize: 9, color: ADMIN.textDim }}>{r.lang}</span>
                  <span style={{ marginLeft: 'auto', fontSize: 10, color: ADMIN.textDim }}>{r.time}</span>
                </div>
                <div style={{ fontSize: 11.5, color: ADMIN.text, marginTop: 2 }}>{r.t}</div>
                <div style={{ fontSize: 10, color: ADMIN.textMuted, marginTop: 3, display: 'flex', alignItems: 'center', gap: 8 }}>
                  <Badge tone={r.state[0]} dot>{r.state[1]}</Badge>
                  <span>· {r.note}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </Card>

      {/* Right: conversation view */}
      <Card noPad style={{ display: 'flex', flexDirection: 'column', minHeight: 0 }}>
        {/* Header */}
        <div style={{ padding: '10px 14px', borderBottom: `1px solid ${ADMIN.border}`, display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 30, height: 30, borderRadius: '50%', background: ADMIN.info, color: ADMIN.surface, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 600 }}>TN</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 600 }}>Tomás Nakamura</div>
            <div style={{ fontSize: 10.5, color: ADMIN.textMuted }}>tomas@example.com · Inbound voice · EN</div>
          </div>
          <Badge tone="warn" dot>Needs handoff</Badge>
        </div>

        {/* Transcript */}
        <div style={{ flex: 1, padding: 14, display: 'flex', flexDirection: 'column', gap: 10, overflow: 'hidden', background: ADMIN.bg }}>
          {[
            { who: 'customer', t: '"Hey — I got the Matte Black Lounge. Do the felt pads you sell fit the metal glides on the wide model?"' },
            { who: 'agent', t: '"Great question — the felt pads fit the standard glide, but your wide model uses a larger glide. Let me loop in a product specialist who can confirm the exact part."' },
            { who: 'system', t: 'inclamo classified intent: product compatibility (confidence 0.62) → routing to human' },
          ].map((m, i) => (
            <div key={i} style={{ display: 'flex', gap: 8, flexDirection: m.who === 'customer' ? 'row-reverse' : 'row', alignItems: 'flex-end' }}>
              {m.who !== 'system' && (
                <div style={{ width: 22, height: 22, borderRadius: '50%', background: m.who === 'agent' ? ADMIN.brand : ADMIN.info, color: ADMIN.surface, fontSize: 9, fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  {m.who === 'agent' ? 'p' : 'TN'}
                </div>
              )}
              <div style={{
                maxWidth: '78%',
                padding: m.who === 'system' ? '6px 10px' : '8px 12px',
                background: m.who === 'system' ? 'transparent' : m.who === 'agent' ? ADMIN.surface : ADMIN.infoBg,
                border: m.who === 'system' ? `1px dashed ${ADMIN.borderStrong}` : `1px solid ${m.who === 'agent' ? ADMIN.border : 'transparent'}`,
                borderRadius: m.who === 'system' ? 6 : 10,
                fontSize: m.who === 'system' ? 10.5 : 12,
                color: m.who === 'system' ? ADMIN.textMuted : ADMIN.text,
                lineHeight: 1.45,
                fontStyle: m.who === 'system' ? 'italic' : 'normal',
                marginLeft: m.who === 'system' ? 'auto' : 0,
                marginRight: m.who === 'system' ? 'auto' : 0,
              }}>{m.t}</div>
            </div>
          ))}
        </div>

        {/* Handoff bar */}
        <div style={{ padding: 12, background: ADMIN.warnBg, borderTop: `1px solid ${ADMIN.border}`, display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ ...cmsMono, fontSize: 10, color: ADMIN.warn, letterSpacing: '0.06em' }}>HANDOFF QUEUED</span>
          <span style={{ fontSize: 11, color: ADMIN.text, flex: 1 }}>Anna (Product · online) — est. 14s</span>
          <AdminBtn icon="↻">Reroute</AdminBtn>
          <AdminBtn variant="primary" icon="→">Transfer now</AdminBtn>
        </div>
      </Card>
    </div>
  </AdminShell>
);

// ——— 04 FRAUD ———
// Risk dashboard — order held, verification call, signals grid
const FraudMock = () => (
  <AdminShell
    breadcrumbs={['Analytics', 'Risk', 'Order #NL-59003']}
    pageTitle="#NL-59003"
    pageSubtitle={<span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
      <Badge tone="danger" dot>Held for verification</Badge>
      <Badge tone="neutral">Express · $1,240.00</Badge>
      <span style={{ color: ADMIN.textMuted }}>· 4 min ago</span>
    </span>}
    pageActions={
      <div style={{ display: 'flex', gap: 6 }}>
        <AdminBtn icon="✕">Cancel</AdminBtn>
        <AdminBtn variant="primary" icon="▶">Release to fulfillment</AdminBtn>
      </div>
    }
    activeItem="Analytics"
    accent={ADMIN.brand}
  >
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, height: '100%' }}>
      {/* Risk row */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1.3fr', gap: 12 }}>
        <Card title="Risk assessment" subtitle="Computed at checkout · updated live">
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            {/* Ring gauge */}
            <div style={{ position: 'relative', width: 96, height: 96, flexShrink: 0 }}>
              <svg width="96" height="96" viewBox="0 0 96 96">
                <circle cx="48" cy="48" r="40" fill="none" stroke={ADMIN.border} strokeWidth="8" />
                <circle cx="48" cy="48" r="40" fill="none" stroke={ADMIN.brand} strokeWidth="8"
                  strokeDasharray={`${0.84 * 251.3} ${251.3}`}
                  strokeDashoffset={62.8}
                  transform="rotate(-90 48 48)"
                  strokeLinecap="round" />
              </svg>
              <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
                <div style={{ fontFamily: '"Instrument Serif", serif', fontSize: 26, color: ADMIN.text, lineHeight: 1 }}>0.84</div>
                <div style={{ fontSize: 9, color: ADMIN.textMuted, marginTop: 2 }}>HIGH</div>
              </div>
            </div>
            <div style={{ flex: 1, fontSize: 11.5, lineHeight: 1.55, color: ADMIN.text }}>
              Three fraud signals tripped at checkout. inclamo placed a verification call; voice-stress stayed nominal (0.12) and the customer confirmed the last four digits. <span style={{ color: ADMIN.success, fontWeight: 600 }}>Ready to release.</span>
            </div>
          </div>
        </Card>

        <Card title="Signals" subtitle="3 flagged · 2 passed">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {[
              ['Shipping ≠ billing address', 'danger', 'Flagged'],
              ['Device fingerprint new (< 1h)', 'warn', 'Flagged'],
              ['Velocity · 3 orders / 5m', 'danger', 'Flagged'],
              ['Email domain reputation', 'success', 'Passed'],
              ['Card BIN country match', 'success', 'Passed'],
            ].map(([k, tone, v]) => (
              <div key={k} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 2px', borderBottom: `1px dashed ${ADMIN.border}`, fontSize: 11.5 }}>
                <span style={{ flex: 1, color: ADMIN.text }}>{k}</span>
                <Badge tone={tone} dot>{v}</Badge>
              </div>
            ))}
          </div>
        </Card>
      </div>

      {/* inclamo verification */}
      <Card
        title={<span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <span style={{ width: 16, height: 16, borderRadius: 4, background: ADMIN.brand, color: ADMIN.surface, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, fontWeight: 700 }}>p</span>
          inclamo · Verification call
        </span>}
        subtitle="Outbound · 1:47 · Ava (warm) · EN-US"
        action={<Badge tone="success" dot>Cleared</Badge>}
        style={{ flex: 1, display: 'flex', flexDirection: 'column' }}
      >
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 14, height: '100%' }}>
          {/* Transcript */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {[
              { w: 'Agent', t: '"Hi Alex, quick check before we ship order fifty-nine-oh-oh-three. Can you confirm the last four digits of the card used?"' },
              { w: 'Customer', t: '"Yes, four-eight-two-one."' },
              { w: 'Agent', t: '"Perfect. And the shipping address — 412 Hudson, apartment 6B?"' },
              { w: 'Customer', t: '"That\'s right, it\'s my sister\'s place, I\'m sending it there."' },
              { w: 'Agent', t: '"Got it, all confirmed. Your order will ship today."' },
            ].map((m, i) => (
              <div key={i} style={{ display: 'flex', gap: 8, fontSize: 11.5 }}>
                <div style={{ ...cmsMono, fontSize: 9, letterSpacing: '0.06em', color: m.w === 'Agent' ? ADMIN.brand : ADMIN.info, width: 58, paddingTop: 3, textTransform: 'uppercase', flexShrink: 0 }}>{m.w}</div>
                <div style={{ flex: 1, padding: '6px 10px', background: ADMIN.bg, border: `1px solid ${ADMIN.border}`, borderRadius: 8, color: ADMIN.text, lineHeight: 1.45 }}>{m.t}</div>
              </div>
            ))}
          </div>

          {/* Analysis panel */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <div style={{ padding: 12, background: ADMIN.bg, border: `1px solid ${ADMIN.border}`, borderRadius: 8 }}>
              <div style={{ fontSize: 10, ...cmsMono, letterSpacing: '0.08em', color: ADMIN.textDim, marginBottom: 8, textTransform: 'uppercase' }}>Voice analysis</div>
              {[
                ['Stress', 0.12, ADMIN.success],
                ['Hesitation', 0.22, ADMIN.success],
                ['Deception', 0.08, ADMIN.success],
              ].map(([k, v, c]) => (
                <div key={k} style={{ marginBottom: 8 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, marginBottom: 3 }}>
                    <span style={{ color: ADMIN.textMuted }}>{k}</span>
                    <span style={{ ...cmsMono, fontSize: 10, color: c }}>{v.toFixed(2)}</span>
                  </div>
                  <div style={{ height: 4, background: ADMIN.surfaceAlt, borderRadius: 2, overflow: 'hidden' }}>
                    <div style={{ width: `${v * 100}%`, height: '100%', background: c }} />
                  </div>
                </div>
              ))}
            </div>

            <div style={{ padding: 12, background: ADMIN.successBg, border: `1px solid ${ADMIN.success}44`, borderRadius: 8, display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ width: 20, height: 20, borderRadius: '50%', background: ADMIN.success, color: ADMIN.surface, fontSize: 11, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>✓</span>
              <div style={{ fontSize: 11.5, color: ADMIN.success, lineHeight: 1.45, fontWeight: 500 }}>
                Identity confirmed. Shipping address verified (family recipient). Safe to release.
              </div>
            </div>
          </div>
        </div>
      </Card>
    </div>
  </AdminShell>
);

window.UpsellMock = UpsellMock;
window.MarketingMock = MarketingMock;
window.SupportMock = SupportMock;
window.FraudMock = FraudMock;