// V2-specific Performance carousel — replaces the static SnippetPerformance
// for Feature 03 with a tabbed view that cycles through 5 real Performance pages.
//
// Loaded AFTER tour-v2.jsx so it can pull all the mock components via window globals.

// Strategy Ranking — exact data from latest product screenshot
function StrategyRankingTable() {
  const rows = [
  { rank: 1, name: "Momentum_Tech", color: "195 60% 65%", pnl: "+$139.1K", change: { dir: "none" } },
  { rank: 2, name: "Unassigned", color: "220 10% 65%", pnl: "+$48.8K", change: { dir: "none" } },
  { rank: 3, name: "Trend_TSX", color: "40 35% 60%", ccy: "CAD", pnl: "+C$57.9K", change: { dir: "none" } },
  { rank: 4, name: "Momentum_SmallCap", color: "75 45% 60%", pnl: "+$37.3K", change: { dir: "none" } },
  { rank: 5, name: "Momentum_LargeCap", color: "280 25% 65%", ccy: "CAD", pnl: "+C$44.6K", change: { dir: "none" } },
  { rank: 6, name: "MeanRev_SP500", color: "15 50% 65%", pnl: "+$17.5K", change: { dir: "none" } },
  { rank: 7, name: "Rotation_ETF", color: "180 35% 60%", pnl: "+$5.6K", change: { dir: "none" } },
  { rank: 8, name: "Bob Strategy", color: "180 35% 50%", pnl: "+$4.7K", change: { dir: "up", delta: 1, was: "#9" } },
  { rank: 9, name: "Trend_SP500", color: "262 50% 70%", pnl: "+$1.3K", change: { dir: "up", delta: 1, was: "#10" } },
  { rank: 10, name: "Adaptive_Growth", color: "240 5% 50%", pnl: "-$492", change: { dir: "down", delta: 2, was: "#8" }, neg: true },
  { rank: 11, name: "Momentum_ASX", color: "0 70% 60%", ccy: "AUD", pnl: "-AUD 12.2K", change: { dir: "none" }, neg: true }];

  return (
    <div className="card1 p-4">
      <div className="flex items-center gap-2 mb-1">
        <span className="text-[11px] font-semibold uppercase tracking-wider">Strategy Ranking</span>
        <span className="text-[10px] uppercase tracking-wider text-subtlefg">(combined)</span>
      </div>
      <div className="text-[10.5px] text-subtlefg mb-3">Strategies ordered by total Net P&L · arrows compare against 30 days ago.</div>
      <table className="w-full text-[10.5px]">
        <thead>
          <tr className="text-subtlefg">
            <th className="text-left text-[9px] uppercase tracking-wider pb-1.5">Rank</th>
            <th className="text-left text-[9px] uppercase tracking-wider pb-1.5">Strategy</th>
            <th className="text-right text-[9px] uppercase tracking-wider pb-1.5">Net P&L</th>
            <th className="text-right text-[9px] uppercase tracking-wider pb-1.5">30D Change</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((r) =>
          <tr key={r.rank} className="border-t border-border2">
              <td className="py-1.5 text-mutedfg font-mono">#{r.rank}</td>
              <td className="py-1.5">
                <span className="inline-flex items-center gap-2">
                  <span className="h-1.5 w-1.5 rounded-full shrink-0" style={{ background: `hsl(${r.color})` }} />
                  <span className="text-fg">{r.name}</span>
                  {r.ccy && <span className="rounded px-1 py-px text-[8.5px] font-mono bg-card2 border border-border1 text-subtlefg">{r.ccy}</span>}
                </span>
              </td>
              <td className={`py-1.5 text-right font-mono font-semibold ${r.neg ? "text-negative" : "text-positive"}`}>{r.pnl}</td>
              <td className="py-1.5 text-right text-[10px]">
                {r.change.dir === "up" && <span className="text-positive inline-flex items-center gap-0.5"><IcoArrowUp size={9} /> {r.change.delta} <span className="text-subtlefg ml-1">was {r.change.was}</span></span>}
                {r.change.dir === "down" && <span className="text-negative inline-flex items-center gap-0.5"><IcoArrowDown size={9} /> {r.change.delta} <span className="text-subtlefg ml-1">was {r.change.was}</span></span>}
                {r.change.dir === "none" && <span className="text-subtlefg">— no change</span>}
              </td>
            </tr>
          )}
        </tbody>
      </table>
    </div>);

}

// Return on Capital — exact data from latest product screenshot
function ReturnOnCapitalTable() {
  const rows = [
  { name: "Momentum_Tech", color: "195 60% 65%", roc: 264.9, rocYr: 44.4, pnl: "$139.1K", cap: "$52.5K", since: "Jun 2020" },
  { name: "Trend_TSX", color: "40 35% 60%", ccy: "CAD", roc: 106.1, rocYr: 61.4, pnl: "C$57.9K", cap: "C$54.6K", since: "Aug 2024" },
  { name: "Momentum_SmallCap", color: "75 45% 60%", roc: 96.1, rocYr: 17.5, pnl: "$37.3K", cap: "$38.8K", since: "Nov 2020" },
  { name: "Momentum_LargeCap", color: "280 25% 65%", ccy: "CAD", roc: 89.0, rocYr: 40.3, pnl: "C$44.6K", cap: "C$50.2K", since: "Mar 2024" },
  { name: "MeanRev_SP500", color: "15 50% 65%", roc: 32.4, rocYr: 11.2, pnl: "$17.5K", cap: "$54.0K", since: "Jun 2023" },
  { name: "Rotation_ETF", color: "180 35% 60%", roc: 18.8, rocYr: 4.3, pnl: "$5.6K", cap: "$30.0K", since: "Jan 2022" },
  { name: "Trend_SP500", color: "262 50% 70%", roc: 3.0, rocYr: 1.8, pnl: "$1.3K", cap: "$42.6K", since: "Aug 2024" },
  { name: "Adaptive_Growth", color: "240 5% 50%", roc: -1.0, rocYr: -1.0, pnl: "-$492", cap: "$50.0K", since: "Jan 2026", asterisk: true },
  { name: "Momentum_ASX", color: "0 70% 60%", ccy: "AUD", roc: -26.8, rocYr: -5.3, pnl: "-AUD 12.2K", cap: "AUD 45.4K", since: "May 2021" }];

  const maxAbs = Math.max(...rows.map((r) => Math.abs(r.roc)));
  return (
    <div className="card1 p-4">
      <div className="flex items-center gap-2 mb-1">
        <span className="text-[11px] font-semibold uppercase tracking-wider">Return on Capital</span>
        <span className="text-[10px] uppercase tracking-wider text-subtlefg">(combined)</span>
      </div>
      <div className="text-[10.5px] text-subtlefg mb-3">Net P&L per dollar of capital allocated · most efficient strategies at the top</div>
      <table className="w-full text-[10.5px]">
        <thead>
          <tr className="text-subtlefg">
            <th className="text-left text-[9px] uppercase tracking-wider pb-1.5">Strategy</th>
            <th className="text-left text-[9px] uppercase tracking-wider pb-1.5">ROC %</th>
            <th className="text-right text-[9px] uppercase tracking-wider pb-1.5">ROC / yr</th>
            <th className="text-right text-[9px] uppercase tracking-wider pb-1.5">P&L / Capital</th>
            <th className="text-right text-[9px] uppercase tracking-wider pb-1.5">Since</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((r) => {
            const isNeg = r.roc < 0;
            const barW = Math.abs(r.roc) / maxAbs * 100;
            return (
              <tr key={r.name} className="border-t border-border2">
                <td className="py-1.5">
                  <span className="inline-flex items-center gap-2">
                    <span className="h-1.5 w-1.5 rounded-full shrink-0" style={{ background: `hsl(${r.color})` }} />
                    <span className="text-fg">{r.name}</span>
                    {r.ccy && <span className="rounded px-1 py-px text-[8.5px] font-mono bg-card2 border border-border1 text-subtlefg">{r.ccy}</span>}
                  </span>
                </td>
                <td className="py-1.5">
                  <div className="flex items-center gap-1.5">
                    <div className="relative h-4 w-24 rounded bg-card2 overflow-hidden">
                      <div className="absolute inset-y-0 left-1/2 w-px bg-border1 z-10" />
                      <div className="absolute inset-y-0"
                      style={{
                        background: `hsl(${r.color} / 0.55)`,
                        ...(isNeg ?
                        { right: "50%", width: `${barW / 2}%` } :
                        { left: "50%", width: `${barW / 2}%` })
                      }} />
                      
                    </div>
                    <span className={`font-mono font-semibold text-[10px] ${isNeg ? "text-negative" : "text-positive"}`}>{r.roc > 0 ? "+" : ""}{r.roc.toFixed(1)}%</span>
                  </div>
                </td>
                <td className={`py-1.5 text-right font-mono ${isNeg ? "text-negative" : "text-positive"}`}>{r.rocYr > 0 ? "+" : ""}{r.rocYr.toFixed(1)}%{r.asterisk ? "*" : ""}<span className="text-subtlefg">/yr</span></td>
                <td className={`py-1.5 text-right font-mono ${isNeg ? "text-negative" : "text-fg"}`}>{r.pnl} <span className="text-subtlefg">/ {r.cap}</span></td>
                <td className="py-1.5 text-right text-subtlefg text-[10px]">{r.since}</td>
              </tr>);

          })}
        </tbody>
      </table>
    </div>);

}

// Matching Report — carousel of 3 slides to avoid one giant column.
function SnippetMatchingReport() {
  const slides = [
  { id: "resolve", label: "Resolution options", Comp: () => <MatchingSlideResolve /> },
  { id: "trace", label: "Diagnosis trace", Comp: () => <MatchingSlideTrace /> },
  { id: "diag", label: "Mismatch detected", Comp: () => <MatchingSlideDiag /> }];

  const [idx, setIdx] = React.useState(0);
  const Active = slides[idx].Comp;
  const goPrev = () => setIdx((idx - 1 + slides.length) % slides.length);
  const goNext = () => setIdx((idx + 1) % slides.length);

  return (
    <div className="relative">
      <button onClick={goPrev}
      className="absolute z-10 -left-3 lg:-left-4 rounded-full border border-border1 shadow-lg p-2 text-mutedfg hover:text-fg hover:border-primary/50 transition-colors"
      style={{ background: "hsl(var(--card))", top: "160px" }}
      aria-label="Previous">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M15 18l-6-6 6-6" /></svg>
      </button>
      <button onClick={goNext}
      className="absolute z-10 -right-3 lg:-right-4 rounded-full border border-border1 shadow-lg p-2 text-mutedfg hover:text-fg hover:border-primary/50 transition-colors"
      style={{ background: "hsl(var(--card))", top: "160px" }}
      aria-label="Next">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M9 18l6-6-6-6" /></svg>
      </button>
      <div key={slides[idx].id} className="performance-carousel-panel">
        <Active />
      </div>
      <div className="mt-3 flex items-center justify-center gap-3">
        <span className="text-[10.5px] font-semibold uppercase tracking-wider text-subtlefg">{slides[idx].label}</span>
        <div className="flex items-center gap-1.5">
          {slides.map((s, i) =>
          <button key={s.id} onClick={() => setIdx(i)}
          className={`h-1.5 rounded-full transition-all ${idx === i ? "w-6 bg-primary" : "w-1.5 bg-border1 hover:bg-mutedfg"}`}
          aria-label={`Go to ${s.label}`} />
          )}
        </div>
        <span className="font-mono text-[10px] text-subtlefg w-8">{idx + 1}/{slides.length}</span>
      </div>
    </div>);

}

function MatchingSlideDiag() {
  return (
    <div className="card1 overflow-hidden">
      <div className="px-4 py-3 flex items-center justify-between border-b border-border1 flex-wrap gap-2">
        <div className="flex items-center gap-3 text-[10.5px] flex-wrap">
          <span className="font-mono font-bold text-fg">DVN</span>
          <span className="inline-flex items-center gap-1.5 text-mutedfg">
            <span className="h-1.5 w-1.5 rounded-full" style={{ background: "hsl(75 45% 60%)" }} />
            Momentum_SmallCap
          </span>
          <span className="text-positive font-semibold">LONG</span>
          <span className="font-mono text-mutedfg">2022-01-18 → 2022-03-01</span>
          <span className="font-mono text-mutedfg">115 sh · USD</span>
        </div>
        <span className="inline-flex items-center gap-1 rounded-md bg-negative/15 text-negative border border-negative/30 px-2 py-0.5 text-[10px] font-semibold">No Match</span>
      </div>
      <div className="px-4 py-2 text-[10.5px] text-negative bg-negative/5 border-b border-border1">
        No IB exit trades found for DVN within ±14 days of 2022-03-01
      </div>
      <div className="p-4 border-b border-border2">
        <div className="flex items-center gap-2 mb-2">
          <span className="inline-flex items-center justify-center h-5 w-5 rounded-full bg-positive/20 text-positive"><IcoCheck size={11} /></span>
          <span className="text-[11px] font-semibold">Entry leg</span>
          <span className="rounded-md bg-positive/15 text-positive border border-positive/30 px-1.5 py-0.5 text-[9.5px] font-mono font-semibold">Exact · 100%</span>
        </div>
        <div className="grid grid-cols-2 gap-3">
          <div className="rounded-md bg-card2/60 border border-border2 p-3">
            <div className="text-[9.5px] uppercase tracking-wider text-subtlefg mb-1">CSV Expects</div>
            <div className="font-mono text-[11px]"><span className="text-positive font-semibold">BUY</span> 115 shares @ <span className="text-fg">$51.08</span></div>
            <div className="text-[10px] text-subtlefg mt-0.5">Jan 18, 2022 · Commission $1.00</div>
          </div>
          <div className="rounded-md bg-card2/60 border border-border2 p-3">
            <div className="text-[9.5px] uppercase tracking-wider text-subtlefg mb-1">Broker Executed</div>
            <div className="font-mono text-[11px]"><span className="text-positive font-semibold">BUY</span> 115 shares @ <span className="text-fg">$51.08</span></div>
            <div className="text-[10px] text-subtlefg mt-0.5">Jan 18, 2022 · U1234567</div>
          </div>
        </div>
      </div>
      <div className="p-4">
        <div className="flex items-center gap-2 mb-2">
          <span className="inline-flex items-center justify-center h-5 w-5 rounded-full bg-negative/20 text-negative"><IcoX size={11} /></span>
          <span className="text-[11px] font-semibold">Exit leg</span>
          <span className="rounded-md bg-negative/15 text-negative border border-negative/30 px-1.5 py-0.5 text-[9.5px] font-mono font-semibold">Not linked to a broker fill</span>
        </div>
        <div className="grid grid-cols-2 gap-3">
          <div className="rounded-md bg-card2/60 border border-border2 p-3">
            <div className="text-[9.5px] uppercase tracking-wider text-subtlefg mb-1">CSV Expects</div>
            <div className="font-mono text-[11px]"><span className="text-negative font-semibold">SELL</span> 115 shares @ <span className="text-fg">$60.00</span></div>
            <div className="text-[10px] text-subtlefg mt-0.5">Mar 01, 2022 · Commission $1.05</div>
          </div>
          <div className="rounded-md border border-negative/40 bg-negative/5 p-3">
            <div className="text-[10px] text-negative italic leading-snug">
              Not linked to a broker fill — use the options below to link an existing round trip, build a new one manually, search by a different symbol, or ignore this entry.
            </div>
          </div>
        </div>
      </div>
    </div>);

}

function MatchingSlideTrace() {
  return (
    <div className="card1 p-4 border border-warn/30 bg-warn/5">
      <div className="flex items-center gap-2 mb-3">
        <IcoAlert size={14} className="text-warn" />
        <span className="text-[12px] font-semibold text-warn">Diagnosis</span>
      </div>
      <div className="space-y-1.5 font-mono text-[11px] text-mutedfg leading-relaxed">
        <div>Entry: Found 1 real BUY trade(s) for DVN — 115 shares total</div>
        <div>Exit: No SELL trades found within ±14 days of CSV exit date 2022-03-01</div>
        <div>Nearest matching exit: SELL 115 shares on 2022-03-21 (21 days from CSV exit)</div>
        <div className="pt-2">Matching system roundtrip found (no strategy assigned):</div>
        <div className="text-fg">DVN LONG: 115 shares</div>
        <div>Entry: 2022-01-18 | Exit: 2022-03-21 | Status: closed</div>
        <div>Differences: exit date: CSV has 2022-03-01, roundtrip has 2022-03-21</div>
        <div className="pt-2 text-positive">Suggested corrections:</div>
        <div className="text-positive">→ Update CSV exit date from 2022-03-01 to 2022-03-21</div>
      </div>
    </div>);

}

function MatchingSlideResolve() {
  return (
    <div className="space-y-3">
      <div className="card1 p-4 border-primary/30 ring-1 ring-primary/20">
        <div className="text-[11px] font-semibold mb-1">Option 1 — Link to an existing round trip</div>
        <div className="text-[10px] text-subtlefg mb-2.5">Pre-sorted by date proximity. Pick the round trip you want to attach this CSV entry to.</div>
        <div className="rounded-md border border-border1 bg-card2/40 p-3">
          <div className="flex items-center gap-2 text-[10.5px] flex-wrap mb-2">
            <span className="h-3 w-3 rounded-full border-2 border-primary bg-primary/30 shrink-0" />
            <span className="font-mono font-bold text-fg">DVN</span>
            <span className="text-positive font-semibold text-[10px]">LONG</span>
            <span className="font-mono text-mutedfg">115 sh · $51.08 → $60.00</span>
            <span className="inline-block rounded bg-positive/15 text-positive border border-positive/30 px-1.5 py-px text-[9px] font-mono font-semibold">Auto 90%</span>
          </div>
          <div className="border-t border-border2 pt-2">
            <div className="text-[10px] font-semibold inline-flex items-center gap-1.5 mb-1"><IcoFile size={10} /> Transactions History</div>
            <table className="w-full text-[10px] font-mono">
              <thead>
                <tr className="text-subtlefg">
                  <th className="text-left text-[9px] uppercase tracking-wider font-semibold pb-1">Date</th>
                  <th className="text-left text-[9px] uppercase tracking-wider font-semibold pb-1">Action</th>
                  <th className="text-right text-[9px] uppercase tracking-wider font-semibold pb-1">Shares</th>
                  <th className="text-right text-[9px] uppercase tracking-wider font-semibold pb-1">Price</th>
                  <th className="text-right text-[9px] uppercase tracking-wider font-semibold pb-1">Value</th>
                </tr>
              </thead>
              <tbody>
                <tr className="border-t border-border2"><td className="py-1 text-mutedfg">Jan 18, 2022</td><td className="text-positive">buy</td><td className="text-right">115</td><td className="text-right">$51.08</td><td className="text-right">$5,875.20</td></tr>
                <tr className="border-t border-border2"><td className="py-1 text-mutedfg">Mar 21, 2022</td><td className="text-negative">sell</td><td className="text-right">115</td><td className="text-right">$60.00</td><td className="text-right">$6,898.95</td></tr>
              </tbody>
            </table>
          </div>
        </div>
        <div className="flex justify-end mt-3">
          <button className="btn-primary inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-[11px] font-semibold">
            <IcoCheck size={11} /> Link selected round trip
          </button>
        </div>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-2">
        <div className="card1 p-3">
          <div className="text-[10.5px] font-semibold mb-1">Option 2 — Build custom</div>
          <div className="text-[9.5px] text-subtlefg leading-snug">Mix broker fills and manual entries in the Round Trip Builder.</div>
        </div>
        <div className="card1 p-3">
          <div className="text-[10.5px] font-semibold mb-1">Option 3 — Different symbol</div>
          <div className="text-[9.5px] text-subtlefg leading-snug">Use this if CSV symbol differs from broker symbol (typo, ticker change).</div>
        </div>
        <div className="card1 p-3">
          <div className="text-[10.5px] font-semibold mb-1">Option 4 — Ignore</div>
          <div className="text-[9.5px] text-subtlefg leading-snug">Move this CSV row to Ignored. State persists across re-imports.</div>
        </div>
      </div>
    </div>);

}

// Capital Allocation — full replacement matching the real product page.
function SnippetCapitalAllocation() {
  const rows = [
  { sym: "Rotation_ETF", alloc: 30000, interest: 0, total: 30000.00, ccy: "USD", last: "2023-11-01", entries: 5 },
  { sym: "Momentum_ASX", alloc: 45000, interest: 430.30, total: 45430.30, ccy: "AUD", last: "2024-11-28", entries: 8 },
  { sym: "Momentum_Tech", alloc: 50000, interest: 2519.66, total: 52519.66, ccy: "USD", last: "2026-04-01", entries: 22 },
  { sym: "Momentum_LargeCap", alloc: 50000, interest: 163.96, total: 50163.96, ccy: "CAD", last: "2024-11-28", entries: 8 },
  { sym: "MeanRev_SP500", alloc: 50000, interest: 3982.66, total: 53982.66, ccy: "USD", last: "2025-07-15", entries: 18 },
  { sym: "Trend_TSX", alloc: 54000, interest: 565.61, total: 54565.61, ccy: "CAD", last: "2025-07-15", entries: 13 }];

  const fmt = (v) => `$${v.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;

  return (
    <div className="card1 overflow-hidden">
      {/* Page header */}
      <div className="px-5 py-4 flex items-start justify-between border-b border-border1 flex-wrap gap-2">
        <div>
          <h3 className="text-[14px] font-semibold tracking-tight">Capital Allocation</h3>
          <p className="text-[10.5px] text-subtlefg mt-0.5">Allocate capital to portfolios and strategies.</p>
        </div>
        <div className="flex items-center gap-1.5">
          <button className="btn-primary inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-[10.5px] font-semibold"><IcoPlus size={10} /> Add Capital</button>
          <button className="inline-flex items-center gap-1 rounded-md bg-card2 border border-border1 px-2 py-1 text-[10px] text-mutedfg"><IcoBriefcase size={10} /> All Portfolios <IcoChevronDown size={9} /></button>
        </div>
      </div>

      {/* KPI tiles */}
      <div className="grid grid-cols-4 gap-px bg-border1 border-b border-border1">
        {[
        { label: "Total Allocated", tag: <IcoCheck size={11} />, value: "$376,717.57", ccy: "USD", color: "text-positive", breakdown: [["USD", "+$267,894.78"], ["AUD", "+$45,430.30"], ["CAD", "+$104,729.57"]] },
        { label: "Allocated Interest", tag: <IcoDollar size={11} />, value: "$12,734.49", ccy: "USD", color: "text-fg", breakdown: [["USD", "+$11,894.78"], ["AUD", "+$430.30"], ["CAD", "+$729.57"]] },
        { label: "Remaining Interest", tag: <IcoCalendarClock size={11} />, value: "$2,576.04", ccy: "USD", color: "text-warn", breakdown: [["USD", "+$2,155.03"], ["AUD", "+$86.28"], ["CAD", "+$493.31"]] },
        { label: "Total by Portfolio", tag: <IcoBriefcase size={11} />, value: "My portfolio", ccy: "", color: "text-fg", breakdown: [["USD", "$267,894.78"], ["CAD", "$104,729.57"], ["AUD", "$45,430.30"]] }].
        map((s, i) =>
        <div key={i} className="bg-card px-3 py-2.5 flex flex-col">
            <div className="flex items-center gap-1 mb-1">
              <span className="text-[9.5px] font-semibold uppercase tracking-wider text-mutedfg">{s.label}</span>
              <IcoInfo size={9} className="text-subtlefg/60" />
              <span className="ml-auto text-subtlefg">{s.tag}</span>
            </div>
            <div className={`flex items-baseline gap-1 ${s.color}`}>
              <span className="font-mono font-bold tracking-tight text-[15px] leading-none">{s.value}</span>
              {s.ccy && <span className="text-[9.5px] text-subtlefg font-medium">{s.ccy}</span>}
            </div>
            <div className="mt-2 space-y-px">
              {s.breakdown.map(([k, v]) =>
            <div key={k} className="grid grid-cols-[24px_1fr] items-center gap-1.5 text-[9.5px] font-mono">
                  <span className="text-subtlefg">{k}</span>
                  <span className="text-mutedfg text-right tabular-nums">{v}</span>
                </div>
            )}
            </div>
          </div>
        )}
      </div>

      {/* Portfolio row */}
      <div className="px-5 py-3 border-b border-border1 flex items-center gap-3 flex-wrap">
        <IcoChevronDown size={11} className="text-mutedfg" />
        <span className="text-[12px] font-semibold">My portfolio</span>
        <span className="font-mono text-[10.5px] text-positive">$267,894.78 <span className="text-subtlefg">USD</span></span>
        <span className="font-mono text-[10.5px] text-positive">$45,430.30 <span className="text-subtlefg">AUD</span></span>
        <span className="font-mono text-[10.5px] text-positive">$104,729.57 <span className="text-subtlefg">CAD</span></span>
        <button className="ml-auto inline-flex items-center gap-1 rounded-md bg-card2 border border-border1 px-2 py-0.5 text-[10px] text-mutedfg"><IcoPlus size={9} /> Add Capital</button>
      </div>

      {/* Strategy table */}
      <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 font-semibold px-4 py-2">Strategy</th>
            <th className="text-right text-[9px] uppercase tracking-wider font-semibold px-3 py-2">Allocated</th>
            <th className="text-right text-[9px] uppercase tracking-wider font-semibold px-3 py-2">Interest</th>
            <th className="text-right text-[9px] uppercase tracking-wider font-semibold px-3 py-2">Net Capital</th>
            <th className="text-left text-[9px] uppercase tracking-wider font-semibold px-3 py-2">Ccy</th>
            <th className="text-left text-[9px] uppercase tracking-wider font-semibold px-3 py-2">Last Entry</th>
            <th className="text-right text-[9px] uppercase tracking-wider font-semibold px-3 py-2">Entries</th>
            <th className="text-right text-[9px] uppercase tracking-wider font-semibold px-3 py-2"></th>
          </tr>
        </thead>
        <tbody>
          {rows.map((r) => {
            const expanded = r.sym === "Momentum_Tech";
            return (
              <React.Fragment key={r.sym}>
            <tr className="border-b border-border2 hover:bg-card2/30">
              <td className="px-4 py-1.5">
                <div className="flex items-center gap-2">
                  {expanded ?
                      <IcoChevronDown size={10} className="text-mutedfg" /> :
                      <IcoChevronRight size={10} className="text-subtlefg" />}
                  <div className="min-w-0">
                    <div className="font-mono font-semibold text-[11px]">{r.sym}</div>
                    {r.sub && <div className="text-[9px] text-subtlefg truncate">{r.sub}</div>}
                  </div>
                </div>
              </td>
              <td className="px-3 py-1.5 text-right font-mono text-positive">{fmt(r.alloc)}</td>
              <td className="px-3 py-1.5 text-right font-mono text-positive">{r.interest === 0 ? <span className="text-subtlefg">—</span> : fmt(r.interest)}</td>
              <td className="px-3 py-1.5 text-right font-mono font-semibold text-positive">{fmt(r.total)}</td>
              <td className="px-3 py-1.5 text-mutedfg">{r.ccy}</td>
              <td className="px-3 py-1.5 font-mono text-mutedfg">{r.last}</td>
              <td className="px-3 py-1.5 text-right font-mono">{r.entries}</td>
              <td className="px-3 py-1.5 text-right">
                <button className="inline-flex items-center gap-1 rounded-md bg-card2 border border-border1 px-1.5 py-0.5 text-[9.5px] text-mutedfg"><IcoPlus size={9} /> Add</button>
              </td>
            </tr>
            {expanded &&
                <tr className="bg-card2/40 border-b border-border1">
                <td colSpan={8} className="px-4 py-3">
                  <table className="w-full text-[10px]">
                    <thead>
                      <tr className="text-subtlefg">
                        <th className="text-left text-[9px] uppercase tracking-wider font-semibold px-2 py-1.5">Date</th>
                        <th className="text-left text-[9px] uppercase tracking-wider font-semibold px-2 py-1.5">Amount</th>
                        <th className="text-left text-[9px] uppercase tracking-wider font-semibold px-2 py-1.5">Currency</th>
                        <th className="text-left text-[9px] uppercase tracking-wider font-semibold px-2 py-1.5">Source</th>
                        <th className="text-left text-[9px] uppercase tracking-wider font-semibold px-2 py-1.5">Notes</th>
                        <th className="text-right text-[9px] uppercase tracking-wider font-semibold px-2 py-1.5"></th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr className="border-t border-border2">
                        <td className="px-2 py-1.5 font-mono text-mutedfg">2026-04-01</td>
                        <td className="px-2 py-1.5 font-mono text-positive">+$2,519.66</td>
                        <td className="px-2 py-1.5 text-mutedfg">USD</td>
                        <td className="px-2 py-1.5"><span className="inline-block rounded bg-primary/20 text-primary border border-primary/30 px-1.5 py-0.5 text-[9px] font-mono font-semibold">Interest</span></td>
                        <td className="px-2 py-1.5 text-subtlefg">—</td>
                        <td className="px-2 py-1.5 text-right">
                          <span className="inline-flex items-center gap-1 text-subtlefg"><IcoFile size={10} /><IcoX size={10} /></span>
                        </td>
                      </tr>
                      <tr className="border-t border-border2">
                        <td className="px-2 py-1.5 font-mono text-mutedfg">2025-05-01</td>
                        <td className="px-2 py-1.5 font-mono text-positive">+$10,000.00</td>
                        <td className="px-2 py-1.5 text-mutedfg">USD</td>
                        <td className="px-2 py-1.5"><span className="inline-block rounded bg-card2 text-mutedfg border border-border1 px-1.5 py-0.5 text-[9px] font-mono font-semibold">Deposit</span></td>
                        <td className="px-2 py-1.5 text-subtlefg">—</td>
                        <td className="px-2 py-1.5 text-right">
                          <span className="inline-flex items-center gap-1 text-subtlefg"><IcoFile size={10} /><IcoX size={10} /></span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
                }
            </React.Fragment>);

          })}
        </tbody>
      </table>
    </div>);

}

// Upcoming Orders — matches the real product page
function SnippetUpcomingOrdersV2() {
  const orders = [
  { sym: "SNDK", action: "SELL", qty: 13, type: "MKT", price: 1333.01, value: 17329.13 },
  { sym: "FLEX", action: "SELL", qty: 121, type: "MKT", price: 129.73, value: 15697.33 },
  { sym: "RKLB", action: "BUY", qty: 137, type: "MKT", price: 131.16, value: 17968.92 },
  { sym: "MTSI", action: "BUY", qty: 45, type: "MKT", price: 356.25, value: 16031.25 }];

  return (
    <div className="card1 overflow-hidden">
      {/* Page header */}
      <div className="px-5 py-4 flex items-start justify-between gap-3 border-b border-border1 flex-wrap">
        <div>
          <h3 className="text-[15px] font-semibold tracking-tight">Upcoming orders</h3>
          <p className="text-[10.5px] text-subtlefg mt-0.5">Orders generated by RealTest, awaiting placement</p>
          <p className="text-[10.5px] text-mutedfg mt-2">Showing orders for May 18, 2026 · <span className="text-fg font-medium">16 orders total</span></p>
        </div>
        <button className="inline-flex items-center gap-1.5 rounded-md bg-card2 border border-info/40 text-info px-2 py-1 text-[10.5px]">
          <IcoCalendar size={11} /> May 18, 2026 <IcoX size={9} />
        </button>
      </div>

      {/* Date group header */}
      <div className="px-5 pt-4 pb-2 flex items-center justify-between">
        <div className="flex items-center gap-2">
          <span className="h-2 w-2 rounded-full bg-subtlefg/40" />
          <span className="text-[12px] font-semibold">Monday, May 18, 2026</span>
        </div>
        <span className="text-[10px] text-subtlefg">1 day ago</span>
      </div>

      {/* Strategy card */}
      <div className="px-5 pb-4">
        <div className="card1">
          {/* Strategy header */}
          <div className="px-3 py-2 flex items-center justify-between border-b border-border1">
            <div className="flex items-center gap-2">
              <span className="font-mono font-semibold text-[12px]">Momentum_SmallCap</span>
              <span className="inline-block rounded bg-info/15 text-info border border-info/30 px-1.5 py-0.5 text-[9.5px] font-mono font-semibold">4 orders</span>
            </div>
            <div className="flex items-center gap-2 text-[10px] text-subtlefg">
              <span>-- · USD</span>
              <IcoX size={11} className="text-subtlefg hover:text-fg cursor-pointer" />
            </div>
          </div>

          {/* Stats row */}
          <div className="grid grid-cols-4 gap-px bg-border1 border-b border-border1">
            {[
            { label: "Strategy val", value: "$79,346.87", color: "text-fg" },
            { label: "Avail cash", value: "$3,425.98", color: "text-fg" },
            { label: "Cash after", value: "$2,452.27", color: "text-fg" },
            { label: "Buys+sells", value: "-$973.71", color: "text-negative" }].
            map((s) =>
            <div key={s.label} className="bg-card px-3 py-2">
                <div className="text-[9.5px] text-subtlefg">{s.label}</div>
                <div className={`font-mono font-semibold text-[12px] mt-0.5 ${s.color}`}>{s.value}</div>
              </div>
            )}
          </div>

          {/* Order table */}
          <table className="w-full text-[10.5px]">
            <thead>
              <tr className="text-subtlefg border-b border-border2">
                <th className="text-left text-[9px] uppercase tracking-wider font-semibold px-3 py-2">Symbol</th>
                <th className="text-left text-[9px] uppercase tracking-wider font-semibold px-3 py-2">Action</th>
                <th className="text-right text-[9px] uppercase tracking-wider font-semibold px-3 py-2">Qty</th>
                <th className="text-left text-[9px] uppercase tracking-wider font-semibold px-3 py-2">Type</th>
                <th className="text-right text-[9px] uppercase tracking-wider font-semibold px-3 py-2">Price</th>
                <th className="text-right text-[9px] uppercase tracking-wider font-semibold px-3 py-2">Mkt Value</th>
              </tr>
            </thead>
            <tbody>
              {orders.map((o) =>
              <tr key={o.sym} className="border-b border-border2 last:border-0 hover:bg-card2/30">
                  <td className="px-3 py-1.5">
                    <span className="inline-flex items-center gap-1.5">
                      <IcoChevronRight size={10} className="text-subtlefg" />
                      <span className="font-mono font-bold">{o.sym}</span>
                    </span>
                  </td>
                  <td className="px-3 py-1.5">
                    <span className={`inline-block rounded px-2 py-0.5 text-[9.5px] font-mono font-semibold border ${
                  o.action === "BUY" ?
                  "bg-positive/15 text-positive border-positive/30" :
                  "bg-negative/15 text-negative border-negative/30"}`
                  }>{o.action}</span>
                  </td>
                  <td className="px-3 py-1.5 text-right font-mono">{o.qty}</td>
                  <td className="px-3 py-1.5 text-mutedfg">{o.type}</td>
                  <td className="px-3 py-1.5 text-right font-mono">${o.price.toFixed(2)}</td>
                  <td className="px-3 py-1.5 text-right font-mono text-mutedfg">${o.value.toLocaleString("en-US", { minimumFractionDigits: 2 })}</td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>);

}

// Dividends + Interests carousel — 2 slides
function SnippetIncomeCarousel() {
  const slides = [
  { id: "div", label: "Dividends", Comp: () => <DividendsSlide /> },
  { id: "int", label: "Interests", Comp: () => <InterestsSlide /> }];

  const [idx, setIdx] = React.useState(0);
  const Active = slides[idx].Comp;
  const goPrev = () => setIdx((idx - 1 + slides.length) % slides.length);
  const goNext = () => setIdx((idx + 1) % slides.length);
  return (
    <div className="relative">
      <button onClick={goPrev}
      className="absolute z-10 -left-3 lg:-left-4 rounded-full border border-border1 shadow-lg p-2 text-mutedfg hover:text-fg hover:border-primary/50 transition-colors"
      style={{ background: "hsl(var(--card))", top: "240px" }}
      aria-label="Previous">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M15 18l-6-6 6-6" /></svg>
      </button>
      <button onClick={goNext}
      className="absolute z-10 -right-3 lg:-right-4 rounded-full border border-border1 shadow-lg p-2 text-mutedfg hover:text-fg hover:border-primary/50 transition-colors"
      style={{ background: "hsl(var(--card))", top: "240px" }}
      aria-label="Next">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M9 18l6-6-6-6" /></svg>
      </button>
      <div key={slides[idx].id} className="performance-carousel-panel">
        <Active />
      </div>
      <div className="mt-3 flex items-center justify-center gap-3">
        <span className="text-[10.5px] font-semibold uppercase tracking-wider text-subtlefg">{slides[idx].label}</span>
        <div className="flex items-center gap-1.5">
          {slides.map((s, i) =>
          <button key={s.id} onClick={() => setIdx(i)}
          className={`h-1.5 rounded-full transition-all ${idx === i ? "w-6 bg-primary" : "w-1.5 bg-border1 hover:bg-mutedfg"}`}
          aria-label={`Go to ${s.label}`} />
          )}
        </div>
        <span className="font-mono text-[10px] text-subtlefg w-8">{idx + 1}/{slides.length}</span>
      </div>
    </div>);

}

function DividendsSlide() {
  const rows = [
  { exDate: "May 15, 2026", payDate: "Jun 10, 2026", sym: "XOM", ccy: "USD", exch: "NYSE", qty: 93, gross: 95.79, tax: -14.37, net: null, status: "Pending", strat: "MeanRev_SP500" },
  { exDate: "Apr 30, 2026", payDate: "May 20, 2026", sym: "BDT", ccy: "CAD", exch: "TSE", qty: 244, gross: 17.08, tax: 0.00, net: null, status: "Pending", strat: "Trend_TSX" },
  { exDate: "Apr 30, 2026", payDate: "May 15, 2026", sym: "EXE", ccy: "CAD", exch: "TSE", qty: 363, gross: 16.01, tax: 0.00, net: { v: 16.01 }, status: "Paid", strat: "Trend_TSX" },
  { exDate: "May 1, 2026", payDate: "May 6, 2026", sym: "TIP", ccy: "USD", exch: "ARCA", qty: 311, gross: 174.42, tax: -26.16, net: { v: 148.26 }, status: "Paid", strat: "Rotation_ETF" },
  { exDate: "Mar 20, 2026", payDate: "Apr 30, 2026", sym: "SPY", ccy: "USD", exch: "ARCA", qty: 52, gross: 93.44, tax: -14.02, net: { v: 79.42 }, status: "Paid", strat: "Rotation_ETF" },
  { exDate: "Mar 30, 2026", payDate: "Apr 15, 2026", sym: "MU", ccy: "USD", exch: "NASDAQ", qty: 81, gross: 12.15, tax: -1.82, net: { v: 10.33 }, status: "Paid", strat: "Momentum_Tech" }];

  const fmtCcy = (v, ccy) => `${ccy === "CAD" ? "CA$" : "$"}${v.toFixed(2)}`;
  return (
    <div className="card1 overflow-hidden">
      <div className="px-5 py-4 flex items-start justify-between gap-3 border-b border-border1 flex-wrap">
        <div>
          <h3 className="text-[15px] font-semibold tracking-tight">Dividends</h3>
          <p className="text-[10.5px] text-subtlefg mt-0.5">Track your dividend income from cash transactions.</p>
        </div>
        <div className="flex items-center gap-1.5">
          <button className="inline-flex items-center gap-1 rounded-md bg-card2 border border-border1 px-2 py-1 text-[10px] text-mutedfg"><IcoRepeat size={10} /> Re-assign</button>
          <button className="inline-flex items-center gap-1 rounded-md bg-card2 border border-border1 px-2 py-1 text-[10px] text-mutedfg"><IcoDownload size={10} /> Export CSV</button>
        </div>
      </div>

      {/* KPI tiles */}
      <div className="grid grid-cols-4 gap-px bg-border1 border-b border-border1">
        {[
        { label: "Net Dividends", tag: <IcoDollar size={10} />, value: "$6,075.33", ccy: "USD", sub: "After taxes", breakdown: [["USD", "$3,756.43"], ["AUD", "$2,272.12"], ["CAD", "$947.18"]], color: "text-positive" },
        { label: "Gross Dividends", tag: <IcoTrending size={10} />, value: "$6,722.39", ccy: "USD", sub: "Before taxes", breakdown: [["USD", "$4,363.84"], ["AUD", "$2,310.06"], ["CAD", "$964.26"]], color: "text-fg" },
        { label: "Withholding Tax", tag: <span className="font-mono text-[10px]">%</span>, value: "-$647.05", ccy: "USD", sub: "9.6% effective", breakdown: [], color: "text-negative" },
        { label: "Status", tag: <IcoCalendarClock size={10} />, value: "220", ccy: "", sub: "paid, 4 pending", breakdown: [], color: "text-fg" }].
        map((s, i) =>
        <div key={i} className="bg-card px-3 py-2.5">
            <div className="flex items-center gap-1 mb-1">
              <span className="text-[9.5px] font-semibold uppercase tracking-wider text-mutedfg">{s.label}</span>
              <IcoInfo size={9} className="text-subtlefg/60" />
              <span className="ml-auto text-subtlefg">{s.tag}</span>
            </div>
            <div className={`flex items-baseline gap-1 ${s.color}`}>
              <span className="font-mono font-bold tracking-tight text-[15px] leading-none">{s.value}</span>
              {s.ccy && <span className="text-[9.5px] text-subtlefg">{s.ccy}</span>}
            </div>
            <div className="text-[9.5px] text-subtlefg mt-1">{s.sub}</div>
            {s.breakdown.length > 0 &&
          <div className="mt-1 space-y-px">
                {s.breakdown.map(([k, v]) =>
            <div key={k} className="grid grid-cols-[24px_1fr] items-center gap-1.5 text-[9.5px] font-mono">
                    <span className="text-subtlefg">{k}</span>
                    <span className="text-mutedfg text-right tabular-nums">{v}</span>
                  </div>
            )}
              </div>
          }
          </div>
        )}
      </div>

      {/* Filter strip */}
      <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", "Strategy", "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 whitespace-nowrap shrink-0">
            {f} <IcoChevronDown size={9} />
          </button>
        )}
        <button className="ml-auto rounded-md bg-card2 border border-border1 p-1.5 text-mutedfg shrink-0"><IcoLayers size={11} /></button>
      </div>

      {/* Table */}
      <div className="overflow-x-auto">
        <table className="w-full text-[10.5px]">
          <thead>
            <tr className="text-subtlefg border-b border-border2">
              {["Ex Date", "Pay Date", "Symbol", "Ccy", "Qty", "Gross", "Tax", "Net", "Status", "Strategy"].map((h) =>
              <th key={h} className="text-left text-[9px] uppercase tracking-wider font-semibold px-2 py-2 whitespace-nowrap">{h}</th>
              )}
            </tr>
          </thead>
          <tbody>
            {rows.map((r, i) =>
            <tr key={i} className="border-b border-border2 hover:bg-card2/30">
                <td className="px-2 py-1.5 font-mono text-mutedfg whitespace-nowrap">{r.exDate}</td>
                <td className="px-2 py-1.5 font-mono text-mutedfg whitespace-nowrap">{r.payDate}</td>
                <td className="px-2 py-1.5 font-mono font-semibold">{r.sym}</td>
                <td className="px-2 py-1.5 text-mutedfg">{r.ccy}</td>
                <td className="px-2 py-1.5 text-right font-mono">{r.qty}</td>
                <td className="px-2 py-1.5 text-right font-mono">{fmtCcy(r.gross, r.ccy)}</td>
                <td className={`px-2 py-1.5 text-right font-mono ${r.tax < 0 ? "text-negative" : "text-mutedfg"}`}>{r.tax === 0 ? `${r.ccy === "CAD" ? "CA$" : "$"}0.00` : `-${r.ccy === "CAD" ? "CA$" : "$"}${Math.abs(r.tax).toFixed(2)}`}</td>
                <td className="px-2 py-1.5 text-right font-mono text-positive">{r.net ? fmtCcy(r.net.v, r.ccy) : <span className="text-subtlefg">—</span>}</td>
                <td className="px-2 py-1.5">
                  <span className={`inline-block rounded px-1.5 py-0.5 text-[9px] font-mono font-semibold border ${
                r.status === "Paid" ? "bg-positive/15 text-positive border-positive/30" :
                "bg-warn/15 text-warn border-warn/30"}`
                }>{r.status}</span>
                </td>
                <td className="px-2 py-1.5 text-mutedfg whitespace-nowrap">{r.strat}</td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>);

}

function InterestsSlide() {
  const rows = [
  { date: "May 5, 2026", account: "Master_Account", type: "Broker Interest", ccy: "CAD", amount: 133.36, desc: "CAD CREDIT INT FOR APR-2026" },
  { date: "May 5, 2026", account: "Master_Account", type: "Broker Interest", ccy: "USD", amount: 217.95, desc: "USD CREDIT INT FOR APR-2026" },
  { date: "Apr 6, 2026", account: "Master_Account", type: "Broker Interest", ccy: "USD", amount: 233.04, desc: "USD CREDIT INT FOR MAR-2026" },
  { date: "Apr 6, 2026", account: "Master_Account", type: "Broker Interest", ccy: "CAD", amount: 50.23, desc: "CAD CREDIT INT FOR MAR-2026" },
  { date: "Mar 4, 2026", account: "Master_Account", type: "Broker Interest", ccy: "USD", amount: 149.30, desc: "USD CREDIT INT FOR FEB-2026" },
  { date: "Feb 4, 2026", account: "Master_Account", type: "Broker Interest", ccy: "USD", amount: 129.28, desc: "USD CREDIT INT FOR JAN-2026" },
  { date: "Jan 6, 2026", account: "Master_Account", type: "Broker Interest", ccy: "USD", amount: 120.55, desc: "USD CREDIT INT FOR DEC-2025" }];

  return (
    <div className="card1 overflow-hidden">
      <div className="px-5 py-4 flex items-start justify-between gap-3 border-b border-border1 flex-wrap">
        <div>
          <h3 className="text-[15px] font-semibold tracking-tight">Interests</h3>
          <p className="text-[10.5px] text-subtlefg mt-0.5">Track your broker interest income and expenses.</p>
        </div>
        <button className="inline-flex items-center gap-1 rounded-md bg-card2 border border-border1 px-2 py-1 text-[10px] text-mutedfg"><IcoDownload size={10} /> Export CSV</button>
      </div>

      {/* KPI tiles */}
      <div className="grid grid-cols-2 gap-px bg-border1 border-b border-border1">
        <div className="bg-card px-4 py-3">
          <div className="flex items-center gap-1 mb-1">
            <span className="text-[10px] font-semibold uppercase tracking-wider text-mutedfg">Interest Received</span>
            <IcoInfo size={9} className="text-subtlefg/60" />
            <IcoTrending size={11} className="ml-auto text-subtlefg" />
          </div>
          <div className="flex items-baseline gap-1 text-positive">
            <span className="font-mono font-bold tracking-tight text-[18px] leading-none">$15,310.52</span>
            <span className="text-[10px] text-subtlefg">USD</span>
          </div>
          <div className="text-[10px] text-subtlefg mt-1">Total received</div>
          <div className="mt-1.5 space-y-px">
            {[["USD", "$14,049.81"], ["AUD", "$516.58"], ["CAD", "$1,222.88"]].map(([k, v]) =>
            <div key={k} className="grid grid-cols-[24px_1fr] items-center gap-1.5 text-[9.5px] font-mono">
                <span className="text-subtlefg">{k}</span>
                <span className="text-mutedfg text-right tabular-nums">{v}</span>
              </div>
            )}
          </div>
        </div>
        <div className="bg-card px-4 py-3">
          <div className="flex items-center gap-1 mb-1">
            <span className="text-[10px] font-semibold uppercase tracking-wider text-mutedfg">Transactions</span>
            <IcoInfo size={9} className="text-subtlefg/60" />
            <span className="ml-auto text-subtlefg font-mono text-[11px]">#</span>
          </div>
          <div className="flex items-baseline gap-1 text-fg">
            <span className="font-mono font-bold tracking-tight text-[18px] leading-none">170</span>
          </div>
          <div className="text-[10px] text-subtlefg mt-1">Total transactions</div>
        </div>
      </div>

      {/* Filter strip */}
      <div className="px-3 py-2 border-b border-border1 flex items-center gap-1.5 text-[10px] flex-nowrap">
        {["All Portfolios", "Date range", "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 shrink-0">
            {f} <IcoChevronDown size={9} />
          </button>
        )}
        <button className="ml-auto rounded-md bg-card2 border border-border1 p-1.5 text-mutedfg shrink-0"><IcoLayers size={11} /></button>
      </div>

      {/* Table */}
      <div className="overflow-x-auto">
        <table className="w-full text-[10.5px]">
          <thead>
            <tr className="text-subtlefg border-b border-border2">
              {["Date", "Account", "Interest Type", "Currency", "Amount", "Description"].map((h) =>
              <th key={h} className="text-left text-[9px] uppercase tracking-wider font-semibold px-3 py-2 whitespace-nowrap">{h}</th>
              )}
            </tr>
          </thead>
          <tbody>
            {rows.map((r, i) =>
            <tr key={i} className="border-b border-border2 hover:bg-card2/30">
                <td className="px-3 py-1.5 font-mono text-mutedfg whitespace-nowrap">{r.date}</td>
                <td className="px-3 py-1.5 text-mutedfg">{r.account}</td>
                <td className="px-3 py-1.5 text-mutedfg">{r.type}</td>
                <td className="px-3 py-1.5 text-mutedfg">{r.ccy}</td>
                <td className="px-3 py-1.5 font-mono text-positive whitespace-nowrap">{r.ccy === "CAD" ? "CA$" : "$"}{r.amount.toFixed(2)}</td>
                <td className="px-3 py-1.5 font-mono text-mutedfg whitespace-nowrap">{r.desc}</td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>);

}

// Open Positions — real product page replica
function SnippetOpenPositionsV2() {
  const rows = [
  { date: "May 18, 2026", strat: "Trend_SP500", sym: "SEDG", exch: "NASDAQ", ccy: "USD", shares: 80, entry: 59.20, last: 55.23, fees: 1.00, cost: 4737.00, mkt: 4418.40, pct: -6.73, pnl: -318.60 },
  { date: "May 18, 2026", strat: "MeanRev_SP500", sym: "DHI", exch: "NYSE", ccy: "USD", shares: 107, entry: 136.81, last: 137.49, fees: 1.00, cost: 14639.67, mkt: 14711.43, pct: 0.49, pnl: 71.76 },
  { date: "May 18, 2026", strat: "Momentum_SmallCap", sym: "MTSI", exch: "NASDAQ", ccy: "USD", shares: 45, entry: 381.23, last: 356.25, fees: 1.00, cost: 17156.35, mkt: 16031.25, pct: -6.56, pnl: -1125.10 },
  { date: "May 11, 2026", strat: "Trend_TSX", sym: "KEEL", exch: "TSE", ccy: "CAD", shares: 1621, entry: 4.85, last: 6.02, fees: 16.21, cost: 7878.06, mkt: 9758.42, pct: 23.87, pnl: 1880.36 },
  { date: "May 04, 2026", strat: "Momentum_SmallCap", sym: "MKSI", exch: "NASDAQ", ccy: "USD", shares: 56, entry: 280.47, last: 295.70, fees: 1.00, cost: 15707.32, mkt: 16559.20, pct: 5.42, pnl: 851.88 },
  { date: "May 01, 2026", strat: "Momentum_LargeCap", sym: "SU", exch: "TSE", ccy: "CAD", shares: 214, entry: 92.55, last: 93.99, fees: 2.14, cost: 19807.84, mkt: 20113.86, pct: 1.54, pnl: 306.02 }];

  const fmt = (v, ccy) => `${ccy === "CAD" ? "$" : "$"}${v.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
  return (
    <div className="card1 overflow-hidden">
      {/* KPI tiles row */}
      <div className="grid grid-cols-5 gap-px bg-border1 border-b border-border1">
        {[
        { label: "Unrealized P&L $", tag: <IcoTrending size={10} />, value: "+$77,192.77", ccy: "USD", sub: "Potential gain", breakdown: [["USD", "+$58,600.60"], ["CAD", "+$25,538.21"]], color: "text-positive" },
        { label: "Unrealized P&L %", tag: <span className="text-[10px] font-mono">%</span>, value: "+13.81%", ccy: "", sub: "Overall return", breakdown: [], color: "text-positive" },
        { label: "Total Cost Basis", tag: <IcoDollar size={10} />, value: "$558,823.98", ccy: "USD", sub: "Original investment", breakdown: [["USD", "$428,422.24"], ["CAD", "$179,119.83"]], color: "text-fg" },
        { label: "Market Value", tag: <IcoTrending size={10} />, value: "$636,016.75", ccy: "USD", sub: "Current value", breakdown: [["USD", "$487,022.84"], ["CAD", "$204,658.04"]], color: "text-fg" },
        { label: "Open Positions", tag: <IcoBriefcase size={10} />, value: "43", ccy: "", sub: "43 long, 0 short", breakdown: [], color: "text-fg" }].
        map((s, i) =>
        <div key={i} className="bg-card px-3 py-2.5">
            <div className="flex items-center gap-1 mb-1">
              <span className="text-[9.5px] font-semibold uppercase tracking-wider text-mutedfg">{s.label}</span>
              <IcoInfo size={9} className="text-subtlefg/60" />
              <span className="ml-auto text-subtlefg">{s.tag}</span>
            </div>
            <div className={`flex items-baseline gap-1 ${s.color}`}>
              <span className="font-mono font-bold tracking-tight text-[15px] leading-none">{s.value}</span>
              {s.ccy && <span className="text-[9.5px] text-subtlefg">{s.ccy}</span>}
            </div>
            <div className="text-[9.5px] text-subtlefg mt-1">{s.sub}</div>
            {s.breakdown.length > 0 &&
          <div className="mt-1 space-y-px">
                {s.breakdown.map(([k, v]) =>
            <div key={k} className="grid grid-cols-[24px_1fr] items-center gap-1.5 text-[9.5px] font-mono">
                    <span className="text-subtlefg">{k}</span>
                    <span className="text-mutedfg text-right tabular-nums">{v}</span>
                  </div>
            )}
              </div>
          }
          </div>
        )}
      </div>

      {/* Filter strip */}
      <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 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 whitespace-nowrap shrink-0">
            {f} <IcoChevronDown size={9} />
          </button>
        )}
        <div className="ml-auto flex items-center gap-1 shrink-0">
          <button className="rounded-md bg-card2 border border-border1 p-1.5 text-mutedfg"><IcoDownload size={11} /></button>
          <button className="rounded-md bg-card2 border border-border1 p-1.5 text-mutedfg"><IcoLayers size={11} /></button>
        </div>
      </div>

      {/* Table */}
      <div className="overflow-x-auto">
        <table className="w-full text-[10px]">
          <thead>
            <tr className="text-subtlefg border-b border-border2">
              <th className="text-left text-[9px] uppercase tracking-wider font-semibold px-2 py-2 whitespace-nowrap">Status</th>
              <th className="text-left text-[9px] uppercase tracking-wider font-semibold px-2 py-2 whitespace-nowrap">Date In</th>
              <th className="text-left text-[9px] uppercase tracking-wider font-semibold px-2 py-2 whitespace-nowrap">Strategy</th>
              <th className="text-left text-[9px] uppercase tracking-wider font-semibold px-2 py-2 whitespace-nowrap">Symbol</th>
              <th className="text-left text-[9px] uppercase tracking-wider font-semibold px-2 py-2 whitespace-nowrap">Ccy</th>
              <th className="text-left text-[9px] uppercase tracking-wider font-semibold px-2 py-2 whitespace-nowrap">Side</th>
              <th className="text-right text-[9px] uppercase tracking-wider font-semibold px-2 py-2 whitespace-nowrap">Shares</th>
              <th className="text-right text-[9px] uppercase tracking-wider font-semibold px-2 py-2 whitespace-nowrap">Entry</th>
              <th className="text-right text-[9px] uppercase tracking-wider font-semibold px-2 py-2 whitespace-nowrap">Last</th>
              <th className="text-right text-[9px] uppercase tracking-wider font-semibold px-2 py-2 whitespace-nowrap">Mkt Value</th>
              <th className="text-right text-[9px] uppercase tracking-wider font-semibold px-2 py-2 whitespace-nowrap">Profit %</th>
              <th className="text-right text-[9px] uppercase tracking-wider font-semibold px-2 py-2 whitespace-nowrap">Net Profit</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r, i) =>
            <tr key={i} className="border-b border-border2 hover:bg-card2/30">
                <td className="px-2 py-1.5">
                  <div className="flex items-center gap-1.5">
                    <span className="text-subtlefg flex items-center gap-1">
                      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7Z" /><circle cx="12" cy="12" r="3" /></svg>
                      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M12 20h9" /><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z" /></svg>
                      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" /></svg>
                    </span>
                    <span className="inline-flex items-center gap-1.5 rounded-full border border-info/40 bg-info/15 text-info px-2 py-0.5 text-[9.5px] font-medium">
                      <span className="inline-block h-1.5 w-1.5 rounded-full border border-info" />Open
                    </span>
                  </div>
                </td>
                <td className="px-2 py-1.5 font-mono text-mutedfg whitespace-nowrap">{r.date}</td>
                <td className="px-2 py-1.5 text-mutedfg whitespace-nowrap">{r.strat}</td>
                <td className="px-2 py-1.5 font-mono font-bold">{r.sym}</td>
                <td className="px-2 py-1.5 text-mutedfg">{r.ccy}</td>
                <td className="px-2 py-1.5 text-positive font-semibold text-[9.5px]">LONG</td>
                <td className="px-2 py-1.5 text-right font-mono">{r.shares.toLocaleString()}</td>
                <td className="px-2 py-1.5 text-right font-mono text-mutedfg">${r.entry.toFixed(2)}</td>
                <td className="px-2 py-1.5 text-right font-mono">${r.last.toFixed(2)}</td>
                <td className="px-2 py-1.5 text-right font-mono">${r.mkt.toLocaleString("en-US", { minimumFractionDigits: 2 })}</td>
                <td className={`px-2 py-1.5 text-right font-mono ${r.pct >= 0 ? "text-positive" : "text-negative"}`}>{r.pct >= 0 ? "+" : ""}{r.pct.toFixed(2)}%</td>
                <td className={`px-2 py-1.5 text-right font-mono font-semibold ${r.pnl >= 0 ? "text-positive" : "text-negative"}`}>{r.pnl >= 0 ? "+$" : "-$"}{Math.abs(r.pnl).toLocaleString("en-US", { minimumFractionDigits: 2 })}</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" />Live · mark-to-market · last 2 min</span>
        <span className="font-mono">Σ unrealized <span className="text-positive">+$77,192.77 USD</span></span>
      </div>
    </div>);

}

function SnippetPerformanceCarousel() {
  const tabs = [
  { id: "evolution", label: "Strategy Evolution", Comp: () => <StrategyEvolutionChart /> },
  { id: "metrics", label: "By Strategy", Comp: () => <PerfByStrategyTableMock /> },
  { id: "roc", label: "Return on Capital", Comp: () => <ReturnOnCapitalTable /> },
  { id: "risk", label: "Drawdowns", Comp: () => <DrawdownsCapitalExtremesMock view="drawdowns" /> },
  { id: "ranking", label: "Strategy Ranking", Comp: () => <StrategyRankingTable /> },
  { id: "correlation", label: "Correlation", Comp: () => <CorrelationMatrixMock /> }];

  const [idx, setIdx] = React.useState(0);
  const Active = tabs[idx].Comp;
  const goPrev = () => setIdx((idx - 1 + tabs.length) % tabs.length);
  const goNext = () => setIdx((idx + 1) % tabs.length);

  return (
    <div className="relative">
      {/* Floating left arrow — anchored at fixed top so position never shifts between slides */}
      <button onClick={goPrev}
      className="absolute z-10 -left-3 lg:-left-4 rounded-full bg-card1 border border-border1 shadow-lg p-2 text-mutedfg hover:text-fg hover:bg-card hover:border-primary/50 transition-colors"
      style={{ background: "hsl(var(--card))", top: "240px" }}
      aria-label="Previous view">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M15 18l-6-6 6-6" /></svg>
      </button>

      {/* Floating right arrow */}
      <button onClick={goNext}
      className="absolute z-10 -right-3 lg:-right-4 rounded-full bg-card1 border border-border1 shadow-lg p-2 text-mutedfg hover:text-fg hover:bg-card hover:border-primary/50 transition-colors"
      style={{ background: "hsl(var(--card))", top: "240px" }}
      aria-label="Next view">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M9 18l6-6-6-6" /></svg>
      </button>

      {/* Active panel */}
      <div key={tabs[idx].id} className="performance-carousel-panel">
        <Active />
      </div>

      {/* Dot indicators + label */}
      <div className="mt-3 flex items-center justify-center gap-3">
        <span className="text-[10.5px] font-semibold uppercase tracking-wider text-subtlefg">{tabs[idx].label}</span>
        <div className="flex items-center gap-1.5">
          {tabs.map((t, i) =>
          <button key={t.id} onClick={() => setIdx(i)}
          className={`h-1.5 rounded-full transition-all ${
          idx === i ? "w-6 bg-primary" : "w-1.5 bg-border1 hover:bg-mutedfg"}`
          }
          aria-label={`Go to ${t.label}`} />
          )}
        </div>
        <span className="font-mono text-[10px] text-subtlefg w-8">{idx + 1}/{tabs.length}</span>
      </div>

      <style>{`
        .performance-carousel-panel { animation: pcFade .3s ease; }
        @keyframes pcFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
      `}</style>
    </div>);

}

// Extract Strategy Evolution chart out of the old SnippetPerformance so the
// carousel's first tab keeps the original look.
function StrategyEvolutionChart() {
  const [view, setView] = React.useState("Combined");
  const [period, setPeriod] = React.useState("ALL");
  const strats = [
  { name: "Momentum_Tech", value: "$98K", color: "195 60% 65%", endY: 98, kind: "solid", shape: "early-spike" },
  { name: "Unassigned", value: "$55K", color: "220 10% 65%", endY: 55, kind: "dashed", shape: "flatcreep" },
  { name: "Momentum_SmallCap", value: "$38K", color: "75 45% 60%", endY: 38, kind: "solid", shape: "dip-recover" },
  { name: "Trend_TSX", value: "$30K", color: "40 35% 60%", endY: 30, kind: "solid", shape: "very-late" },
  { name: "Momentum_LargeCap", value: "$29K", color: "280 25% 65%", endY: 29, kind: "dashed", shape: "very-late" },
  { name: "MeanRev_SP500", value: "$17K", color: "15 50% 65%", endY: 17, kind: "dashed", shape: "wave" },
  { name: "Rotation_ETF", value: "$4K", color: "180 35% 60%", endY: 4, kind: "dashed", shape: "flat" }];

  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;
      const t = i / (N - 1);
      let target = 0;
      if (s.shape === "early-spike") {
        // Rise in first 1/3, plateau middle, big spike last 15%
        if (t < 0.33) target = s.endY * 0.35 * (t / 0.33);else
        if (t < 0.85) target = s.endY * 0.35 + s.endY * 0.1 * ((t - 0.33) / 0.52);else
        target = s.endY * 0.45 + s.endY * 0.55 * ((t - 0.85) / 0.15);
      } else if (s.shape === "dip-recover") {
        // Negative early, stays low till middle, then strong climb
        if (t < 0.45) target = -s.endY * 0.2 * (1 - Math.abs(t - 0.2) / 0.2);else
        if (t < 0.7) target = -s.endY * 0.15 + s.endY * 0.4 * ((t - 0.45) / 0.25);else
        target = s.endY * 0.25 + s.endY * 0.75 * ((t - 0.7) / 0.3);
      } else if (s.shape === "very-late") {
        // Flat near 0 until 75%, then sharp climb
        if (t < 0.75) target = s.endY * 0.05 * t;else
        target = s.endY * 0.04 + s.endY * 0.96 * ((t - 0.75) / 0.25);
      } else if (s.shape === "wave") {
        target = s.endY * t + Math.sin(i * 0.45) * Math.abs(s.endY) * 0.25;
      } else if (s.shape === "flatcreep") {
        // Near zero with slow creep
        target = s.endY * Math.pow(t, 2.5);
      } else if (s.shape === "flat") {
        target = s.endY * t * 0.5 + s.endY * 0.5 * Math.pow(t, 4);
      } else {
        target = s.endY * t;
      }
      v = v * 0.6 + target * 0.4 + r * Math.abs(s.endY) * 0.04;
      pts.push(v);
    }
    const adj = s.endY - pts[pts.length - 1];
    return pts.map((p, i) => p + adj * (i / (N - 1)));
  });
  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);
  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">
      <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 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 whitespace-nowrap"><IcoBriefcase size={10} /> All Portfolios <IcoChevronDown size={9} /></button>
          </div>
        </div>
        <div className="flex items-center justify-between flex-wrap gap-2">
          <div className="flex items-center gap-3 text-[11px]">
            <span className="text-subtlefg cursor-pointer">Overview</span>
            <span className="text-fg font-semibold border-b-2 border-primary pb-1">By Strategy</span>
            <span className="text-subtlefg 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>

      <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"}`
            }>{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">7 of 11 <IcoChevronDown size={8} className="inline" /></button>
          </div>
        </div>
        <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>
        <svg viewBox={`0 0 ${W} ${H}`} className="w-full">
          {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>
          )}
          {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>;
          })}
          {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"}
          opacity={strats[i].kind === "solid" ? 0.95 : 0.65}
          strokeLinecap="round" strokeLinejoin="round" />
          )}
        </svg>
      </div>
    </div>);

}

// Corporate Events stitched into a round-trip — mirrors the real Trades detail
// view: collapsed RT summary rows, inline Corporate Events panel, transactions
// history, and a totals footer.
function SnippetCorporateEventRT() {
  const NCOLS = 11;
  return (
    <div className="card1 overflow-hidden">
      <div className="overflow-x-auto">
        <table className="w-full text-[10.5px]" style={{ tableLayout: "auto" }}>
          <thead>
            <tr className="text-subtlefg border-b border-border1">
              <th className="px-2 py-2"></th>
              <th className="text-left px-2 py-2 text-[9px] uppercase tracking-wider whitespace-nowrap">Status</th>
              <th className="text-left px-2 py-2 text-[9px] uppercase tracking-wider whitespace-nowrap">Strategy</th>
              <th className="text-left px-2 py-2 text-[9px] uppercase tracking-wider whitespace-nowrap">Symbol</th>
              <th className="text-right px-2 py-2 text-[9px] uppercase tracking-wider whitespace-nowrap">Shares</th>
              <th className="text-left px-2 py-2 text-[9px] uppercase tracking-wider whitespace-nowrap">Date In</th>
              <th className="text-right px-2 py-2 text-[9px] uppercase tracking-wider whitespace-nowrap">Entry</th>
              <th className="text-left px-2 py-2 text-[9px] uppercase tracking-wider whitespace-nowrap">Date Out</th>
              <th className="text-right px-2 py-2 text-[9px] uppercase tracking-wider whitespace-nowrap">Exit</th>
              <th className="text-right px-2 py-2 text-[9px] uppercase tracking-wider whitespace-nowrap">P&L %</th>
              <th className="text-right px-2 py-2 text-[9px] uppercase tracking-wider whitespace-nowrap">Net P&L</th>
            </tr>
          </thead>
          <tbody>
            {/* Round-trip — Momentum_Tech, Win, expanded */}
            <tr className="bg-card2/30">
              <td className="px-2 py-1.5 whitespace-nowrap">
                <span className="inline-flex items-center gap-1.5 text-mutedfg">
                  <button title="Toggle details" className="hover:text-fg" aria-label="Toggle details">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M2 14s3.5 4 10 4 10-4 10-4"/><path d="M6 12l-2-2M18 12l2-2M9 14l-1 2M15 14l1 2"/></svg>
                  </button>
                  <button title="Edit" className="hover:text-fg" aria-label="Edit">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
                  </button>
                  <button title="Delete" className="hover:text-negative" aria-label="Delete">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"/></svg>
                  </button>
                </span>
              </td>
              <td className="px-2 py-1.5 whitespace-nowrap"><span className="inline-flex items-center rounded-full border bg-positive/15 text-positive border-positive/30 px-2 py-0.5 text-[9px] font-semibold leading-none whitespace-nowrap">↗ Win</span></td>
              <td className="px-2 py-1.5 whitespace-nowrap"><span className="inline-flex items-center gap-1.5"><span className="h-1.5 w-1.5 rounded-full" style={{ background: "hsl(145 60% 50%)" }} /><span className="text-fg">Momentum_Tech</span></span></td>
              <td className="px-2 py-1.5 font-mono font-semibold whitespace-nowrap">CTAS</td>
              <td className="px-2 py-1.5 text-right font-mono whitespace-nowrap">
                <span className="inline-flex items-center gap-1">
                  <span className="rounded bg-card2 border border-border1 px-1 text-mutedfg">18</span>
                  <span className="text-primary">→</span>
                  <span className="rounded bg-primary/20 border border-primary/30 px-1 text-primary font-semibold">72</span>
                </span>
              </td>
              <td className="px-2 py-1.5 font-mono text-mutedfg whitespace-nowrap">Sep 03, 2024</td>
              <td className="px-2 py-1.5 text-right font-mono whitespace-nowrap">$201.28</td>
              <td className="px-2 py-1.5 font-mono text-mutedfg whitespace-nowrap">Oct 01, 2024</td>
              <td className="px-2 py-1.5 text-right font-mono whitespace-nowrap">$205.19</td>
              <td className="px-2 py-1.5 text-right font-mono text-positive whitespace-nowrap">+1.93%</td>
              <td className="px-2 py-1.5 text-right font-mono font-semibold text-positive whitespace-nowrap">+$279.09</td>
            </tr>
            {/* Expanded detail row for the Momentum_Tech round-trip */}
            <tr className="border-t border-border2">
              <td colSpan={NCOLS} className="p-0">
                {/* Corporate Events inline panel */}
                <div className="bg-card2/20">
                  <div className="px-4 py-2 flex items-center justify-between">
                    <div className="inline-flex items-center gap-1.5 text-primary text-[10.5px] font-semibold">
                      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M16 3h5v5M21 3l-7 7M8 21H3v-5M3 21l7-7M16 21h5v-5M21 21l-7-7M8 3H3v5M3 3l7 7"/></svg>
                      Corporate Events
                    </div>
                    <span className="rounded bg-primary/15 text-primary border border-primary/30 px-2 py-0.5 text-[9.5px] font-mono">Forward split 4:1</span>
                  </div>
                  <table className="w-full text-[10px]">
                    <thead>
                      <tr className="text-subtlefg">
                        <th className="text-left px-4 py-1 text-[9px] uppercase tracking-wider font-semibold">Date</th>
                        <th className="text-left px-2 py-1 text-[9px] uppercase tracking-wider font-semibold">Symbol</th>
                        <th className="text-left px-2 py-1 text-[9px] uppercase tracking-wider font-semibold">Type</th>
                        <th className="text-left px-2 py-1 text-[9px] uppercase tracking-wider font-semibold">Ratio</th>
                        <th className="text-right px-2 py-1 text-[9px] uppercase tracking-wider font-semibold">Qty</th>
                        <th className="text-left px-2 py-1 text-[9px] uppercase tracking-wider font-semibold">Description</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr className="border-t border-border2">
                        <td className="px-4 py-1.5 font-mono text-mutedfg">Sep 11, 2024</td>
                        <td className="px-2 py-1.5 font-mono font-semibold">CTAS</td>
                        <td className="px-2 py-1.5"><span className="rounded bg-primary/15 text-primary border border-primary/30 px-1.5 py-0.5 text-[9px] font-mono">Split</span></td>
                        <td className="px-2 py-1.5 font-mono text-fg">4:1</td>
                        <td className="px-2 py-1.5 font-mono text-right text-positive">+54</td>
                        <td className="px-2 py-1.5 font-mono text-mutedfg text-[9.5px]">CTAS(US1729081059) SPLIT 4 FOR 1 (CINTAS CORP)</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                {/* Transactions History panel */}
                <div className="border-t border-border1 bg-card2/10">
                  <div className="px-4 py-2 inline-flex items-center gap-1.5 text-mutedfg text-[10.5px] font-semibold">
                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 10h18M9 16h6"/></svg>
                    Transactions History
                  </div>
                  <table className="w-full text-[10px]">
                    <thead>
                      <tr className="text-subtlefg">
                        <th className="text-left px-4 py-1 text-[9px] uppercase tracking-wider font-semibold">Symbol</th>
                        <th className="text-left px-2 py-1 text-[9px] uppercase tracking-wider font-semibold">Date</th>
                        <th className="text-left px-2 py-1 text-[9px] uppercase tracking-wider font-semibold">Broker Order ID</th>
                        <th className="text-left px-2 py-1 text-[9px] uppercase tracking-wider font-semibold">Action</th>
                        <th className="text-right px-2 py-1 text-[9px] uppercase tracking-wider font-semibold">Shares</th>
                        <th className="text-right px-2 py-1 text-[9px] uppercase tracking-wider font-semibold">Price</th>
                        <th className="text-right px-2 py-1 text-[9px] uppercase tracking-wider font-semibold">Value</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr className="border-t border-border2">
                        <td className="px-4 py-1.5 font-mono font-semibold">CTAS</td>
                        <td className="px-2 py-1.5 font-mono text-mutedfg">Sep 03, 2024 <span className="text-subtlefg">(09:30)</span></td>
                        <td className="px-2 py-1.5 font-mono text-subtlefg">674179148</td>
                        <td className="px-2 py-1.5 font-mono text-positive">buy</td>
                        <td className="px-2 py-1.5 text-right font-mono">18</td>
                        <td className="px-2 py-1.5 text-right font-mono">$805.12</td>
                        <td className="px-2 py-1.5 text-right font-mono">$14,493.16</td>
                      </tr>
                      <tr className="border-t border-border2">
                        <td className="px-4 py-1.5 font-mono font-semibold">CTAS</td>
                        <td className="px-2 py-1.5 font-mono text-mutedfg">Oct 01, 2024 <span className="text-subtlefg">(09:30)</span></td>
                        <td className="px-2 py-1.5 font-mono text-subtlefg">690371217</td>
                        <td className="px-2 py-1.5 font-mono text-negative">sell</td>
                        <td className="px-2 py-1.5 text-right font-mono">72</td>
                        <td className="px-2 py-1.5 text-right font-mono">$205.19</td>
                        <td className="px-2 py-1.5 text-right font-mono">$14,772.25</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>);

}

// Cross-currency merger + capital displacement stepper — mirrors the real
// Trades detail view: RT row, Corporate Events panel showing the merger,
// 3-step displacement pipeline, and the live forex command preview.
function SnippetCapitalDisplacement() {
  return (
    <div className="card1 overflow-hidden">
      <div className="overflow-x-auto">
        <table className="w-full text-[10.5px]" style={{ tableLayout: "auto" }}>
          <thead>
            <tr className="text-subtlefg border-b border-border1">
              <th className="px-2 py-2"></th>
              <th className="text-left px-2 py-2 text-[9px] uppercase tracking-wider whitespace-nowrap">Status</th>
              <th className="text-left px-2 py-2 text-[9px] uppercase tracking-wider whitespace-nowrap">Date In</th>
              <th className="text-left px-2 py-2 text-[9px] uppercase tracking-wider whitespace-nowrap">Symbol</th>
              <th className="text-left px-2 py-2 text-[9px] uppercase tracking-wider whitespace-nowrap">Side</th>
              <th className="text-right px-2 py-2 text-[9px] uppercase tracking-wider whitespace-nowrap">Shares</th>
              <th className="text-right px-2 py-2 text-[9px] uppercase tracking-wider whitespace-nowrap">Entry</th>
              <th className="text-left px-2 py-2 text-[9px] uppercase tracking-wider whitespace-nowrap">Date Out</th>
              <th className="text-right px-2 py-2 text-[9px] uppercase tracking-wider whitespace-nowrap">Exit</th>
              <th className="text-right px-2 py-2 text-[9px] uppercase tracking-wider whitespace-nowrap">P&L %</th>
              <th className="text-right px-2 py-2 text-[9px] uppercase tracking-wider whitespace-nowrap">Net P&L</th>
            </tr>
          </thead>
          <tbody>
            <tr className="bg-card2/30">
              <td className="px-2 py-1.5 whitespace-nowrap">
                <span className="inline-flex items-center gap-1.5 text-mutedfg">
                  <button title="Toggle details" className="hover:text-fg" aria-label="Toggle details">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M2 14s3.5 4 10 4 10-4 10-4"/><path d="M6 12l-2-2M18 12l2-2M9 14l-1 2M15 14l1 2"/></svg>
                  </button>
                  <button title="Edit" className="hover:text-fg" aria-label="Edit">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
                  </button>
                  <button title="Delete" className="hover:text-negative" aria-label="Delete">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg>
                  </button>
                </span>
              </td>
              <td className="px-2 py-1.5 whitespace-nowrap"><span className="inline-flex items-center rounded-full border bg-positive/15 text-positive border-positive/30 px-2 py-0.5 text-[9px] font-semibold leading-none">↗ Win</span></td>
              <td className="px-2 py-1.5 font-mono text-mutedfg whitespace-nowrap">Oct 01, 2024</td>
              <td className="px-2 py-1.5 whitespace-nowrap">
                <div className="flex items-center gap-1">
                  <span className="font-mono font-semibold">PRMB</span>
                  <span className="rounded bg-primary/15 text-primary border border-primary/30 px-1 py-0.5 text-[8.5px] font-mono">Merger</span>
                </div>
                <div className="text-[9px] text-subtlefg font-mono">↳ PRMW</div>
              </td>
              <td className="px-2 py-1.5 whitespace-nowrap"><span className="text-positive font-semibold text-[9.5px]">LONG</span></td>
              <td className="px-2 py-1.5 text-right font-mono whitespace-nowrap">310</td>
              <td className="px-2 py-1.5 text-right font-mono whitespace-nowrap">CA$34.21 <span className="text-subtlefg text-[8.5px]">CAD</span></td>
              <td className="px-2 py-1.5 font-mono text-mutedfg whitespace-nowrap">Nov 15, 2024</td>
              <td className="px-2 py-1.5 text-right font-mono whitespace-nowrap">$27.98 <span className="text-subtlefg text-[8.5px]">USD</span></td>
              <td className="px-2 py-1.5 text-right font-mono text-positive whitespace-nowrap">+10.27%</td>
              <td className="px-2 py-1.5 text-right font-mono font-semibold text-positive whitespace-nowrap">CA$1,089.47 <span className="text-subtlefg text-[8.5px]">CAD</span></td>
            </tr>
            <tr>
              <td colSpan={11} className="p-0">
                {/* Corporate Events — cross-border merger */}
                <div className="bg-card2/20 border-t border-border1">
                  <div className="px-4 py-2 flex items-center justify-between">
                    <div className="inline-flex items-center gap-1.5 text-primary text-[10.5px] font-semibold">
                      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M16 3h5v5M21 3l-7 7M8 21H3v-5M3 21l7-7M16 21h5v-5M21 21l-7-7M8 3H3v5M3 3l7 7"/></svg>
                      Corporate Events
                    </div>
                    <span className="rounded bg-primary/15 text-primary border border-primary/30 px-2 py-0.5 text-[9.5px] font-mono">Cross-border merger</span>
                  </div>
                  <table className="w-full text-[10px]">
                    <thead>
                      <tr className="text-subtlefg">
                        <th className="text-left px-4 py-1 text-[9px] uppercase tracking-wider font-semibold">Date</th>
                        <th className="text-left px-2 py-1 text-[9px] uppercase tracking-wider font-semibold">Symbol</th>
                        <th className="text-left px-2 py-1 text-[9px] uppercase tracking-wider font-semibold">Type</th>
                        <th className="text-right px-2 py-1 text-[9px] uppercase tracking-wider font-semibold">Qty</th>
                        <th className="text-left px-2 py-1 text-[9px] uppercase tracking-wider font-semibold">Description</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr className="border-t border-border2">
                        <td className="px-4 py-1.5 font-mono text-mutedfg whitespace-nowrap">Nov 13, 2024</td>
                        <td className="px-2 py-1.5 font-mono whitespace-nowrap"><span className="font-semibold">PRMW</span> <span className="text-primary">→</span> <span className="font-semibold">PRMB</span></td>
                        <td className="px-2 py-1.5"><span className="rounded bg-primary/15 text-primary border border-primary/30 px-1.5 py-0.5 text-[9px] font-mono">Merger</span></td>
                        <td className="px-2 py-1.5 font-mono text-right text-positive">+310</td>
                        <td className="px-2 py-1.5 font-mono text-mutedfg text-[9.5px]">PRMW MERGED (Acquisition) WITH PRMB 1 FOR 1 (PRIMO BRANDS CORP-A)</td>
                      </tr>
                      <tr className="border-t border-border2">
                        <td className="px-4 py-1.5 font-mono text-mutedfg whitespace-nowrap">Nov 13, 2024</td>
                        <td className="px-2 py-1.5 font-mono font-semibold whitespace-nowrap">PRMW</td>
                        <td className="px-2 py-1.5"><span className="rounded bg-primary/15 text-primary border border-primary/30 px-1.5 py-0.5 text-[9px] font-mono">Merger</span></td>
                        <td className="px-2 py-1.5 font-mono text-right text-negative">−310</td>
                        <td className="px-2 py-1.5 font-mono text-mutedfg text-[9.5px]">PRMW MERGED (Acquisition) WITH PRMB 1 FOR 1 (PRIMO WATER CORP)</td>
                      </tr>
                    </tbody>
                  </table>
                </div>

                {/* Capital Displacement — 3-step pipeline */}
                <div className="border-t border-warn/40 bg-warn/5">
                  <div className="px-4 py-2 flex items-center justify-between flex-wrap gap-2">
                    <div className="inline-flex items-center gap-1.5 text-warn text-[10.5px] font-semibold">
                      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17 1l4 4-4 4"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><path d="M7 23l-4-4 4-4"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                      Capital displacement
                    </div>
                    <span className="text-warn text-[10px] font-mono">Step 3 of 3 · $8,671.94 awaiting rebalance</span>
                  </div>

                  {/* Pipeline */}
                  <div className="px-6 py-4 flex items-center gap-2">
                    <div className="flex flex-col items-center text-center gap-1 shrink-0" style={{ minWidth: 110 }}>
                      <div className="rounded-full bg-positive/20 border-2 border-positive flex items-center justify-center" style={{ width: 28, height: 28 }}>
                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="hsl(var(--positive))" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                      </div>
                      <div className="font-semibold text-[10px]">Detected</div>
                      <div className="text-subtlefg text-[9px] font-mono">CAD → USD</div>
                    </div>
                    <div className="flex-1 relative">
                      <div className="border-t border-dashed border-border1"></div>
                      <div className="absolute inset-x-0 -top-3 text-center font-mono text-positive text-[9.5px]">+8,671.94 USD</div>
                    </div>
                    <div className="flex flex-col items-center text-center gap-1 shrink-0" style={{ minWidth: 130 }}>
                      <div className="rounded-full bg-positive/20 border-2 border-positive flex items-center justify-center" style={{ width: 28, height: 28 }}>
                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="hsl(var(--positive))" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                      </div>
                      <div className="font-semibold text-[10px]">Execute forex</div>
                      <div className="text-subtlefg text-[9px] font-mono">SELL USD.CAD on IBKR</div>
                    </div>
                    <div className="flex-1 relative">
                      <div className="border-t border-dashed border-border1"></div>
                      <div className="absolute inset-x-0 -top-3 text-center font-mono text-positive text-[9.5px]">+11,917.84 CAD @ 1.3743</div>
                    </div>
                    <div className="flex flex-col items-center text-center gap-1 shrink-0" style={{ minWidth: 140 }}>
                      <div className="rounded-full bg-warn/20 border-2 border-warn flex items-center justify-center text-warn font-bold text-[12px]" style={{ width: 28, height: 28 }}>3</div>
                      <div className="font-semibold text-[10px]">Add Capital Allocation</div>
                      <div className="text-subtlefg text-[9px] font-mono">→ Momentum_LargeCap</div>
                    </div>
                  </div>

                  {/* Forex command preview */}
                  <div className="px-4 pb-3">
                    <div className="text-[9.5px] uppercase tracking-wider text-subtlefg mb-1">Step 2 · Execute forex <span className="text-positive">✓ Done</span></div>
                    <div className="rounded-md bg-card2/40 border border-border1 px-3 py-2 font-mono text-[10.5px] overflow-x-auto whitespace-nowrap">
                      <span className="text-negative font-semibold">SELL</span> <span className="text-fg">USD.CAD</span> <span className="text-subtlefg">×</span> <span className="text-fg">8,671.94 USD</span> <span className="text-subtlefg">=</span> <span className="text-fg">11,917.84 CAD</span> <span className="text-subtlefg">(estimated rate 1.3743)</span>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>);

}

// V2 Features component — same as Features but Feature 03 uses the carousel.
function FeaturesV2() {
  return (
    <Section id="features"
    eyebrow="What you can do"
    title="Nine things your spreadsheet can't."
    sub="Each block is a real surface in the app: same UI, same data shape, same density.">

      <div>
        <FeatureBlock idx={1}
        title="Unified trade history across every source"
        desc="Import from IBKR Flex Query, sync from OrderClerk, drop in CSV, or enter manually. Every trade lands in one ledger, tagged with its strategy, ready to analyze."
        snippet={<SnippetHistoryTable />} />
        <FeatureBlock idx={2}
        title="Round-trip matching, reconciled to the broker"
        desc="When a CSV row doesn't line up with a broker fill, you don't lose it: you see exactly what's missing. The matching report diagnoses the mismatch, suggests the closest broker round-trip, and lets you link, rebuild, search by symbol, or ignore. Nothing is silently overwritten."
        snippet={<SnippetMatchingReport />}
        snippetSide="left" />
        <FeatureBlock idx={3}
        title="Strategy-level performance, not account-level guesswork"
        desc="Five views of the same underlying data: Strategy Evolution, full metric breakdown, drawdowns, correlation, and yearly P&L. Click through the carousel to see how each strategy is actually performing."
        snippet={<SnippetPerformanceCarousel />} />
        <FeatureBlock idx={4}
        title="Capital allocation that respects every movement"
        desc="Track every dollar allocated across portfolios, strategies, and currencies. Allocated capital, accrued interest, remaining interest, and net capital: all reconciled, all per-strategy, all editable. USD, CAD, AUD totals reconciled separately."
        snippet={<SnippetCapitalAllocation />}
        snippetSide="left" />
        <FeatureBlock idx={5}
        title="From RealTest signal to live order, end to end"
        desc="RealTest generates daily orders tagged by strategy. DashFolio shows them on a unified agenda grouped by date and strategy, with strategy value, available cash, projected cash after, and net buys+sells per block. OrderClerk routes execution to IBKR; our DashFolioSync Agent syncs fills back, so every IBKR trade is matched to its originating strategy automatically."
        snippet={<SnippetUpcomingOrdersV2 />} />
        <FeatureBlock idx={6}
        title="Dividends and interest, attributed to strategies"
        desc="On pay date, every dividend and payment-in-lieu credits the strategy that was holding the shares. Broker interest split across strategies via your capital allocation. Everything captured from IBKR in a single sync, no delay, no chasing lines."
        snippet={<SnippetIncomeCarousel />}
        snippetSide="left" />
        <div className="reveal py-12 lg:py-16 border-b border-border1" style={{ borderWidth: "0px" }}>
          <div className="text-center mb-8 max-w-3xl mx-auto">
            <div className="text-[12.5px] font-mono text-primary mb-2 tracking-wider">FEATURE · 07</div>
            <h3 className="text-2xl md:text-[28px] font-semibold tracking-tight leading-[1.15]">Corporate actions stitched into every round-trip</h3>
            <p className="mt-3 text-[15px] text-mutedfg leading-relaxed">
              Splits, spinoffs, mergers, delistings: every corporate action is auto-stitched into the round-trip it touches. Quantities stay split-adjusted, raw IBKR figures preserved, the full story in one expandable view.
            </p>
          </div>
          <SnippetCorporateEventRT />
        </div>
        <div className="reveal py-12 lg:py-16 border-b border-border1" style={{ borderWidth: "0px" }}>
          <div className="text-center mb-8 max-w-3xl mx-auto">
            <div className="text-[12.5px] font-mono text-primary mb-2 tracking-wider">FEATURE · 08</div>
            <h3 className="text-2xl md:text-[28px] font-semibold tracking-tight leading-[1.15]">Cross-currency mergers, untangled</h3>
            <p className="mt-3 text-[15px] text-mutedfg leading-relaxed">
              A position exits in a different currency than it entered? We flag the displacement, hand you the exact forex order, and re-anchor the converted cash to your strategy, in three steps, end to end.
            </p>
          </div>
          <SnippetCapitalDisplacement />
        </div>
        <div className="reveal pt-12 lg:pt-16 pb-6 lg:pb-8 border-b border-border1" style={{ borderWidth: "0px" }}>
          <div className="text-center mb-8 max-w-3xl mx-auto">
            <div className="text-[12.5px] font-mono text-primary mb-2 tracking-wider">FEATURE · 09</div>
            <h3 className="text-2xl md:text-[28px] font-semibold tracking-tight leading-[1.15]">Open positions, always reconciled</h3>
            <p className="mt-3 text-[15px] text-mutedfg leading-relaxed">
              One view. Every position live. Mark-to-market pricing in real time, each currency reconciled separately: the complete state of your portfolio, the moment you need it.
            </p>
          </div>
          <SnippetOpenPositionsV2 />
        </div>
      </div>
    </Section>);

}

Object.assign(window, { SnippetPerformanceCarousel, StrategyEvolutionChart, FeaturesV2, StrategyRankingTable, ReturnOnCapitalTable, SnippetMatchingReport, SnippetCapitalAllocation, SnippetUpcomingOrdersV2, SnippetIncomeCarousel, DividendsSlide, InterestsSlide, SnippetOpenPositionsV2, SnippetCorporateEventRT, SnippetCapitalDisplacement });