// ===== WebAnchor — Plasma mockup primitives v3 =====

// --- Browser frame wrapper ---
function BrowserMock({ url = "app.example.com", label, children, style }) {
  return (
    <div className="frame" style={style}>
      <div className="frame-bar">
        <div className="dots"><span /><span /><span /></div>
        <div className="url">{url}</div>
        {label && <div className="meta">{label}</div>}
      </div>
      <div style={{ position: 'relative' }}>{children}</div>
    </div>
  );
}

// --- Smooth area chart (violet→cyan gradient) ---
function Area({ data, w = 480, h = 140 }) {
  const max = Math.max(...data, 1);
  const pts = data.map((v, i) => [i * (w / (data.length - 1)), h - (v / max) * (h - 16) - 8]);
  const path = pts.reduce((acc, [x, y], i) => {
    if (i === 0) return `M ${x},${y}`;
    const [px, py] = pts[i - 1];
    const cx = (px + x) / 2;
    return acc + ` C ${cx},${py} ${cx},${y} ${x},${y}`;
  }, '');
  return (
    <svg viewBox={`0 0 ${w} ${h}`} width="100%" height="100%" preserveAspectRatio="none">
      <defs>
        <linearGradient id="ac-line" x1="0" x2="1" y1="0" y2="0">
          <stop offset="0%" stopColor="#1C6CE0" />
          <stop offset="100%" stopColor="#0EA5B5" />
        </linearGradient>
        <linearGradient id="ac-fill" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="color-mix(in srgb, var(--violet) 26%, transparent)" />
          <stop offset="100%" stopColor="color-mix(in srgb, var(--cyan) 0%, transparent)" />
        </linearGradient>
      </defs>
      <path d={`${path} L ${w},${h} L 0,${h} Z`} fill="url(#ac-fill)" />
      <path d={path} stroke="url(#ac-line)" strokeWidth="1.6" fill="none" />
      {pts.length > 0 && <circle cx={pts[pts.length - 1][0]} cy={pts[pts.length - 1][1]} r="3.5" fill="#1C6CE0" stroke="#fff" strokeWidth="1.5" />}
    </svg>
  );
}

function Bars({ data, h = 120 }) {
  const max = Math.max(...data, 1);
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6, height: h }}>
      {data.map((v, i) => (
        <div key={i} style={{
          flex: 1,
          height: `${(v / max) * 100}%`,
          background: i === data.length - 1
            ? 'linear-gradient(180deg, #1C6CE0, #1453B0)'
            : 'linear-gradient(180deg, color-mix(in srgb, var(--violet) 50%, transparent), color-mix(in srgb, var(--cyan) 35%, transparent))',
          borderRadius: '4px 4px 0 0',
          minHeight: 6,
        }} />
      ))}
    </div>
  );
}

// --- Dashboard mock ---
function DashboardMock({ compact = false }) {
  const chart = [12,18,15,22,28,24,32,38,33,42,48,44,52,58];
  const bars = [60,80,45,95,70,85,55];
  return (
    <BrowserMock url="acme.webanchor.app/operations" label="OPS · Q2 2026">
      <div style={{ display: 'grid', gridTemplateColumns: '180px 1fr', minHeight: compact ? 360 : 480 }}>
        <div style={{ borderRight: '1px solid var(--line)', padding: 16, display: 'flex', flexDirection: 'column', gap: 3, background: 'rgba(11,42,74,0.025)' }}>
          <div className="row" style={{ marginBottom: 14, gap: 8 }}>
            <div style={{ width: 22, height: 22, borderRadius: 6, background: 'linear-gradient(135deg, #1C6CE0, #0EA5B5)' }} />
            <span style={{ fontSize: 13, fontWeight: 500 }}>Acme Ops</span>
          </div>
          {['Overview','Pipeline','Customers','Inventory','Reports','Settings'].map((l, i) => (
            <div key={l} style={{
              padding: '7px 10px',
              borderRadius: 7,
              fontSize: 12.5,
              color: i === 0 ? 'var(--text)' : 'var(--text-muted)',
              background: i === 0 ? 'color-mix(in srgb, var(--violet) 10%, transparent)' : 'transparent',
              border: i === 0 ? '1px solid color-mix(in srgb, var(--violet) 22%, transparent)' : '1px solid transparent',
              display: 'flex', alignItems: 'center', gap: 8,
            }}>
              <span style={{ width: 5, height: 5, borderRadius: 999, background: i === 0 ? 'var(--violet)' : 'rgba(11,42,74,0.18)' }} />
              {l}
            </div>
          ))}
          <div style={{ flex: 1 }} />
          <div style={{ padding: 10, border: '1px solid var(--line)', borderRadius: 8, fontSize: 11, color: 'var(--text-muted)' }}>
            <div className="mono" style={{ color: 'var(--good)', fontSize: 10 }}>● ALL SYSTEMS LIVE</div>
            <div style={{ marginTop: 4 }}>Uptime 99.98%</div>
          </div>
        </div>

        <div style={{ padding: 22, display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div className="row" style={{ justifyContent: 'space-between' }}>
            <div>
              <div style={{ fontSize: 18, fontWeight: 500, letterSpacing: '-0.018em' }}>Operations overview</div>
              <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>Last 30 days · auto-refresh on</div>
            </div>
            <div className="row" style={{ gap: 6 }}>
              <span className="pill live"><span className="dot" />Live</span>
              <span className="tag">Q2 · 2026</span>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
            {[
              ['Revenue', '$284.6k', '+12.4%'],
              ['Active users', '4,182', '+8.1%'],
              ['Avg. cycle', '2.3d', '-18%'],
              ['Open issues', '12', '-3'],
            ].map(k => (
              <div key={k[0]} style={{ padding: 14, border: '1px solid var(--line)', borderRadius: 10, background: 'var(--bg-1)' }}>
                <div className="mono" style={{ fontSize: 10, color: 'var(--text-muted)', letterSpacing: '0.10em', textTransform: 'uppercase' }}>{k[0]}</div>
                <div style={{ fontSize: 22, fontWeight: 500, marginTop: 6, letterSpacing: '-0.02em' }}>{k[1]}</div>
                <div style={{ fontSize: 11, color: 'var(--good)', marginTop: 2 }}>{k[2]}</div>
              </div>
            ))}
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 10 }}>
            <div style={{ padding: 14, border: '1px solid var(--line)', borderRadius: 10, background: 'var(--bg-1)' }}>
              <div className="row" style={{ justifyContent: 'space-between', marginBottom: 8 }}>
                <span style={{ fontSize: 12, color: 'var(--text-dim)' }}>Revenue trajectory</span>
                <span className="mono" style={{ fontSize: 10, color: 'var(--text-muted)' }}>vs prev. 30d</span>
              </div>
              <div style={{ height: 110 }}><Area data={chart} /></div>
            </div>
            <div style={{ padding: 14, border: '1px solid var(--line)', borderRadius: 10, background: 'var(--bg-1)' }}>
              <div style={{ fontSize: 12, color: 'var(--text-dim)', marginBottom: 8 }}>Channel mix</div>
              <Bars data={bars} h={110} />
            </div>
          </div>

          {!compact && (
            <div style={{ border: '1px solid var(--line)', borderRadius: 10, overflow: 'hidden' }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 110px 110px 80px', padding: '10px 14px', fontSize: 10, color: 'var(--text-muted)', fontFamily: 'var(--mono)', letterSpacing: '0.10em', textTransform: 'uppercase', background: 'rgba(11,42,74,0.035)', borderBottom: '1px solid var(--line)' }}>
                <span>Order</span><span>Customer</span><span>Status</span><span>Total</span>
              </div>
              {[
                ['#A-2841', 'Northshore Co.', 'Shipped', '$1,240', 'good'],
                ['#A-2840', 'Linden Studio', 'Processing', '$842', 'warn'],
                ['#A-2839', 'Owl & Co.', 'Shipped', '$2,109', 'good'],
              ].map((r, i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 110px 110px 80px', padding: '10px 14px', fontSize: 12, color: 'var(--text-dim)', borderTop: i ? '1px solid var(--line)' : 0 }}>
                  <span className="mono">{r[0]}</span><span>{r[1]}</span>
                  <span style={{ color: r[4] === 'good' ? 'var(--good)' : 'var(--warn)' }}>● {r[2]}</span>
                  <span className="mono">{r[3]}</span>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </BrowserMock>
  );
}

// --- Workflow / flow diagram ---
function WorkflowMock() {
  return (
    <BrowserMock url="northwind.webanchor.app/flows/onboarding" label="FLOW · v4.2">
      <div style={{ padding: 24, minHeight: 460, position: 'relative', background: 'radial-gradient(700px 300px at 50% 50%, color-mix(in srgb, var(--violet) 7%, transparent), transparent 60%)' }}>
        <div className="row" style={{ justifyContent: 'space-between', marginBottom: 22 }}>
          <div>
            <div style={{ fontSize: 17, fontWeight: 500, letterSpacing: '-0.018em' }}>Customer onboarding flow</div>
            <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>1,284 runs / month · 99.6% success</div>
          </div>
          <span className="pill live"><span className="dot" />Running</span>
        </div>

        <div style={{ position: 'relative', height: 340 }}>
          <svg width="100%" height="100%" viewBox="0 0 720 340" style={{ position: 'absolute', inset: 0 }}>
            <defs>
              <marker id="arr3" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
                <path d="M0 0 L10 5 L0 10 z" fill="color-mix(in srgb, var(--violet) 70%, transparent)" />
              </marker>
              <linearGradient id="line-grad" x1="0" x2="1" y1="0" y2="0">
                <stop offset="0%" stopColor="color-mix(in srgb, var(--violet) 70%, transparent)" />
                <stop offset="100%" stopColor="color-mix(in srgb, var(--cyan) 65%, transparent)" />
              </linearGradient>
            </defs>
            <path d="M 130 80 C 200 80, 220 80, 280 80" stroke="url(#line-grad)" strokeWidth="1.4" fill="none" strokeDasharray="3 4" markerEnd="url(#arr3)"/>
            <path d="M 430 80 C 500 80, 500 170, 570 170" stroke="url(#line-grad)" strokeWidth="1.4" fill="none" strokeDasharray="3 4" markerEnd="url(#arr3)"/>
            <path d="M 380 110 C 380 180, 230 180, 230 250" stroke="url(#line-grad)" strokeWidth="1.4" fill="none" strokeDasharray="3 4" markerEnd="url(#arr3)"/>
            <path d="M 380 290 C 460 290, 480 260, 570 220" stroke="url(#line-grad)" strokeWidth="1.4" fill="none" strokeDasharray="3 4" markerEnd="url(#arr3)"/>
          </svg>
          {[
            { x: 0, y: 50, t: 'Trigger', sub: 'New signup', tag: 'EVENT', color: 'var(--good)' },
            { x: 280, y: 50, t: 'Validate data', sub: 'Schema · KYC check', tag: 'STEP', color: 'var(--violet)' },
            { x: 130, y: 220, t: 'Send welcome', sub: 'Email · Postmark', tag: 'ACTION', color: 'var(--cyan)' },
            { x: 570, y: 140, t: 'Provision account', sub: 'DB write · Stripe', tag: 'ACTION', color: 'var(--cyan)' },
            { x: 570, y: 195, t: 'Notify team', sub: 'Slack #ops', tag: 'ACTION', color: 'var(--cyan)' },
          ].map((n, i) => (
            <div key={i} style={{
              position: 'absolute', left: n.x, top: n.y,
              width: 150, padding: 12,
              border: '1px solid var(--line-2)',
              borderRadius: 10,
              background: 'linear-gradient(180deg, var(--bg-1), var(--bg-2))',
              boxShadow: '0 8px 24px -10px rgba(70,40,140,0.18)',
              backdropFilter: 'blur(10px)',
            }}>
              <div className="mono" style={{ fontSize: 9, letterSpacing: '0.12em', color: n.color }}>● {n.tag}</div>
              <div style={{ fontSize: 13, fontWeight: 500, marginTop: 4 }}>{n.t}</div>
              <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>{n.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </BrowserMock>
  );
}

// --- Web app mock (project / kanban) ---
function WebAppMock() {
  return (
    <BrowserMock url="atlas.webanchor.app/projects" label="Q2 BOARD">
      <div style={{ minHeight: 460 }}>
        <div style={{ padding: '16px 22px', borderBottom: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div className="row" style={{ gap: 14 }}>
            <div style={{ fontSize: 17, fontWeight: 500, letterSpacing: '-0.018em' }}>Q2 Initiatives</div>
            <span className="tag">14 active</span>
          </div>
          <div className="row" style={{ gap: 6 }}>
            <div style={{ display: 'flex' }}>
              {['#1C6CE0', '#0EA5B5', '#2BC2B8'].map((c, i) => (
                <div key={i} style={{ width: 22, height: 22, borderRadius: 999, background: c, border: '2px solid var(--bg-1)', marginLeft: i ? -8 : 0 }} />
              ))}
              <div style={{ width: 22, height: 22, borderRadius: 999, border: '1px dashed var(--line-2)', marginLeft: -8, fontSize: 10, color: 'var(--text-muted)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>+5</div>
            </div>
            <button className="btn btn-grad btn-sm" style={{ padding: '6px 12px', fontSize: 11.5 }}>+ New</button>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, padding: 18 }}>
          {[
            { t: 'Backlog', count: 12, color: 'var(--text-muted)', items: [
              { t: 'Migrate billing to Stripe Tax', p: 'P2', d: 'Today' },
              { t: 'Audit log export endpoint', p: 'P3', d: 'Jun 12' },
              { t: 'Dark mode pass on settings', p: 'P3', d: 'Jun 15' },
            ]},
            { t: 'In progress', count: 6, color: 'var(--violet)', items: [
              { t: 'Workflow builder v2', p: 'P1', d: 'In review', hot: true },
              { t: 'SAML / SSO for Enterprise', p: 'P1', d: 'Tomorrow' },
              { t: 'Webhook retry policy', p: 'P2', d: 'Friday' },
            ]},
            { t: 'Shipped', count: 38, color: 'var(--good)', items: [
              { t: 'Real-time presence indicators', p: 'P2', d: 'Yesterday' },
              { t: 'Org-level rate limits', p: 'P1', d: '2d ago' },
              { t: 'Onboarding revamp', p: 'P1', d: 'Last week' },
            ]},
          ].map(col => (
            <div key={col.t} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <div className="row" style={{ justifyContent: 'space-between', padding: '4px 2px', fontSize: 12 }}>
                <span style={{ color: col.color }}>● {col.t}</span>
                <span className="mono" style={{ fontSize: 10, color: 'var(--text-muted)' }}>{col.count}</span>
              </div>
              {col.items.map((it, i) => (
                <div key={i} style={{
                  padding: 12,
                  border: '1px solid var(--line)',
                  borderRadius: 10,
                  background: it.hot ? 'linear-gradient(180deg, color-mix(in srgb, var(--violet) 12%, transparent), color-mix(in srgb, var(--violet) 3%, transparent))' : 'var(--bg-1)',
                  borderColor: it.hot ? 'color-mix(in srgb, var(--violet) 32%, transparent)' : undefined,
                }}>
                  <div style={{ fontSize: 13, fontWeight: 500 }}>{it.t}</div>
                  <div className="row" style={{ justifyContent: 'space-between', marginTop: 8 }}>
                    <span className="tag" style={{ fontSize: 9.5 }}>{it.p}</span>
                    <span className="mono" style={{ fontSize: 10, color: 'var(--text-muted)' }}>{it.d}</span>
                  </div>
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
    </BrowserMock>
  );
}

// --- Marketing site mock ---
function MarketingMock() {
  return (
    <BrowserMock url="parallel-supply.com" label="WEB · DTC">
      <div style={{ minHeight: 460, background: 'linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%)', padding: 24, position: 'relative' }}>
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(500px 240px at 30% 20%, color-mix(in srgb, var(--violet) 12%, transparent), transparent 60%)', pointerEvents: 'none' }} />
        <div style={{ position: 'relative' }}>
          <div className="row" style={{ justifyContent: 'space-between', marginBottom: 40 }}>
            <div className="row" style={{ gap: 10 }}>
              <div style={{ width: 18, height: 18, borderRadius: 5, background: 'linear-gradient(135deg, #0C1E33, #1C6CE0)' }} />
              <span style={{ fontWeight: 600, fontSize: 14 }}>Parallel Supply</span>
            </div>
            <div className="row" style={{ gap: 12, fontSize: 11, color: 'var(--text-muted)' }}>
              <span>Products</span><span>Studios</span><span>Journal</span><span>Contact</span>
            </div>
            <div className="tag">Cart · 0</div>
          </div>
          <div style={{ maxWidth: 480 }}>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'var(--violet)', textTransform: 'uppercase', marginBottom: 12 }}>NEW · SS26 COLLECTION</div>
            <div style={{ fontSize: 40, fontWeight: 500, lineHeight: 1.0, letterSpacing: '-0.03em' }}>
              Considered objects, <span className="grad-text">made well.</span>
            </div>
            <p style={{ marginTop: 14, color: 'var(--text-dim)', fontSize: 13 }}>
              Small-batch goods from independent studios across Northern Europe.
            </p>
            <div className="row" style={{ gap: 10, marginTop: 18 }}>
              <div className="btn btn-grad" style={{ padding: '8px 14px', fontSize: 12 }}>Shop the collection</div>
              <div className="btn btn-ghost" style={{ padding: '8px 14px', fontSize: 12 }}>Watch film</div>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, marginTop: 38 }}>
            {[['Linen carafe', '€84'], ['Walnut tray', '€120'], ['Brass dish', '€48'], ['Stone bowl', '€96']].map(([n, p], i) => (
              <div key={i} style={{ border: '1px solid var(--line)', borderRadius: 10, padding: 10, background: 'var(--bg-1)' }}>
                <div style={{ aspectRatio: '1', borderRadius: 6, background: `linear-gradient(135deg, rgba(124,58,237,${0.12 + i * 0.05}), color-mix(in srgb, var(--cyan) 14%, transparent))`, marginBottom: 8 }} />
                <div style={{ fontSize: 11.5 }}>{n}</div>
                <div className="mono" style={{ fontSize: 10, color: 'var(--text-muted)' }}>{p}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </BrowserMock>
  );
}

// --- Analytics / realtime ---
function AnalyticsMock() {
  const big = [8,10,12,11,16,18,14,22,28,24,32,38,34,42,48,44,52,58,54,62];
  return (
    <BrowserMock url="metrics.northwind.app/realtime" label="LIVE · 14 regions">
      <div style={{ minHeight: 460, padding: 22, display: 'flex', flexDirection: 'column', gap: 16 }}>
        <div className="row" style={{ justifyContent: 'space-between' }}>
          <div>
            <div style={{ fontSize: 17, fontWeight: 500, letterSpacing: '-0.018em' }}>Realtime fulfillment</div>
            <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>Updated 0.3s ago · 14 regions</div>
          </div>
          <span className="pill live"><span className="dot" />Live</span>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 12 }}>
          <div style={{ padding: 16, border: '1px solid var(--line)', borderRadius: 12, background: 'var(--bg-1)' }}>
            <div className="row" style={{ justifyContent: 'space-between', marginBottom: 10 }}>
              <div>
                <div className="mono" style={{ fontSize: 10, color: 'var(--text-muted)', letterSpacing: '0.10em', textTransform: 'uppercase' }}>Orders / hr</div>
                <div style={{ fontSize: 38, fontWeight: 500, letterSpacing: '-0.025em' }}>1,284</div>
              </div>
              <div className="tag" style={{ color: 'var(--good)', borderColor: 'rgba(95,212,156,0.3)', background: 'rgba(95,212,156,0.06)' }}>↑ 24.3% WoW</div>
            </div>
            <div style={{ height: 160 }}><Area data={big} w={520} h={160} /></div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[
              ['Avg. ship time', '36 min', '-12%'],
              ['Error rate', '0.04%', '-58%'],
              ['Active SKUs', '8,412', '+184'],
            ].map(k => (
              <div key={k[0]} style={{ padding: 14, border: '1px solid var(--line)', borderRadius: 12, background: 'var(--bg-1)' }}>
                <div className="mono" style={{ fontSize: 10, color: 'var(--text-muted)', letterSpacing: '0.10em', textTransform: 'uppercase' }}>{k[0]}</div>
                <div className="row" style={{ justifyContent: 'space-between', alignItems: 'baseline', marginTop: 4 }}>
                  <div style={{ fontSize: 24, fontWeight: 500, letterSpacing: '-0.02em' }}>{k[1]}</div>
                  <div style={{ fontSize: 11, color: 'var(--good)' }}>{k[2]}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ border: '1px solid var(--line)', borderRadius: 12, overflow: 'hidden' }}>
          <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--line)', fontSize: 12, color: 'var(--text-dim)', display: 'flex', justifyContent: 'space-between' }}>
            <span>Activity feed</span>
            <span className="mono" style={{ fontSize: 10, color: 'var(--text-muted)' }}>Stream · 24 events/min</span>
          </div>
          {[
            ['12:04:18','order.shipped','Berlin DC-2','#ORD-44182'],
            ['12:04:14','inventory.low','SKU 8341','12 units left'],
            ['12:04:09','webhook.delivered','Stripe → ledger','218ms'],
            ['12:04:02','flow.completed','returns.refund','1,284 done'],
          ].map((r, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '80px 160px 1fr 120px', padding: '10px 16px', fontSize: 11.5, borderTop: i ? '1px solid var(--line)' : 0, color: 'var(--text-dim)' }}>
              <span className="mono" style={{ color: 'var(--text-muted)' }}>{r[0]}</span>
              <span className="mono" style={{ color: 'var(--violet)' }}>{r[1]}</span>
              <span>{r[2]}</span>
              <span className="mono">{r[3]}</span>
            </div>
          ))}
        </div>
      </div>
    </BrowserMock>
  );
}

// --- Code editor mock ---
function CodeMock() {
  const C = { kw: '#1C6CE0', fn: '#0E7490', str: '#15803D', num: '#B45309', tok: 'var(--text)' };
  return (
    <BrowserMock url="app.webanchor.studio/playground" label="TS · EDIT">
      <div style={{ minHeight: 380, fontFamily: 'var(--mono)', fontSize: 12.5, color: 'var(--text-dim)', lineHeight: '22px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '40px 1fr', minHeight: 380 }}>
          <div style={{ padding: '16px 0', borderRight: '1px solid var(--line)', background: 'rgba(11,42,74,0.04)', color: 'var(--text-faint)', textAlign: 'right', paddingRight: 10 }}>
            {Array.from({length: 16}).map((_, i) => <div key={i}>{i + 1}</div>)}
          </div>
          <div style={{ padding: '16px 20px' }}>
            <div><span style={{ color: C.kw }}>export const</span> <span style={{ color: C.fn }}>onSignup</span> = <span style={{ color: C.fn }}>defineFlow</span>({'{'}</div>
            <div>&nbsp;&nbsp;<span style={{ color: C.tok }}>name</span>: <span style={{ color: C.str }}>"customer.onboarding"</span>,</div>
            <div>&nbsp;&nbsp;<span style={{ color: C.tok }}>trigger</span>: <span style={{ color: C.fn }}>events</span>.<span style={{ color: C.fn }}>userCreated</span>,</div>
            <div>&nbsp;&nbsp;<span style={{ color: C.tok }}>steps</span>: [</div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;<span style={{ color: C.fn }}>validate</span>({'{'} schema, kyc: <span style={{ color: C.kw }}>true</span> {'}'}),</div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;<span style={{ color: C.fn }}>parallel</span>([</div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style={{ color: C.fn }}>provisionAccount</span>(),</div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style={{ color: C.fn }}>sendWelcomeEmail</span>(),</div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style={{ color: C.fn }}>notifySlack</span>(<span style={{ color: C.str }}>"#ops"</span>),</div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;]),</div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;<span style={{ color: C.fn }}>retry</span>({'{'} attempts: <span style={{ color: C.num }}>3</span>, backoff: <span style={{ color: C.str }}>"exp"</span> {'}'}),</div>
            <div>&nbsp;&nbsp;],</div>
            <div>{'}'});</div>
            <div>&nbsp;</div>
            <div style={{ color: 'var(--text-faint)' }}>// Deploy: webanchor deploy --env prod</div>
            <div style={{ color: 'var(--good)' }}>✓ deployed · 218ms cold start</div>
          </div>
        </div>
      </div>
    </BrowserMock>
  );
}

Object.assign(window, { BrowserMock, Area, Bars, DashboardMock, WorkflowMock, WebAppMock, MarketingMock, AnalyticsMock, CodeMock });