/* global React */
const { useState, useMemo } = React;

// ===== Token data =====
const AXES = {
  PO: { name: "Physiological Optimization",  color: "var(--axis-po)" },
  NM: { name: "Neurocognitive Mastery",      color: "var(--axis-nm)" },
  ER: { name: "Emotional Resilience",        color: "var(--axis-er)" },
  SC: { name: "Spiritual Coherence",         color: "var(--axis-sc)" },
  RS: { name: "Relational & Social",         color: "var(--axis-rs)" },
  ES: { name: "Environmental Symbiosis",     color: "var(--axis-es)" },
  TA: { name: "Technological Augmentation",  color: "var(--axis-ta)" },
  PV: { name: "Purposeful Vitality",         color: "var(--axis-pv)" },
};

const TOKENS = [];

const fmtUsd = (n) => "$" + n.toLocaleString(undefined, { minimumFractionDigits: 4, maximumFractionDigits: 4 });
const fmtVol = (n) => "$" + (n >= 1e6 ? (n/1e6).toFixed(2) + "M" : (n/1e3).toFixed(1) + "K");
const fmtNum = (n, d=4) => n.toLocaleString(undefined, { minimumFractionDigits: d, maximumFractionDigits: d });

// =========================================================
// Sparkline (no animation, deterministic per symbol)
// =========================================================
function Sparkline({ symbol, up, w=80, h=22 }) {
  // deterministic pseudo-random walk
  const points = useMemo(() => {
    let seed = 0;
    for (let i = 0; i < symbol.length; i++) seed = (seed * 31 + symbol.charCodeAt(i)) >>> 0;
    const rng = () => { seed = (seed * 1664525 + 1013904223) >>> 0; return (seed / 4294967295); };
    const N = 24; let v = 0.5;
    const pts = [];
    for (let i = 0; i < N; i++) {
      v += (rng() - 0.5) * 0.18;
      v = Math.max(0.05, Math.min(0.95, v));
      pts.push(v);
    }
    if (up) pts.sort((a,b) => a - b);
    else pts.sort((a,b) => b - a);
    // re-shuffle slightly so it's not monotonic
    return pts.map((p, i) => p * 0.7 + 0.15 + (rng()-0.5)*0.05);
  }, [symbol, up]);

  const path = points.map((p, i) => {
    const x = (i / (points.length - 1)) * w;
    const y = h - p * h;
    return (i === 0 ? "M" : "L") + x.toFixed(1) + "," + y.toFixed(1);
  }).join(" ");
  const stroke = up ? "var(--hcx-bid)" : "var(--hcx-ask)";
  return (
    <svg className="hcx-spark" width={w} height={h} viewBox={`0 0 ${w} ${h}`}>
      <path d={path} fill="none" stroke={stroke} strokeWidth="1.5" />
    </svg>
  );
}

// =========================================================
// Token glyph (sym + axis color)
// =========================================================
function TokenGlyph({ axis, sym, size }) {
  const color = AXES[axis]?.color || "var(--accent-guardian)";
  const style = {
    background: `radial-gradient(circle at 30% 30%, ${color}, color-mix(in oklab, ${color} 40%, #000))`,
    width: size || undefined, height: size || undefined,
  };
  // 2-3 char glyph
  const label = sym.slice(0, sym.length === 3 ? 3 : 2);
  return <div className="glyph" style={style}>{label}</div>;
}

function AxisPill({ axis }) {
  const color = AXES[axis]?.color || "var(--fg-2)";
  return (
    <span className="hcx-axis-pill" style={{
      background: `color-mix(in oklab, ${color} 12%, transparent)`,
      color,
      border: `1px solid color-mix(in oklab, ${color} 28%, transparent)`,
    }}>
      {axis}
    </span>
  );
}

// =========================================================
// Top chrome
// =========================================================
function StatusStrip() {
  const HCRTicker = window.KitChrome && window.KitChrome.HCRTicker;
  return (
    <div className="hcx-status">
      <div className="left">
        <span className="integrity">"Integrity in all we do™"</span>
        <span>—  Conceptual Healthcare Corporation</span>
      </div>
      <div className="right">
        {HCRTicker && <HCRTicker />}
        <span>·</span>
        <span>Health Commodity Exchange™ · The Markets, for Health</span>
        <span>·</span>
        <span>HIPAA · BAA-ready</span>
        <span>·</span>
        <span>IRS 1099-B Ready</span>
        <span>·</span>
        <span>21B HCR Hard Cap</span>
      </div>
    </div>
  );
}

function Nav({ tab, setTab }) {
  const tabs = [];
  return (
    <nav className="hcx-nav">
      <div className="hcx-brand">
        <div className="mark">⚕</div>
        <div className="wm">
          <span className="wm-1">HC.exchange</span>
          <span className="wm-2">Health Commodity Exchange™</span>
        </div>
      </div>
      <div className="hcx-navlinks">
        {tabs.map(t => (
          <a key={t} href="#" className={tab === t ? "active" : ""}
             onClick={(e) => { e.preventDefault(); setTab(t); }}>
            {t}
          </a>
        ))}
      </div>
      <div className="hcx-nav-actions">
        <button className="hcx-iconbtn" title="Notifications">●</button>
        <button className="hcx-iconbtn" title="Theme">◐</button>
        <a href="/markets" className="hcx-btn hcx-btn-ghost">Paper Trade</a>
        <a href="/auth" className="hcx-btn hcx-btn-primary">Connect Account</a>
        {window.KitChrome && window.KitChrome.AppSwitcher && <window.KitChrome.AppSwitcher currentId="exchange" />}
      </div>
    </nav>
  );
}

function Tape() {
  const items = TOKENS.slice(0, 8);
  return (
    <div className="hcx-tape">
      <span className="hcx-tape-item">
        <span className="live-dot" style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--accent-guardian)", display: "inline-block" }}></span>
        <span className="sym">LIVE</span>
      </span>
      {items.map(t => (
        <span key={t.sym} className="hcx-tape-item">
          <span className="sym">{t.sym}/HCC</span>
          <span className="px">{fmtNum(t.price)}</span>
          <span className={"ch " + (t.ch >= 0 ? "up" : "down")}>
            {t.ch >= 0 ? "+" : ""}{t.ch.toFixed(2)}%
          </span>
        </span>
      ))}
    </div>
  );
}

// =========================================================
// MARKETS VIEW
// =========================================================
function HeroBanner() {
  return (
    <section className="hcx-hero">
      <div>
        <span className="hcx-eyebrow">Era 0 · Genesis Pricing</span>
        <h1>Get Healthy.<br /><em>Get Wealthy.</em></h1>
        <p>A health-native commodity exchange. HCR mints when your body earns; HCC mints when your data earns. Both 21B hard cap, both float, both governed by the Master Equation. Trade the part of you that matters most — and quote everything in HCC.</p>
        <div className="hcx-hero-actions">
          <a href="/markets" className="hcx-btn hcx-btn-primary">I'm a trader →</a>
          <a href="/chains" className="hcx-btn hcx-btn-ghost">List Your Chain</a>
        </div>
      </div>
      <div className="hcx-hero-stats">
        {[
          { p: "exchange.volume24h" },
          { p: "exchange.activePairs" },
          { p: "exchange.hcrPrice" },
          { p: "exchange.hccPrice" },
        ].map(({ p }) => {
          const m = window.CHBrand.metric(p);
          const valColor = m.accent === "guardian" ? "var(--accent-guardian)"
                         : m.accent === "halo"     ? "var(--accent-halo)" : undefined;
          const subClass = "sub" + (m.tone === "up" ? " up" : m.tone === "down" ? " down" : "");
          return (
            <div className="hcx-stat" key={p} title={`As of ${window.CHBrand.metrics.asOfLabel} · ${p}`}>
              <div className="label">{m.label}</div>
              <div className="val" style={valColor ? { color: valColor } : undefined}>{m.value}</div>
              <div className={subClass}>{m.sub}</div>
            </div>
          );
        })}
      </div>
      <div className="k-stat-asof" style={{ gridColumn: "1 / -1", marginTop: 14, justifySelf: "end" }}>
        <span className="k-stat-asof-dot" aria-hidden="true">●</span>
        <span>Reconciled {window.CHBrand.metrics.asOfLabel}</span>
        <span className="k-status-sep">·</span>
        <a href="https://conceptualhealth.com/ui_kits/marketing/trust/patents.html" className="k-stat-asof-link">How we measure →</a>
      </div>
    </section>
  );
}

function MarketsTable() {
  const [filter, setFilter] = useState("All");
  const [starred, setStarred] = useState(new Set(["HCR", "HCC"]));
  const filters = [];

  const rows = useMemo(() => {
    return TOKENS.filter(t => {
      if (filter === " Gainers") return t.ch > 0;
      if (filter === "Losers")  return t.ch < 0;
      if (filter === "New")      return t.isNew;
      if (filter === "★ Starred")   return starred.has(t.sym);
      return true;
    });
  }, [filter, starred]);

  const toggleStar = (sym) => {
    const next = new Set(starred);
    next.has(sym) ? next.delete(sym) : next.add(sym);
    setStarred(next);
  };

  return (
    <div className="hcx-markets">
      <div className="hcx-markets-head">
        <div className="left">
          <div className="hcx-tabs">
            {filters.map(f => (
              <button key={f} className={filter === f ? "active" : ""} onClick={() => setFilter(f)}>
                {f}
              </button>
            ))}
          </div>
        </div>
        <div className="hcx-search">
          <span>⌕</span>
          <input placeholder="Search tokens, axes…" />
          <span style={{ color: "var(--fg-3)" }}>{rows.length} tokens</span>
        </div>
      </div>
      <table className="hcx-table">
        <thead>
          <tr>
            <th style={{ width: 32 }}></th>
            <th style={{ width: 36 }}>#</th>
            <th>Token</th>
            <th>Axis</th>
            <th className="num">Price (HCC)</th>
            <th className="num">24h Change</th>
            <th className="num">Volume</th>
            <th className="num">24h Range</th>
            <th>Trend</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {rows.map(t => (
            <tr key={t.sym}>
              <td>
                <span className={"star " + (starred.has(t.sym) ? "on" : "")}
                      onClick={() => toggleStar(t.sym)}>
                  {starred.has(t.sym) ? "★" : "☆"}
                </span>
              </td>
              <td className="rank">{t.rank}</td>
              <td onClick={() => window.__hcxOpenDetail && window.__hcxOpenDetail(t.sym)} style={{ cursor: "pointer" }}>
                <div className="hcx-token">
                  <TokenGlyph axis={t.axis} sym={t.sym} />
                  <div className="meta">
                    <span className="sym">
                      {t.sym}
                      {t.isNew && <span style={{ marginLeft: 6, color: "var(--accent-halo)", fontSize: 9, letterSpacing: "0.1em" }}>NEW</span>}
                      {t.sym === "HCC" && <span style={{ marginLeft: 6, color: "var(--accent-halo)", fontSize: 9, letterSpacing: "0.1em" }}>QUOTE</span>}
                      {t.kind === "community" && <span style={{ marginLeft: 6, color: "var(--accent-clinical)", fontSize: 9, letterSpacing: "0.1em" }}>COMMUNITY CHAIN</span>}
                      {t.kind === "applicant" && <span style={{ marginLeft: 6, color: "var(--fg-3)", fontSize: 9, letterSpacing: "0.1em", border: "1px solid var(--border-1)", padding: "1px 5px", borderRadius: 3 }}>APPLIED</span>}
                    </span>
                    <span className="name">{t.name}</span>
                  </div>
                </div>
              </td>
              <td><AxisPill axis={t.axis} /></td>
              <td className="num">⚕{fmtNum(t.price)}</td>
              <td className="num">
                <span className={"hcx-change " + (t.ch >= 0 ? "up" : "down")}>
                  {Math.abs(t.ch).toFixed(2)}%
                </span>
              </td>
              <td className="num" style={{ color: "var(--fg-2)" }}>{fmtVol(t.vol)}</td>
              <td className="num" style={{ color: "var(--fg-3)", fontSize: 11 }}>
                {fmtNum(t.lo)} – {fmtNum(t.hi)}
              </td>
              <td><Sparkline symbol={t.sym} up={t.ch >= 0} /></td>
              <td>
                <button className="hcx-btn hcx-btn-ghost" style={{ padding: "5px 11px", fontSize: 12 }}
                        onClick={() => window.__hcxOpenDetail && window.__hcxOpenDetail(t.sym)}>
                  Trade
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

// =========================================================
// EARNINGS CALCULATOR
// =========================================================
function EarningsCard() {
  const [activity, setActivity] = useState("10K Steps");
  const [days, setDays] = useState(30);
  const activities = [];
  const a = activities.find(x => x.id === activity);
  const earned = a ? a.rate * days : 0;
  const usd = earned * 0.1042;

  return (
    <div className="hcx-earn">
      <div className="hcx-earn-l">
        <span className="hcx-eyebrow">Health Earnings Calculator</span>
        <h3>What's your health worth?</h3>
        <p>Pick an activity, set a duration, see what your habits would mint at current Era 0 pricing.</p>
        <div className="hcx-activity-grid">
          {activities.map(x => (
            <div key={x.id}
                 className={"hcx-activity " + (activity === x.id ? "active" : "")}
                 onClick={() => setActivity(x.id)}>
              <span className="ic">{x.ic}</span>
              <span>{x.id}</span>
            </div>
          ))}
        </div>
        <div className="hcx-duration">
          {[7, 30, 90, 180, 365].map(d => (
            <button key={d} className={days === d ? "active" : ""} onClick={() => setDays(d)}>
              {d}d
            </button>
          ))}
        </div>
      </div>
      <div className="hcx-earn-r">
        <div>
          <div className="label">HCR Earned</div>
          <div className="big">{fmtNum(earned, 4)}<span className="unit">HCR</span></div>
        </div>
        <div>
          <div className="label">≈ HCC Value</div>
          <div className="conv">⚕<span className="v">{fmtNum(earned, 4)}</span></div>
        </div>
        <div>
          <div className="label">≈ USD Equivalent</div>
          <div className="conv"><span className="v">${usd.toFixed(2)}</span> at $0.1042 / HCR</div>
        </div>
        <a href="/markets?pair=HCR/HCC" className="hcx-btn hcx-btn-primary" style={{ width: "fit-content" }}>
          Trade HCR / HCC →
        </a>
      </div>
    </div>
  );
}

// =========================================================
// 8 AXES GRID
// =========================================================
function AxesGrid() {
  const axes = [];
  return (
    <div className="hcx-axes">
      {axes.map(a => {
        const color = AXES[a.code].color;
        return (
          <div key={a.code} className="hcx-axis">
            <div className="code" style={{ color }}>{a.code}</div>
            <div className="name">{a.name}</div>
            <div className="count">{a.count} {a.count === 1 ? "token" : "tokens"}</div>
          </div>
        );
      })}
    </div>
  );
}

// =========================================================
// LIST-YOUR-CHAIN CTA
// =========================================================
function ListCta() {
  return (
    <div className="hcx-list-cta">
      <div>
        <span className="hcx-eyebrow">Now Listing &middot; Community Chains</span>
        <h3>List your community health chain on HC.exchange</h3>
        <p>The doc names three live community chains today &mdash; <strong style={{ color: "var(--fg-1)" }}>MHC</strong> (Mental Health, NM axis), <strong style={{ color: "var(--fg-1)" }}>DMC</strong> (Diabetes Management, PO), <strong style={{ color: "var(--fg-1)" }}>FTC</strong> (Fitness, PO). Each is a 1B-cap chain trading USD-only. Listing fee is fixed in commodity terms: <strong style={{ color: "var(--accent-halo)" }}>500 HCC</strong>. Acquisition price for the originating clinic: <strong style={{ color: "var(--accent-halo)" }}>10,000 HCC</strong>. <em>Listing application requires <span style={{ color: "var(--accent-guardian)" }}>CH Score &ge; 70</span> on the applicant&rsquo;s primary axis.</em></p>
        <div className="meta">
          <span>&check; HIPAA-Compliant</span>
          <span>&check; IRS 1099-B Reporting</span>
          <span>&check; Real-Time Matching</span>
          <span>&check; 10 Business Day Review</span>
          <span>&check; CH Score gated</span>
        </div>
      </div>
      <a href="/chains#apply" className="hcx-btn hcx-btn-primary">Apply to List →</a>
    </div>
  );
}

// =========================================================
// TRADE VIEW
// =========================================================
function TradeView() {
  const [side, setSide] = useState("buy");
  const [orderType, setOrderType] = useState("Limit");

  // Order book
  const asks = [];
  const bids = [];

  return (
    <div className="hcx-trade">
      {/* Pair header */}
      <div className="hcx-pair-head">
        <div className="pair">
          <TokenGlyph axis="PO" sym="HCR" size={36} />
          <div>
            <div className="pair-name">HCR<span className="quote"> / HCC</span></div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-3)", marginTop: 2 }}>
              Health Coin Reward · Physical Output axis
            </div>
          </div>
        </div>
        <div className="price-now" style={{ color: "var(--hcx-bid)" }}>
          ⚕0.1042 <span style={{ fontSize: 14, color: "var(--hcx-bid)" }}>▲ 4.21%</span>
        </div>
        <div className="stats">
          <div className="stat-i"><span className="l">24h High</span><span className="v">⚕0.1058</span></div>
          <div className="stat-i"><span className="l">24h Low</span><span className="v">⚕0.0992</span></div>
          <div className="stat-i"><span className="l">24h Volume</span><span className="v">12.84M HCR</span></div>
          <div className="stat-i"><span className="l">Funding</span><span className="v" style={{ color: "var(--accent-guardian)" }}>+0.012%</span></div>
          <div className="stat-i"><span className="l">Contract</span><span className="v">CH Chain · IRC §1221</span></div>
        </div>
      </div>

      {/* Pairs list */}
      <div className="hcx-panel hcx-pairs-panel">
        <div className="hcx-panel-head">
          <span>Pairs</span>
          <span style={{ fontSize: 10 }}>vs HCC</span>
        </div>
        <div style={{ overflow: "auto" }}>
          {TOKENS.filter(t => t.sym !== "HCC").map(t => (
            <div key={t.sym} className={"hcx-pair-row " + (t.sym === "HCR" ? "active" : "")}>
              <div className="l">
                <span className="s">{t.sym}/HCC</span>
                <span className="v">{fmtVol(t.vol)}</span>
              </div>
              <div className="r">
                <span className="p">⚕{fmtNum(t.price)}</span>
                <span className={"c " + (t.ch >= 0 ? "hcx-change up" : "hcx-change down")}>
                  {Math.abs(t.ch).toFixed(2)}%
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Chart */}
      <div className="hcx-panel hcx-chart-panel">
        <div className="hcx-panel-head">
          <span style={{ display: "flex", gap: 14, alignItems: "center" }}>
            <span>HCR/HCC</span>
            <span style={{ display: "flex", gap: 4 }}>
              {["1m", "5m", "15m", "1h", "4h", "1D"].map((tf, i) => (
                <span key={tf} style={{
                  padding: "2px 7px",
                  borderRadius: 4,
                  background: i === 3 ? "var(--bg-graphite)" : "transparent",
                  color: i === 3 ? "var(--fg-1)" : "var(--fg-3)",
                  cursor: "pointer",
                }}>{tf}</span>
              ))}
            </span>
          </span>
          <span style={{ display: "flex", gap: 12, color: "var(--fg-3)" }}>
            <span>Indicators</span>
            <span>Drawing</span>
            <span>Settings</span>
          </span>
        </div>
        <div className="hcx-chart">
          <ChartSVG />
        </div>
      </div>

      {/* Order book */}
      <div className="hcx-panel hcx-book-panel">
        <div className="hcx-panel-head">
          <span>Order Book</span>
          <span style={{ fontSize: 10 }}>0.0001 grouping</span>
        </div>
        <div className="hcx-book">
          <div className="hcx-book-head">
            <span>Price (HCC)</span>
            <span className="num">Size (HCR)</span>
            <span className="num">Total</span>
          </div>
          <div className="hcx-book-rows">
            {asks.map((r, i) => (
              <div key={"a"+i} className="hcx-book-row">
                <div className="bg ask" style={{ width: (r.fill * 100) + "%" }}></div>
                <span className="price ask">{fmtNum(r.p)}</span>
                <span className="num">{r.sz.toLocaleString()}</span>
                <span className="num">{(r.p * r.sz).toFixed(2)}</span>
              </div>
            ))}
          </div>
          <div className="hcx-book-mid">
            <span style={{ color: "var(--hcx-bid)" }}>⚕0.1042</span>
            <span className="spread">spread 0.0003 (0.29%)</span>
          </div>
          <div className="hcx-book-rows bids">
            {bids.map((r, i) => (
              <div key={"b"+i} className="hcx-book-row">
                <div className="bg bid" style={{ width: (r.fill * 100) + "%" }}></div>
                <span className="price bid">{fmtNum(r.p)}</span>
                <span className="num">{r.sz.toLocaleString()}</span>
                <span className="num">{(r.p * r.sz).toFixed(2)}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Order entry */}
      <div className="hcx-panel hcx-order-panel">
        <div className="hcx-panel-head">
          <span>Place Order</span>
          <span style={{ display: "flex", gap: 8, alignItems: "center" }}>
            {[{ k: "Limit", adv: false }, { k: "Market", adv: false }, { k: "Stop-Loss", adv: true }, { k: "OCO", adv: true }].map(({ k, adv }) => (
              <span key={k}
                    onClick={() => setOrderType(k)}
                    title={adv ? "Advanced order \u00b7 unlocks at CH Score \u2265 60" : ""}
                    style={{
                      cursor: "pointer",
                      color: orderType === k ? "var(--accent-guardian)" : (adv ? "var(--fg-3)" : "var(--fg-2)"),
                      fontSize: 10,
                      letterSpacing: "0.04em",
                      display: "inline-flex",
                      alignItems: "center",
                      gap: 4,
                    }}>{k}{adv && <span style={{ fontSize: 8, color: "var(--accent-halo)" }}>&#x1F512;CH&ge;60</span>}</span>
            ))}
          </span>
        </div>
        {(orderType === "Stop-Loss" || orderType === "OCO") && (
          <div style={{ background: "var(--bg-1)", border: "1px solid var(--border-1)", borderLeft: "3px solid var(--accent-guardian)", padding: "8px 12px", margin: "10px 14px 0", fontSize: 11, color: "var(--fg-2)", lineHeight: 1.5, fontFamily: "var(--font-mono)", letterSpacing: "0.02em" }}>
            <strong style={{ color: "var(--accent-guardian)" }}>CH SCORE GATE</strong> &middot; advanced order types unlock at CH Score &ge; 60. Your current score: <strong style={{ color: "var(--fg-1)" }}>72</strong>. Unlocked.
          </div>
        )}
        <div className="hcx-order">
          <div className="hcx-bs-toggle">
            <button className={"buy " + (side === "buy" ? "active" : "")} onClick={() => setSide("buy")}>Buy HCR</button>
            <button className={"sell " + (side === "sell" ? "active" : "")} onClick={() => setSide("sell")}>Sell HCR</button>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-3)" }}>
            <span>Available</span>
            <span><span style={{ color: "var(--fg-1)" }}>1,240.00</span> HCC</span>
          </div>
          <div className="hcx-input-row">
            <label>Price</label>
            <input defaultValue="0.1042" />
            <span className="sfx">HCC</span>
          </div>
          <div className="hcx-input-row">
            <label>Amount</label>
            <input defaultValue="2,500.0000" />
            <span className="sfx">HCR</span>
          </div>
          <div className="hcx-percent-row">
            {["25%", "50%", "75%", "MAX"].map(p => <button key={p}>{p}</button>)}
          </div>
          <div className="hcx-input-row">
            <label>Total</label>
            <input defaultValue="260.5000" />
            <span className="sfx">HCC</span>
          </div>
          <div className="hcx-order-summary">
            <div className="row"><span>Fee (Era 0 · 0.10%)</span><span className="v">0.2605 HCC</span></div>
            <div className="row"><span>1099-B reportable</span><span className="v" style={{ color: "var(--accent-guardian)" }}>Yes</span></div>
            <div className="row"><span>Health axis</span><span className="v">PO · Physical Output</span></div>
          </div>
          <button className={side === "buy" ? "hcx-btn-buy" : "hcx-btn-sell"}>
            {side === "buy" ? "Buy 2,500 HCR" : "Sell 2,500 HCR"}
          </button>
        </div>
      </div>

      {/* Recent trades */}
      <div className="hcx-panel hcx-trades-panel">
        <div className="hcx-panel-head">
          <span>Recent Trades</span>
          <span style={{ fontSize: 10 }}>Live</span>
        </div>
        <div className="hcx-trades">
          <div className="hcx-trades-head">
            <span>Price</span>
            <span className="num">Size</span>
            <span className="num">Time</span>
          </div>
          {[
            { p: 0.1042, sz: 124, t: "14:32:08", up: true },
            { p: 0.1041, sz: 480, t: "14:32:01", up: false },
            { p: 0.1042, sz: 88,  t: "14:31:56", up: true },
            { p: 0.1042, sz: 1240, t: "14:31:49", up: true },
            { p: 0.1041, sz: 60,  t: "14:31:42", up: false },
            { p: 0.1043, sz: 320, t: "14:31:30", up: true },
            { p: 0.1042, sz: 808, t: "14:31:18", up: true },
            { p: 0.1041, sz: 144, t: "14:31:04", up: false },
            { p: 0.1040, sz: 96,  t: "14:30:52", up: false },
            { p: 0.1042, sz: 240, t: "14:30:41", up: true },
            { p: 0.1043, sz: 720, t: "14:30:30", up: true },
            { p: 0.1042, sz: 312, t: "14:30:19", up: true },
          ].map((tr, i) => (
            <div key={i} className="hcx-trade-row">
              <span className={"p " + (tr.up ? "up" : "down")}>{fmtNum(tr.p)}</span>
              <span className="num">{tr.sz.toLocaleString()}</span>
              <span className="num" style={{ color: "var(--fg-3)" }}>{tr.t}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// Candle chart SVG (deterministic)
function ChartSVG() {
  const W = 1000, H = 460;
  const N = 64;
  const candles = useMemo(() => {
    let seed = 1234;
    const rng = () => { seed = (seed * 1664525 + 1013904223) >>> 0; return seed / 4294967295; };
    let v = 0.40;
    const out = [];
    for (let i = 0; i < N; i++) {
      const o = v;
      v += (rng() - 0.45) * 0.04;
      v = Math.max(0.1, Math.min(0.9, v));
      const c = v;
      const hi = Math.max(o, c) + rng() * 0.025;
      const lo = Math.min(o, c) - rng() * 0.025;
      out.push({ o, c, hi, lo });
    }
    return out;
  }, []);

  const padTop = 30, padBottom = 30;
  const yMin = 0.05, yMax = 0.95;
  const yScale = (v) => padTop + (1 - (v - yMin) / (yMax - yMin)) * (H - padTop - padBottom);

  const cw = W / N;
  const bodyW = cw * 0.6;

  // Build line for current price
  const lastClose = candles[candles.length - 1].c;
  const liveY = yScale(lastClose);

  return (
    <svg viewBox={`0 0 ${W} ${H}`} width="100%" height="100%" preserveAspectRatio="none">
      {/* y-axis price labels */}
      {[0.85, 0.65, 0.45, 0.25].map((v, i) => (
        <g key={i}>
          <line x1={0} x2={W-60} y1={yScale(v)} y2={yScale(v)} stroke="rgba(255,255,255,0.04)" />
          <text x={W-50} y={yScale(v) + 4} fill="var(--fg-3)" fontSize="10" fontFamily="var(--font-mono)">
            ⚕{(v * 0.12 + 0.04).toFixed(4)}
          </text>
        </g>
      ))}

      {/* candles */}
      {candles.map((k, i) => {
        const x = i * cw + cw / 2;
        const up = k.c >= k.o;
        const color = up ? "var(--hcx-bid)" : "var(--hcx-ask)";
        const yOpen = yScale(k.o), yClose = yScale(k.c);
        const top = Math.min(yOpen, yClose), bot = Math.max(yOpen, yClose);
        return (
          <g key={i}>
            <line x1={x} x2={x} y1={yScale(k.hi)} y2={yScale(k.lo)} stroke={color} strokeWidth="1" />
            <rect x={x - bodyW/2} y={top} width={bodyW} height={Math.max(1, bot - top)} fill={color} />
          </g>
        );
      })}

      {/* live price line */}
      <line x1={0} x2={W} y1={liveY} y2={liveY} stroke="var(--accent-guardian)"
            strokeWidth="1" strokeDasharray="3 3" opacity="0.6" />
      <rect x={W-58} y={liveY-9} width={56} height={18} fill="var(--accent-guardian)" rx="3" />
      <text x={W-50} y={liveY+4} fill="#03130C" fontSize="10" fontFamily="var(--font-mono)" fontWeight="600">
        ⚕{(lastClose * 0.12 + 0.04).toFixed(4)}
      </text>
    </svg>
  );
}

// =========================================================
// PORTFOLIO VIEW
// =========================================================
function PortfolioView() {
  const holdings = [];
  const total = 3179.61;

  return (
    <div style={{ display: "grid", gap: 20 }}>
      <section className="hcx-section-head" style={{ margin: "8px 0" }}>
        <div>
          <span className="hcx-eyebrow">Portfolio</span>
          <h2>Health Net Worth</h2>
        </div>
        <div className="hcx-tabs">
          <button className="active">All Assets</button>
          <button>By Axis</button>
          <button>Earned</button>
          <button>Bought</button>
        </div>
      </section>

      <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr 1fr", gap: 12 }}>
        <div className="hcx-panel" style={{ padding: "24px 28px" }}>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--fg-3)", textTransform: "uppercase", letterSpacing: "0.14em" }}>
            Total Portfolio Value
          </div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 56, fontWeight: 600, letterSpacing: "-0.025em", lineHeight: 1, marginTop: 8 }}>
            ${total.toLocaleString(undefined, { minimumFractionDigits: 2 })}
          </div>
          <div style={{ display: "flex", gap: 18, marginTop: 14, fontSize: 12, fontFamily: "var(--font-mono)" }}>
            <span style={{ color: "var(--hcx-bid)" }}>▲ $124.40 (4.07%) today</span>
            <span style={{ color: "var(--fg-3)" }}>·</span>
            <span style={{ color: "var(--hcx-bid)" }}>▲ $812.20 (34.3%) all-time</span>
          </div>
        </div>
        <div className="hcx-panel" style={{ padding: "24px 28px" }}>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--fg-3)", textTransform: "uppercase", letterSpacing: "0.14em" }}>
            Earned (Health Activity)
          </div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 36, fontWeight: 600, letterSpacing: "-0.02em", marginTop: 8, color: "var(--accent-guardian)" }}>
            $1,940.18
          </div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-3)", marginTop: 6 }}>
            61% of holdings · 18,422 verified actions
          </div>
        </div>
        <div className="hcx-panel" style={{ padding: "24px 28px" }}>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--fg-3)", textTransform: "uppercase", letterSpacing: "0.14em" }}>
            2026 Realized · 1099-B
          </div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 36, fontWeight: 600, letterSpacing: "-0.02em", marginTop: 8, color: "var(--accent-halo)" }}>
            $412.80
          </div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-3)", marginTop: 6 }}>
            <a href="#" style={{ color: "var(--accent-guardian)" }}>Download 1099-B →</a>
          </div>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 12 }}>
        {/* Holdings table */}
        <div className="hcx-markets">
          <div className="hcx-markets-head">
            <div className="left">
              <h3 style={{ margin: 0, fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 600 }}>Holdings</h3>
            </div>
          </div>
          <table className="hcx-table">
            <thead>
              <tr>
                <th>Token</th>
                <th>Axis</th>
                <th className="num">Quantity</th>
                <th className="num">Value</th>
                <th className="num">Allocation</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {holdings.map(h => (
                <tr key={h.sym}>
                  <td>
                    <div className="hcx-token">
                      <TokenGlyph axis={h.axis} sym={h.sym} />
                      <div className="meta">
                        <span className="sym">{h.sym}</span>
                        <span className="name">{TOKENS.find(t => t.sym === h.sym)?.name}</span>
                      </div>
                    </div>
                  </td>
                  <td><AxisPill axis={h.axis} /></td>
                  <td className="num">{h.qty.toLocaleString(undefined, { minimumFractionDigits: 2 })}</td>
                  <td className="num">${h.value.toFixed(2)}</td>
                  <td className="num">
                    <div style={{ display: "flex", alignItems: "center", gap: 8, justifyContent: "flex-end" }}>
                      <span>{h.alloc.toFixed(1)}%</span>
                      <div style={{ width: 60, height: 4, background: "var(--bg-steel)", borderRadius: 2, overflow: "hidden" }}>
                        <div style={{ width: h.alloc + "%", height: "100%", background: AXES[h.axis].color }}></div>
                      </div>
                    </div>
                  </td>
                  <td>
                    <button className="hcx-btn hcx-btn-ghost" style={{ padding: "5px 11px", fontSize: 12 }}>Trade</button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Allocation by axis */}
        <div className="hcx-panel" style={{ padding: "20px 22px" }}>
          <h3 style={{ margin: "0 0 16px", fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 600 }}>Allocation by Axis</h3>
          <AxisDonut />
          <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 18, fontSize: 12, fontFamily: "var(--font-mono)" }}>
            {[
              { code: "PO", pct: 43.2 },
              { code: "PV", pct: 40.2 },
              { code: "NM", pct: 6.9 },
              { code: "RS", pct: 5.7 },
              { code: "TA", pct: 4.0 },
            ].map(a => (
              <div key={a.code} style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ width: 8, height: 8, background: AXES[a.code].color, borderRadius: 2 }}></span>
                  <span style={{ color: "var(--fg-2)" }}>{a.code} {AXES[a.code].name}</span>
                </span>
                <span>{a.pct.toFixed(1)}%</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function AxisDonut() {
  const data = [];
  const r = 70, cx = 110, cy = 110;
  const C = 2 * Math.PI * r;
  let acc = 0;
  return (
    <svg width="220" height="220" viewBox="0 0 220 220">
      <circle cx={cx} cy={cy} r={r} fill="none" stroke="var(--bg-steel)" strokeWidth="20" />
      {data.map((d) => {
        const len = (d.pct / 100) * C;
        const dash = `${len} ${C}`;
        const offset = -acc;
        acc += len;
        return (
          <circle key={d.code}
                  cx={cx} cy={cy} r={r} fill="none"
                  stroke={AXES[d.code].color}
                  strokeWidth="20"
                  strokeDasharray={dash}
                  strokeDashoffset={offset}
                  transform={`rotate(-90 ${cx} ${cy})`} />
        );
      })}
      <text x={cx} y={cy-4} textAnchor="middle"
            fontFamily="var(--font-display)" fontSize="22" fontWeight="600" fill="var(--fg-1)">
        $3,179
      </text>
      <text x={cx} y={cy+16} textAnchor="middle"
            fontFamily="var(--font-mono)" fontSize="10" fill="var(--fg-3)" letterSpacing="0.14em">
        7 TOKENS
      </text>
    </svg>
  );
}

// =========================================================
// FOOTER
// =========================================================
function Footer({ setTab }) {
  const nav = (tab) => (e) => { e.preventDefault(); window.scrollTo(0, 0); setTab && setTab(tab); };
  return (
    <footer className="hcx-foot">
      <div className="hcx-foot-grid">
        <div>
          <div className="hcx-brand" style={{ marginBottom: 12 }}>
            <div className="mark">⚕</div>
            <div className="wm">
              <span className="wm-1">HC.exchange</span>
              <span className="wm-2">Health Commodity Exchange™</span>
            </div>
          </div>
          <p style={{ fontSize: 12, color: "var(--fg-3)", lineHeight: 1.6, maxWidth: 320 }}>
            The market for the part of you that matters most. Get healthy. Get wealthy. Settle in HCC.
          </p>
          <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", color: "var(--accent-halo)", marginTop: 12 }}>
            "Integrity in all we do™"
          </div>
        </div>
        <div>
          <h4>Exchange</h4>
          <a href="#markets" onClick={nav("Markets")}>Markets</a>
          <a href="#trade" onClick={nav("Trade")}>Trade HCR / USD</a>
          <a href="/chains">Health Chains</a>
          <a href="/chains#apply">List Your Chain</a>
          <a href="/staking">Staking</a>
          <a href="/analytics">Analytics</a>
        </div>
        <div>
          <h4>Account</h4>
          <a href="#portfolio" onClick={nav("Portfolio")}>Portfolio</a>
          <a href="#deposits" onClick={nav("Deposits")}>Deposit</a>
          <a href="#deposits" onClick={nav("Deposits")}>Withdraw</a>
          <a href="#settings" onClick={nav("Settings")}>Tax Center (1099-B)</a>
          <a href="#settings" onClick={nav("Settings")}>API Keys</a>
          <a href="/referrals">Referrals</a>
        </div>
        <div>
          <h4>Ecosystem</h4>
          <a href="https://conceptualhealth.com" target="_blank" rel="noopener">Conceptual Health ↗</a>
          <a href="https://coin.health" target="_blank" rel="noopener">coin.health — HCR ↗</a>
          <a href="https://orb.conceptualhealth.com/" target="_blank" rel="noopener">GuardianOrb™ App ↗</a>
          <a href="https://clinical.conceptualhealth.com/" target="_blank" rel="noopener">Clinical Portal ↗</a>
          <a href="https://corp.conceptualhealth.com/" target="_blank" rel="noopener">Corporate Portal ↗</a>
          <a href="https://university.conceptualhealth.com/" target="_blank" rel="noopener">CH University ↗</a>
        </div>
      </div>
      <div className="legal">
        <span>© 2026 Conceptual Healthcare Corporation. All rights reserved. · HCR is a digital commodity, not a security (IRC §1221). · <a href="https://conceptualhealth.com/ui_kits/marketing/trust/patents.html" style={{ color: "var(--accent-guardian)" }}>Trust →</a></span>
        <span>Not financial advice. Trading involves risk. "Integrity in all we do™"</span>
      </div>
    </footer>
  );
}

// =========================================================
// APP
// =========================================================
function App() {
  const [tab, setTab] = useState("Markets");
  const [detailToken, setDetailToken] = useState(null);
  const [, setTick] = useState(0); // triggers re-render when live prices arrive

  // Live price updates from exchange API — 30s polling
  React.useEffect(() => {
    const update = async () => {
      try {
        const res = await fetch('/api/v1/market/tickers');
        if (!res.ok) return;
        const data = await res.json();
        const map = {};
        if (Array.isArray(data)) {
          data.forEach(item => {
            const sym = String(item.symbol || item.sym || item.ticker || '').split('/')[0].toUpperCase();
            if (sym) map[sym] = item;
          });
        } else if (data && typeof data === 'object') {
          Object.entries(data).forEach(([sym, item]) => {
            map[sym.split('/')[0].toUpperCase()] = item;
          });
        }
        let changed = false;
        TOKENS.forEach((t, i) => {
          const live = map[t.sym];
          if (!live) return;
          const p   = parseFloat(live.last_price  ?? live.price   ?? live.close  ?? live.last  ?? NaN);
          const ch  = parseFloat(live.price_change_pct ?? live.change_pct_24h ?? live.change_24h ?? live.change ?? NaN);
          const vol = parseFloat(live.volume_24h   ?? live.volume  ?? NaN);
          const hi  = parseFloat(live.high_24h     ?? live.high    ?? NaN);
          const lo  = parseFloat(live.low_24h      ?? live.low     ?? NaN);
          if (!isNaN(p)   && p   > 0) { TOKENS[i].price = p;   changed = true; }
          if (!isNaN(ch))              { TOKENS[i].ch    = ch;   changed = true; }
          if (!isNaN(vol) && vol > 0) { TOKENS[i].vol   = vol;  changed = true; }
          if (!isNaN(hi)  && hi  > 0) { TOKENS[i].hi    = hi;   changed = true; }
          if (!isNaN(lo)  && lo  > 0) { TOKENS[i].lo    = lo;   changed = true; }
        });
        if (changed) setTick(n => n + 1);
      } catch { /* silent — static fallback data remains */ }
    };
    update();
    const id = setInterval(update, 30_000);
    return () => clearInterval(id);
  }, []);

  // Make markets-row Trade button & token cells navigate to detail
  React.useEffect(() => {
    window.__hcxOpenDetail = (sym) => {
      const tk = TOKENS.find(x => x.sym === sym);
      if (tk) setDetailToken(tk);
    };
  }, []);

  return (
    <div className="hcx-app" data-screen-label={`HC.exchange · ${detailToken ? detailToken.sym + " detail" : tab}`}>
      <style>{`
        /* ── hc.exchange responsive breakpoints ───────────────────────────────── */
        @media (max-width: 900px) {
          .hcx-status .right { display: none !important; }
          .hcx-navlinks { gap: 8px !important; }
          .hcx-navlinks a { font-size: 12px !important; padding: 4px 8px !important; }
          .hcx-hero { grid-template-columns: 1fr !important; }
          .hcx-hero-stats { grid-template-columns: 1fr 1fr !important; }
          .hcx-earn { flex-direction: column !important; gap: 24px !important; }
          .hcx-earn-r { border-left: none !important; border-top: 1px solid var(--border-1) !important; padding-top: 24px !important; }
          .hcx-axes { grid-template-columns: repeat(4, 1fr) !important; }
          .hcx-foot-grid { grid-template-columns: 1fr 1fr !important; }
          .hcx-list-cta { flex-direction: column !important; gap: 20px !important; }
        }
        @media (max-width: 640px) {
          .hcx-status { display: none !important; }
          .hcx-nav { padding: 10px 16px !important; gap: 8px !important; flex-wrap: wrap !important; }
          .hcx-navlinks { order: 3; width: 100%; overflow-x: auto; white-space: nowrap; }
          .hcx-brand { flex-shrink: 0; }
          .hcx-hero-stats { grid-template-columns: 1fr !important; }
          .hcx-hero h1 { font-size: 44px !important; }
          .hcx-axes { grid-template-columns: repeat(2, 1fr) !important; }
          .hcx-foot-grid { grid-template-columns: 1fr !important; }
          .hcx-markets { overflow-x: auto !important; }
          .hcx-table { min-width: 640px; }
          .hcx-nav-actions { gap: 6px !important; }
          .hcx-nav-actions .hcx-iconbtn { display: none !important; }
          .hcx-earn-l .hcx-activity-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 420px) {
          .hcx-nav-actions .hcx-btn-ghost { display: none !important; }
          .hcx-hero h1 { font-size: 34px !important; }
          .hcx-axes { grid-template-columns: 1fr 1fr !important; }
        }
      `}</style>
      <StatusStrip />
      <Nav tab={tab} setTab={(t) => { setDetailToken(null); setTab(t); }} />
      {tab === "Markets" && !detailToken && <Tape />}

      <main className="hcx-main">
        {detailToken && <TickerDetail token={detailToken} onClose={() => setDetailToken(null)} />}

        {!detailToken && tab === "Markets" && (
          <>
            <HeroBanner />
            <section className="hcx-section-head">
              <div>
                <span className="hcx-eyebrow">Live Markets</span>
                <h2>All Health Commodities</h2>
              </div>
              <div style={{ display: "flex", gap: 8, alignItems: "center", fontSize: 12, color: "var(--fg-3)", fontFamily: "var(--font-mono)" }}>
                <span>Quote in</span>
                <div className="hcx-tabs">
                  <button className="active">⚕ HCC</button>
                  <button>$ USD</button>
                </div>
              </div>
            </section>
            <MarketsTable />

            <section className="hcx-section-head">
              <div>
                <span className="hcx-eyebrow">Mint by Living</span>
                <h2>Health Earnings Calculator</h2>
              </div>
            </section>
            <EarningsCard />

            <section className="hcx-section-head">
              <div>
                <span className="hcx-eyebrow">The 8 Health Axes</span>
                <h2>Every token maps to a health behavior</h2>
              </div>
              <a href="#" style={{ color: "var(--accent-guardian)", textDecoration: "none", fontSize: 13 }}>View All Chains →</a>
            </section>
            <AxesGrid />

            <section style={{ marginTop: 40 }}>
              <ListCta />
            </section>
          </>
        )}

        {!detailToken && tab === "Trade" && <TradeView />}
        {!detailToken && tab === "Portfolio" && <PortfolioView />}
        {!detailToken && tab === "History" && <HistoryView />}
        {!detailToken && tab === "Deposits" && <DepositsView />}
        {!detailToken && tab === "Settings" && <SettingsView />}
      </main>

      {window.KitChrome && window.KitChrome.CrossLinkStrip && <window.KitChrome.CrossLinkStrip currentId="exchange" ids={["chain", "corp", "datavault"]} />}
      {window.KitChrome && window.KitChrome.MasterEquationArtifact && <window.KitChrome.MasterEquationArtifact />}
      <Footer setTab={(t) => { setDetailToken(null); setTab(t); }} />
    </div>
  );
}

// Boot
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

// Expose for debugging
Object.assign(window, { App, TOKENS, AXES });