/* global React */
/* hc-exchange — deep surfaces: TickerDetail, History, Deposits, Settings */
const { useState: dUseState, useMemo: dUseMemo } = React;

// =========================================================
// TICKER DETAIL
// =========================================================
function TickerDetail({ token, onClose }) {
  const t = token;
  const [tf, setTf] = dUseState("1D");
  const [tab, setTab] = dUseState("Overview");
  const TFs = [];
  const TABS = ["Overview", "Order Book", "Trades", "About", "Activity"];

  // Synthetic price series for big chart
  const series = dUseMemo(() => {
    let seed = t.sym.charCodeAt(0) * 17 + t.sym.charCodeAt(1) * 7;
    const rng = () => {
      seed = (seed * 9301 + 49297) % 233280;
      return seed / 233280;
    };
    const N = 90;
    let p = t.price * 0.92;
    const arr = [];
    for (let i = 0; i < N; i++) {
      const drift = (t.ch / 100) * (i / N);
      p = p * (1 + (rng() - 0.48) * 0.018) * (1 + drift / N);
      arr.push(p);
    }
    arr[arr.length - 1] = t.price;
    return arr;
  }, [t.sym]);

  const W = 1080, H = 360;
  const min = Math.min(...series) * 0.998;
  const max = Math.max(...series) * 1.002;
  const x = (i) => 16 + (i / (series.length - 1)) * (W - 32);
  const y = (v) => 16 + (1 - (v - min) / (max - min)) * (H - 32);
  const path = series.map((v, i) => `${i === 0 ? "M" : "L"}${x(i).toFixed(1)},${y(v).toFixed(1)}`).join(" ");
  const area = path + ` L${x(series.length - 1).toFixed(1)},${(H - 16).toFixed(1)} L${x(0).toFixed(1)},${(H - 16).toFixed(1)} Z`;
  const up = t.ch >= 0;
  const stroke = up ? "var(--hcx-bid)" : "var(--hcx-ask)";

  // Order book rows
  const bookRows = dUseMemo(() => {
    let s = t.sym.charCodeAt(0) * 11;
    const rng = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; };
    const bids = []; const asks = [];
    let bp = t.price * 0.9998;
    let ap = t.price * 1.0002;
    for (let i = 0; i < 12; i++) {
      bp = bp - t.price * 0.0003 * (1 + rng());
      ap = ap + t.price * 0.0003 * (1 + rng());
      bids.push({ p: bp, q: 1000 + rng() * 14000, t: 50000 + rng() * 200000 });
      asks.push({ p: ap, q: 1000 + rng() * 14000, t: 50000 + rng() * 200000 });
    }
    return { bids, asks };
  }, [t.sym]);

  // Recent trades
  const trades = dUseMemo(() => {
    let s = t.sym.charCodeAt(0) * 31 + 7;
    const rng = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; };
    const arr = [];
    let now = Date.now();
    for (let i = 0; i < 16; i++) {
      now -= Math.floor(rng() * 8000) + 800;
      const side = rng() > 0.5 ? "buy" : "sell";
      const p = t.price * (1 + (rng() - 0.5) * 0.0008);
      const q = 50 + rng() * 4500;
      arr.push({ t: now, side, p, q });
    }
    return arr;
  }, [t.sym]);

  return (
    <div className="hcx-detail">
      {/* Breadcrumb */}
      <div className="hcx-breadcrumb">
        <a href="#" onClick={(e) => { e.preventDefault(); onClose(); }}>Markets</a>
        <span>›</span>
        <span>{t.sym} / HCC</span>
      </div>

      {/* Header strip */}
      <div className="hcx-detail-head">
        <div className="hcx-detail-id">
          <TokenGlyph axis={t.axis} sym={t.sym} size={56} />
          <div>
            <div className="d-pair">
              <span className="d-sym">{t.sym}</span>
              <span className="d-quote">/HCC</span>
              <span style={{ marginLeft: 12 }}><AxisPill axis={t.axis} /></span>
            </div>
            <div className="d-name">{t.name}</div>
          </div>
        </div>

        <div className="hcx-detail-px">
          <div className="px-now">⚕{fmtNum(t.price)}</div>
          <div className={"px-ch " + (up ? "up" : "down")}>
            {up ? "▲" : "▼"} {Math.abs(t.ch).toFixed(2)}% <span className="px-abs">{up ? "+" : "−"}⚕{fmtNum(Math.abs(t.price * t.ch / 100), 6)}</span>
            <span className="px-tf">past 24h</span>
          </div>
        </div>

        <div className="hcx-detail-stats">
          <div className="d-stat"><span className="l">24h Vol</span><span className="v">{fmtVol(t.vol)}</span></div>
          <div className="d-stat"><span className="l">24h High</span><span className="v">⚕{fmtNum(t.hi)}</span></div>
          <div className="d-stat"><span className="l">24h Low</span><span className="v">⚕{fmtNum(t.lo)}</span></div>
          <div className="d-stat"><span className="l">Mkt Cap</span><span className="v">{fmtVol(t.vol * 18.4)}</span></div>
        </div>

        <div className="hcx-detail-actions">
          <button className="hcx-btn hcx-btn-buy">Buy {t.sym}</button>
          <button className="hcx-btn hcx-btn-sell">Sell</button>
          <button className="hcx-iconbtn" title="Add to watchlist">★</button>
        </div>
      </div>

      {/* Tabs */}
      <div className="hcx-detail-tabbar">
        {TABS.map(x => (
          <button key={x} className={tab === x ? "active" : ""} onClick={() => setTab(x)}>{x}</button>
        ))}
      </div>

      {tab === "Overview" && (
        <div className="hcx-detail-grid">
          {/* Chart */}
          <div className="hcx-panel" style={{ gridColumn: "1 / span 2" }}>
            <div className="hcx-panel-head" style={{ display: "flex", justifyContent: "space-between" }}>
              <span>Price · {t.sym}/HCC</span>
              <div className="hcx-tabs" style={{ background: "transparent", padding: 0 }}>
                {TFs.map(f => (
                  <button key={f} className={tf === f ? "active" : ""} onClick={() => setTf(f)} style={{ padding: "5px 10px" }}>{f}</button>
                ))}
              </div>
            </div>
            <div className="hcx-panel-body" style={{ padding: 0 }}>
              <svg viewBox={`0 0 ${W} ${H}`} style={{ width: "100%", display: "block" }}>
                <defs>
                  <linearGradient id={`fill-${t.sym}`} x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stopColor={stroke} stopOpacity="0.18" />
                    <stop offset="100%" stopColor={stroke} stopOpacity="0" />
                  </linearGradient>
                </defs>
                {/* gridlines */}
                {[0.2, 0.4, 0.6, 0.8].map((g, i) => (
                  <line key={i} x1={16} x2={W - 16} y1={16 + g * (H - 32)} y2={16 + g * (H - 32)}
                        stroke="var(--hcx-line)" strokeDasharray="2 4" />
                ))}
                <path d={area} fill={`url(#fill-${t.sym})`} />
                <path d={path} stroke={stroke} strokeWidth="1.5" fill="none" />
                {/* current price marker */}
                <circle cx={x(series.length - 1)} cy={y(t.price)} r="3.5" fill={stroke} />
                <line x1={16} x2={W - 16} y1={y(t.price)} y2={y(t.price)}
                      stroke={stroke} strokeOpacity="0.4" strokeDasharray="3 3" />
                <text x={W - 20} y={y(t.price) - 6} textAnchor="end"
                      fontFamily="var(--font-mono)" fontSize="11" fill={stroke}>
                  ⚕{fmtNum(t.price)}
                </text>
                {/* axis labels */}
                <text x={20} y={H - 4} fontFamily="var(--font-mono)" fontSize="9" fill="var(--fg-3)">90d ago</text>
                <text x={W - 20} y={H - 4} textAnchor="end" fontFamily="var(--font-mono)" fontSize="9" fill="var(--fg-3)">now</text>
              </svg>
            </div>
          </div>

          {/* Mini order book */}
          <div className="hcx-panel">
            <div className="hcx-panel-head">Order Book — Top 10</div>
            <div className="hcx-panel-body" style={{ padding: 0 }}>
              <div className="d-bookhead">
                <span>Price (HCC)</span>
                <span className="num">Size</span>
                <span className="num">Total</span>
              </div>
              {bookRows.asks.slice(0, 6).reverse().map((r, i) => (
                <div key={"a" + i} className="d-bookrow ask">
                  <div className="d-bookbg" style={{ width: `${30 + i * 9}%` }}></div>
                  <span className="px">{fmtNum(r.p)}</span>
                  <span className="num">{r.q.toFixed(0)}</span>
                  <span className="num">{(r.q * r.p).toFixed(0)}</span>
                </div>
              ))}
              <div className="d-spread">
                <span>SPREAD</span>
                <span className="num">⚕{fmtNum(t.price * 0.0004, 6)}</span>
                <span style={{ color: "var(--fg-3)" }}>0.04%</span>
              </div>
              {bookRows.bids.slice(0, 6).map((r, i) => (
                <div key={"b" + i} className="d-bookrow bid">
                  <div className="d-bookbg" style={{ width: `${30 + i * 9}%` }}></div>
                  <span className="px">{fmtNum(r.p)}</span>
                  <span className="num">{r.q.toFixed(0)}</span>
                  <span className="num">{(r.q * r.p).toFixed(0)}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Token meta / about */}
          <div className="hcx-panel" style={{ gridColumn: "1 / span 2" }}>
            <div className="hcx-panel-head">About {t.sym}</div>
            <div className="hcx-panel-body" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 24 }}>
              <div>
                <div className="d-meta-row">
                  <span className="l">Issuer</span>
                  <span className="v">Conceptual Health · Treasury Vault</span>
                </div>
                <div className="d-meta-row">
                  <span className="l">Backing</span>
                  <span className="v">{t.axis === "PV" ? "USDC + verified care receipts" : "Verified " + AXES[t.axis].name + " contributions"}</span>
                </div>
                <div className="d-meta-row">
                  <span className="l">Issuance Rate</span>
                  <span className="v">{t.axis === "PV" ? "1:1 USD-pegged" : "Earned via verified activity events"}</span>
                </div>
                <div className="d-meta-row">
                  <span className="l">Audit Status</span>
                  <span className="v" style={{ color: "var(--accent-guardian)" }}>● Live attestations · last 14s</span>
                </div>
                <div className="d-meta-row">
                  <span className="l">Listed</span>
                  <span className="v">2024-09-01 · 14 months ago</span>
                </div>
                <div className="d-meta-row">
                  <span className="l">Validator Set</span>
                  <span className="v">8 of 11 · quorum 73%</span>
                </div>
                <div className="d-meta-row">
                  <span className="l">Smart Contract</span>
                  <span className="v" style={{ fontFamily: "var(--font-mono)", fontSize: 11 }}>0x{t.sym.toLowerCase()}88a4{t.rank.toString(16)}c7e2…91d</span>
                </div>
              </div>
              <div className="d-about">
                <div className="d-about-h">What is {t.name}?</div>
                <div className="d-about-p">
                  {t.axis === "PO" && "Earned when verifiable physical activity events (steps, workouts, gym visits) clear quorum on the Guardian-Orb chain. Issuance is rate-limited by axis schedule. 21B hard cap."}
                  {t.axis === "NM" && "Earned when verifiable neurocognitive events (meditation completions, cognitive training, attestation-backed therapy adherence) clear quorum on the Provider-AI chain."}
                  {t.axis === "ER" && "Earned when verifiable emotional-resilience events (therapy session receipts, certified mindfulness completions, stress biomarker improvements) clear quorum."}
                  {t.axis === "SC" && "Earned when verifiable spiritual and community-service events (faith-community participation, volunteer hours with notarized receipts) clear quorum on Church chain."}
                  {t.axis === "RS" && "Earned when verifiable relational and sleep events (sleep-score attestations, social health check-ins) clear quorum on the Guardian-Orb chain."}
                  {t.axis === "ES" && "Earned when verifiable environmental events (clean-air exposure, low-pollutant home readings, biome diversity assessments) clear quorum."}
                  {t.axis === "TA" && "Earned when verifiable technological augmentation events (medication adherence logs, lab compliance, wearable data contributions) clear quorum on Provider-AI chain."}
                  {t.axis === "PV" && "Quote token. 1 HCC ≡ 1 USD via redeemable USDC reserves. All token pairs on HC.exchange settle into HCC. Spend anywhere Visa is accepted via PCI-validated processor Issuing."}
                </div>
                <div className="d-about-links">
                  <a href="../chain/index.html#commodity">Whitepaper</a>
                  <a href="#">Validator Audit</a>
                  <a href="#">Tokenomics</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {tab === "Order Book" && (
        <div className="hcx-panel">
          <div className="hcx-panel-head" style={{ display: "flex", justifyContent: "space-between" }}>
            <span>Full Order Book — {t.sym}/HCC</span>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-3)" }}>refreshed 0.4s ago</span>
          </div>
          <div className="hcx-panel-body" style={{ padding: 0, display: "grid", gridTemplateColumns: "1fr 1fr" }}>
            <div>
              <div className="d-bookhead" style={{ background: "rgba(255,77,79,0.06)" }}>
                <span style={{ color: "var(--hcx-ask)" }}>ASKS</span>
                <span className="num">Size</span>
                <span className="num">Total HCC</span>
              </div>
              {bookRows.asks.map((r, i) => (
                <div key={"a" + i} className="d-bookrow ask">
                  <div className="d-bookbg" style={{ width: `${20 + i * 6}%` }}></div>
                  <span className="px">{fmtNum(r.p)}</span>
                  <span className="num">{r.q.toFixed(0)}</span>
                  <span className="num">{(r.q * r.p).toFixed(0)}</span>
                </div>
              ))}
            </div>
            <div>
              <div className="d-bookhead" style={{ background: "rgba(61,220,151,0.06)" }}>
                <span style={{ color: "var(--hcx-bid)" }}>BIDS</span>
                <span className="num">Size</span>
                <span className="num">Total HCC</span>
              </div>
              {bookRows.bids.map((r, i) => (
                <div key={"b" + i} className="d-bookrow bid">
                  <div className="d-bookbg" style={{ width: `${20 + i * 6}%` }}></div>
                  <span className="px">{fmtNum(r.p)}</span>
                  <span className="num">{r.q.toFixed(0)}</span>
                  <span className="num">{(r.q * r.p).toFixed(0)}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {tab === "Trades" && (
        <div className="hcx-panel">
          <div className="hcx-panel-head">Recent Trades — {t.sym}/HCC</div>
          <div className="hcx-panel-body" style={{ padding: 0 }}>
            <table className="hcx-table" style={{ fontSize: 12 }}>
              <thead>
                <tr>
                  <th>Time</th>
                  <th>Side</th>
                  <th className="num">Price (HCC)</th>
                  <th className="num">Quantity</th>
                  <th className="num">Total HCC</th>
                  <th>Validator</th>
                </tr>
              </thead>
              <tbody>
                {trades.map((tr, i) => (
                  <tr key={i}>
                    <td style={{ fontFamily: "var(--font-mono)", color: "var(--fg-3)" }}>
                      {new Date(tr.t).toLocaleTimeString([], { hour12: false })}
                    </td>
                    <td>
                      <span style={{ color: tr.side === "buy" ? "var(--hcx-bid)" : "var(--hcx-ask)", fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.06em" }}>
                        {tr.side.toUpperCase()}
                      </span>
                    </td>
                    <td className="num">{fmtNum(tr.p)}</td>
                    <td className="num">{tr.q.toFixed(0)}</td>
                    <td className="num">{(tr.p * tr.q).toFixed(2)}</td>
                    <td style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-3)" }}>v-{(i % 11) + 1}.guardian</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {tab === "About" && (
        <div className="hcx-panel">
          <div className="hcx-panel-head">{t.name} — Token Specification</div>
          <div className="hcx-panel-body">
            <div style={{ maxWidth: 720, color: "var(--fg-2)", lineHeight: 1.6 }}>
              <p style={{ marginTop: 0 }}>
                {t.name} ({t.sym}) is a verified-event commodity token on the Conceptual Health chain.
                Each unit represents a quorum-attested {AXES[t.axis].name.toLowerCase()} contribution
                from a person, provider, or care system.
              </p>
              <h4 style={{ fontFamily: "var(--font-display)", fontWeight: 500, marginTop: 24 }}>Issuance</h4>
              <p>
                Issued only when a contribution event clears 8-of-11 validator quorum on its origin chain.
                Burned when redeemed against eligible care services or commodity baskets.
              </p>
              <h4 style={{ fontFamily: "var(--font-display)", fontWeight: 500, marginTop: 24 }}>Redemption</h4>
              <p>
                Redeemable 1:1 against equivalent {t.axis === "PV" ? "USD" : "axis"} basket through any participating
                Conceptual Health partner — health systems, churches, employers, payers.
              </p>
              <h4 style={{ fontFamily: "var(--font-display)", fontWeight: 500, marginTop: 24 }}>Risk Disclosures</h4>
              <p style={{ color: "var(--fg-3)", fontSize: 13 }}>
                Token represents a verified care receipt, not a security. Yield, where applicable, derives from
                staking rewards on the chain — not from issuer revenue. Past attestation rates do not guarantee
                future issuance.
              </p>
            </div>
          </div>
        </div>
      )}

      {tab === "Activity" && (
        <div className="hcx-panel">
          <div className="hcx-panel-head">Recent Chain Activity — {t.sym}</div>
          <div className="hcx-panel-body" style={{ padding: 0 }}>
            <table className="hcx-table" style={{ fontSize: 12 }}>
              <thead>
                <tr>
                  <th>Block</th>
                  <th>Event</th>
                  <th>Source</th>
                  <th className="num">Δ Supply</th>
                  <th className="num">Quorum</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
                {[
                  { blk: 4_028_119, evt: "Mint · activity event",        src: "Guardian-Orb · u_8841",   ds: "+12.40", q: "11/11", st: "✓ Settled" },
                  { blk: 4_028_117, evt: "Burn · redeemed for service",  src: "Provider-AI · MercyHealth", ds: "−4.20",  q: "11/11", st: "✓ Settled" },
                  { blk: 4_028_114, evt: "Mint · activity event",        src: "Guardian-Orb · u_2014",   ds: "+18.10", q: "10/11", st: "✓ Settled" },
                  { blk: 4_028_110, evt: "Mint · validator quorum",      src: "Guardian-Orb · batch",    ds: "+842.00", q: "11/11", st: "✓ Settled" },
                  { blk: 4_028_108, evt: "Burn · withdraw to bank",      src: "Treasury · ach_8821",     ds: "−1,420.00", q: "11/11", st: "✓ Settled" },
                  { blk: 4_028_104, evt: "Mint · attestation",           src: "Provider-AI · review",    ds: "+24.00", q: "9/11",  st: "⏳ Pending" },
                  { blk: 4_028_101, evt: "Transfer",                     src: "u_8841 → u_3022",         ds: "0",       q: "11/11", st: "✓ Settled" },
                ].map((row, i) => (
                  <tr key={i}>
                    <td style={{ fontFamily: "var(--font-mono)", color: "var(--fg-3)" }}>#{row.blk.toLocaleString()}</td>
                    <td style={{ color: "var(--fg-1)" }}>{row.evt}</td>
                    <td style={{ color: "var(--fg-2)", fontSize: 12 }}>{row.src}</td>
                    <td className="num" style={{ color: row.ds.startsWith("−") ? "var(--hcx-ask)" : row.ds === "0" ? "var(--fg-3)" : "var(--hcx-bid)" }}>{row.ds}</td>
                    <td className="num" style={{ fontFamily: "var(--font-mono)", color: "var(--fg-2)" }}>{row.q}</td>
                    <td style={{ color: row.st.startsWith("⏳") ? "var(--accent-halo)" : "var(--accent-guardian)" }}>{row.st}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}
    </div>
  );
}

// =========================================================
// HISTORY VIEW — orders, trades, transfers
// =========================================================
function HistoryView() {
  const [tab, setTab] = dUseState("Trades");
  const TABS = ["Trades", "Orders", "Transfers", "Mints / Burns"];

  const trades = [];

  const orders = [];

  const transfers = [];

  const mints = [];

  return (
    <div className="hcx-history">
      <div className="hcx-section-head">
        <div>
          <span className="hcx-eyebrow">Account · activity log</span>
          <h2>History</h2>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <button className="hcx-btn hcx-btn-ghost">Export CSV</button>
          <button className="hcx-btn hcx-btn-ghost">Filters ▾</button>
          <button className="hcx-btn hcx-btn-ghost">Date range ▾</button>
        </div>
      </div>

      <div className="hcx-tabs" style={{ marginBottom: 16, width: "fit-content" }}>
        {TABS.map(x => (
          <button key={x} className={tab === x ? "active" : ""} onClick={() => setTab(x)}>{x}</button>
        ))}
      </div>

      <div className="hcx-panel">
        {tab === "Trades" && (
          <table className="hcx-table" style={{ fontSize: 12 }}>
            <thead>
              <tr>
                <th>Time</th>
                <th>Side</th>
                <th>Pair</th>
                <th className="num">Quantity</th>
                <th className="num">Price (HCC)</th>
                <th className="num">Total HCC</th>
                <th className="num">Fee</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody>
              {trades.map((r, i) => (
                <tr key={i}>
                  <td style={{ fontFamily: "var(--font-mono)", color: "var(--fg-3)", fontSize: 11 }}>{r.t}</td>
                  <td><span style={{ color: r.side === "buy" ? "var(--hcx-bid)" : "var(--hcx-ask)", fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.06em" }}>{r.side.toUpperCase()}</span></td>
                  <td style={{ fontFamily: "var(--font-mono)" }}>{r.sym}<span style={{ color: "var(--fg-3)" }}>/HCC</span></td>
                  <td className="num">{r.q.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</td>
                  <td className="num">{fmtNum(r.p)}</td>
                  <td className="num">{r.total.toFixed(2)}</td>
                  <td className="num" style={{ color: "var(--fg-3)" }}>{r.fee.toFixed(2)}</td>
                  <td style={{ color: "var(--accent-guardian)" }}>● {r.status}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}

        {tab === "Orders" && (
          <table className="hcx-table" style={{ fontSize: 12 }}>
            <thead>
              <tr>
                <th>Time</th>
                <th>Side</th>
                <th>Pair</th>
                <th>Type</th>
                <th className="num">Quantity</th>
                <th className="num">Limit Px</th>
                <th className="num">Filled</th>
                <th>Status</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {orders.map((r, i) => (
                <tr key={i}>
                  <td style={{ fontFamily: "var(--font-mono)", color: "var(--fg-3)", fontSize: 11 }}>{r.t}</td>
                  <td><span style={{ color: r.side === "buy" ? "var(--hcx-bid)" : "var(--hcx-ask)", fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.06em" }}>{r.side.toUpperCase()}</span></td>
                  <td style={{ fontFamily: "var(--font-mono)" }}>{r.sym}<span style={{ color: "var(--fg-3)" }}>/HCC</span></td>
                  <td>{r.type}</td>
                  <td className="num">{r.q.toLocaleString()}</td>
                  <td className="num">{fmtNum(r.p)}</td>
                  <td className="num" style={{ color: r.filled === "100%" ? "var(--accent-guardian)" : r.filled === "0%" ? "var(--fg-3)" : "var(--accent-halo)" }}>{r.filled}</td>
                  <td style={{ color: r.status === "Open" ? "var(--accent-halo)" : r.status === "Cancelled" ? "var(--fg-3)" : "var(--accent-guardian)" }}>
                    {r.status === "Open" ? "◐" : r.status === "Cancelled" ? "✕" : "●"} {r.status}
                  </td>
                  <td>
                    {r.status === "Open" && <button className="hcx-btn hcx-btn-ghost" style={{ padding: "3px 9px", fontSize: 11 }}>Cancel</button>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}

        {tab === "Transfers" && (
          <table className="hcx-table" style={{ fontSize: 12 }}>
            <thead>
              <tr>
                <th>Time</th>
                <th>Direction</th>
                <th>Asset</th>
                <th className="num">Quantity</th>
                <th>Address / Source</th>
                <th>Note</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody>
              {transfers.map((r, i) => (
                <tr key={i}>
                  <td style={{ fontFamily: "var(--font-mono)", color: "var(--fg-3)", fontSize: 11 }}>{r.t}</td>
                  <td>
                    <span style={{ color: r.dir === "in" ? "var(--hcx-bid)" : "var(--hcx-ask)", fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.06em" }}>
                      {r.dir === "in" ? "↓ IN" : "↑ OUT"}
                    </span>
                  </td>
                  <td style={{ fontFamily: "var(--font-mono)" }}>{r.sym}</td>
                  <td className="num">{r.q.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</td>
                  <td style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-2)" }}>{r.addr}</td>
                  <td style={{ color: "var(--fg-2)" }}>{r.note}</td>
                  <td style={{ color: "var(--accent-guardian)" }}>● {r.status}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}

        {tab === "Mints / Burns" && (
          <table className="hcx-table" style={{ fontSize: 12 }}>
            <thead>
              <tr>
                <th>Block</th>
                <th>Time</th>
                <th>Token</th>
                <th className="num">Δ Supply</th>
                <th>Event</th>
                <th className="num">Quorum</th>
              </tr>
            </thead>
            <tbody>
              {mints.map((r, i) => (
                <tr key={i}>
                  <td style={{ fontFamily: "var(--font-mono)", color: "var(--fg-3)" }}>#{r.blk.toLocaleString()}</td>
                  <td style={{ fontFamily: "var(--font-mono)", color: "var(--fg-3)", fontSize: 11 }}>{r.t}</td>
                  <td style={{ fontFamily: "var(--font-mono)" }}>{r.sym}</td>
                  <td className="num" style={{ color: r.ds.startsWith("−") ? "var(--hcx-ask)" : "var(--hcx-bid)" }}>{r.ds}</td>
                  <td style={{ color: "var(--fg-2)" }}>{r.evt}</td>
                  <td className="num" style={{ fontFamily: "var(--font-mono)" }}>{r.q}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>

      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 14, color: "var(--fg-3)", fontSize: 12, fontFamily: "var(--font-mono)" }}>
        <span>Showing 10 of 247 records</span>
        <div style={{ display: "flex", gap: 6 }}>
          <button className="hcx-btn hcx-btn-ghost" style={{ padding: "5px 11px", fontSize: 12 }}>‹ Prev</button>
          <button className="hcx-btn hcx-btn-ghost" style={{ padding: "5px 11px", fontSize: 12 }}>Next ›</button>
        </div>
      </div>
    </div>
  );
}

// =========================================================
// DEPOSITS VIEW — fund / withdraw
// =========================================================
function DepositsView() {
  const [mode, setMode] = dUseState("deposit");
  const [method, setMethod] = dUseState("ACH");
  const [amount, setAmount] = dUseState("1000");

  const methods = [];

  const recent = [];

  return (
    <div className="hcx-deposits">
      <div className="hcx-section-head">
        <div>
          <span className="hcx-eyebrow">Account · funding</span>
          <h2>Deposits & Withdrawals</h2>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <div className="hcx-tabs">
            <button className={mode === "deposit" ? "active" : ""} onClick={() => setMode("deposit")}>↓ Deposit</button>
            <button className={mode === "withdraw" ? "active" : ""} onClick={() => setMode("withdraw")}>↑ Withdraw</button>
          </div>
        </div>
      </div>

      <div className="hcx-deposits-grid">
        {/* Method picker */}
        <div className="hcx-panel">
          <div className="hcx-panel-head">{mode === "deposit" ? "Choose deposit method" : "Choose withdrawal method"}</div>
          <div className="hcx-panel-body" style={{ padding: 0 }}>
            {methods.map(m => (
              <div key={m.id}
                   className={"hcx-method " + (method === m.id ? "active" : "")}
                   onClick={() => setMethod(m.id)}>
                <div className="m-radio">{method === m.id ? "●" : "○"}</div>
                <div className="m-body">
                  <div className="m-label">{m.label}</div>
                  <div className="m-meta">
                    <span>fee · <b>{m.fee}</b></span>
                    <span>settles · <b>{m.settle}</b></span>
                    <span>min · {m.min}</span>
                    <span>max · {m.max}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Amount + summary */}
        <div className="hcx-panel">
          <div className="hcx-panel-head">{mode === "deposit" ? "Amount to deposit" : "Amount to withdraw"}</div>
          <div className="hcx-panel-body">
            {mode === "withdraw" && (
              <div style={{ background: "var(--bg-graphite)", padding: "10px 12px", marginBottom: 14, fontSize: 12, color: "var(--fg-2)" }}>
                Available to withdraw: <b style={{ fontFamily: "var(--font-mono)", color: "var(--fg-1)" }}>⚕12,488.40 HCC</b>
              </div>
            )}
            <div className="hcx-amount">
              <input type="text" value={amount} onChange={(e) => setAmount(e.target.value.replace(/[^\d.]/g, ""))} />
              <div className="hcx-amount-suffix">{method === "USDC" ? "USDC" : "USD"}</div>
            </div>
            <div className="hcx-amount-quick">
              {["100", "500", "1000", "5000", "Max"].map(v => (
                <button key={v} onClick={() => setAmount(v === "Max" ? "12488.40" : v)}>{v}</button>
              ))}
            </div>

            <div className="hcx-summary">
              <div className="hcx-sum-row">
                <span>{mode === "deposit" ? "You send" : "You withdraw"}</span>
                <span className="v">${(parseFloat(amount) || 0).toFixed(2)} {method === "USDC" ? "USDC" : "USD"}</span>
              </div>
              <div className="hcx-sum-row">
                <span>Fee · {methods.find(m => m.id === method).label}</span>
                <span className="v" style={{ color: "var(--fg-3)" }}>
                  {method === "Card" ? `$${((parseFloat(amount) || 0) * 0.0149).toFixed(2)}` : method === "Wire" ? "$15.00" : "$0.00"}
                </span>
              </div>
              <div className="hcx-sum-row">
                <span>Network fee</span>
                <span className="v" style={{ color: "var(--fg-3)" }}>{method === "USDC" || method === "HCR" ? "$1.20" : "$0.00"}</span>
              </div>
              <div className="hcx-sum-row total">
                <span>{mode === "deposit" ? "You receive" : "Net to bank"}</span>
                <span className="v">⚕{((parseFloat(amount) || 0) * (method === "Card" ? 0.985 : 1) - (method === "Wire" ? 15 : 0)).toFixed(2)} HCC</span>
              </div>
              <div className="hcx-sum-row">
                <span>Estimated arrival</span>
                <span className="v" style={{ color: "var(--accent-halo)" }}>{methods.find(m => m.id === method).settle}</span>
              </div>
            </div>

            <button className="hcx-btn hcx-btn-primary" style={{ width: "100%", marginTop: 18, padding: "12px", fontSize: 14 }}>
              {mode === "deposit" ? `Deposit $${amount}` : `Withdraw $${amount}`} →
            </button>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--fg-3)", textAlign: "center", marginTop: 10, letterSpacing: "0.04em" }}>
              SETTLED ON-CHAIN · 8/11 VALIDATOR QUORUM · INSURED TO $250K BY ACME TRUST
            </div>
          </div>
        </div>

        {/* Linked accounts */}
        <div className="hcx-panel" style={{ gridColumn: "1 / -1" }}>
          <div className="hcx-panel-head" style={{ display: "flex", justifyContent: "space-between" }}>
            <span>Linked funding sources</span>
            <button className="hcx-btn hcx-btn-ghost" style={{ padding: "5px 11px", fontSize: 12 }}>+ Link new</button>
          </div>
          <div className="hcx-panel-body" style={{ padding: 0 }}>
            <table className="hcx-table" style={{ fontSize: 12 }}>
              <thead>
                <tr>
                  <th>Source</th>
                  <th>Type</th>
                  <th>Last 4</th>
                  <th>Linked</th>
                  <th>Verification</th>
                  <th>Default</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td style={{ color: "var(--fg-1)" }}>Wells Fargo · Checking</td>
                  <td>Bank · ACH</td>
                  <td style={{ fontFamily: "var(--font-mono)" }}>•••• 4422</td>
                  <td style={{ color: "var(--fg-3)" }}>2024-09-12</td>
                  <td style={{ color: "var(--accent-guardian)" }}>● Plaid verified</td>
                  <td><span style={{ color: "var(--accent-halo)" }}>★ Default</span></td>
                  <td><button className="hcx-btn hcx-btn-ghost" style={{ padding: "3px 9px", fontSize: 11 }}>Manage</button></td>
                </tr>
                <tr>
                  <td style={{ color: "var(--fg-1)" }}>Chase Sapphire</td>
                  <td>Card · Debit</td>
                  <td style={{ fontFamily: "var(--font-mono)" }}>•••• 9081</td>
                  <td style={{ color: "var(--fg-3)" }}>2025-04-22</td>
                  <td style={{ color: "var(--accent-guardian)" }}>● Verified</td>
                  <td style={{ color: "var(--fg-3)" }}>—</td>
                  <td><button className="hcx-btn hcx-btn-ghost" style={{ padding: "3px 9px", fontSize: 11 }}>Manage</button></td>
                </tr>
                <tr>
                  <td style={{ color: "var(--fg-1)" }}>USDC · Ethereum mainnet</td>
                  <td>Crypto · ERC-20</td>
                  <td style={{ fontFamily: "var(--font-mono)", fontSize: 11 }}>0x71c8…ef02</td>
                  <td style={{ color: "var(--fg-3)" }}>2025-01-14</td>
                  <td style={{ color: "var(--accent-guardian)" }}>● On-chain verified</td>
                  <td style={{ color: "var(--fg-3)" }}>—</td>
                  <td><button className="hcx-btn hcx-btn-ghost" style={{ padding: "3px 9px", fontSize: 11 }}>Manage</button></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        {/* Recent activity */}
        <div className="hcx-panel" style={{ gridColumn: "1 / -1" }}>
          <div className="hcx-panel-head">Recent funding activity</div>
          <div className="hcx-panel-body" style={{ padding: 0 }}>
            <table className="hcx-table" style={{ fontSize: 12 }}>
              <thead>
                <tr>
                  <th>Time</th>
                  <th>Direction</th>
                  <th>Method</th>
                  <th className="num">Amount</th>
                  <th>Asset</th>
                  <th>ETA</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
                {recent.map((r, i) => (
                  <tr key={i}>
                    <td style={{ fontFamily: "var(--font-mono)", color: "var(--fg-3)", fontSize: 11 }}>{r.t}</td>
                    <td>
                      <span style={{ color: r.dir === "in" ? "var(--hcx-bid)" : "var(--hcx-ask)", fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.06em" }}>
                        {r.dir === "in" ? "↓ IN" : "↑ OUT"}
                      </span>
                    </td>
                    <td>{r.method}</td>
                    <td className="num">${r.amt.toFixed(2)}</td>
                    <td style={{ fontFamily: "var(--font-mono)" }}>{r.asset}</td>
                    <td style={{ color: "var(--fg-3)" }}>{r.eta}</td>
                    <td style={{ color: r.status === "Pending" ? "var(--accent-halo)" : "var(--accent-guardian)" }}>
                      {r.status === "Pending" ? "⏳" : "●"} {r.status}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
        {/* Virtual cards */}
        <div className="hcx-panel" style={{ gridColumn: "1 / -1" }}>
          <div className="hcx-panel-head" style={{ display: "flex", justifyContent: "space-between" }}>
            <span>Virtual cards \u00b7 spend HCC like USD</span>
            <button className="hcx-btn hcx-btn-ghost" style={{ padding: "5px 11px", fontSize: 12 }}>+ Issue card</button>
          </div>
          <div className="hcx-panel-body" style={{ padding: 18, display: "grid", gridTemplateColumns: "320px 1fr", gap: 24 }}>
            <div style={{ background: "linear-gradient(135deg, #0f1a14, #0b1d28)", borderRadius: 12, padding: 22, color: "#fff", position: "relative", overflow: "hidden", border: "1px solid var(--border-1)" }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.18em", opacity: 0.6, textTransform: "uppercase" }}>Conceptual Health \u00b7 PCI-validated processor Issuing</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 600, marginTop: 32, letterSpacing: "0.04em" }}>HC \u00b7 ACTIVE</div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 16, letterSpacing: "0.18em", marginTop: 8 }}>4242 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 8801</div>
              <div style={{ display: "flex", gap: 24, marginTop: 14, fontFamily: "var(--font-mono)", fontSize: 11, opacity: 0.7 }}>
                <span>EXP 09/28</span><span>CVV \u2022\u2022\u2022</span>
              </div>
              <div style={{ marginTop: 12, fontSize: 12 }}>SARAH J. CHEN</div>
              <div style={{ position: "absolute", right: 18, top: 18, fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--accent-clinical)" }}>\u25CF LIVE</div>
            </div>
            <div>
              <p style={{ fontSize: 13, color: "var(--fg-2)", lineHeight: 1.7, margin: 0 }}>
                Spend your HCC balance anywhere Visa is accepted. Card swipes auto-convert HCC \u2192 USD at the chain settlement price (no slippage above 0.1%) and the underlying tokens settle to the Reserve wallet on-chain. Issued via <strong style={{ color: "var(--fg-1)" }}>PCI-validated processor Issuing</strong>; full PCI-DSS handled by PCI-validated processor; CH never sees the PAN.
              </p>
              <table className="hcx-table" style={{ fontSize: 12, marginTop: 14 }}>
                <thead><tr><th>Card</th><th>Last 4</th><th>Limit</th><th>Spend MTD</th><th>Status</th><th></th></tr></thead>
                <tbody>
                  <tr><td>Health spend (default)</td><td style={{ fontFamily: "var(--font-mono)" }}>\u2022\u2022\u2022\u2022 8801</td><td className="num">$2,500 / mo</td><td className="num">$487.20</td><td style={{ color: "var(--accent-clinical)" }}>\u25CF Active</td><td><button className="hcx-btn hcx-btn-ghost" style={{ padding: "3px 9px", fontSize: 11 }}>Manage</button></td></tr>
                  <tr><td>Pharmacy only</td><td style={{ fontFamily: "var(--font-mono)" }}>\u2022\u2022\u2022\u2022 4407</td><td className="num">$800 / mo</td><td className="num">$132.05</td><td style={{ color: "var(--accent-clinical)" }}>\u25CF Active</td><td><button className="hcx-btn hcx-btn-ghost" style={{ padding: "3px 9px", fontSize: 11 }}>Manage</button></td></tr>
                  <tr><td>One-time \u00b7 dental</td><td style={{ fontFamily: "var(--font-mono)" }}>\u2022\u2022\u2022\u2022 9812</td><td className="num">$1,200 burned</td><td className="num">$1,150.00</td><td style={{ color: "var(--fg-3)" }}>\u25CF Closed</td><td><button className="hcx-btn hcx-btn-ghost" style={{ padding: "3px 9px", fontSize: 11 }}>Receipt</button></td></tr>
                </tbody>
              </table>
              <div style={{ marginTop: 12, fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--fg-3)", letterSpacing: "0.06em" }}>
                CARD SWIPE \u00b7 HCC\u2192USD \u00b7 SETTLES TO 0xR8\u2026D51B (RESERVE) \u00b7 1099-DA REPORTABLE
              </div>
            </div>
          </div>
        </div>

        {/* Fee tier ladder */}
        <div className="hcx-panel" style={{ gridColumn: "1 / -1" }}>
          <div className="hcx-panel-head">Maker / taker fee ladder \u00b7 your tier today</div>
          <div className="hcx-panel-body" style={{ padding: 0 }}>
            <table className="hcx-table" style={{ fontSize: 12 }}>
              <thead><tr><th>Tier</th><th>30-day volume</th><th>Maker</th><th>Taker</th><th>Withdrawal fee</th><th>Perks</th></tr></thead>
              <tbody>
                {[
                  { t: "Tier 0",  v: "< $10K",       mk: "0.10%", tk: "0.10%", w: "$0.50 / withdraw", p: "Standard" },
                  { t: "Tier 1",  v: "$10K \u2013 $100K", mk: "0.08%", tk: "0.10%", w: "$0.50 / withdraw", p: "Priority support \u00b7 1 free wire/mo", active: true },
                  { t: "Tier 2",  v: "$100K \u2013 $1M",  mk: "0.05%", tk: "0.08%", w: "Free", p: "Virtual cards \u00b7 4 free wires/mo \u00b7 API rate \u00d72" },
                  { t: "Tier 3",  v: "$1M \u2013 $10M",   mk: "0.02%", tk: "0.05%", w: "Free", p: "OTC desk \u00b7 institutional reporting \u00b7 dedicated PM" },
                  { t: "Tier 4",  v: "\u2265 $10M",       mk: "0.00%", tk: "0.02%", w: "Free", p: "White-glove \u00b7 custom tax export \u00b7 governance signal" },
                ].map((r, i) => (
                  <tr key={i} style={r.active ? { background: "rgba(46, 158, 107, 0.06)" } : {}}>
                    <td style={{ color: r.active ? "var(--accent-clinical)" : "var(--fg-1)", fontWeight: 600 }}>
                      {r.t} {r.active && <span style={{ marginLeft: 6, fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--accent-clinical)" }}>\u25CF YOU</span>}
                    </td>
                    <td>{r.v}</td>
                    <td className="num">{r.mk}</td>
                    <td className="num">{r.tk}</td>
                    <td>{r.w}</td>
                    <td style={{ color: "var(--fg-2)", fontSize: 11 }}>{r.p}</td>
                  </tr>
                ))}
              </tbody>
            </table>
            <div style={{ padding: "12px 18px", background: "var(--bg-graphite)", fontSize: 12, color: "var(--fg-2)", borderTop: "1px solid var(--border-1)" }}>
              You are <strong style={{ color: "var(--fg-1)" }}>Tier 1</strong>. <strong style={{ color: "var(--accent-halo)" }}>$67,402</strong> more in 30-day volume unlocks Tier 2 (Virtual cards + free withdrawals).
              Volume is rolling 30-day, all assets, in USD-equivalent at fill price. Tier reviews nightly.
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
// =========================================================
function SettingsView() {
  const [section, setSection] = dUseState("Profile");
  const sections = [];

  return (
    <div className="hcx-settings">
      <div className="hcx-section-head" style={{ margin: "0 0 24px" }}>
        <div>
          <span className="hcx-eyebrow">Account · settings</span>
          <h2>Settings</h2>
        </div>
      </div>

      <div className="hcx-settings-shell">
        {/* Sidebar */}
        <nav className="hcx-settings-nav">
          {sections.map(s => (
            <a key={s} href="#"
               className={section === s ? "active" : ""}
               onClick={(e) => { e.preventDefault(); setSection(s); }}>
              {s}
            </a>
          ))}
        </nav>

        {/* Content */}
        <div className="hcx-settings-body">
          {section === "Profile" && <SettingsProfile />}
          {section === "Security" && <SettingsSecurity />}
          {section === "Notifications" && <SettingsNotifications />}
          {section === "Tax & Reporting" && <SettingsTax />}
          {section === "API Keys" && <SettingsAPI />}
          {section === "Danger Zone" && <SettingsDanger />}
        </div>
      </div>
    </div>
  );
}

function SettingsRow({ label, sub, children }) {
  return (
    <div className="hcx-srow">
      <div className="hcx-srow-l">
        <div className="lbl">{label}</div>
        {sub && <div className="sub">{sub}</div>}
      </div>
      <div className="hcx-srow-r">{children}</div>
    </div>
  );
}

function SettingsProfile() {
  return (
    <div>
      <h3 className="hcx-shead">Profile</h3>
      <div className="hcx-spanel">
        <SettingsRow label="Legal name" sub="Used on tax forms (1099-DA) and KYC">
          <input className="hcx-input" defaultValue="Sarah J. Chen" />
        </SettingsRow>
        <SettingsRow label="Display name" sub="Shown in social, leaderboards">
          <input className="hcx-input" defaultValue="@sarah_orb" />
        </SettingsRow>
        <SettingsRow label="Email" sub="For statements and recovery">
          <input className="hcx-input" defaultValue="patient@example.com" />
        </SettingsRow>
        <SettingsRow label="Phone" sub="For 2FA and account alerts">
          <input className="hcx-input" defaultValue="+1 (415) 555-0182" />
        </SettingsRow>
        <SettingsRow label="Country / Region" sub="Determines available products">
          <select className="hcx-input"><option>United States</option><option>Canada</option><option>United Kingdom</option></select>
        </SettingsRow>
        <SettingsRow label="Account tier" sub="HC.exchange Tier 2 · unlocked 2025-03-14">
          <span className="hcx-badge">● Tier 2 · verified</span>
        </SettingsRow>
      </div>
      <h3 className="hcx-shead">Identity verification</h3>
      <div className="hcx-spanel">
        <SettingsRow label="KYC level" sub="Full ID + selfie + address verified">
          <span className="hcx-badge ok">● Approved</span>
        </SettingsRow>
        <SettingsRow label="W-9 on file" sub="Required for trading; renewed annually">
          <span className="hcx-badge ok">● 2025 W-9</span>
        </SettingsRow>
        <SettingsRow label="CFTC eligible-contract-participant tier" sub="Required for HCR/HCC futures and leveraged commodity products">
          <button className="hcx-btn hcx-btn-ghost">Verify ECP tier →</button>
        </SettingsRow>
      </div>
    </div>
  );
}

function SettingsSecurity() {
  return (
    <div>
      <h3 className="hcx-shead">Security</h3>
      <div className="hcx-spanel">
        <SettingsRow label="Password" sub="Last changed 2025-08-22">
          <button className="hcx-btn hcx-btn-ghost">Change password</button>
        </SettingsRow>
        <SettingsRow label="Two-factor authentication" sub="Authenticator app · backup codes generated">
          <span className="hcx-badge ok" style={{ marginRight: 8 }}>● Active</span>
          <button className="hcx-btn hcx-btn-ghost">Manage</button>
        </SettingsRow>
        <SettingsRow label="Hardware key (YubiKey)" sub="Recommended for accounts &gt; $10K">
          <button className="hcx-btn hcx-btn-ghost">+ Add hardware key</button>
        </SettingsRow>
        <SettingsRow label="Withdrawal allowlist" sub="Restrict outbound transfers to known addresses">
          <span className="hcx-badge" style={{ marginRight: 8 }}>3 addresses</span>
          <button className="hcx-btn hcx-btn-ghost">Manage list</button>
        </SettingsRow>
        <SettingsRow label="Withdrawal time-lock" sub="24h hold on new addresses">
          <label className="hcx-toggle"><input type="checkbox" defaultChecked /><span></span></label>
        </SettingsRow>
      </div>
      <h3 className="hcx-shead">Active sessions</h3>
      <div className="hcx-spanel">
        <table className="hcx-table" style={{ fontSize: 12 }}>
          <thead><tr><th>Device</th><th>Location</th><th>IP</th><th>Last active</th><th></th></tr></thead>
          <tbody>
            <tr>
              <td style={{ color: "var(--fg-1)" }}>MacBook Pro · Safari</td>
              <td>San Francisco, CA</td>
              <td style={{ fontFamily: "var(--font-mono)" }}>76.14.•••.•••</td>
              <td style={{ color: "var(--accent-guardian)" }}>● Now</td>
              <td><span style={{ color: "var(--fg-3)", fontSize: 11 }}>This device</span></td>
            </tr>
            <tr>
              <td style={{ color: "var(--fg-1)" }}>iPhone 15 · HC.exchange app</td>
              <td>San Francisco, CA</td>
              <td style={{ fontFamily: "var(--font-mono)" }}>76.14.•••.•••</td>
              <td>2025-11-04 09:18</td>
              <td><button className="hcx-btn hcx-btn-ghost" style={{ padding: "3px 9px", fontSize: 11 }}>Revoke</button></td>
            </tr>
            <tr>
              <td style={{ color: "var(--fg-1)" }}>Linux · Firefox</td>
              <td>Oakland, CA</td>
              <td style={{ fontFamily: "var(--font-mono)" }}>108.41.•••.•••</td>
              <td>2025-10-28 22:01</td>
              <td><button className="hcx-btn hcx-btn-ghost" style={{ padding: "3px 9px", fontSize: 11 }}>Revoke</button></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
}

function SettingsNotifications() {
  const rows = [];
  return (
    <div>
      <h3 className="hcx-shead">Notification preferences</h3>
      <div className="hcx-spanel">
        <table className="hcx-table" style={{ fontSize: 13 }}>
          <thead>
            <tr>
              <th>Event</th>
              <th style={{ textAlign: "center", width: 80 }}>Email</th>
              <th style={{ textAlign: "center", width: 80 }}>SMS</th>
              <th style={{ textAlign: "center", width: 80 }}>Push</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r, i) => (
              <tr key={i}>
                <td style={{ color: "var(--fg-1)" }}>{r.lbl}</td>
                <td style={{ textAlign: "center" }}><label className="hcx-toggle"><input type="checkbox" defaultChecked={r.e} /><span></span></label></td>
                <td style={{ textAlign: "center" }}><label className="hcx-toggle"><input type="checkbox" defaultChecked={r.s} /><span></span></label></td>
                <td style={{ textAlign: "center" }}><label className="hcx-toggle"><input type="checkbox" defaultChecked={r.p} /><span></span></label></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function SettingsTax() {
  return (
    <div>
      <h3 className="hcx-shead">Tax & Reporting</h3>
      <div className="hcx-spanel">
        <SettingsRow label="Cost basis method" sub="Applies to all realized gains">
          <select className="hcx-input"><option>FIFO</option><option>LIFO</option><option>HIFO</option><option>Specific ID</option></select>
        </SettingsRow>
        <SettingsRow label="Tax residence" sub="Determines reporting forms">
          <input className="hcx-input" defaultValue="United States · CA" />
        </SettingsRow>
        <SettingsRow label="Form 1099-DA (2025)" sub="Filed automatically by Jan 31, 2026">
          <span className="hcx-badge" style={{ marginRight: 8 }}>● Will be issued</span>
          <button className="hcx-btn hcx-btn-ghost">Preview YTD</button>
        </SettingsRow>
        <SettingsRow label="Verified-event income" sub="Earnings from physical/medical/etc. axes are 1099-NEC">
          <button className="hcx-btn hcx-btn-ghost">Download YTD report</button>
        </SettingsRow>
      </div>
      <h3 className="hcx-shead">Year-to-date summary</h3>
      <div className="hcx-spanel" style={{ padding: 0 }}>
        <div style={{ padding: 18, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
          <div className="hcx-stat-mini"><div className="lbl">Realized gains</div><div className="val up">+⚕4,128.40</div></div>
          <div className="hcx-stat-mini"><div className="lbl">Realized losses</div><div className="val down">−⚕812.20</div></div>
          <div className="hcx-stat-mini"><div className="lbl">Earned (1099-NEC)</div><div className="val">⚕1,840.20</div></div>
          <div className="hcx-stat-mini"><div className="lbl">Net taxable</div><div className="val">⚕5,156.40</div></div>
        </div>
      </div>
    </div>
  );
}

function SettingsAPI() {
  return (
    <div>
      <h3 className="hcx-shead">API Keys</h3>
      <div style={{ background: "var(--bg-graphite)", padding: "12px 14px", marginBottom: 16, fontSize: 13, color: "var(--fg-2)", borderLeft: "3px solid var(--accent-halo)" }}>
        Use API keys to integrate HC.exchange with trading bots, accounting software, or treasury systems. Read-only keys recommended for analytics.
      </div>
      <div className="hcx-spanel" style={{ padding: 0 }}>
        <table className="hcx-table" style={{ fontSize: 12 }}>
          <thead>
            <tr>
              <th>Label</th>
              <th>Key</th>
              <th>Permissions</th>
              <th>Created</th>
              <th>Last used</th>
              <th>IP allowlist</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td style={{ color: "var(--fg-1)" }}>Treasury · read-only</td>
              <td style={{ fontFamily: "var(--font-mono)", fontSize: 11 }}>hcx_pk_a8…f0c2</td>
              <td><span className="hcx-badge">read</span></td>
              <td style={{ color: "var(--fg-3)" }}>2025-04-12</td>
              <td style={{ color: "var(--fg-3)" }}>2 hours ago</td>
              <td style={{ fontFamily: "var(--font-mono)", fontSize: 11 }}>2 IPs</td>
              <td><button className="hcx-btn hcx-btn-ghost" style={{ padding: "3px 9px", fontSize: 11 }}>Revoke</button></td>
            </tr>
            <tr>
              <td style={{ color: "var(--fg-1)" }}>Trading bot · prod</td>
              <td style={{ fontFamily: "var(--font-mono)", fontSize: 11 }}>hcx_pk_b2…918a</td>
              <td><span className="hcx-badge">read</span> <span className="hcx-badge" style={{ background: "rgba(245,189,75,0.10)", color: "var(--accent-halo)", marginLeft: 4 }}>trade</span></td>
              <td style={{ color: "var(--fg-3)" }}>2025-08-30</td>
              <td style={{ color: "var(--fg-3)" }}>14m ago</td>
              <td style={{ fontFamily: "var(--font-mono)", fontSize: 11 }}>1 IP</td>
              <td><button className="hcx-btn hcx-btn-ghost" style={{ padding: "3px 9px", fontSize: 11 }}>Revoke</button></td>
            </tr>
          </tbody>
        </table>
      </div>
      <button className="hcx-btn hcx-btn-primary" style={{ marginTop: 14 }}>+ Generate new API key</button>
    </div>
  );
}

function SettingsDanger() {
  return (
    <div>
      <h3 className="hcx-shead" style={{ color: "var(--hcx-ask)" }}>Danger zone</h3>
      <div className="hcx-spanel" style={{ borderColor: "rgba(255,77,79,0.4)" }}>
        <SettingsRow label="Export all data" sub="One ZIP with trades, transfers, attestations (~2 min)">
          <button className="hcx-btn hcx-btn-ghost">Request export</button>
        </SettingsRow>
        <SettingsRow label="Disable trading" sub="Lock account from new orders. Holdings remain.">
          <button className="hcx-btn hcx-btn-ghost" style={{ color: "var(--accent-halo)", borderColor: "var(--accent-halo)" }}>Disable</button>
        </SettingsRow>
        <SettingsRow label="Close account" sub="Permanent. Withdraw all funds first. 30-day cooling-off period.">
          <button className="hcx-btn" style={{ background: "var(--hcx-ask)", color: "#fff", borderColor: "var(--hcx-ask)" }}>Close account →</button>
        </SettingsRow>
      </div>
    </div>
  );
}

// Expose
Object.assign(window, { TickerDetail, HistoryView, DepositsView, SettingsView });