// === V2 — Product Tour ===
// Four product-screen mocks adapted directly from the real app screenshots:
//   1. Strategy Ranking + Return on Capital (Performance > By Strategy)
//   2. Auto-Sync brokerage connections (Add Trades > Auto-Sync)
//   3. Corporate Events tracking (unique product feature)
//   4. Yearly Performance Breakdown + Win/Loss Distribution
//
// Presented as a stack of feature blocks under a single section heading,
// each with copy on one side and a faithful product mock on the other.

// =================== MOCK 1: Strategy Ranking + Return on Capital ===================
const TOUR_STRATS = [
{ name: "Momentum_Tech", color: "195 60% 65%", pnlK: "+$149.9K", roc: 285.4, rocYr: 47.8, capital: "$52.5K", since: "Jun 2020", rank30d: { dir: "none" } },
{ name: "Unassigned", color: "220 10% 65%", pnlK: "+$51.0K", roc: null, rank30d: { dir: "none" } },
{ name: "Trend_TSX", color: "40 35% 60%", pnlK: "+C$59.6K", tag: "CAD", roc: 109.3, rocYr: 63.2, capital: "C$54.6K", since: "Aug 2024", rank30d: { dir: "none" } },
{ name: "Momentum_SmallCap", color: "75 45% 60%", pnlK: "+$38.2K", roc: 98.6, rocYr: 17.9, capital: "$38.8K", since: "Nov 2020", rank30d: { dir: "none" } },
{ name: "Momentum_LargeCap", color: "280 25% 65%", pnlK: "+C$46.4K", tag: "CAD", roc: 92.5, rocYr: 41.9, capital: "C$50.2K", since: "Mar 2024", rank30d: { dir: "none" } },
{ name: "MeanRev_SP500", color: "15 50% 65%", pnlK: "+$17.5K", roc: 32.4, rocYr: 11.2, capital: "$54.0K", since: "Jun 2023", rank30d: { dir: "none" } },
{ name: "Rotation_ETF", color: "180 35% 60%", pnlK: "+$5.8K", roc: 19.3, rocYr: 4.4, capital: "$30.0K", since: "Jan 2022", rank30d: { dir: "none" } },
{ name: "Bob Strategy", color: "180 35% 50%", pnlK: "+$4.7K", roc: null, rank30d: { dir: "up", was: "#9" } },
{ name: "Trend_SP500", color: "262 50% 70%", pnlK: "+$2.6K", roc: 6.2, rocYr: 3.6, capital: "$42.6K", since: "Aug 2024", rank30d: { dir: "up", was: "#10" } },
{ name: "Adaptive_Growth", color: "240 5% 50%", pnlK: "-$687", roc: -1.4, rocYr: -1.4, capital: "$50.0K", since: "Jan 2026", rank30d: { dir: "down", was: "#8" }, neg: true, rocAsterisk: true },
{ name: "Momentum_ASX", color: "0 70% 60%", pnlK: "-AUD 12.2K", tag: "AUD", roc: -26.8, rocYr: -5.3, capital: "AUD 45.4K", since: "May 2021", rank30d: { dir: "none" }, neg: true }];


function ColorDot({ hsl }) {
  return <span className="inline-block h-2 w-2 rounded-full" style={{ background: `hsl(${hsl})` }} />;
}

function RankChange({ d }) {
  if (d.dir === "up") return <span className="text-positive inline-flex items-center gap-0.5"><IcoArrowUp size={9} />{" "}1 <span className="text-subtlefg ml-1">was {d.was}</span></span>;
  if (d.dir === "down") return <span className="text-negative inline-flex items-center gap-0.5"><IcoArrowDown size={9} />{" "}{d.was === "#10" ? "1" : "2"} <span className="text-subtlefg ml-1">was {d.was}</span></span>;
  return <span className="text-subtlefg">— no change</span>;
}

function StrategyRankingMock() {
  return (
    <div className="grid grid-cols-1 gap-3">
      {/* Return on Capital */}
      <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 whitespace-nowrap">ROC %</th>
              <th className="text-right text-[9px] uppercase tracking-wider pb-1.5 whitespace-nowrap">ROC / yr</th>
              <th className="text-right text-[9px] uppercase tracking-wider pb-1.5 whitespace-nowrap">P&L / Capital</th>
              <th className="text-right text-[9px] uppercase tracking-wider pb-1.5 whitespace-nowrap">Since</th>
            </tr>
          </thead>
          <tbody>
            {TOUR_STRATS.filter((s) => s.roc != null).map((s) => {
              const isNeg = s.roc < 0;
              const barW = Math.min(100, Math.abs(s.roc) / 3);
              return (
                <tr key={s.name} className="border-t border-border2">
                  <td className="py-1.5">
                    <span className="inline-flex items-center gap-2">
                      <ColorDot hsl={s.color} />
                      <span className="text-fg">{s.name}</span>
                      {s.tag && <span className="rounded px-1 py-px text-[8.5px] font-mono bg-card2 border border-border1 text-subtlefg">{s.tag}</span>}
                    </span>
                  </td>
                  <td className="py-1.5">
                    <div className="flex items-center gap-1.5">
                      <div className="relative h-3.5 w-12 rounded bg-card2 overflow-hidden">
                        <div className="absolute inset-y-0 left-0" style={{ width: `${barW}%`, background: `hsl(${s.color} / 0.65)` }} />
                      </div>
                      <span className={`font-mono font-semibold text-[10px] whitespace-nowrap ${isNeg ? "text-negative" : "text-positive"}`}>{s.roc > 0 ? "+" : ""}{s.roc.toFixed(1)}%</span>
                    </div>
                  </td>
                  <td className={`py-1.5 text-right font-mono whitespace-nowrap ${isNeg ? "text-negative" : "text-positive"}`}>{s.rocYr > 0 ? "+" : ""}{s.rocYr.toFixed(1)}%{s.rocAsterisk ? "*" : ""}<span className="text-subtlefg">/yr</span></td>
                  <td className={`py-1.5 text-right font-mono whitespace-nowrap ${isNeg ? "text-negative" : "text-fg"}`}>{s.pnlK.replace(/^\+/, "")} <span className="text-subtlefg">/ {s.capital}</span></td>
                  <td className="py-1.5 text-right text-subtlefg text-[10px] whitespace-nowrap">{s.since}</td>
                </tr>);

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

}

// =================== MOCK 2: Auto-Sync Brokerages ===================
function AutoSyncMock() {
  const queries = [
  { name: "DashFolio Trades Today", id: "1234567", portfolio: "My portfolio", status: "Success", lastRun: "May 18, 17:42", schedule: "3x daily (10 AM, 1 PM, 5 PM)", active: true },
  { name: "DashFolio Last 365 Days", id: "2345678", portfolio: "My portfolio", status: "Success", lastRun: "May 18, 17:46", schedule: "2x daily (10 AM, 5 PM)", active: true }];

  return (
    <div className="card1 overflow-hidden">
      <div className="p-4 border-b border-border1">
        <div className="flex items-center gap-2">
          <IcoLink size={14} className="text-primary" />
          <span className="text-[11px] font-semibold uppercase tracking-wider">Auto-Sync Connections</span>
          <span className="rounded bg-card2 border border-border1 px-1.5 py-0.5 text-[9.5px] font-mono text-mutedfg">1</span>
        </div>
      </div>
      <div className="p-4 border-b border-border1">
        <div className="flex items-start justify-between mb-3">
          <div>
            <div className="flex items-center gap-2">
              <span className="inline-flex items-center justify-center h-6 w-6 rounded bg-card2 border border-border1">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><rect x="3" y="9" width="18" height="11" /><path d="M3 9 12 3 21 9" /><path d="M7 13v4M12 13v4M17 13v4" /></svg>
              </span>
              <span className="text-[13px] font-semibold">Interactive Brokers</span>
              <span className="inline-flex items-center gap-1 rounded-md bg-primary/15 text-primary border border-primary/30 px-1.5 py-0.5 text-[9.5px] font-mono font-semibold">
                <span className="h-1.5 w-1.5 rounded-full bg-primary"></span> Active
              </span>
            </div>
            <div className="mt-1 text-[10.5px] text-subtlefg">Base currency: USD · Token Expire Date: Mar 31, 2027</div>
          </div>
          <div className="flex items-center gap-1">
            <button className="rounded-md bg-card2 border border-border1 px-2 py-1 text-[10px] hover:bg-card flex items-center gap-1"><IcoRepeat size={10} /> Import All</button>
            <button className="rounded-md bg-card2 border border-border1 p-1.5 hover:bg-card"><IcoSettings size={10} /></button>
          </div>
        </div>

        {/* Flex Web Service Config */}
        <div className="rounded-md bg-card2/70 border border-border2 p-3">
          <div className="flex items-center gap-1.5 mb-2.5">
            <IcoLock size={11} className="text-primary" />
            <span className="text-[11px] font-semibold">Configure <span className="text-primary">Flex Web Service</span></span>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <div className="text-[10px] text-subtlefg mb-1">Current Token</div>
              <div className="flex items-center gap-1.5">
                <span className="font-mono text-[10px] tracking-widest text-mutedfg">••••••••••••••••</span>
                <button className="text-[10px] inline-flex items-center gap-1 rounded bg-card2 border border-border1 px-1.5 py-0.5 hover:bg-card"><IcoFile size={9} /> Edit</button>
              </div>
            </div>
            <div>
              <div className="text-[10px] text-subtlefg mb-1">Token Expiry</div>
              <div className="flex items-center gap-1.5">
                <IcoCalendar size={11} className="text-subtlefg" />
                <span className="text-[10.5px]">Expires: <span className="text-fg font-medium">Mar 31, 2027</span></span>
                <button className="text-[10px] inline-flex items-center gap-1 rounded bg-card2 border border-border1 px-1.5 py-0.5 hover:bg-card"><IcoFile size={9} /> Edit</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Flex Queries */}
      <div className="p-4">
        <div className="flex items-start justify-between mb-3">
          <div>
            <div className="text-[12px] font-semibold">Flex Queries</div>
            <div className="text-[10px] text-subtlefg mt-0.5">Manage your Flex Query IDs to import trades from Interactive Brokers.</div>
          </div>
          <button className="btn-primary inline-flex items-center gap-1 rounded-md px-2 py-1 text-[10px] font-medium"><IcoPlus size={10} /> Add Query</button>
        </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">Query Name</th>
              <th className="text-left text-[9px] uppercase tracking-wider pb-1.5">Query ID</th>
              <th className="text-left text-[9px] uppercase tracking-wider pb-1.5">Portfolio</th>
              <th className="text-left text-[9px] uppercase tracking-wider pb-1.5">Status</th>
              <th className="text-left text-[9px] uppercase tracking-wider pb-1.5">Last Run</th>
              <th className="text-left text-[9px] uppercase tracking-wider pb-1.5">Schedule</th>
              <th className="text-center text-[9px] uppercase tracking-wider pb-1.5">Active</th>
            </tr>
          </thead>
          <tbody>
            {queries.map((q) =>
            <tr key={q.id} className="border-t border-border2">
                <td className="py-2 font-medium">{q.name}</td>
                <td className="py-2 font-mono text-mutedfg">{q.id}</td>
                <td className="py-2 text-mutedfg">{q.portfolio}</td>
                <td className="py-2"><span className="inline-flex items-center gap-1 rounded-md bg-positive/15 text-positive border border-positive/30 px-1.5 py-0.5 text-[9.5px] font-mono font-semibold"><IcoCheck size={9} /> {q.status}</span></td>
                <td className="py-2 font-mono text-mutedfg">{q.lastRun}</td>
                <td className="py-2 font-mono text-mutedfg">{q.schedule}</td>
                <td className="py-2 text-center"><div className="inline-block w-7 h-3.5 rounded-full bg-primary relative"><span className="absolute right-0.5 top-0.5 h-2.5 w-2.5 rounded-full bg-white"></span></div></td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>);

}

// =================== MOCK 3: Corporate Events ===================
function CorpEventsMock() {
  const events = [
  { date: "Mar 23, 2026", sym: "CDE", to: "NGD", type: "Merger", typeTone: "primary", qty: 454.24, ccy: "CAD", desc: "MERGED(Acquisition) WITH US1921085049…" },
  { date: "Mar 23, 2026", sym: "NGD", to: "CDE", type: "Merger", typeTone: "primary", qty: -916, ccy: "CAD", desc: "MERGED(Acquisition) WITH US1921085049…" },
  { date: "Sep 11, 2025", sym: "DPM", to: "DPM.OLD", type: "Rename", typeTone: "info", qty: 259, ccy: "CAD", desc: "DPM CUSIP/ISIN CHANGE TO CA26139R1091" },
  { date: "Sep 11, 2025", sym: "DPM.OLD", to: "DPM", type: "Rename", typeTone: "info", qty: -259, ccy: "CAD", desc: "DPM CUSIP/ISIN CHANGE TO CA26139R1091" },
  { date: "Jun 19, 2025", sym: "OGC.OLD", to: "OGC", type: "Rev. Split", typeTone: "warn", qty: -871, ccy: "CAD", desc: "SPLIT 1 FOR 3 (OGC, OCEANAGOLD CORP)" },
  { date: "Jun 19, 2025", sym: "OGC", to: "OGC.OLD", type: "Rev. Split", typeTone: "warn", qty: 290.33, ccy: "CAD", desc: "SPLIT 1 FOR 3 (OGC.OLD, OCEANAGOLD CORP)" }];

  const toneClass = {
    primary: "bg-primary/15 text-primary border-primary/30",
    info: "bg-[hsl(210_90%_62%/.15)] text-[hsl(210_90%_70%)] border-[hsl(210_90%_62%/.3)]",
    warn: "bg-warn/15 text-warn border-warn/30"
  };
  return (
    <div className="card1 overflow-hidden">
      <div className="p-4 border-b border-border1 flex items-center justify-between flex-wrap gap-3">
        <div>
          <div className="flex items-center gap-2">
            <span className="text-[12px] font-semibold">Corporate Events</span>
          </div>
          <div className="text-[10.5px] text-subtlefg mt-0.5">Track ticker renames, mergers, splits, spinoffs, and other corporate events.</div>
        </div>
        <div className="grid grid-cols-3 gap-2 text-[10px]">
          {[
          { label: "Total Actions", value: "30" },
          { label: "Symbols Affected", value: "23" },
          { label: "Symbol Aliases", value: "12" }].
          map((s) =>
          <div key={s.label} className="rounded-md bg-card2/70 border border-border2 px-2.5 py-1.5 text-center min-w-[80px]">
              <div className="text-[9px] uppercase tracking-wider text-subtlefg">{s.label}</div>
              <div className="font-mono text-[14px] font-bold mt-0.5">{s.value}</div>
            </div>
          )}
        </div>
      </div>
      <table className="w-full text-[10.5px]">
        <thead>
          <tr className="text-subtlefg">
            <th className="text-left text-[9px] uppercase tracking-wider px-4 py-2">Date</th>
            <th className="text-left text-[9px] uppercase tracking-wider px-3 py-2">Symbol</th>
            <th className="text-left text-[9px] uppercase tracking-wider px-3 py-2">Changed To</th>
            <th className="text-left text-[9px] uppercase tracking-wider px-3 py-2">Type</th>
            <th className="text-right text-[9px] uppercase tracking-wider px-3 py-2">Quantity</th>
            <th className="text-left text-[9px] uppercase tracking-wider px-3 py-2">Currency</th>
            <th className="text-left text-[9px] uppercase tracking-wider px-3 py-2">Description</th>
          </tr>
        </thead>
        <tbody>
          {events.map((e, i) =>
          <tr key={i} className="border-t border-border2 hover:bg-card2/40">
              <td className="px-4 py-2 font-mono text-mutedfg">{e.date}</td>
              <td className="px-3 py-2 font-mono font-semibold">{e.sym}</td>
              <td className="px-3 py-2 font-mono text-mutedfg">{e.to}</td>
              <td className="px-3 py-2">
                <span className={`inline-block rounded px-1.5 py-0.5 text-[9px] font-mono font-semibold border ${toneClass[e.typeTone]}`}>{e.type}</span>
              </td>
              <td className={`px-3 py-2 text-right font-mono ${e.qty < 0 ? "text-negative" : "text-positive"}`}>{e.qty > 0 ? e.qty.toLocaleString("en-US", { maximumFractionDigits: 4 }) : e.qty.toLocaleString("en-US")}</td>
              <td className="px-3 py-2 font-mono text-mutedfg">{e.ccy}</td>
              <td className="px-3 py-2 text-mutedfg text-[10px] truncate max-w-[280px]">{e.desc}</td>
            </tr>
          )}
        </tbody>
      </table>
    </div>);

}

// =================== MOCK 4: Yearly Performance Breakdown + Win/Loss Distribution ===================
function YearlyBreakdownMock() {
  const rows = [
  { year: 2026, realized: 148686.73, unrealized: 22132.79, dividends: 806.46, interest: 985.29, total: 172611.27 },
  { year: 2025, realized: 57304.59, unrealized: 52055.47, dividends: 1470.42, interest: 3109.36, total: 113939.84 },
  { year: 2024, realized: 56607.68, unrealized: -148418.03, dividends: 1837.49, interest: 4978.90, total: -84993.96 },
  { year: 2023, realized: 3681.51, unrealized: 165189.01, dividends: 843.95, interest: 4496.63, total: 174211.10 },
  { year: 2022, realized: -19228.64, unrealized: -196277.94, dividends: 587.65, interest: 1756.94, total: -213161.99 },
  { year: 2021, realized: -812.84, unrealized: 185878.12, dividends: 496.67, interest: 2.02, total: 185563.97 },
  { year: 2020, realized: 14079.45, unrealized: 10399.82, dividends: 1.64, interest: 0.42, total: 24481.33 }];

  const totals = rows.reduce((a, r) => ({
    realized: a.realized + r.realized, unrealized: a.unrealized + r.unrealized,
    dividends: a.dividends + r.dividends, interest: a.interest + r.interest, total: a.total + r.total
  }), { realized: 0, unrealized: 0, dividends: 0, interest: 0, total: 0 });
  const fmtMoney = (v) => `${v < 0 ? "-" : ""}$${Math.abs(v).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
  const moneyColor = (v) => v >= 0 ? "text-positive" : "text-negative";

  const dist = [
  { bucket: "< -$5K", n: 5, neg: true },
  { bucket: "-$5K to -$2K", n: 30, neg: true },
  { bucket: "-$2K to -$1K", n: 60, neg: true },
  { bucket: "-$1K to -$500", n: 120, neg: true },
  { bucket: "-$500 to $0", n: 320, neg: true },
  { bucket: "$0 to $500", n: 270, neg: false },
  { bucket: "$500 to $1K", n: 95, neg: false },
  { bucket: "$1K to $2K", n: 85, neg: false },
  { bucket: "$2K to $5K", n: 80, neg: false },
  { bucket: "> $5K", n: 20, neg: false }];

  const maxN = Math.max(...dist.map((d) => d.n));

  return (
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-3">
      {/* Yearly table */}
      <div className="lg:col-span-2 card1 p-4">
        <div className="flex items-center gap-2 mb-3">
          <span className="text-[11px] font-semibold uppercase tracking-wider">Yearly Performance</span>
          <span className="text-[10px] uppercase tracking-wider text-subtlefg">(combined)</span>
        </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">Year</th>
              <th className="text-right text-[9px] uppercase tracking-wider pb-1.5">Realized P&L</th>
              <th className="text-right text-[9px] uppercase tracking-wider pb-1.5">Unrealized P&L</th>
              <th className="text-right text-[9px] uppercase tracking-wider pb-1.5">Dividends</th>
              <th className="text-right text-[9px] uppercase tracking-wider pb-1.5">Interest</th>
              <th className="text-right text-[9px] uppercase tracking-wider pb-1.5">Total Return</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r) =>
            <tr key={r.year} className="border-t border-border2">
                <td className="py-1.5 font-mono text-mutedfg">{r.year}</td>
                <td className={`py-1.5 text-right font-mono ${moneyColor(r.realized)}`}>{fmtMoney(r.realized)}</td>
                <td className={`py-1.5 text-right font-mono ${moneyColor(r.unrealized)}`}>{fmtMoney(r.unrealized)}</td>
                <td className="py-1.5 text-right font-mono text-positive">{fmtMoney(r.dividends)}</td>
                <td className="py-1.5 text-right font-mono text-positive">{fmtMoney(r.interest)}</td>
                <td className={`py-1.5 text-right font-mono font-semibold ${moneyColor(r.total)}`}>{fmtMoney(r.total)}</td>
              </tr>
            )}
          </tbody>
          <tfoot>
            <tr className="border-t border-border1 bg-card2/40">
              <td className="py-2 font-semibold text-[10px] uppercase tracking-wider text-subtlefg">Total (USD)</td>
              <td className={`py-2 text-right font-mono font-bold ${moneyColor(totals.realized)}`}>{fmtMoney(totals.realized)}</td>
              <td className={`py-2 text-right font-mono font-bold ${moneyColor(totals.unrealized)}`}>{fmtMoney(totals.unrealized)}</td>
              <td className="py-2 text-right font-mono font-bold text-positive">{fmtMoney(totals.dividends)}</td>
              <td className="py-2 text-right font-mono font-bold text-positive">{fmtMoney(totals.interest)}</td>
              <td className={`py-2 text-right font-mono font-bold ${moneyColor(totals.total)}`}>{fmtMoney(totals.total)}</td>
            </tr>
          </tfoot>
        </table>
      </div>

      {/* Win/Loss Distribution + stats */}
      <div className="card1 p-4">
        <div className="flex items-center gap-2 mb-3">
          <span className="text-[11px] font-semibold uppercase tracking-wider">Win/Loss Distribution</span>
          <span className="text-[10px] uppercase tracking-wider text-subtlefg">(combined)</span>
        </div>
        {/* histogram */}
        <div className="relative h-[120px] mb-2 flex items-end gap-0.5">
          {dist.map((d, i) =>
          <div key={i} className="flex-1 flex items-end justify-center h-full">
              <div className={`w-full rounded-t ${d.neg ? "bg-negative" : "bg-positive"}`} style={{ height: `${d.n / maxN * 100}%`, opacity: 0.85 }} />
            </div>
          )}
        </div>
        <div className="flex justify-between text-[8px] text-subtlefg font-mono mb-3">
          <span>-$5K</span><span>$0</span><span>$5K+</span>
        </div>
        {/* mini stat grid */}
        <div className="grid grid-cols-2 gap-2 text-[10px]">
          {[
          { label: "Total Trades", value: "1102", tone: "neutral" },
          { label: "Win Rate", value: "50.54%", tone: "positive" },
          { label: "Avg Win", value: "$1,172.06", tone: "positive" },
          { label: "Avg Loss", value: "-$720.21", tone: "negative" },
          { label: "Largest Win", value: "$29,589.49", tone: "positive" },
          { label: "Largest Loss", value: "-$6,050.51", tone: "negative" }].
          map((s) =>
          <div key={s.label} className="rounded-md bg-card2/60 border border-border2 px-2 py-1.5">
              <div className="text-[8.5px] uppercase tracking-wider text-subtlefg">{s.label}</div>
              <div className={`font-mono font-semibold mt-0.5 text-[11px] ${
            s.tone === "positive" ? "text-positive" : s.tone === "negative" ? "text-negative" : "text-fg"}`
            }>{s.value}</div>
            </div>
          )}
        </div>
      </div>
    </div>);

}

// =================== MOCK 5: Strategy Correlation Matrix ===================
const CORR_STRATS = ["Rotation_ETF", "Bob Strategy", "Momentum_ASX", "Momentum_Tech", "Momentum_SmallCap", "Momentum_LargeCap", "MeanRev_SP500", "Unassigned", "Trend_SP500", "Trend_TSX"];
// Pearson values taken from the real screenshot, symmetric
const CORR_MATRIX = [
// Rot    Bob    ASX    Tech   Small  Large  MeanR  Un     SP500  TSX
[1.00, -0.17, 0.01, -0.12, 0.04, -0.05, 0.13, 0.11, -0.11, -0.01],
[-0.17, 1.00, -0.04, 0.15, -0.21, -0.06, 0.03, -0.12, -0.13, -0.07],
[0.01, -0.04, 1.00, -0.05, 0.07, 0.13, 0.05, -0.01, 0.02, 0.11],
[-0.12, 0.15, -0.05, 1.00, 0.18, -0.03, 0.28, 0.27, -0.17, -0.08],
[0.04, -0.21, 0.07, 0.18, 1.00, 0.10, 0.14, 0.13, -0.02, -0.02],
[-0.05, -0.06, 0.13, -0.03, 0.10, 1.00, -0.24, 0.14, 0.17, 0.34],
[0.13, 0.03, 0.05, 0.28, 0.14, -0.24, 1.00, -0.06, -0.13, -0.17],
[0.11, -0.12, -0.01, 0.27, 0.13, 0.14, -0.06, 1.00, 0.13, 0.25],
[-0.11, -0.13, 0.02, -0.17, -0.02, 0.17, -0.13, 0.13, 1.00, 0.87],
[-0.01, -0.07, 0.11, -0.08, -0.02, 0.34, -0.17, 0.25, 0.87, 1.00]];


function corrCellColor(v) {
  if (v >= 0.99) return { bg: "hsl(145 65% 38% / 0.95)", color: "hsl(145 70% 95%)" };
  const intensity = Math.min(1, Math.abs(v));
  const alpha = 0.12 + intensity * 0.6;
  if (v >= 0) return { bg: `hsl(145 65% 38% / ${alpha})`, color: v > 0.4 ? "hsl(145 70% 92%)" : "hsl(0 0% 90%)" };
  return { bg: `hsl(0 70% 42% / ${alpha})`, color: v < -0.4 ? "hsl(0 70% 95%)" : "hsl(0 0% 90%)" };
}

function CorrelationMatrixMock() {
  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 Correlation</span>
        <span className="text-[10px] uppercase tracking-wider text-subtlefg">(combined)</span>
      </div>
      <div className="text-[10.5px] text-subtlefg mb-4">Pearson correlation of monthly P&L between strategies. Strategies with fewer than 6 active months are excluded.</div>

      <div>
        <table className="font-mono text-[9.5px] w-full" style={{ borderSpacing: "2px", borderCollapse: "separate", tableLayout: "fixed" }}>
          <colgroup>
            <col style={{ width: "88px" }} />
            {CORR_STRATS.map((s) => <col key={s} />)}
          </colgroup>
          <thead>
            <tr>
              <th></th>
              {CORR_STRATS.map((s) =>
              <th key={s} className="text-subtlefg font-normal pb-1 px-0.5" style={{ height: 56 }}>
                  <div style={{ transform: "rotate(-35deg)", transformOrigin: "left bottom", whiteSpace: "nowrap", display: "inline-block", marginBottom: 6, fontSize: "9px" }}>
                    {s}
                  </div>
                </th>
              )}
            </tr>
          </thead>
          <tbody>
            {CORR_MATRIX.map((row, ri) =>
            <tr key={ri}>
                <td className="text-right text-subtlefg pr-2 text-[9.5px] truncate" style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{CORR_STRATS[ri]}</td>
                {row.map((v, ci) => {
                const c = corrCellColor(v);
                return (
                  <td key={ci} className="text-center tabular-nums font-semibold"
                  style={{ background: c.bg, color: c.color, padding: "6px 0", borderRadius: "3px" }}>
                      {v.toFixed(2)}
                    </td>);

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

      {/* Legend */}
      <div className="mt-4 flex items-center justify-center gap-3 text-[10px]">
        <span className="text-mutedfg">Diversifies (−1)</span>
        <div className="h-2 w-48 rounded-full" style={{ background: "linear-gradient(90deg, hsl(0 70% 50%), hsl(0 0% 30%), hsl(145 65% 50%))" }} />
        <span className="text-mutedfg">Moves together (+1)</span>
      </div>
    </div>);

}

// =================== MOCK 6: Performance By Strategy (full metrics table) ===================
function PerfByStrategyTableMock() {
  const rows = [
  { name: "Momentum_Tech", color: "210 90% 65%", trades: 107, avgWin: 2895.48, avgLoss: -1177.06, winRate: 49.53, gross: 153460.39, grossL: -63561.17, pf: 2.41, pct: 58.58, divs: 764.00, net: 146218.89 },
  { name: "Trend_TSX", color: "35 92% 58%", trades: 27, avgWin: 2257.92, avgLoss: -584.05, winRate: 59.26, gross: 36126.69, grossL: -6424.51, pf: 5.62, pct: 82.22, divs: 611.28, net: 61559.62 },
  { name: "Unassigned", color: "240 5% 55%", trades: 81, avgWin: 2523.53, avgLoss: -1403.06, winRate: 53.09, gross: 108511.73, grossL: -53316.32, pf: 2.04, pct: 50.87, divs: 0.00, net: 52833.10 },
  { name: "Momentum_SmallCap", color: "145 60% 50%", trades: 183, avgWin: 1694.15, avgLoss: -1030.10, winRate: 45.36, gross: 140614.42, grossL: -103010.35, pf: 1.37, pct: 26.74, divs: 625.85, net: 39075.52 },
  { name: "Momentum_LargeCap", color: "280 70% 65%", trades: 43, avgWin: 1963.95, avgLoss: -826.11, winRate: 53.49, gross: 45170.74, grossL: -16522.17, pf: 2.73, pct: 63.42, divs: 727.62, net: 34200.58 },
  { name: "MeanRev_SP500", color: "20 75% 60%", trades: 525, avgWin: 429.37, avgLoss: -458.72, winRate: 55.24, gross: 124517.94, grossL: -107798.82, pf: 1.16, pct: 13.43, divs: 756.33, net: 17475.45 },
  { name: "Rotation_ETF", color: "180 50% 60%", trades: 14, avgWin: 1799.73, avgLoss: -795.17, winRate: 42.86, gross: 10798.38, grossL: -6361.33, pf: 1.70, pct: 41.09, divs: 643.16, net: 5932.79 },
  { name: "Bob Strategy", color: "180 35% 50%", trades: 10, avgWin: 824.01, avgLoss: -367.84, winRate: 70.00, gross: 5768.06, grossL: -1103.53, pf: 5.23, pct: 80.87, divs: 0.00, net: 4664.53 },
  { name: "Trend_SP500", color: "262 50% 70%", trades: 38, avgWin: 746.38, avgLoss: -526.06, winRate: 36.84, gross: 10449.38, grossL: -12625.46, pf: 0.83, pct: -20.82, divs: 204.12, net: 2834.54 },
  { name: "Adaptive_Growth", color: "240 5% 50%", trades: 2, avgWin: 4118.88, avgLoss: -44.87, winRate: 50.00, gross: 4118.88, grossL: -44.87, pf: 91.80, pct: 98.91, divs: 0.00, net: -735.35, neg: true },
  { name: "Momentum_ASX", color: "0 70% 60%", trades: 72, avgWin: 633.27, avgLoss: -426.44, winRate: 29.17, gross: 13298.72, grossL: -21748.22, pf: 0.61, pct: -63.54, divs: 1514.35, net: -6935.15, neg: true }];

  const totals = rows.reduce((a, r) => ({
    trades: a.trades + r.trades, gross: a.gross + r.gross, grossL: a.grossL + r.grossL,
    divs: a.divs + r.divs, net: a.net + r.net
  }), { trades: 0, gross: 0, grossL: 0, divs: 0, net: 0 });

  const fmt = (v, sign = true) => `${v < 0 ? "-" : sign ? "+" : ""}$${Math.abs(v).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
  const fmtNeg = (v) => v < 0 ? `-$${Math.abs(v).toLocaleString("en-US", { minimumFractionDigits: 2 })}` : `$${v.toLocaleString("en-US", { minimumFractionDigits: 2 })}`;

  return (
    <div className="card1 p-4">
      <div className="flex items-center gap-2 mb-3">
        <span className="text-[11px] font-semibold uppercase tracking-wider">Performance By Strategy</span>
        <span className="text-[10px] uppercase tracking-wider text-subtlefg">(combined)</span>
      </div>
      <div className="overflow-x-auto">
        <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-right text-[9px] uppercase tracking-wider pb-1.5"># Trades</th>
              <th className="text-right text-[9px] uppercase tracking-wider pb-1.5">Avg Win</th>
              <th className="text-right text-[9px] uppercase tracking-wider pb-1.5">Avg Loss</th>
              <th className="text-right text-[9px] uppercase tracking-wider pb-1.5">Win Rate</th>
              <th className="text-right text-[9px] uppercase tracking-wider pb-1.5">Profit Factor</th>
              <th className="text-right text-[9px] uppercase tracking-wider pb-1.5">Profit %</th>
              <th className="text-right text-[9px] uppercase tracking-wider pb-1.5">Dividends</th>
              <th className="text-right text-[9px] uppercase tracking-wider pb-1.5">Net P&L ↑</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r) =>
            <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>
                  </span>
                </td>
                <td className="py-1.5 text-right font-mono text-mutedfg">{r.trades}</td>
                <td className="py-1.5 text-right font-mono text-positive">${r.avgWin.toFixed(2)}</td>
                <td className="py-1.5 text-right font-mono text-negative">-${Math.abs(r.avgLoss).toFixed(2)}</td>
                <td className="py-1.5 text-right font-mono">{r.winRate.toFixed(2)}%</td>
                <td className="py-1.5 text-right font-mono">{r.pf.toFixed(2)}</td>
                <td className={`py-1.5 text-right font-mono ${r.pct < 0 ? "text-negative" : "text-positive"}`}>{r.pct >= 0 ? "+" : ""}{r.pct.toFixed(2)}%</td>
                <td className="py-1.5 text-right font-mono text-positive">${r.divs.toFixed(2)}</td>
                <td className={`py-1.5 text-right font-mono font-semibold ${r.neg ? "text-negative" : "text-positive"}`}>{fmtNeg(r.net)}</td>
              </tr>
            )}
            <tr className="border-t border-border1 bg-card2/40">
              <td className="py-2 font-semibold text-[10px] uppercase tracking-wider text-subtlefg">Total (USD)</td>
              <td className="py-2 text-right font-mono font-bold">{totals.trades.toLocaleString()}</td>
              <td className="py-2 text-right font-mono font-bold text-positive">$1,172.06</td>
              <td className="py-2 text-right font-mono font-bold text-negative">-$720.21</td>
              <td className="py-2 text-right font-mono font-bold">50.54%</td>
              <td className="py-2 text-right font-mono font-bold">1.66</td>
              <td className="py-2 text-right font-mono font-bold text-positive">+39.88%</td>
              <td className="py-2 text-right font-mono font-bold text-positive">${totals.divs.toLocaleString("en-US", { minimumFractionDigits: 2 })}</td>
              <td className="py-2 text-right font-mono font-bold text-positive">${totals.net.toLocaleString("en-US", { minimumFractionDigits: 2 })}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>);

}

// =================== MOCK 7: Drawdowns / Capital donut / Extremes ===================
function DrawdownsCapitalExtremesMock({ view = "all" }) {
  // Capital donut data
  const caps = [
  { name: "MeanRev_SP500", color: "20 75% 60%", pct: 14.3, value: "$54K", ccy: null },
  { name: "Momentum_Tech", color: "210 90% 65%", pct: 13.9, value: "$53K", ccy: null },
  { name: "Adaptive_Growth", color: "240 5% 50%", pct: 13.3, value: "$50K", ccy: null },
  { name: "Trend_SP500", color: "262 50% 70%", pct: 11.3, value: "$43K", ccy: null },
  { name: "Trend_TSX", color: "35 92% 58%", pct: 10.5, value: "$40K", ccy: "CAD" },
  { name: "Momentum_SmallCap", color: "145 60% 50%", pct: 10.3, value: "$39K", ccy: null },
  { name: "Momentum_LargeCap", color: "280 70% 65%", pct: 9.7, value: "$37K", ccy: "CAD" },
  { name: "Momentum_ASX", color: "0 70% 60%", pct: 8.6, value: "$33K", ccy: "AUD" },
  { name: "Rotation_ETF", color: "180 50% 60%", pct: 8.0, value: "$30K", ccy: null }];

  // Donut path arcs
  const cx = 55,cy = 55,r = 38,rIn = 26;
  let cum = 0;
  const arcs = caps.map((c) => {
    const start = cum * 2 * Math.PI - Math.PI / 2;
    cum += c.pct / 100;
    const end = cum * 2 * Math.PI - Math.PI / 2;
    const large = end - start > Math.PI ? 1 : 0;
    const x1 = cx + r * Math.cos(start),y1 = cy + r * Math.sin(start);
    const x2 = cx + r * Math.cos(end),y2 = cy + r * Math.sin(end);
    const x3 = cx + rIn * Math.cos(end),y3 = cy + rIn * Math.sin(end);
    const x4 = cx + rIn * Math.cos(start),y4 = cy + rIn * Math.sin(start);
    return { d: `M${x1} ${y1} A${r} ${r} 0 ${large} 1 ${x2} ${y2} L${x3} ${y3} A${rIn} ${rIn} 0 ${large} 0 ${x4} ${y4} Z`, color: c.color };
  });

  // Strategy Extremes
  const extremes = [
  { name: "Momentum_Tech", color: "210 90% 65%", best: 37300, bm: "May 2026", worst: -5600, wm: "Feb 2022" },
  { name: "Unassigned", color: "240 5% 55%", best: 9300, bm: "May 2026", worst: -6400, wm: "May 2024" },
  { name: "Momentum_SmallCap", color: "145 60% 50%", best: 13000, bm: "Jan 2025", worst: -13700, wm: "Mar 2025" },
  { name: "Trend_TSX", color: "35 92% 58%", best: 29700, bm: "Mar 2026", worst: -1600, wm: "May 2026" },
  { name: "Momentum_LargeCap", color: "280 70% 65%", best: 15300, bm: "Feb 2026", worst: -2100, wm: "Mar 2025" },
  { name: "MeanRev_SP500", color: "20 75% 60%", best: 7400, bm: "Jan 2025", worst: -8900, wm: "Nov 2025" },
  { name: "Bob Strategy", color: "180 35% 50%", best: 1200, bm: "Dec 2024", worst: -517, wm: "Feb 2026" }];

  const maxAbs = Math.max(...extremes.flatMap((e) => [Math.abs(e.best), Math.abs(e.worst)]));

  // Drawdown chart — multi-line of % drawdown over time
  const N = 60;
  const ddStrats = [
  { name: "Momentum_Tech", color: "195 60% 65%", peak: -22, peakIdx: 20, recovery: 55, current: -18.7, kind: "solid" },
  { name: "Momentum_SmallCap", color: "75 45% 60%", peak: -38, peakIdx: 18, recovery: 50, current: -37.7, kind: "solid" },
  { name: "Trend_TSX", color: "40 35% 60%", peak: -10, peakIdx: 38, recovery: 50, current: -5.5, kind: "solid" },
  { name: "Momentum_LargeCap", color: "280 25% 65%", peak: -16, peakIdx: 30, recovery: 50, current: -8.7, kind: "dashed" },
  { name: "MeanRev_SP500", color: "15 50% 65%", peak: -22, peakIdx: 45, recovery: 56, current: -17.2, kind: "dashed" },
  { name: "Rotation_ETF", color: "180 35% 60%", peak: -25, peakIdx: 28, recovery: 48, current: -10.2, kind: "dashed" },
  { name: "Adaptive_Growth", color: "240 5% 60%", peak: -2, peakIdx: 55, recovery: 58, current: -0.1, kind: "dashed", best: true },
  { name: "Trend_SP500", color: "262 30% 70%", peak: -18, peakIdx: 48, recovery: 55, current: -16.7, kind: "dashed" },
  { name: "Momentum_ASX", color: "0 35% 60%", peak: -28, peakIdx: 30, recovery: 58, current: -36.6, kind: "dashed" }];

  const W = 760,H = 200,padL = 32,padR = 8,padT = 8,padB = 22;
  const xAt = (i) => padL + i / (N - 1) * (W - padL - padR);
  const yAt = (v) => padT + (1 - (v - -40) / (0 - -40)) * (H - padT - padB);

  function ddCurve(s, seed) {
    const pts = [];
    let v = 0;
    let sd = seed;
    for (let i = 0; i < N; i++) {
      sd = (sd * 9301 + 49297) % 233280;
      const r = sd / 233280 - 0.5;
      let target = 0;
      if (i < s.peakIdx) target = s.peak * i / s.peakIdx;else
      if (i < s.recovery) target = s.peak * (1 - (i - s.peakIdx) / (s.recovery - s.peakIdx));else
      target = s.current * (N - 1 - i) / (N - 1 - s.recovery) + s.current * (1 - (N - 1 - i) / (N - 1 - s.recovery));
      v = v * 0.7 + target * 0.3 + r * 2;
      pts.push(Math.min(0, v));
    }
    // last point near current
    pts[N - 1] = s.current;
    return pts;
  }

  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 ddCurves = ddStrats.map((s, i) => ddCurve(s, (i + 7) * 421));

  return (
    <div className="space-y-3">
      {/* Top row: Capital donut + Strategy Extremes — hidden when view === "drawdowns" */}
      {view !== "drawdowns" &&
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
        {/* Capital by Strategy */}
        <div className="card1 p-4">
          <div className="flex items-center gap-2 mb-1">
            <span className="text-[11px] font-semibold uppercase tracking-wider">Capital By Strategy</span>
            <span className="text-[10px] uppercase tracking-wider text-subtlefg">(combined)</span>
          </div>
          <div className="text-[10.5px] text-subtlefg mb-3">9 strategies · $376,714 total capital</div>
          <div className="flex items-center gap-4">
            <svg width="110" height="110" viewBox="0 0 110 110" className="shrink-0">
              {arcs.map((a, i) => <path key={i} d={a.d} fill={`hsl(${a.color})`} />)}
              <text x="55" y="50" textAnchor="middle" fontSize="8" fill="hsl(var(--subtle-fg))" fontFamily="JetBrains Mono, monospace" className="uppercase tracking-wider">Capital</text>
              <text x="55" y="62" textAnchor="middle" fontSize="11" fontWeight="bold" fill="hsl(var(--fg))" fontFamily="JetBrains Mono, monospace">$376,714</text>
              <text x="55" y="72" textAnchor="middle" fontSize="7" fill="hsl(var(--subtle-fg))" fontFamily="JetBrains Mono, monospace">9 strategies</text>
            </svg>
            <div className="flex-1 min-w-0 space-y-0.5">
              {caps.map((c) =>
              <div key={c.name} className="flex items-center gap-2 text-[10px]">
                  <span className="h-1.5 w-1.5 rounded-full shrink-0" style={{ background: `hsl(${c.color})` }} />
                  <span className="text-fg flex-1 truncate">{c.name}{c.ccy && <span className="text-subtlefg ml-1 text-[8.5px] font-mono">{c.ccy}</span>}</span>
                  <span className="font-mono text-mutedfg">{c.value}</span>
                  <span className="font-mono text-subtlefg text-[9.5px] w-[36px] text-right">{c.pct.toFixed(1)}%</span>
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Strategy Extremes */}
        <div className="card1 p-4">
          <div className="flex items-center gap-2 mb-1">
            <span className="text-[11px] font-semibold uppercase tracking-wider">Strategy Extremes</span>
            <span className="text-[10px] uppercase tracking-wider text-subtlefg">(combined)</span>
          </div>
          <div className="text-[10.5px] text-subtlefg mb-3">Best and worst single-month P&L per strategy. The range bar shows the relative magnitude of the worst vs. best month.</div>
          <div className="space-y-1.5">
            {extremes.map((e) => {
              const bestPct = e.best / maxAbs * 100;
              const worstPct = Math.abs(e.worst) / maxAbs * 100;
              return (
                <div key={e.name} className="grid grid-cols-12 gap-2 items-center text-[10px]">
                  <div className="col-span-3 inline-flex items-center gap-1.5 min-w-0">
                    <span className="h-1.5 w-1.5 rounded-full shrink-0" style={{ background: `hsl(${e.color})` }} />
                    <span className="text-fg truncate">{e.name}</span>
                  </div>
                  <div className="col-span-3 text-right font-mono">
                    <span className="text-positive">+${(e.best / 1000).toFixed(1)}K</span>
                    <span className="text-subtlefg ml-1 text-[9px]">{e.bm}</span>
                  </div>
                  <div className="col-span-3 text-right font-mono">
                    <span className="text-negative">-${(Math.abs(e.worst) / 1000).toFixed(1)}K</span>
                    <span className="text-subtlefg ml-1 text-[9px]">{e.wm}</span>
                  </div>
                  <div className="col-span-3 flex h-3 rounded overflow-hidden bg-card2">
                    <div className="bg-negative/70" style={{ width: `${worstPct}%` }} />
                    <div className="bg-positive/70" style={{ width: `${bestPct}%` }} />
                  </div>
                </div>);

            })}
          </div>
        </div>
      </div>
      }

      {/* Drawdowns chart */}
      <div className="card1 p-4">
        <div className="flex items-start justify-between gap-2 mb-3 flex-wrap">
          <div>
            <div className="flex items-center gap-2">
              <span className="text-[11px] font-semibold uppercase tracking-wider">Strategy Drawdowns</span>
              <span className="text-[10px] uppercase tracking-wider text-subtlefg">(combined)</span>
            </div>
            <div className="text-[10.5px] text-subtlefg mt-0.5">Percentage decline from each strategy's peak equity (capital + cumulative P&L)</div>
          </div>
          <div className="flex items-center gap-1">
            {["1M", "3M", "6M", "YTD", "1Y", "ALL"].map((p) =>
            <button key={p} className={`rounded-md font-mono font-semibold tracking-wider px-1.5 py-0.5 text-[9px] ${
            p === "ALL" ? "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">9 of 9 strategies <IcoChevronDown size={8} className="inline" /></button>
          </div>
        </div>
        <svg viewBox={`0 0 ${W} ${H}`} className="w-full">
          {[0, -10, -20, -30, -40].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}%</text>
            </g>
          )}
          {["Jul 2020", "Apr 2021", "Jan 2022", "Apr 2023", "Jan 2024", "Oct 2024", "Jul 2025", "Apr 2026"].map((l, i, arr) => {
            const x = padL + i / (arr.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>;
          })}
          {ddCurves.map((pts, i) =>
          <path key={i} d={pathFor(pts)} fill="none"
          stroke={`hsl(${ddStrats[i].color})`}
          strokeWidth={ddStrats[i].kind === "solid" ? 1.8 : 1.2}
          strokeDasharray={ddStrats[i].kind === "dashed" ? "4 3" : "none"}
          opacity={ddStrats[i].kind === "solid" ? 0.95 : 0.65}
          strokeLinecap="round" strokeLinejoin="round" />
          )}
        </svg>
        <div className="flex flex-wrap gap-x-3 gap-y-1 mt-2 text-[9.5px]">
          {ddStrats.map((s) =>
          <span key={s.name} className="inline-flex items-center gap-1">
              <span className="h-1.5 w-1.5 rounded-full" style={{ background: `hsl(${s.color})` }} />
              <span className="text-mutedfg">{s.name}</span>
              {s.best && <span className="text-subtlefg">(best)</span>}
              <span className="text-negative font-mono">{s.current.toFixed(1)}%</span>
            </span>
          )}
        </div>
      </div>
    </div>);

}

// =================== Section wrapper ===================
function ProductTour() {
  const blocks = [
  {
    eyebrow: "Performance · By Strategy",
    title: <>Rank what works.<br /><span className="text-primary">Cut what doesn't.</span></>,
    copy: "Every strategy gets the same scrutiny: Net P&L per dollar of capital, since inception. Return on Capital normalizes for size, so a $30K strategy returning 19% doesn't disappear behind a $52K one returning 285%.",
    bullets: ["ROC normalizes for capital efficiency", "ROC/yr to compare across inception dates", "Multi-currency: USD, CAD, AUD"],
    mock: <StrategyRankingMock />,
    flip: false
  },
  {
    eyebrow: "Add Trades · Auto-Sync",
    title: <>Plug in your broker.<br /><span className="text-primary">Walk away.</span></>,
    copy: "Connect Interactive Brokers via Flex Web Service once, register your Query IDs, set a schedule (3× daily is typical), and the dashboard imports every fill automatically. Token expiry, last run, and pass/fail status are all tracked.",
    bullets: ["IBKR Flex Web Service · OAuth tokens", "Scheduled imports, 1×–3× per day", "OrderClerk + RealTest CSV ingestion"],
    mock: <AutoSyncMock />,
    flip: true
  },
  {
    eyebrow: "Corporate Events",
    title: <>Mergers, renames, splits,<br /><span className="text-primary">all reconciled.</span></>,
    copy: "When OceanaGold reverse-splits 1-for-3, your old OGC position becomes OGC.OLD and a new OGC line opens, automatically. Symbol aliases stay linked so your historical P&L doesn't break.",
    bullets: ["Tracks renames, mergers, splits, spinoffs", "Auto-creates symbol aliases", "Original CUSIP/ISIN preserved"],
    mock: <CorpEventsMock />,
    flip: false
  },
  {
    eyebrow: "Performance · By Strategy",
    title: <>Every metric,<br /><span className="text-primary">broken down by strategy.</span></>,
    copy: "Avg Win, Avg Loss, Win Rate, Profit Factor, Profit %, Dividends, Net P&L, for every strategy, all on one table, sortable by any column. Totals reconcile to the dollar.",
    bullets: ["11 metrics per strategy", "Sort by any column", "USD-reconciled totals row"],
    mock: <PerfByStrategyTableMock />,
    flip: true
  },
  {
    eyebrow: "Performance · Risk",
    title: <>Drawdowns,<br /><span className="text-primary">at a glance.</span></>,
    copy: "See where each strategy is in its drawdown cycle. Percentage decline from each strategy's peak equity (capital + cumulative P&L), so the strategy bleeding the most equity isn't always the one with the worst single month.",
    bullets: ["Time-underwater curves per strategy", "Peak-to-trough percentage decline", "Per-strategy current drawdown footnote"],
    mock: <DrawdownsCapitalExtremesMock view="drawdowns" />,
    flip: false
  }];


  return (
    <section id="tour" className="relative py-20 md:py-28 border-t hr1 bg-bg2/30" style={{ borderWidth: "0px", padding: "112px 0px 62px" }}>
      <div className="mx-auto max-w-7xl px-6 md:px-10">
        <div className="max-w-3xl mb-12 md:mb-16">
          <Eyebrow>Product tour</Eyebrow>
          <h2 className="mt-4 text-3xl md:text-5xl font-semibold tracking-tight leading-tight">
            This isn't a mockup.<br />
            <span className="text-mutedfg">These are real screens from </span>
            <span className="text-primary">the product.</span>
          </h2>
        </div>

        <div className="space-y-20 md:space-y-28">
          {blocks.map((b, i) =>
          <div key={i} className="grid md:grid-cols-12 gap-8 md:gap-12 items-center reveal">
              <div className={`md:col-span-4 ${b.flip ? "md:order-2" : ""}`}>
                <Eyebrow>{b.eyebrow}</Eyebrow>
                <h3 className="mt-3 text-2xl md:text-3xl font-semibold tracking-tight leading-tight">{b.title}</h3>
                <p className="mt-4 text-mutedfg leading-relaxed">{b.copy}</p>
                <ul className="mt-5 space-y-2 text-sm text-mutedfg">
                  {b.bullets.map((bl) =>
                <li key={bl} className="flex items-start gap-2">
                      <IcoCheck size={14} className="text-positive mt-0.5 shrink-0" /> {bl}
                    </li>
                )}
                </ul>
              </div>
              <div className={`md:col-span-8 ${b.flip ? "md:order-1" : ""}`}>
                {b.mock}
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// =================== Strategy Correlation — standalone section ===================
function CorrelationSection() {
  return (
    <section id="correlation" className="relative py-20 md:py-28" style={{ padding: "62px 0px" }}>
      <div className="mx-auto max-w-7xl px-6 md:px-10">
        <div className="grid md:grid-cols-12 gap-8 md:gap-12 items-center reveal">
          <div className="md:col-span-4">
            <Eyebrow>Strategy Correlation</Eyebrow>
            <h3 className="mt-3 text-2xl md:text-3xl font-semibold tracking-tight leading-tight">
              Diversification,<br /><span className="text-primary">priced in Pearson.</span>
            </h3>
            <p className="mt-4 text-mutedfg leading-relaxed">
              Run nine strategies and you might be running one trade nine times. The correlation matrix scores monthly P&L pairwise: green moves together, red diversifies, so you can spot redundant exposure before drawdowns overlap.
            </p>
            <ul className="mt-5 space-y-2 text-sm text-mutedfg">
              {["Pearson r on monthly P&L", "Strategies with <6 months excluded", "Hover any cell for the underlying scatter"].map((bl) =>
              <li key={bl} className="flex items-start gap-2">
                  <IcoCheck size={14} className="text-positive mt-0.5 shrink-0" /> {bl}
                </li>
              )}
            </ul>
          </div>
          <div className="md:col-span-8">
            <CorrelationMatrixMock />
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, {
  ProductTour, CorrelationSection, StrategyRankingMock, AutoSyncMock, CorpEventsMock, YearlyBreakdownMock, CorrelationMatrixMock,
  PerfByStrategyTableMock, DrawdownsCapitalExtremesMock
});