// Feature block snippets A-D. Each component is a high-fidelity UI mock that
// renders next to copy in the Features section.

// === Block A — Unified Trades table (matches real product Trades page) =====
function SnippetHistoryTable() {
  const rows = [
    { status: "Win",  dateIn: "May 11",  platform: "IBRK", strat: "MeanRev_SP500",  stratColor: "20 75% 60%",   sym: "OXY",  side: "LONG", shares: 264,  pnlPct: +9.22,  pnl:  1314.35, origin: "OC" },
    { status: "Win",  dateIn: "May 11",  platform: "IBRK", strat: "MeanRev_SP500",  stratColor: "20 75% 60%",   sym: "HII",  side: "LONG", shares:  44,  pnlPct: +4.00,  pnl:   559.13, origin: "OC" },
    { status: "Loss", dateIn: "May 11",  platform: "IBRK", strat: "Momentum_SmallCap", stratColor: "145 60% 50%",  sym: "FLEX", side: "LONG", shares: 121,  pnlPct: -2.63,  pnl:  -452.49, origin: "OC" },
    { status: "Win",  dateIn: "May 11",  platform: "IBRK", strat: "MeanRev_SP500",  stratColor: "20 75% 60%",   sym: "COP",  side: "LONG", shares: 123,  pnlPct: +6.12,  pnl:   861.13, origin: "OC" },
    { status: "Loss", dateIn: "May 11",  platform: "IBRK", strat: "MeanRev_SP500",  stratColor: "20 75% 60%",   sym: "APH",  side: "LONG", shares: 109,  pnlPct: -2.08,  pnl:  -290.06, origin: "OC" },
    { status: "Open", dateIn: "May 18",  platform: "IBRK", strat: "Trend_SP500",    stratColor: "262 50% 70%",  sym: "SEDG", side: "LONG", shares:  80,  pnlPct: null,   pnl:  null,    origin: "OC" },
    { status: "Open", dateIn: "May 18",  platform: "IBRK", strat: "MeanRev_SP500",  stratColor: "20 75% 60%",   sym: "PH",   side: "LONG", shares:  16,  pnlPct: null,   pnl:  null,    origin: "OC" },
    { status: "Open", dateIn: "May 18",  platform: "IBRK", strat: "Momentum_SmallCap", stratColor: "145 60% 50%",  sym: "MTSI", side: "LONG", shares:  45,  pnlPct: null,   pnl:  null,    origin: "CSV" },
  ];
  const statusTone = {
    Win:  "bg-positive/15 text-positive border-positive/30",
    Loss: "bg-negative/15 text-negative border-negative/30",
    Open: "bg-card2 text-mutedfg border-border1",
  };
  const originTone = {
    OC:  "bg-warn/15 text-warn border-warn/30",
    CSV: "bg-[hsl(35_92%_58%/.15)] text-warn border-warn/30",
    IBRK:"bg-primary/15 text-primary border-primary/30",
  };
  return (
    <div className="card1 overflow-hidden">
      {/* Top stat tiles — 4 KPIs like real product */}
      <div className="grid grid-cols-4 gap-px bg-border1 border-b border-border1">
        {[
          { label: "Realized P&L",  tag: "$",  value: "+$203,534.20", sub: "USD · CAD · AUD",       tone: "positive" },
          { label: "Realized P&L",  tag: "%",  value: "+1.95%",        sub: "Overall return",        tone: "positive" },
          { label: "Win Rate",       tag: null, value: "50.1%",          sub: "512W / 509L / 0E",     tone: "neutral" },
          { label: "Total Trades",   tag: null, value: "1,021",          sub: "Closed round-trips",   tone: "neutral" },
        ].map((s, i) => (
          <div key={i} className="bg-card px-3 py-2.5">
            <div className="flex items-center gap-1 mb-0.5">
              <span className="text-[9.5px] font-semibold uppercase tracking-wider text-subtlefg">{s.label}</span>
              {s.tag && <span className="text-[9.5px] font-semibold uppercase tracking-wider text-mutedfg">{s.tag}</span>}
              <IcoInfo size={9} className="text-subtlefg/50" />
            </div>
            <div className={`font-mono font-bold tracking-tight text-[15px] ${s.tone === "positive" ? "text-positive" : "text-fg"}`}>{s.value}</div>
            <div className="text-[9.5px] text-subtlefg mt-0.5">{s.sub}</div>
          </div>
        ))}
      </div>

      {/* Filter chip strip — single line, compact */}
      <div className="px-3 py-2 border-b border-border1 flex items-center gap-1.5 text-[10px] flex-nowrap overflow-hidden">
        {["All Portfolios", "Date range", "All Statuses", "All Platforms", "All Strategies", "All Currencies"].map(f => (
          <button key={f} className="inline-flex items-center gap-1 rounded-md bg-card2 border border-border1 px-2 py-1 text-mutedfg hover:text-fg whitespace-nowrap shrink-0">
            {f} <IcoChevronDown size={9} />
          </button>
        ))}
        <div className="ml-auto flex items-center gap-1 shrink-0">
          <button title="Export" className="rounded-md bg-card2 border border-border1 p-1.5 text-mutedfg hover:text-fg"><IcoDownload size={11} /></button>
          <button title="Columns" className="rounded-md bg-card2 border border-border1 p-1.5 text-mutedfg hover:text-fg"><IcoLayers size={11} /></button>
        </div>
      </div>

      {/* Trade table */}
      <div className="overflow-x-auto">
        <table className="w-full text-[10.5px]">
          <thead>
            <tr className="text-subtlefg border-b border-border1">
              <th className="text-left text-[9px] uppercase tracking-wider px-3 py-2">Status</th>
              <th className="text-left text-[9px] uppercase tracking-wider px-2 py-2">Date In</th>
              <th className="text-left text-[9px] uppercase tracking-wider px-2 py-2">Platform</th>
              <th className="text-left text-[9px] uppercase tracking-wider px-2 py-2">Strategy</th>
              <th className="text-left text-[9px] uppercase tracking-wider px-2 py-2">Symbol</th>
              <th className="text-left text-[9px] uppercase tracking-wider px-2 py-2">Side</th>
              <th className="text-right text-[9px] uppercase tracking-wider px-2 py-2">Shares</th>
              <th className="text-right text-[9px] uppercase tracking-wider px-2 py-2">Profit %</th>
              <th className="text-right text-[9px] uppercase tracking-wider px-2 py-2">Net Profit</th>
              <th className="text-left text-[9px] uppercase tracking-wider px-2 py-2">Origin</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r, i) => (
              <tr key={i} className="border-b border-border2 hover:bg-card2/40">
                <td className="px-3 py-1.5">
                  <span className={`inline-block rounded-full border px-1.5 py-0.5 text-[9px] font-semibold ${statusTone[r.status]}`}>
                    {r.status === "Win" ? "↗ Win" : r.status === "Loss" ? "↘ Loss" : "○ Open"}
                  </span>
                </td>
                <td className="px-2 py-1.5 font-mono text-mutedfg">{r.dateIn}</td>
                <td className="px-2 py-1.5"><span className="rounded px-1 py-0.5 text-[9px] font-mono bg-primary/15 text-primary border border-primary/30">{r.platform}</span></td>
                <td className="px-2 py-1.5">
                  <span className="inline-flex items-center gap-1.5">
                    <span className="h-1.5 w-1.5 rounded-full" style={{ background: `hsl(${r.stratColor})` }} />
                    <span className="text-fg">{r.strat}</span>
                  </span>
                </td>
                <td className="px-2 py-1.5 font-mono font-semibold">{r.sym}</td>
                <td className="px-2 py-1.5"><span className="text-positive font-semibold text-[9.5px]">{r.side}</span></td>
                <td className="px-2 py-1.5 text-right font-mono text-mutedfg">{r.shares}</td>
                <td className={`px-2 py-1.5 text-right font-mono ${r.pnlPct == null ? "text-subtlefg" : r.pnlPct >= 0 ? "text-positive" : "text-negative"}`}>
                  {r.pnlPct == null ? "—" : `${r.pnlPct >= 0 ? "+" : ""}${r.pnlPct.toFixed(2)}%`}
                </td>
                <td className={`px-2 py-1.5 text-right font-mono font-semibold ${r.pnl == null ? "text-subtlefg" : r.pnl >= 0 ? "text-positive" : "text-negative"}`}>
                  {r.pnl == null ? "—" : `${r.pnl >= 0 ? "+$" : "-$"}${Math.abs(r.pnl).toLocaleString("en-US", { minimumFractionDigits: 2 })}`}
                </td>
                <td className="px-2 py-1.5">
                  <span className={`rounded px-1 py-0.5 text-[9px] font-mono border ${originTone[r.origin] || "bg-card2 text-mutedfg border-border1"}`}>{r.origin}</span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="px-3 py-2 border-t border-border1 text-[10px] text-subtlefg flex items-center justify-between">
        <span className="inline-flex items-center gap-1.5"><span className="live-dot" />Last sync from IBKR · 2 min ago</span>
        <span className="font-mono">Σ <span className="text-positive">+$203,534.20 USD</span> realized · FIFO-matched</span>
      </div>
    </div>
  );
}

// === Block B — Round-Trip lifecycle ============================
function SnippetRoundTrip() {
  const totalRealized = 1247.83;
  return (
    <div className="card1 p-5">
      <div className="flex items-start justify-between gap-3 mb-4">
        <div>
          <div className="flex items-center gap-2">
            <span className="text-[11px] font-semibold uppercase tracking-wider text-subtlefg">Round-Trip · AAPL</span>
            <Badge tone="positive">WIN</Badge>
          </div>
          <div className="mt-1 font-mono text-2xl font-bold text-positive">+${totalRealized.toFixed(2)}</div>
          <div className="text-[11px] text-subtlefg mt-0.5">3 entries · 2 exits · FIFO matched · 12-day hold</div>
        </div>
        <div className="text-right">
          <div className="text-[10px] font-semibold uppercase tracking-wider text-subtlefg">Strategy</div>
          <div className="text-[11px] font-medium mt-0.5 inline-flex items-center gap-1.5">
            <span className="h-2 w-2 rounded-full" style={{background: "hsl(262 83% 67%)"}} /> Momentum_Tech
          </div>
        </div>
      </div>

      {/* Fill timeline */}
      <div className="relative">
        <div className="absolute left-3 right-3 top-[20px] h-px bg-border1" />
        <div className="flex justify-between relative">
          {AAPL_FILLS.map((f, i) => (
            <div key={i} className="flex flex-col items-center text-center w-[18%]">
              <div className={`h-5 w-5 rounded-full border-2 ${f.ttype === "in" ? "border-positive bg-positive/15" : "border-negative bg-negative/15"} flex items-center justify-center`}>
                {f.ttype === "in"
                  ? <IcoArrowDown size={10} className="text-positive" />
                  : <IcoArrowUp size={10} className="text-negative" />}
              </div>
              <div className="mt-1.5 font-mono text-[10px] text-subtlefg">{f.date}</div>
              <div className={`font-mono text-[11px] mt-0.5 ${f.ttype === "in" ? "text-positive" : "text-negative"}`}>
                {f.side} {f.qty}
              </div>
              <div className="font-mono text-[10px] text-mutedfg">@ ${f.price}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="mt-5 grid grid-cols-2 gap-3 pt-4 border-t border-border1">
        <KV label="Lots opened">3 · 450 sh</KV>
        <KV label="Lots closed">2 · 450 sh</KV>
        <KV label="Avg entry">$170.61</KV>
        <KV label="Avg exit">$177.41</KV>
        <KV label="Holding period">12 days</KV>
        <KV label="Realized P&L"><span className="text-positive">+$1,247.83</span></KV>
      </div>

      <div className="mt-4 flex items-center gap-2 text-[10px] text-subtlefg">
        <IcoCheck size={11} className="text-positive" />
        Matches IBKR fifoPnlRealized to the penny · last sync 2 min ago
      </div>
    </div>
  );
}

// === Block C — Performance · By Strategy (Strategy Evolution chart) ======
// Matches the real Performance > By Strategy view: multi-line chart of cumulative
// Net P&L per strategy since inception, colored legend across the top.
function SnippetPerformance() {
  const [view, setView] = React.useState("Combined");
  const [period, setPeriod] = React.useState("ALL");
  const strats = [
    { name: "Momentum_Tech",     value: "$98K",   color: "210 90% 65%", endY:  98, kind: "solid", peakIdx: 35, shape: "tech" },
    { name: "Unassigned",      value: "$55K",   color: "240 5% 65%",  endY:  55, kind: "solid", peakIdx: 28, shape: "steady" },
    { name: "Momentum_SmallCap",    value: "$38K",   color: "145 60% 50%", endY:  38, kind: "solid", peakIdx: 30, shape: "tech" },
    { name: "Trend_TSX",         value: "$30K",   color: "35 92% 58%",  endY:  30, kind: "solid", peakIdx: 33, shape: "late" },
    { name: "Momentum_LargeCap",      value: "$29K",   color: "280 70% 65%", endY:  29, kind: "solid", peakIdx: 32, shape: "late" },
    { name: "MeanRev_SP500",     value: "$17K",   color: "20 75% 60%",  endY:  17, kind: "solid", peakIdx: 30, shape: "wave" },
    { name: "Bob Strategy",    value: "$5K",    color: "180 35% 50%", endY:   5, kind: "dashed", peakIdx: 20, shape: "flat" },
    { name: "Rotation_ETF",             value: "$4K",    color: "180 50% 60%", endY:   4, kind: "dashed", peakIdx: 25, shape: "flat" },
    { name: "Adaptive_Growth", value: "$4K",    color: "240 5% 50%",  endY:   4, kind: "dashed", peakIdx: 20, shape: "flat" },
    { name: "Trend_SP500",       value: "-$2K",   color: "262 50% 70%", endY:  -2, kind: "dashed", peakIdx: 30, shape: "flat", neg: true },
    { name: "Momentum_ASX",     value: "-$8K",   color: "0 70% 60%",   endY:  -8, kind: "dashed", peakIdx: 28, shape: "down", neg: true },
  ];

  // Build curves for each strategy (36 monthly points spanning Jul 2020 → Apr 2026)
  const N = 36;
  const curves = strats.map((s, sIdx) => {
    const pts = [];
    let v = 0;
    let seed = (sIdx + 1) * 1337;
    for (let i = 0; i < N; i++) {
      seed = (seed * 9301 + 49297) % 233280;
      const r = seed / 233280 - 0.5;
      let drift = s.endY / N;
      // Shape variants
      if (s.shape === "tech")  drift *= (i < 15 ? 0.4 : 1.8);                     // ramp late
      if (s.shape === "wave")  drift *= 1 + Math.sin(i * 0.6) * 0.7;
      if (s.shape === "down")  drift = -Math.abs(s.endY) / N * (i / N) * 2;
      if (s.shape === "late")  drift *= (i < 25 ? 0.3 : 2.5);
      if (s.shape === "flat")  drift *= 0.6;
      if (s.shape === "steady") drift *= 1;
      v += drift + r * Math.abs(s.endY) * 0.06;
      pts.push(v);
    }
    // Force last point near s.endY (in $K) for accurate legend
    const adj = s.endY - pts[pts.length - 1];
    return pts.map((p, i) => p + adj * (i / (N - 1)));
  });

  // Compute global min/max in $K
  const allY = curves.flat();
  const yMin = Math.min(-30, ...allY);
  const yMax = Math.max(100, ...allY);
  const W = 760, H = 280, padL = 36, padR = 6, padT = 8, padB = 22;
  const xAt = (i) => padL + (i / (N - 1)) * (W - padL - padR);
  const yAt = (v) => padT + (1 - (v - yMin) / (yMax - yMin)) * (H - padT - padB);

  // Smooth path for one strategy
  function pathFor(pts) {
    const xy = pts.map((v, i) => [xAt(i), yAt(v)]);
    let d = `M${xy[0][0]} ${xy[0][1]}`;
    for (let i = 0; i < xy.length - 1; i++) {
      const p0 = xy[i - 1] || xy[i];
      const p1 = xy[i];
      const p2 = xy[i + 1];
      const p3 = xy[i + 2] || p2;
      const c1x = p1[0] + (p2[0] - p0[0]) / 6;
      const c1y = p1[1] + (p2[1] - p0[1]) / 6;
      const c2x = p2[0] - (p3[0] - p1[0]) / 6;
      const c2y = p2[1] - (p3[1] - p1[1]) / 6;
      d += ` C ${c1x.toFixed(1)} ${c1y.toFixed(1)}, ${c2x.toFixed(1)} ${c2y.toFixed(1)}, ${p2[0].toFixed(1)} ${p2[1].toFixed(1)}`;
    }
    return d;
  }

  const gridYVals = [-30, 0, 30, 60, 90];
  const xLabels = ["Jul 2020", "Apr 2021", "Jan 2022", "Apr 2023", "Jan 2024", "Oct 2024", "Jul 2025", "Apr 2026"];

  return (
    <div className="card1 overflow-hidden">
      {/* Header: page-style with tabs and view toggles */}
      <div className="px-4 pt-4 pb-3 border-b border-border1">
        <div className="flex items-start justify-between gap-3 mb-3">
          <div>
            <div className="text-[14px] font-semibold tracking-tight">Performance</div>
            <div className="text-[10.5px] text-subtlefg mt-0.5">Analyze your cumulative returns, yearly breakdown, and monthly income.</div>
          </div>
          <div className="flex items-center gap-1.5">
            <button className="rounded-md bg-card2 border border-border1 px-2 py-1 text-[10px] inline-flex items-center gap-1 text-mutedfg hover:text-fg whitespace-nowrap"><IcoRepeat size={10} /> Rebuild</button>
            <button className="rounded-md bg-card2 border border-border1 px-2 py-1 text-[10px] inline-flex items-center gap-1 text-mutedfg hover:text-fg whitespace-nowrap"><IcoBriefcase size={10} /> All Portfolios <IcoChevronDown size={9} /></button>
          </div>
        </div>
        {/* tabs + view toggle */}
        <div className="flex items-center justify-between flex-wrap gap-2">
          <div className="flex items-center gap-3 text-[11px]">
            <span className="text-subtlefg hover:text-fg cursor-pointer">Overview</span>
            <span className="text-fg font-semibold border-b-2 border-primary pb-1">By Strategy</span>
            <span className="text-subtlefg hover:text-fg cursor-pointer">By Portfolio</span>
          </div>
          <div className="inline-flex rounded-md border border-border1 overflow-hidden">
            {["Combined", "Realized", "Unrealized"].map(v => (
              <button key={v} onClick={() => setView(v)}
                className={`px-2 py-1 text-[10px] font-medium ${view === v ? "bg-primary text-primaryFg" : "text-mutedfg hover:text-fg"}`}>
                {v}
              </button>
            ))}
          </div>
        </div>
      </div>

      {/* Chart card */}
      <div className="p-4">
        <div className="flex items-start justify-between gap-3 mb-3">
          <div>
            <div className="flex items-center gap-2">
              <span className="text-[11px] font-semibold uppercase tracking-wider">Strategy Evolution</span>
              <span className="text-[10px] uppercase tracking-wider text-subtlefg">({view.toLowerCase()})</span>
            </div>
            <div className="text-[10.5px] text-subtlefg mt-0.5">Net P&L growth per strategy since inception</div>
          </div>
          <div className="flex items-center gap-1">
            {["1M", "3M", "6M", "YTD", "1Y", "ALL"].map(p => (
              <button key={p} onClick={() => setPeriod(p)}
                className={`rounded-md font-mono font-semibold tracking-wider px-1.5 py-0.5 text-[9px] ${
                  period === p ? "bg-primary text-primaryFg" : "bg-card2 text-mutedfg border border-border1 hover:text-fg"
                }`}>{p}</button>
            ))}
            <button className="rounded-md bg-card2 border border-border1 px-1.5 py-0.5 text-[9px] text-mutedfg ml-1 whitespace-nowrap">11 of 11 <IcoChevronDown size={8} className="inline" /></button>
          </div>
        </div>

        {/* Strategy legend chips */}
        <div className="flex items-center flex-wrap gap-x-2.5 gap-y-1 mb-3 text-[10px]">
          {strats.map(s => (
            <span key={s.name} className="inline-flex items-center gap-1 whitespace-nowrap">
              <span className="h-2 w-2 rounded-full shrink-0" style={{ background: `hsl(${s.color})` }} />
              <span className="text-mutedfg">{s.name}</span>
              <span className={`font-mono ${s.neg ? "text-negative" : "text-positive"}`}>{s.value}</span>
            </span>
          ))}
        </div>

        {/* Multi-line chart */}
        <svg viewBox={`0 0 ${W} ${H}`} className="w-full" style={{ background: "transparent" }}>
          {/* y grid */}
          {gridYVals.map(g => (
            <g key={g}>
              <line x1={padL} x2={W - padR} y1={yAt(g)} y2={yAt(g)} stroke="hsl(var(--border-2))" strokeWidth="1" strokeDasharray={g === 0 ? "none" : "2 4"} opacity={g === 0 ? "0.7" : "0.4"} />
              <text x={padL - 4} y={yAt(g) + 3} fontSize="9" fill="hsl(var(--subtle-fg))" textAnchor="end" fontFamily="JetBrains Mono, monospace">{g >= 0 ? "$" : "-$"}{Math.abs(g)}K</text>
            </g>
          ))}
          {/* x labels */}
          {xLabels.map((l, i) => {
            const x = padL + (i / (xLabels.length - 1)) * (W - padL - padR);
            return <text key={l} x={x} y={H - 5} fontSize="9" fill="hsl(var(--subtle-fg))" textAnchor="middle" fontFamily="JetBrains Mono, monospace">{l}</text>;
          })}
          {/* lines */}
          {curves.map((pts, i) => (
            <path
              key={i}
              d={pathFor(pts)}
              fill="none"
              stroke={`hsl(${strats[i].color})`}
              strokeWidth={strats[i].kind === "solid" ? 1.8 : 1.2}
              strokeDasharray={strats[i].kind === "dashed" ? "4 3" : "none"}
              strokeLinecap="round"
              strokeLinejoin="round"
              opacity={strats[i].kind === "solid" ? 0.95 : 0.65}
            />
          ))}
        </svg>
      </div>
    </div>
  );
}

// === Block D — Capital Allocation table =========================
function SnippetCapital() {
  const baseTotals = { USD: 15000.00, CAD: 2000.00, AUD: 4000.00 };
  return (
    <div className="card1 overflow-hidden">
      <div className="flex items-center justify-between px-4 py-3 border-b border-border1">
        <span className="text-[11px] font-semibold uppercase tracking-wider text-subtlefg">Capital · Movements</span>
        <button className="btn-secondary inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-[11px]">
          <IcoPlus size={11} /> New movement
        </button>
      </div>
      <table className="df w-full text-[12px]">
        <thead>
          <tr>
            <th>Date</th>
            <th>Type</th>
            <th>Strategy</th>
            <th className="text-right">Amount</th>
            <th className="text-right">Currency</th>
            <th>Note</th>
          </tr>
        </thead>
        <tbody>
          {CAPITAL_ROWS.map((r, i) => (
            <tr key={i}>
              <td className="font-mono text-mutedfg text-[11px] whitespace-nowrap">{r.date}</td>
              <td>
                <div className="flex items-center gap-1.5">
                  <span className={`h-2 w-2 rounded-full ${r.amount >= 0 ? "bg-positive" : "bg-negative"}`} />
                  <span className="text-[11px]">{r.type}</span>
                  {r.recurring && <IcoRepeat size={11} className="text-primary" />}
                </div>
              </td>
              <td className="text-mutedfg text-[11px]">{r.strategy}</td>
              <td className={`text-right font-mono tabular-nums ${r.amount >= 0 ? "text-positive" : "text-negative"}`}>
                {r.amount >= 0 ? "+" : "-"}${Math.abs(r.amount).toLocaleString("en-US", { minimumFractionDigits: 2 })}
              </td>
              <td className="text-right text-subtlefg font-mono text-[10.5px]">{r.ccy}</td>
              <td className="text-subtlefg text-[11px]">{r.note}</td>
            </tr>
          ))}
        </tbody>
        <tfoot>
          <tr className="bg-card2/60">
            <td colSpan="6" className="!py-2.5">
              <div className="flex flex-wrap items-center gap-x-6 gap-y-1 text-[11px]">
                <span className="font-semibold uppercase tracking-wider text-subtlefg text-[10px]">Base · USD</span>
                <span className="font-mono">Net <span className="text-positive">+$18,420.00</span></span>
                <span className="text-subtlefg">·</span>
                <span className="font-mono text-mutedfg">CAD 2,000.00 → $1,461.20</span>
                <span className="text-subtlefg">·</span>
                <span className="font-mono text-mutedfg">AUD 4,000.00 → $2,640.80</span>
                <span className="text-subtlefg">·</span>
                <span className="font-mono text-mutedfg">FX rates · IBKR cash report 2026-05-17</span>
              </div>
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
  );
}

Object.assign(window, { SnippetHistoryTable, SnippetRoundTrip, SnippetPerformance, SnippetCapital });