// fake-dashboards.jsx — hand-built faux UIs for Slack / Gorgias / Zendesk.

const __FD_CSS = `
  .fd { position: relative; width: 100%; aspect-ratio: 16/9; background: #fff; overflow: hidden;
        font-family: 'Inter', 'Geist', system-ui, sans-serif; color: #1A1A1A; font-size: 12px; line-height: 1.3; }

  /* ────── SLACK ────── */
  .fd-slack { display: grid; grid-template-columns: 64px 240px 1fr; background: #1A1D21; color: #D1D2D3; }
  .fds-rail { background: #19171D; display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 12px; border-right: 1px solid #2C2D33; }
  .fds-workspace { width: 36px; height: 36px; border-radius: 8px; background: linear-gradient(135deg,#611F69,#9C2BAE); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; font-size: 14px; }
  .fds-tool { width: 32px; height: 32px; border-radius: 8px; background: transparent; color: #ABABAD; display: flex; align-items: center; justify-content: center; font-size: 14px; }
  .fds-tool.on { background: rgba(255,255,255,0.08); color: #fff; }
  .fds-sidebar { background: #19171D; border-right: 1px solid #2C2D33; padding: 10px 0; overflow: hidden; }
  .fds-team { padding: 8px 16px; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: space-between; }
  .fds-team .down { color: #ABABAD; font-weight: 400; font-size: 10px; }
  .fds-group { padding: 14px 16px 4px; font-size: 11px; color: #ABABAD; text-transform: lowercase; display: flex; align-items: center; gap: 6px; }
  .fds-item { padding: 4px 16px; color: #BCBDBE; display: flex; align-items: center; gap: 8px; cursor: pointer; }
  .fds-item.active { background: #1164A3; color: #fff; }
  .fds-item .hash { color: #6F7174; }
  .fds-item.active .hash { color: #fff; }
  .fds-item .dot { width: 8px; height: 8px; border-radius: 50%; background: #2EC27E; flex-shrink: 0; }
  .fds-item .dot.zz { background: transparent; border: 1.5px solid #6F7174; }
  .fds-item .unread { margin-left: auto; background: #CD2553; color: #fff; padding: 0 6px; border-radius: 8px; font-size: 10px; font-weight: 700; }

  .fds-main { background: #1A1D21; display: flex; flex-direction: column; min-width: 0; }
  .fds-header { padding: 10px 18px; border-bottom: 1px solid #2C2D33; display: flex; align-items: center; justify-content: space-between; color: #fff; }
  .fds-header .ch { font-weight: 700; display: flex; align-items: center; gap: 8px; }
  .fds-header .ch .ppl { color: #ABABAD; font-weight: 400; font-size: 11px; padding-left: 8px; border-left: 1px solid #2C2D33; }
  .fds-header .right { display: flex; gap: 8px; color: #ABABAD; font-size: 11px; align-items: center; }
  .fds-pill { padding: 4px 10px; border: 1px solid #2C2D33; border-radius: 6px; }

  .fds-thread { flex: 1; padding: 12px 18px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
  .fds-msg { display: grid; grid-template-columns: 36px 1fr; gap: 10px; }
  .fds-av { width: 36px; height: 36px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 14px; }
  .fds-msg .who { display: flex; align-items: baseline; gap: 6px; color: #fff; font-weight: 700; }
  .fds-msg .who .badge { background: #E64A19; color: #fff; padding: 1px 6px; border-radius: 3px; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; }
  .fds-msg .who .time { color: #ABABAD; font-weight: 400; font-size: 10px; }
  .fds-msg .body { color: #D1D2D3; margin-top: 2px; }
  .fds-msg .body a { color: #1D9BD1; }
  .fds-msg .reactions { display: flex; gap: 4px; margin-top: 6px; }
  .fds-msg .react { background: rgba(29,155,209,0.1); border: 1px solid rgba(29,155,209,0.3); color: #1D9BD1; padding: 1px 6px; border-radius: 10px; font-size: 10px; }

  .fds-compose { margin: 0 18px 14px; border: 1px solid #565856; border-radius: 8px; background: #222529; padding: 8px 10px; color: #ABABAD; display: flex; flex-direction: column; gap: 6px; }
  .fds-compose .placeholder { font-size: 11px; }
  .fds-compose .toolbar { display: flex; gap: 8px; color: #6F7174; font-size: 11px; }

  /* ────── GORGIAS ────── */
  .fd-gorgias { display: grid; grid-template-columns: 56px 220px 1fr 280px; background: #FFFFFF; color: #1A1A1A; }
  .fdg-rail { background: #000; display: flex; flex-direction: column; align-items: center; padding: 14px 0; gap: 16px; color: #999; }
  .fdg-rail .mark { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg,#FF7050,#E64A19); display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; font-size: 12px; letter-spacing: -0.05em; }
  .fdg-rail .ico { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 14px; }
  .fdg-rail .ico.on { background: #1a1a1a; color: #fff; }
  .fdg-sidebar { background: #F7F7F5; border-right: 1px solid #E6E4DF; padding: 14px 12px; }
  .fdg-sidebar .title { font-weight: 700; font-size: 14px; margin-bottom: 12px; }
  .fdg-sidebar .new-btn { background: #1a1a1a; color: #fff; padding: 7px 10px; border-radius: 6px; font-weight: 600; text-align: center; margin-bottom: 14px; font-size: 11px; }
  .fdg-sidebar .group { font-size: 10px; color: #8A8A88; text-transform: uppercase; letter-spacing: 0.1em; padding: 8px 6px 4px; }
  .fdg-sidebar .row { padding: 6px 8px; border-radius: 5px; display: flex; align-items: center; justify-content: space-between; color: #4A4A48; cursor: pointer; }
  .fdg-sidebar .row.active { background: #FFE6DD; color: #A8330E; font-weight: 600; }
  .fdg-sidebar .row.active .ct { color: #A8330E; }
  .fdg-sidebar .row .ct { font-size: 11px; color: #8A8A88; font-variant-numeric: tabular-nums; }
  .fdg-sidebar .row .ic { margin-right: 6px; opacity: 0.7; }

  .fdg-list { border-right: 1px solid #E6E4DF; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
  .fdg-list-head { padding: 12px 16px; border-bottom: 1px solid #E6E4DF; display: flex; align-items: center; justify-content: space-between; }
  .fdg-list-head .h { font-weight: 700; font-size: 14px; }
  .fdg-list-head .badge { background: #1a1a1a; color: #fff; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; }
  .fdg-ticket { padding: 12px 16px; border-bottom: 1px solid #F2F0EB; cursor: pointer; }
  .fdg-ticket.sel { background: #FFF8F5; border-left: 3px solid #E64A19; padding-left: 13px; }
  .fdg-ticket .top { display: flex; align-items: center; justify-content: space-between; }
  .fdg-ticket .name { font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 6px; }
  .fdg-ticket .name .dot { width: 6px; height: 6px; border-radius: 50%; background: #2EC27E; }
  .fdg-ticket .ts { font-size: 10px; color: #8A8A88; font-variant-numeric: tabular-nums; }
  .fdg-ticket .subj { font-size: 12px; color: #1A1A1A; margin-top: 4px; line-height: 1.3; }
  .fdg-ticket .meta { font-size: 10px; color: #8A8A88; margin-top: 4px; display: flex; gap: 8px; align-items: center; }
  .fdg-ticket .assigned { background: #E64A19; color: #fff; padding: 1px 6px; border-radius: 3px; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; }

  .fdg-panel { background: #FAFAF8; padding: 16px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
  .fdg-cust { display: flex; align-items: center; gap: 10px; }
  .fdg-cust .av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg,#3b6df0,#1f3fa8); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
  .fdg-cust .nm { font-weight: 700; font-size: 13px; }
  .fdg-cust .em { font-size: 11px; color: #8A8A88; }
  .fdg-block { background: #fff; border: 1px solid #E6E4DF; border-radius: 8px; padding: 12px; }
  .fdg-block .h { font-size: 10px; color: #8A8A88; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; font-weight: 700; }
  .fdg-block .row { display: flex; justify-content: space-between; font-size: 11px; padding: 4px 0; }
  .fdg-block .row .k { color: #6A6A68; }
  .fdg-block .row .v { font-weight: 600; }
  .fdg-block .ord { padding: 6px 0; border-bottom: 1px dashed #E6E4DF; }
  .fdg-block .ord:last-child { border-bottom: 0; }
  .fdg-block .ord .id { font-weight: 700; font-size: 12px; }
  .fdg-block .ord .tot { font-size: 11px; color: #6A6A68; font-variant-numeric: tabular-nums; }

  /* ────── ZENDESK ────── */
  .fd-zendesk { display: grid; grid-template-columns: 64px 220px 1fr 260px; background: #FFFFFF; color: #2F3941; }
  .fdz-rail { background: #03363D; padding: 12px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; color: #87929D; }
  .fdz-rail .mark { width: 36px; height: 36px; border-radius: 6px; background: #17494D; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; }
  .fdz-rail .ico { width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
  .fdz-rail .ico.on { background: #17494D; color: #fff; }

  .fdz-views { background: #F8F9F9; border-right: 1px solid #E9EBED; padding: 14px 0; overflow: hidden; }
  .fdz-views .title { padding: 4px 16px 10px; font-weight: 700; font-size: 14px; color: #2F3941; display: flex; align-items: center; justify-content: space-between; }
  .fdz-views .title .gear { color: #87929D; font-size: 13px; }
  .fdz-views .group { padding: 10px 16px 4px; font-size: 10px; text-transform: uppercase; color: #68737D; letter-spacing: 0.1em; }
  .fdz-views .row { padding: 5px 16px; display: flex; align-items: center; justify-content: space-between; color: #2F3941; font-size: 12px; cursor: pointer; }
  .fdz-views .row.active { background: #fff; border-left: 3px solid #1F73B8; padding-left: 13px; font-weight: 600; }
  .fdz-views .row .ct { color: #87929D; font-variant-numeric: tabular-nums; font-size: 11px; }

  .fdz-main { padding: 0; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
  .fdz-head { padding: 12px 18px; border-bottom: 1px solid #E9EBED; display: flex; justify-content: space-between; align-items: center; }
  .fdz-head .tkt { font-weight: 700; font-size: 14px; color: #2F3941; display: flex; align-items: center; gap: 8px; }
  .fdz-head .tkt .id { color: #87929D; font-weight: 400; }
  .fdz-head .actions { display: flex; gap: 6px; }
  .fdz-head .btn { background: #1F73B8; color: #fff; padding: 5px 12px; border-radius: 4px; font-size: 11px; font-weight: 600; }
  .fdz-head .btn.alt { background: #fff; color: #2F3941; border: 1px solid #C2C8CC; }
  .fdz-status { padding: 8px 18px; background: #FFF8E7; border-bottom: 1px solid #F2E5C7; font-size: 11px; color: #6F4F1F; display: flex; align-items: center; justify-content: space-between; }

  .fdz-thread { flex: 1; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
  .fdz-bubble { background: #F8F9F9; border-radius: 8px; padding: 12px; }
  .fdz-bubble .meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 11px; color: #68737D; }
  .fdz-bubble .meta .who { font-weight: 700; color: #2F3941; display: flex; align-items: center; gap: 6px; }
  .fdz-bubble .meta .who .badge { background: #E64A19; color: #fff; padding: 1px 6px; border-radius: 3px; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; }
  .fdz-bubble .body { font-size: 12px; line-height: 1.4; color: #2F3941; }
  .fdz-bubble.agent { background: #FFFBEF; border: 1px solid #F2E5C7; }
  .fdz-bubble.outgoing { background: #E8F1F8; border: 1px solid #C7DEEC; }

  .fdz-macros { padding: 10px 18px; border-top: 1px solid #E9EBED; background: #F8F9F9; display: flex; gap: 6px; flex-wrap: wrap; }
  .fdz-macros .pill { background: #fff; border: 1px solid #C2C8CC; padding: 4px 9px; border-radius: 12px; font-size: 11px; color: #2F3941; display: flex; align-items: center; gap: 6px; }
  .fdz-macros .pill .star { color: #E64A19; }

  .fdz-side { background: #F8F9F9; border-left: 1px solid #E9EBED; padding: 16px; overflow: hidden; display: flex; flex-direction: column; gap: 14px; }
  .fdz-card { background: #fff; border: 1px solid #E9EBED; border-radius: 6px; padding: 12px; }
  .fdz-card .lbl { font-size: 10px; text-transform: uppercase; color: #68737D; letter-spacing: 0.1em; font-weight: 700; margin-bottom: 8px; }
  .fdz-card .row { display: flex; justify-content: space-between; font-size: 11px; padding: 3px 0; }
  .fdz-card .row .k { color: #68737D; }
  .fdz-assignee { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px dashed #E9EBED; }
  .fdz-assignee:first-of-type { border-top: 0; padding-top: 0; }
  .fdz-assignee .av { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 11px; }
  .fdz-assignee .nm { font-size: 11px; font-weight: 600; }
  .fdz-assignee .rl { font-size: 10px; color: #68737D; }
  .fdz-assignee .badge { margin-left: auto; background: #E64A19; color: #fff; padding: 1px 6px; border-radius: 3px; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; }
`;

(function injectFdCss() {
  if (document.getElementById('__fd_css')) return;
  const s = document.createElement('style');
  s.id = '__fd_css';
  s.textContent = __FD_CSS;
  document.head.appendChild(s);
})();

function FakeSlack() {
  return (
    <div className="fd fd-slack">
      <div className="fds-rail">
        <div className="fds-workspace">1v</div>
        <div className="fds-tool on">⌂</div>
        <div className="fds-tool">✱</div>
        <div className="fds-tool">@</div>
        <div className="fds-tool">⌛</div>
        <div className="fds-tool">⌥</div>
      </div>
      <div className="fds-sidebar">
        <div className="fds-team">Verdana Goods <span className="down">▾</span></div>
        <div className="fds-group">▾ Channels</div>
        <div className="fds-item"><span className="hash">#</span>general</div>
        <div className="fds-item"><span className="hash">#</span>announcements</div>
        <div className="fds-item active"><span className="hash">#</span>support</div>
        <div className="fds-item"><span className="hash">#</span>cx-weekly</div>
        <div className="fds-item"><span className="hash">#</span>random</div>
        <div className="fds-group">▾ 1st-verse · Direct</div>
        <div className="fds-item"><span className="dot" />Sarah K. <span className="unread">2</span></div>
        <div className="fds-item"><span className="dot zz" />Devon M.</div>
        <div className="fds-item"><span className="dot" />Aisha N.</div>
      </div>
      <div className="fds-main">
        <div className="fds-header">
          <div className="ch">
            <span style={{ color: '#ABABAD' }}>#</span> support
            <span className="ppl">★ · 4 · 12 members</span>
          </div>
          <div className="right">
            <span className="fds-pill">★ Pinned</span>
            <span className="fds-pill">🧵 Threads</span>
            <span className="fds-pill">⚡ Huddle</span>
          </div>
        </div>
        <div className="fds-thread">
          <div className="fds-msg">
            <div className="fds-av" style={{ background: 'linear-gradient(135deg,#3b6df0,#1f3fa8)' }}>MP</div>
            <div>
              <div className="who">Mae Park <span className="time">11:42 AM</span></div>
              <div className="body">Hey team — getting a few DMs about order #4823 (refund delay). Anyone free to take this?</div>
            </div>
          </div>
          <div className="fds-msg">
            <div className="fds-av" style={{ background: 'linear-gradient(135deg,#F5BF4F,#E64A19)' }}>SK</div>
            <div>
              <div className="who">
                Sarah K.
                <span className="badge">1V · 1ST-VERSE</span>
                <span className="time">11:43 AM</span>
              </div>
              <div className="body">On it 👋 pulling #4823 now — looks like refund posted on our side May 24, should hit the bank within 3 biz days. I'll DM them with the timeline + ship the next order priority on us.</div>
              <div className="reactions">
                <span className="react">👍 3</span>
                <span className="react">🙌 1</span>
              </div>
            </div>
          </div>
          <div className="fds-msg">
            <div className="fds-av" style={{ background: 'linear-gradient(135deg,#F5BF4F,#E64A19)' }}>SK</div>
            <div>
              <div className="who">
                Sarah K.
                <span className="badge">1V · 1ST-VERSE</span>
                <span className="time">11:51 AM</span>
              </div>
              <div className="body">Closed — customer responded, all good. Logged 8 min, tagged <a>#returns</a> <a>#1v</a>.</div>
            </div>
          </div>
        </div>
        <div className="fds-compose">
          <div className="placeholder">Message #support</div>
          <div className="toolbar">B · I · S · 🔗 · ☰ · @ · ⏎</div>
        </div>
      </div>
    </div>
  );
}

function FakeGorgias() {
  const tickets = [
    { name: 'Marisol P.', subj: "Order #4823 — where's my refund?", ts: '2m', ch: '✉ email', sel: true, assigned: true },
    { name: 'Devon K.',   subj: 'Subscription pause — can I skip the next box?', ts: '7m', ch: '💬 chat', assigned: true },
    { name: 'Aisha N.',   subj: 'Bulk order for the holiday market', ts: '14m', ch: '✉ email' },
    { name: 'Jordan T.',  subj: 'Size question — between M and L', ts: '22m', ch: '💬 chat' },
    { name: 'Rio S.',     subj: 'Tracking link broken on confirmation', ts: '38m', ch: '✉ email' },
  ];
  return (
    <div className="fd fd-gorgias">
      <div className="fdg-rail">
        <div className="mark">1v</div>
        <div className="ico on">⌂</div>
        <div className="ico">✉</div>
        <div className="ico">★</div>
        <div className="ico">📊</div>
        <div className="ico">⚙</div>
      </div>
      <div className="fdg-sidebar">
        <div className="title">Tickets</div>
        <div className="new-btn">+ Create ticket</div>
        <div className="group">Inbox</div>
        <div className="row"><span><span className="ic">📥</span>Inbox</span><span className="ct">0</span></div>
        <div className="row active"><span><span className="ic">●</span>Unassigned</span><span className="ct">12</span></div>
        <div className="row"><span><span className="ic">★</span>Assigned to me</span><span className="ct">3</span></div>
        <div className="row"><span><span className="ic">⌛</span>Snoozed</span><span className="ct">5</span></div>
        <div className="row"><span><span className="ic">✓</span>Closed</span><span className="ct">—</span></div>
        <div className="group">Views</div>
        <div className="row"><span>★ Returns</span><span className="ct">4</span></div>
        <div className="row"><span>★ Wholesale</span><span className="ct">2</span></div>
        <div className="row"><span>★ Subscriptions</span><span className="ct">8</span></div>
      </div>
      <div className="fdg-list">
        <div className="fdg-list-head">
          <span className="h">Unassigned</span>
          <span className="badge">12 open</span>
        </div>
        {tickets.map((t) => (
          <div key={t.name} className={`fdg-ticket ${t.sel ? 'sel' : ''}`}>
            <div className="top">
              <span className="name"><span className="dot" />{t.name}</span>
              <span className="ts">{t.ts}</span>
            </div>
            <div className="subj">{t.subj}</div>
            <div className="meta">
              <span>{t.ch}</span>
              {t.assigned && <span className="assigned">1V · 1ST-VERSE</span>}
            </div>
          </div>
        ))}
      </div>
      <div className="fdg-panel">
        <div className="fdg-cust">
          <div className="av">MP</div>
          <div>
            <div className="nm">Marisol Park</div>
            <div className="em">marisol@vrdngds.com</div>
          </div>
        </div>
        <div className="fdg-block">
          <div className="h">Customer</div>
          <div className="row"><span className="k">Total spent</span><span className="v">$842.50</span></div>
          <div className="row"><span className="k">Orders</span><span className="v">14</span></div>
          <div className="row"><span className="k">Tickets</span><span className="v">3</span></div>
        </div>
        <div className="fdg-block">
          <div className="h">Recent orders</div>
          <div className="ord">
            <div className="id">#4823</div>
            <div className="tot">$87.20 · refunded</div>
          </div>
          <div className="ord">
            <div className="id">#4751</div>
            <div className="tot">$112.00 · delivered</div>
          </div>
          <div className="ord">
            <div className="id">#4690</div>
            <div className="tot">$54.00 · delivered</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function FakeZendesk() {
  return (
    <div className="fd fd-zendesk">
      <div className="fdz-rail">
        <div className="mark">1v</div>
        <div className="ico on">⌂</div>
        <div className="ico">★</div>
        <div className="ico">⌛</div>
        <div className="ico">📊</div>
      </div>
      <div className="fdz-views">
        <div className="title">Views <span className="gear">⚙</span></div>
        <div className="group">Shared</div>
        <div className="row"><span>Unsolved tickets</span><span className="ct">47</span></div>
        <div className="row active"><span>Your unsolved</span><span className="ct">8</span></div>
        <div className="row"><span>New tickets in your groups</span><span className="ct">23</span></div>
        <div className="row"><span>Pending tickets</span><span className="ct">11</span></div>
        <div className="group">1st-verse</div>
        <div className="row"><span>★ Assigned to 1st-verse</span><span className="ct">6</span></div>
        <div className="row"><span>★ Closed by 1st-verse · today</span><span className="ct">14</span></div>
      </div>
      <div className="fdz-main">
        <div className="fdz-head">
          <div className="tkt">Where's my refund? <span className="id">· #4823</span></div>
          <div className="actions">
            <span className="btn alt">Submit as Pending</span>
            <span className="btn">Submit as Solved</span>
          </div>
        </div>
        <div className="fdz-status">
          <span><strong>SLA</strong> · first reply in 2h 14m</span>
          <span style={{ color: '#A8330E', fontWeight: 700 }}>★ Assigned to 1st-verse · Sarah K.</span>
        </div>
        <div className="fdz-thread">
          <div className="fdz-bubble">
            <div className="meta">
              <span className="who">Marisol Park</span>
              <span>11:32 AM · email</span>
            </div>
            <div className="body">Hey — I returned order #4823 over a week ago and still haven't seen the refund hit. Can someone check?</div>
          </div>
          <div className="fdz-bubble agent">
            <div className="meta">
              <span className="who">Sarah K. <span className="badge">1V · 1ST-VERSE</span></span>
              <span>drafting · live</span>
            </div>
            <div className="body">Hi Marisol — totally hear you. I pulled #4823 and the refund posted on our side May 24, so it should clear within 3 business days. I've also flagged your account so the next order ships priority on us. ↩</div>
          </div>
        </div>
        <div className="fdz-macros">
          <span className="pill"><span className="star">★</span>Refund · status update</span>
          <span className="pill"><span className="star">★</span>Shipping · priority comp</span>
          <span className="pill">Apology · soft</span>
          <span className="pill">Close · resolved</span>
        </div>
      </div>
      <div className="fdz-side">
        <div className="fdz-card">
          <div className="lbl">Customer</div>
          <div className="row"><span className="k">Name</span><span>Marisol Park</span></div>
          <div className="row"><span className="k">Total spent</span><span>$842.50</span></div>
          <div className="row"><span className="k">Org</span><span>—</span></div>
        </div>
        <div className="fdz-card">
          <div className="lbl">Assignees</div>
          <div className="fdz-assignee">
            <div className="av" style={{ background: 'linear-gradient(135deg,#F5BF4F,#E64A19)' }}>SK</div>
            <div>
              <div className="nm">Sarah K.</div>
              <div className="rl">Senior agent · live</div>
            </div>
            <span className="badge">1V</span>
          </div>
          <div className="fdz-assignee">
            <div className="av" style={{ background: 'linear-gradient(135deg,#3b6df0,#1f3fa8)' }}>MP</div>
            <div>
              <div className="nm">Mae Park</div>
              <div className="rl">Owner · CC'd</div>
            </div>
          </div>
        </div>
        <div className="fdz-card">
          <div className="lbl">Tags</div>
          <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
            {['#refund', '#returns', '#priority', '#1v'].map((t) => (
              <span key={t} style={{ background: '#E8F1F8', color: '#1F73B8', padding: '2px 7px', borderRadius: 10, fontSize: 10, fontWeight: 600 }}>{t}</span>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { FakeSlack, FakeGorgias, FakeZendesk });