// Two more "product screenshot" surfaces for the Variant C hero rotator.
// TransactionsTableMock — the streaming transactions list
// BlocklistMock        — the blocklist editor

function TransactionsTableMock() {
  const base = [
    { t: '11:42:08', id: 'pay_01K5Z0QXM3', client: 'inxy_main',  amt: '4,820',  ccy: 'USDT', score: 92, dec: 'BLOCK',   tone: 'block',   reason: 'IP blocklist · velocity +21%' },
    { t: '11:42:07', id: 'pay_01K5Z0PN7C', client: 'inxy_main',  amt: '180',    ccy: 'USDT', score: 7,  dec: 'APPROVE', tone: 'approve', reason: 'known IP · in hours' },
    { t: '11:42:06', id: 'pay_01K5Z0P4BX', client: 'acme_eu',    amt: '12,500', ccy: 'USDT', score: 64, dec: 'REVIEW',  tone: 'review',  reason: 'amount > 2× baseline' },
    { t: '11:42:05', id: 'pay_01K5Z0NNF9', client: 'acme_eu',    amt: '280',    ccy: 'EUR',  score: 4,  dec: 'APPROVE', tone: 'approve', reason: 'whitelisted destination' },
    { t: '11:42:04', id: 'pay_01K5Z0N2AA', client: 'lumen_labs', amt: '940',    ccy: 'USDT', score: 88, dec: 'BLOCK',   tone: 'block',   reason: 'sanctioned country' },
    { t: '11:42:03', id: 'pay_01K5Z0MDLR', client: 'inxy_main',  amt: '72',     ccy: 'USDT', score: 23, dec: 'APPROVE', tone: 'approve', reason: 'low risk' },
    { t: '11:42:02', id: 'pay_01K5Z0LY17', client: 'nimbus_pay', amt: '26,800', ccy: 'USDT', score: 71, dec: 'REVIEW',  tone: 'review',  reason: 'amount > 2× baseline' },
    { t: '11:42:01', id: 'pay_01K5Z0KC7E', client: 'inxy_main',  amt: '650',    ccy: 'USDT', score: 94, dec: 'BLOCK',   tone: 'block',   reason: 'IP blocklist' },
    { t: '11:42:00', id: 'pay_01K5Z0K019', client: 'acme_eu',    amt: '9,200',  ccy: 'USDT', score: 58, dec: 'REVIEW',  tone: 'review',  reason: 'anonymizer IP' },
  ];

  const [rows, setRows] = React.useState(() => base.slice(0, 8).map((r, i) => ({ ...r, _k: i })));
  const [seed, setSeed] = React.useState(8);

  React.useEffect(() => {
    const iv = setInterval(() => {
      setSeed(s => s + 1);
      const nxt = base[seed % base.length];
      // shift times by 1s
      setRows(prev => [{ ...nxt, _k: seed + 1000, t: bumpTime(prev[0]?.t || '11:42:08') }, ...prev.slice(0, 7)]);
    }, 2100);
    return () => clearInterval(iv);
  }, [seed]);

  return (
    <div className="cmock">
      <div className="cmock-chrome">
        <span className="cmock-tl" style={{ background: '#FF5E78' }} />
        <span className="cmock-tl" style={{ background: '#FFB547' }} />
        <span className="cmock-tl" style={{ background: '#65D97C' }} />
        <div className="cmock-urlbar">
          <IconLock size={11} />
          <span className="mono">console.dipoli.io / transactions</span>
        </div>
        <div className="cmock-userchip">
          <span className="cmock-avatar">K</span>
          <span style={{ fontSize: 11 }}>kseniya@dipoli</span>
        </div>
      </div>
      <div className="cmock-topbar">
        <DipoliLogoLockup size={20} />
        <div className="cmock-nav">
          <span>Overview</span>
          <span className="active">Transactions</span>
          <span>Clients</span>
          <span>Blocklist</span>
          <span>Settings</span>
        </div>
        <div className="cmock-env"><span className="cmock-envdot" /><span>prod · eu-west-1</span></div>
      </div>

      {/* Filter bar */}
      <div className="tx-filters">
        <span className="tx-filter-chip active">All</span>
        <span className="tx-filter-chip">Approved</span>
        <span className="tx-filter-chip">Review <span className="tx-badge">48</span></span>
        <span className="tx-filter-chip">Blocked <span className="tx-badge">12</span></span>
        <span className="tx-search"><IconEye size={11} /> pay_01K…</span>
        <span className="tx-spacer" />
        <span className="tx-range mono">Last 15m</span>
      </div>

      <div className="tx-table">
        <div className="tx-header">
          <span>Time</span>
          <span>Transaction</span>
          <span>Client</span>
          <span style={{ textAlign: 'right' }}>Amount</span>
          <span style={{ textAlign: 'center' }}>Score</span>
          <span style={{ textAlign: 'center' }}>Verdict</span>
        </div>
        {rows.map(r => (
          <div key={r._k} className="tx-row">
            <span className="mono tx-t">{r.t}</span>
            <span>
              <div className="mono" style={{ color: 'var(--fg)', fontSize: 12 }}>{r.id}</div>
              <div style={{ color: 'var(--fg-muted)', fontSize: 10.5, marginTop: 1 }}>{r.reason}</div>
            </span>
            <span className="mono" style={{ fontSize: 11.5, color: 'var(--fg-muted)' }}>{r.client}</span>
            <span className="mono tx-amt">
              {r.amt}<span style={{ color: 'var(--fg-muted)', marginLeft: 4, fontSize: 10 }}>{r.ccy}</span>
            </span>
            <span className={'mono tx-score tx-score-' + r.tone}>{r.score}</span>
            <span style={{ textAlign: 'center' }}>
              <span className={'pill pill-' + r.tone} style={{ fontSize: 9.5, padding: '2px 6px' }}>{r.dec}</span>
            </span>
          </div>
        ))}
      </div>

      <style>{`
        .tx-filters {
          display: flex; gap: 6px; align-items: center;
          padding: 10px 16px;
          background: rgba(255,255,255,0.015);
          border-bottom: 1px solid var(--border);
          font-size: 11.5px;
        }
        .tx-filter-chip {
          padding: 4px 10px; border-radius: 6px;
          background: rgba(255,255,255,0.03);
          border: 1px solid var(--border);
          color: var(--fg-muted); font-weight: 500;
          display: inline-flex; align-items: center; gap: 5px;
        }
        .tx-filter-chip.active { background: rgba(147,135,255,0.14); color: var(--fg); border-color: rgba(147,135,255,0.3); }
        .tx-badge {
          padding: 1px 5px; border-radius: 3px;
          background: rgba(255,255,255,0.06);
          font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
        }
        .tx-search {
          margin-left: 8px; padding: 4px 10px;
          border-radius: 6px; border: 1px solid var(--border);
          background: rgba(0,0,0,0.2);
          color: var(--fg-muted);
          display: inline-flex; align-items: center; gap: 6px;
          font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
        }
        .tx-spacer { flex: 1; }
        .tx-range { color: var(--fg-muted); font-size: 10.5px; }

        .tx-table { background: #0B0914; }
        .tx-header, .tx-row {
          display: grid;
          grid-template-columns: 70px 1fr 90px 90px 50px 84px;
          gap: 10px; padding: 8px 16px;
          align-items: center;
          border-bottom: 1px solid var(--border);
        }
        .tx-header {
          font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em;
          color: var(--fg-muted); font-weight: 600;
          background: rgba(255,255,255,0.015);
        }
        .tx-row {
          font-size: 11.5px;
          animation: tx-in 400ms cubic-bezier(.2,.9,.2,1);
        }
        .tx-row:first-of-type { background: rgba(147,135,255,0.05); }
        @keyframes tx-in {
          0%   { opacity: 0; transform: translateY(-8px); background: rgba(147,135,255,0.14); }
          100% { opacity: 1; transform: translateY(0); }
        }
        .tx-t { color: var(--fg-muted); font-size: 10.5px; }
        .tx-amt { text-align: right; font-weight: 500; color: var(--fg); font-size: 12px; }
        .tx-score { text-align: center; font-weight: 600; font-size: 12px; }
        .tx-score-approve { color: var(--approve); }
        .tx-score-review  { color: var(--review); }
        .tx-score-block   { color: var(--block); }
      `}</style>
    </div>
  );
}

function bumpTime(t) {
  const [h, m, s] = t.split(':').map(Number);
  let ns = s + 1;
  let nm = m, nh = h;
  if (ns >= 60) { ns = 0; nm++; }
  if (nm >= 60) { nm = 0; nh++; }
  const pad = x => String(x).padStart(2, '0');
  return pad(nh) + ':' + pad(nm) + ':' + pad(ns);
}

// ───── Blocklist editor mock
function BlocklistMock() {
  const initial = [
    { kind: 'IP',      value: '213.180.204.62', scope: 'Global',     added: '2d ago',   hits: 147, note: 'Known laundering ring' },
    { kind: 'Address', value: 'TGx9BkL…eKz',    scope: 'Global',     added: '3h ago',   hits: 1,   note: 'Manual review' },
    { kind: 'IP',      value: '89.238.147.12',  scope: 'inxy_main',  added: '6h ago',   hits: 23,  note: 'Anonymizer exit node' },
    { kind: 'Country', value: 'IR — Iran',      scope: 'Global',     added: 'OFAC',     hits: 89,  note: 'Sanctioned' },
    { kind: 'Address', value: '0x7f9…ae1',      scope: 'lumen_labs', added: '1d ago',   hits: 4,   note: 'Mixer-adjacent' },
    { kind: 'IP',      value: '45.132.90.14',   scope: 'Global',     added: 'just now', hits: 0,   note: 'High-velocity new IP' },
    { kind: 'Country', value: 'KP — DPRK',      scope: 'Global',     added: 'OFAC',     hits: 3,   note: 'Sanctioned' },
  ];

  return (
    <div className="cmock">
      <div className="cmock-chrome">
        <span className="cmock-tl" style={{ background: '#FF5E78' }} />
        <span className="cmock-tl" style={{ background: '#FFB547' }} />
        <span className="cmock-tl" style={{ background: '#65D97C' }} />
        <div className="cmock-urlbar">
          <IconLock size={11} />
          <span className="mono">console.dipoli.io / blocklist</span>
        </div>
        <div className="cmock-userchip">
          <span className="cmock-avatar">K</span>
          <span style={{ fontSize: 11 }}>kseniya@dipoli</span>
        </div>
      </div>
      <div className="cmock-topbar">
        <DipoliLogoLockup size={20} />
        <div className="cmock-nav">
          <span>Overview</span>
          <span>Transactions</span>
          <span>Clients</span>
          <span className="active">Blocklist</span>
          <span>Settings</span>
        </div>
        <div className="cmock-env"><span className="cmock-envdot" /><span>prod · eu-west-1</span></div>
      </div>

      <div className="bl-layout">
        {/* Left — tabs */}
        <div className="bl-side">
          <div className="bl-side-head">Lists</div>
          <div className="bl-side-item active">
            <IconShield size={12} />
            <span>Blocklist</span>
            <span className="mono bl-count">412</span>
          </div>
          <div className="bl-side-item">
            <IconCheck size={12} />
            <span>Allowlist</span>
            <span className="mono bl-count">188</span>
          </div>
          <div className="bl-side-item">
            <IconNetwork size={12} />
            <span>Watch</span>
            <span className="mono bl-count">24</span>
          </div>
          <div className="bl-side-head" style={{ marginTop: 16 }}>Scope</div>
          <div className="bl-side-item sub">Global <span className="mono bl-count">210</span></div>
          <div className="bl-side-item sub">inxy_main <span className="mono bl-count">98</span></div>
          <div className="bl-side-item sub">acme_eu <span className="mono bl-count">64</span></div>
          <div className="bl-side-item sub">lumen_labs <span className="mono bl-count">28</span></div>
        </div>

        {/* Main */}
        <div className="bl-main">
          <div className="bl-toolbar">
            <div className="bl-search">
              <IconEye size={11} />
              <span>Search entries…</span>
            </div>
            <div className="bl-filter-chips">
              <span className="bl-chip active">All</span>
              <span className="bl-chip">IP</span>
              <span className="bl-chip">Address</span>
              <span className="bl-chip">Country</span>
            </div>
            <button className="bl-add">+ Add entry</button>
          </div>

          <div className="bl-table">
            <div className="bl-header">
              <span>Type</span>
              <span>Value</span>
              <span>Scope</span>
              <span>Added</span>
              <span style={{ textAlign: 'right' }}>Hits</span>
              <span>Note</span>
              <span />
            </div>
            {initial.map((r, i) => (
              <div key={i} className="bl-row" style={{ animationDelay: (i * 40) + 'ms' }}>
                <span>
                  <span className="bl-kind mono">{r.kind}</span>
                </span>
                <span className="mono" style={{ color: 'var(--fg)', fontSize: 11.5 }}>{r.value}</span>
                <span className="mono" style={{ color: 'var(--fg-muted)', fontSize: 11 }}>{r.scope}</span>
                <span className="mono" style={{ color: 'var(--fg-muted)', fontSize: 11 }}>{r.added}</span>
                <span className="mono" style={{ textAlign: 'right', color: r.hits > 50 ? 'var(--block)' : r.hits > 0 ? 'var(--review)' : 'var(--fg-dim)', fontWeight: 600, fontSize: 11.5 }}>
                  {r.hits}
                </span>
                <span style={{ fontSize: 11, color: 'var(--fg-muted)' }}>{r.note}</span>
                <span style={{ display: 'flex', gap: 4, justifyContent: 'flex-end', color: 'var(--fg-dim)' }}>
                  <span className="bl-icon">⋯</span>
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        .bl-layout {
          display: grid;
          grid-template-columns: 180px 1fr;
          min-height: 380px;
          background: #0B0914;
        }
        .bl-side {
          padding: 14px 10px;
          border-right: 1px solid var(--border);
          background: rgba(255,255,255,0.015);
          display: flex; flex-direction: column; gap: 2px;
        }
        .bl-side-head {
          font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.12em;
          color: var(--fg-dim); font-weight: 600;
          padding: 6px 8px;
        }
        .bl-side-item {
          display: flex; align-items: center; gap: 8px;
          padding: 6px 8px;
          border-radius: 6px;
          font-size: 12px;
          color: var(--fg-muted);
          cursor: pointer;
        }
        .bl-side-item.sub { font-size: 11.5px; padding: 4px 14px; color: var(--fg-muted); }
        .bl-side-item.active { background: rgba(147,135,255,0.14); color: var(--fg); }
        .bl-count { margin-left: auto; font-size: 10px; color: var(--fg-muted); }
        .bl-side-item.active .bl-count { color: var(--primary); }

        .bl-main { padding: 0; }
        .bl-toolbar {
          display: flex; gap: 10px; align-items: center;
          padding: 10px 14px;
          border-bottom: 1px solid var(--border);
          background: rgba(255,255,255,0.015);
        }
        .bl-search {
          padding: 5px 10px;
          border: 1px solid var(--border); border-radius: 6px;
          background: rgba(0,0,0,0.2);
          color: var(--fg-muted);
          font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
          display: flex; align-items: center; gap: 6px;
          min-width: 160px;
        }
        .bl-filter-chips { display: flex; gap: 4px; }
        .bl-chip {
          padding: 3px 9px; border-radius: 5px;
          background: rgba(255,255,255,0.03);
          border: 1px solid var(--border);
          color: var(--fg-muted); font-size: 11px; font-weight: 500;
        }
        .bl-chip.active { background: rgba(147,135,255,0.14); color: var(--fg); border-color: rgba(147,135,255,0.3); }
        .bl-add {
          margin-left: auto;
          padding: 5px 12px; border-radius: 6px;
          background: var(--primary);
          color: #0F0D17;
          font-size: 11px; font-weight: 600;
          border: 0; cursor: pointer;
          font-family: inherit;
        }

        .bl-header, .bl-row {
          display: grid;
          grid-template-columns: 72px 1.4fr 90px 80px 56px 1.2fr 20px;
          gap: 10px; padding: 7px 14px;
          align-items: center;
          border-bottom: 1px solid var(--border);
        }
        .bl-header {
          font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em;
          color: var(--fg-muted); font-weight: 600;
          background: rgba(255,255,255,0.015);
        }
        .bl-row { font-size: 11.5px; animation: bl-in 500ms cubic-bezier(.2,.9,.2,1) backwards; }
        @keyframes bl-in {
          0% { opacity: 0; transform: translateX(-4px); }
          100% { opacity: 1; transform: translateX(0); }
        }
        .bl-kind {
          padding: 2px 7px; border-radius: 4px;
          background: rgba(255,255,255,0.04);
          border: 1px solid var(--border);
          color: var(--fg-muted); font-size: 10px;
        }
        .bl-icon { cursor: pointer; color: var(--fg-dim); }
      `}</style>
    </div>
  );
}

Object.assign(window, { TransactionsTableMock, BlocklistMock });