// Patent Tokens — IP tokens you own, royalty streams, and a marketplace.
// 3 screens: portfolio, token detail, marketplace + IPO calendar + pools.

function PatentRail({ active }) {
  return (
    <>
      <div style={{ padding: '0 16px 14px', borderBottom: `1px solid ${UB.rule2}`, marginBottom: 14 }}>
        <div style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.18em', marginBottom: 6 }}>PORTFOLIO · NAV</div>
        <div style={{ fontFamily: UB.mono, fontSize: 22, color: UB.ink, lineHeight: 1.05 }}>$184,420</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 4, fontFamily: UB.mono, fontSize: 10, color: UB.ok }}>
          ▲ +$3,182 · +1.76% 24h
        </div>
        <div style={{ marginTop: 8, display: 'flex', gap: 4 }}>
          <Tag tone="accent">14 PATENTS</Tag>
          <Tag>3 LP</Tag>
        </div>
      </div>
      <NavGroup label="Patent tokens">
        <NavItem icon={Icon.cube}   label="My portfolio"   badge="14" active={active === 'portfolio'} />
        <NavItem icon={Icon.flask}  label="Royalty streams" badge="$2.4K" />
        <NavItem icon={Icon.search} label="Marketplace"    badge="LIVE" active={active === 'market'} />
        <NavItem icon={Icon.rocket} label="New launches · IPO" badge="6" />
        <NavItem icon={Icon.bank}   label="Liquidity pools"  badge="3" />
        <NavItem icon={Icon.cog}    label="Staking"          badge="—" />
      </NavGroup>
      <NavGroup label="Watchlist">
        <NavItem icon={Icon.eye} label="UBP-AGE-04 · Aging" badge="+8.4%" />
        <NavItem icon={Icon.eye} label="UBP-CRSP-12 · Crispr" badge="+2.1%" />
        <NavItem icon={Icon.eye} label="UBP-MTL-02 · Mater." badge="−0.6%" />
        <NavItem icon={Icon.eye} label="UBP-VAX-09 · mRNA" badge="+11%" />
      </NavGroup>
      <NavGroup label="Tools">
        <NavItem icon={Icon.doc}   label="Tax · royalty 1099" />
        <NavItem icon={Icon.bell}  label="Alerts · 8" />
        <NavItem icon={Icon.cog}   label="Settings" />
      </NavGroup>
    </>
  );
}

function PatentCrumb({ items }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontFamily: UB.mono, fontSize: 10, color: UB.ink3, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 6 }}>
      {items.map((it, i) => (
        <React.Fragment key={i}>
          <span style={{ color: i === items.length - 1 ? UB.ink : UB.ink3 }}>{it}</span>
          {i < items.length - 1 && <span style={{ color: UB.ink4 }}>›</span>}
        </React.Fragment>
      ))}
    </div>
  );
}

const PORTFOLIO = [
  { sym: 'GAT3-LTP',  name: 'Astrocytic GAT-3 modulator',     stage: 'GRANTED',  pct: 18.4, units: 18400, basis: 0.42, mark: 1.84, yld24m: '$11,420', tone: 'accent' },
  { sym: 'GLIA-2P',   name: 'Open 2-photon rig BoM',           stage: 'PROVISIONAL', pct: 4.1, units: 4100, basis: 0.18, mark: 0.62, yld24m: '$1,840', tone: 'ok' },
  { sym: 'RWIF',      name: 'Reproducibility-weighted index',  stage: 'GRANTED',  pct: 6.2, units: 6200, basis: 0.31, mark: 0.94, yld24m: '$3,200', tone: 'accent' },
  { sym: 'NB-GLIA',   name: 'Glia heterogeneity atlas',         stage: 'GRANTED',  pct: 2.0, units: 2000, basis: 0.55, mark: 0.78, yld24m: '$1,420', tone: 'accent' },
  { sym: 'COR-MOTIF', name: 'Cortical microcircuit motifs',     stage: 'EXAM',     pct: 1.4, units: 1400, basis: 0.20, mark: 0.34, yld24m: '$220',  tone: 'warn' },
  { sym: 'AST-ABL',   name: 'μ-Glia ablation method',          stage: 'PROVISIONAL', pct: 0.8, units: 800,  basis: 0.10, mark: 0.16, yld24m: '$84',   tone: 'ok' },
  { sym: 'DPID-CITE', name: 'On-chain citation primitive',      stage: 'GRANTED',  pct: 0.6, units: 600,  basis: 0.62, mark: 1.42, yld24m: '$112',  tone: 'accent' },
  { sym: 'OBJ-IMG',   name: 'Open imaging benchmark',           stage: 'OPP',      pct: 0.3, units: 300,  basis: 0.40, mark: 0.28, yld24m: '$0',    tone: 'bad' },
  { sym: 'AGE-04 (LP)', name: 'Aging assay platform',          stage: 'POOL',     pct: 12,  units: 12000, basis: 1.10, mark: 1.32, yld24m: '$2,100', tone: 'info' },
  { sym: 'VAX-09 (LP)', name: 'mRNA delivery scaffold',        stage: 'POOL',     pct: 6,   units: 6000,  basis: 0.92, mark: 1.18, yld24m: '$840',  tone: 'info' },
  { sym: 'CRSP-12 (LP)', name: 'Off-target Crispr filter',     stage: 'POOL',     pct: 4,   units: 4000,  basis: 0.84, mark: 0.92, yld24m: '$320',  tone: 'info' },
];

// ───────────────────────────────────────────────── PORTFOLIO ─────────────────
function PatentTokensDapp() {
  return (
    <Dapp>
      <ChromeBar dapp="PATENT TOKENS" code="PORTFOLIO · 14 POSITIONS" />
      <Layout rail={<PatentRail active="portfolio" />}>
        <PageHead
          eyebrow={<PatentCrumb items={['Patent Tokens', 'My portfolio']} />}
          title="Patent token portfolio"
          sub="Each token is a fractional claim on a patent or patent application — and a programmable share of any royalty or license revenue it generates."
          actions={<>
            <Btn small icon={Icon.doc}>Statement · Q2'25</Btn>
            <Btn small icon={Icon.search}>Marketplace</Btn>
            <Btn small primary icon={Icon.plus}>Mint a token from your patent</Btn>
          </>}
        />

        <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* Top KPIs */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
            <Card><Stat label="NAV" value="$184,420" sub="+1.76% 24h · +14.2% YTD" /></Card>
            <Card><Stat label="Cost basis" value="$112,640" sub="14 positions · 3 LP" /></Card>
            <Card><Stat label="Unrealized P/L" value="+$71,780" sub="+63.7%" /></Card>
            <Card><Stat label="Royalty · TTM" value="$21,468" sub="across 9 paying patents" /></Card>
            <Card><Stat label="Next payout" value="$1,840" sub="14 May · 8 patents · auto" /></Card>
          </div>

          {/* Composition + history */}
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16 }}>
            <Card title="Portfolio · 90-day NAV" code="ALL POSITIONS" pad={false}>
              <div style={{ padding: 18, height: 220, position: 'relative' }}>
                <svg width="100%" height="100%" viewBox="0 0 600 180" preserveAspectRatio="none">
                  <defs>
                    <linearGradient id="navfill" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0" stopColor={UB.accent} stopOpacity="0.5" />
                      <stop offset="1" stopColor={UB.accent} stopOpacity="0" />
                    </linearGradient>
                  </defs>
                  {[40, 80, 120].map(y => <line key={y} x1="0" x2="600" y1={y} y2={y} stroke={UB.rule3} strokeWidth="0.6" />)}
                  {(() => {
                    let d = 'M 0 130'; let f = 'M 0 130';
                    const pts = [130, 124, 132, 118, 110, 104, 98, 92, 86, 78, 82, 70, 64, 56, 60, 48, 44, 36];
                    pts.forEach((y, i) => { const x = (i + 1) * (600 / pts.length); d += ` L ${x} ${y}`; f += ` L ${x} ${y}`; });
                    f += ' L 600 180 L 0 180 Z';
                    return <><path d={f} fill="url(#navfill)" /><path d={d} stroke={UB.accent} strokeWidth="1.6" fill="none" /></>;
                  })()}
                  {[
                    [80, 'GAT3 · provisional grant', 70],
                    [220, 'AGE-04 LP entry', 95],
                    [380, 'RWIF · royalty paid', 50],
                    [540, 'CRSP-12 LP add', 38],
                  ].map(([x, l, y], i) => (
                    <g key={i}>
                      <line x1={x} y1={y} x2={x} y2={170} stroke={UB.ink3} strokeWidth="0.5" strokeDasharray="2 2" />
                      <circle cx={x} cy={y} r="2.5" fill={UB.ink} />
                      <text x={x + 4} y={y - 4} fontFamily={UB.mono} fontSize="8" fill={UB.ink3}>{l}</text>
                    </g>
                  ))}
                </svg>
                <div style={{ position: 'absolute', top: 12, right: 22, display: 'flex', gap: 4 }}>
                  {['1D','7D','30D','90D','YTD','ALL'].map((p, i) => (
                    <Tag key={p} tone={p === '90D' ? 'ink' : 'default'}>{p}</Tag>
                  ))}
                </div>
              </div>
            </Card>

            <Card title="Composition" code="BY STAGE">
              {[
                ['Granted',                0.62, '8 tokens · $114,260', UB.accent],
                ['LP positions',           0.22, '3 pools · $40,544',   'oklch(0.66 0.13 240)'],
                ['Provisional / examination', 0.12, '2 tokens · $22,180', UB.ok],
                ['At risk / opp.',         0.04, '1 token · $7,436',     UB.warn],
              ].map((r, i) => (
                <div key={i} style={{ marginBottom: 10 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, marginBottom: 3 }}>
                    <span>{r[0]}</span>
                    <span style={{ fontFamily: UB.mono, color: UB.ink3 }}>{r[2]}</span>
                  </div>
                  <div style={{ height: 6, background: UB.paperDeep, position: 'relative' }}>
                    <div style={{ position: 'absolute', inset: 0, width: `${r[1] * 100}%`, background: r[3] }} />
                  </div>
                </div>
              ))}
              <div style={{ marginTop: 14, paddingTop: 12, borderTop: `1px solid ${UB.rule3}` }}>
                <div style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.16em', marginBottom: 6 }}>BY DOMAIN</div>
                {[
                  ['Neuroscience', 0.48], ['Methods · tooling', 0.22], ['Aging · longevity', 0.14], ['Crispr · gene', 0.10], ['Materials', 0.06],
                ].map((r, i) => (
                  <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '3px 0', fontSize: 11, fontFamily: UB.mono, color: UB.ink2 }}>
                    <span style={{ fontFamily: UB.sans }}>{r[0]}</span>
                    <span>{(r[1] * 100).toFixed(0)}%</span>
                  </div>
                ))}
              </div>
            </Card>
          </div>

          {/* Holdings table */}
          <Card title="Holdings · 14" code="LIVE MARKS · 17:08 UTC" pad={false}>
            <div style={{ display: 'grid', gridTemplateColumns: '110px 1fr 100px 70px 70px 70px 80px 100px 80px 30px', gap: 10, padding: '10px 16px', fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.14em', textTransform: 'uppercase', borderBottom: `1px solid ${UB.rule2}`, background: UB.paperDeep }}>
              <span>Symbol</span><span>Name</span><span>Stage</span><span>%</span><span>Units</span><span>Basis</span><span>Mark</span><span>P/L</span><span>Royalty</span><span></span>
            </div>
            {PORTFOLIO.map((p, i) => {
              const value = p.units * p.mark;
              const cost = p.units * p.basis;
              const pl = value - cost;
              const plpct = (pl / cost) * 100;
              return (
                <div key={p.sym} style={{ display: 'grid', gridTemplateColumns: '110px 1fr 100px 70px 70px 70px 80px 100px 80px 30px', gap: 10, padding: '11px 16px', alignItems: 'center', borderBottom: i < PORTFOLIO.length - 1 ? `1px solid ${UB.rule3}` : 'none', background: i === 0 ? UB.accentDim : 'transparent', cursor: 'pointer' }}>
                  <span style={{ fontFamily: UB.mono, fontSize: 11, fontWeight: 600 }}>{p.sym}</span>
                  <span style={{ fontSize: 12, color: UB.ink2 }}>{p.name}</span>
                  <Tag tone={p.tone}>{p.stage}</Tag>
                  <span style={{ fontFamily: UB.mono, fontSize: 11 }}>{p.pct}%</span>
                  <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{p.units.toLocaleString()}</span>
                  <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>${p.basis.toFixed(2)}</span>
                  <span style={{ fontFamily: UB.mono, fontSize: 11, fontWeight: 600 }}>${p.mark.toFixed(2)}</span>
                  <span style={{ fontFamily: UB.mono, fontSize: 11, color: pl >= 0 ? UB.ok : UB.bad }}>
                    {pl >= 0 ? '+' : ''}${Math.round(pl).toLocaleString()} · {plpct >= 0 ? '+' : ''}{plpct.toFixed(0)}%
                  </span>
                  <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink2 }}>{p.yld24m}</span>
                  <span style={{ color: UB.ink4 }}>›</span>
                </div>
              );
            })}
          </Card>

          {/* Royalty stream + pools */}
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16 }}>
            <Card title="Royalty stream · last 12 months" code="$21,468 TTM" pad={false}>
              <div style={{ padding: 18, height: 160 }}>
                <svg width="100%" height="100%" viewBox="0 0 600 120" preserveAspectRatio="none">
                  {Array.from({ length: 12 }).map((_, i) => {
                    const x = i * (600 / 12);
                    const w = (600 / 12) - 8;
                    // Stacked bars across patents
                    const layers = [
                      { c: UB.accent, h: 18 + Math.sin(i * 0.7) * 12 + i * 1.2 },
                      { c: 'oklch(0.66 0.13 240)', h: 6 + Math.sin(i * 0.4 + 1) * 4 },
                      { c: UB.ok, h: 10 + Math.cos(i * 0.6) * 6 + i * 0.4 },
                      { c: UB.warn, h: 4 + Math.sin(i * 0.3) * 3 },
                    ];
                    let y = 110;
                    return (
                      <g key={i}>
                        {layers.map((L, li) => {
                          const h = Math.max(0, L.h);
                          y -= h;
                          return <rect key={li} x={x + 4} y={y} width={w} height={h} fill={L.c} opacity={0.85} />;
                        })}
                        <text x={x + 4 + w / 2} y={120} fontFamily={UB.mono} fontSize="8" textAnchor="middle" fill={UB.ink3}>{['M','J','J','A','S','O','N','D','J','F','M','A'][i]}</text>
                      </g>
                    );
                  })}
                </svg>
              </div>
              <div style={{ padding: '10px 18px', borderTop: `1px solid ${UB.rule2}`, display: 'flex', gap: 16, fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>
                <span><span style={{ display: 'inline-block', width: 8, height: 8, background: UB.accent, marginRight: 4, verticalAlign: 'middle' }} />GAT3 · $11.4K</span>
                <span><span style={{ display: 'inline-block', width: 8, height: 8, background: 'oklch(0.66 0.13 240)', marginRight: 4, verticalAlign: 'middle' }} />RWIF · $3.2K</span>
                <span><span style={{ display: 'inline-block', width: 8, height: 8, background: UB.ok, marginRight: 4, verticalAlign: 'middle' }} />LP pools · $3.3K</span>
                <span><span style={{ display: 'inline-block', width: 8, height: 8, background: UB.warn, marginRight: 4, verticalAlign: 'middle' }} />Other · $3.6K</span>
              </div>
            </Card>

            <Card title="Liquidity pools · 3" code="UBP-AMM v1" pad={false}>
              {[
                { p: 'AGE-04 / UBR', share: 0.018, tvl: '$22.4M', apy: '14.2%', y24h: '$8.40' },
                { p: 'VAX-09 / UBR', share: 0.012, tvl: '$8.1M',  apy: '11.7%', y24h: '$3.10' },
                { p: 'CRSP-12 / USDC', share: 0.008, tvl: '$3.4M', apy: '9.1%',  y24h: '$0.80' },
              ].map((pl, i) => (
                <div key={i} style={{ padding: '12px 16px', borderBottom: i < 2 ? `1px solid ${UB.rule3}` : 'none' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                    <span style={{ fontFamily: UB.mono, fontSize: 12, fontWeight: 600 }}>{pl.p}</span>
                    <Tag tone="accent">APY {pl.apy}</Tag>
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>
                    <div><span style={{ color: UB.ink3 }}>share </span><span style={{ color: UB.ink }}>{(pl.share * 100).toFixed(2)}%</span></div>
                    <div><span style={{ color: UB.ink3 }}>tvl </span><span style={{ color: UB.ink }}>{pl.tvl}</span></div>
                    <div><span style={{ color: UB.ink3 }}>24h </span><span style={{ color: UB.ok }}>{pl.y24h}</span></div>
                  </div>
                </div>
              ))}
            </Card>
          </div>
        </div>
      </Layout>
    </Dapp>
  );
}

// ──────────────────────────────────────────────── PATENT TOKEN DETAIL ────────
function PatentTokenDetailDapp() {
  return (
    <Dapp>
      <ChromeBar dapp="PATENT TOKENS" code="GAT3-LTP · USPTO 12/845,209" />
      <Layout rail={<PatentRail active="portfolio" />}>
        <PageHead
          eyebrow={<PatentCrumb items={['Patent Tokens', 'Holdings', 'GAT3-LTP']} />}
          title="GAT3-LTP · Astrocytic GAT-3 modulator"
          sub="Granted patent · USPTO 12/845,209. 100,000 tokens minted · 18,400 owned by you. Royalty events post automatically when licensees pay through the contract."
          actions={<>
            <Btn small icon={Icon.doc}>Read patent</Btn>
            <Btn small>List for sale</Btn>
            <Btn small primary icon={Icon.arrow}>Buy more · $1.84</Btn>
          </>}
        />

        <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16 }}>
          {/* Left column */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <Card title="Price · 90 days" code="$1.84 · +43% YTD" pad={false}>
              <div style={{ padding: 18, height: 220 }}>
                <svg width="100%" height="100%" viewBox="0 0 600 180" preserveAspectRatio="none">
                  {[40, 80, 120].map(y => <line key={y} x1="0" x2="600" y1={y} y2={y} stroke={UB.rule3} strokeWidth="0.6" />)}
                  {(() => {
                    const pts = [];
                    for (let i = 0; i <= 90; i++) {
                      pts.push(140 - i * 0.85 - Math.sin(i * 0.4) * 8 + (i > 60 ? -12 : 0));
                    }
                    let d = `M 0 ${pts[0]}`;
                    pts.forEach((y, i) => { d += ` L ${(i / 90) * 600} ${y}`; });
                    return <path d={d} stroke={UB.accent} strokeWidth="1.6" fill="none" />;
                  })()}
                  {/* Royalty event markers */}
                  {[
                    [120, 'royalty $1,840'],
                    [330, 'license · BMS'],
                    [510, 'royalty $4,210'],
                  ].map(([x, l], i) => (
                    <g key={i}>
                      <line x1={x} y1="20" x2={x} y2="160" stroke={UB.accent} strokeWidth="0.6" strokeDasharray="3 3" opacity="0.5" />
                      <text x={x + 4} y="34" fontFamily={UB.mono} fontSize="9" fill={UB.accent}>● {l}</text>
                    </g>
                  ))}
                </svg>
              </div>
              <div style={{ padding: '10px 18px', borderTop: `1px solid ${UB.rule2}`, display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 10, fontFamily: UB.mono, fontSize: 10 }}>
                <div><div style={{ color: UB.ink3 }}>Open</div><div style={{ color: UB.ink, fontSize: 12 }}>$1.81</div></div>
                <div><div style={{ color: UB.ink3 }}>High</div><div style={{ color: UB.ink, fontSize: 12 }}>$1.92</div></div>
                <div><div style={{ color: UB.ink3 }}>Low</div><div style={{ color: UB.ink, fontSize: 12 }}>$1.78</div></div>
                <div><div style={{ color: UB.ink3 }}>Vol 24h</div><div style={{ color: UB.ink, fontSize: 12 }}>14,820 UBR</div></div>
                <div><div style={{ color: UB.ink3 }}>Mkt cap</div><div style={{ color: UB.ink, fontSize: 12 }}>$184K</div></div>
              </div>
            </Card>

            <Card title="Royalty stream · 24 months" code="$11,420 PAID TO YOU" pad={false}>
              <div style={{ padding: '14px 18px' }}>
                <svg width="100%" height="120" viewBox="0 0 600 100" preserveAspectRatio="none">
                  {Array.from({ length: 24 }).map((_, i) => {
                    const x = i * (600 / 24) + 4;
                    const w = (600 / 24) - 6;
                    const h = i < 8 ? 6 + Math.random() * 6 : 14 + Math.sin(i * 0.5) * 8 + i * 1.2;
                    return <rect key={i} x={x} y={90 - h} width={w} height={h} fill={UB.accent} opacity="0.85" />;
                  })}
                  <line x1="0" y1="90" x2="600" y2="90" stroke={UB.ink3} strokeWidth="0.5" />
                </svg>
              </div>
              <div style={{ padding: '10px 18px', borderTop: `1px solid ${UB.rule2}`, fontFamily: UB.mono, fontSize: 10, color: UB.ink3, display: 'flex', justifyContent: 'space-between' }}>
                <span>2 active licensees · 1 prospect · 0 disputes</span>
                <span>Next payout · 14 May · est. $1,840</span>
              </div>
            </Card>

            <Card title="Order book" code="USDC · $1.84" pad={false}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0 }}>
                {/* Bids */}
                <div style={{ borderRight: `1px solid ${UB.rule2}` }}>
                  <div style={{ padding: '6px 14px', fontFamily: UB.mono, fontSize: 9, letterSpacing: '0.16em', color: UB.ok, borderBottom: `1px solid ${UB.rule2}`, background: 'oklch(0.72 0.13 155 / 0.08)' }}>BIDS</div>
                  {[
                    [1.84, 1240, '$2,281'],
                    [1.83, 2100, '$3,843'],
                    [1.82, 540,  '$983'],
                    [1.81, 1820, '$3,294'],
                    [1.80, 4400, '$7,920'],
                    [1.78, 1100, '$1,958'],
                    [1.75, 8200, '$14,350'],
                  ].map((r, i, arr) => (
                    <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6, padding: '5px 14px', borderBottom: i < arr.length - 1 ? `1px solid ${UB.rule3}` : 'none', fontFamily: UB.mono, fontSize: 11, position: 'relative' }}>
                      <span style={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: `${(r[1] / 8200) * 100}%`, background: 'oklch(0.72 0.13 155 / 0.10)' }} />
                      <span style={{ color: UB.ok, position: 'relative' }}>${r[0].toFixed(2)}</span>
                      <span style={{ color: UB.ink2, position: 'relative' }}>{r[1].toLocaleString()}</span>
                      <span style={{ color: UB.ink3, textAlign: 'right', position: 'relative' }}>{r[2]}</span>
                    </div>
                  ))}
                </div>
                {/* Asks */}
                <div>
                  <div style={{ padding: '6px 14px', fontFamily: UB.mono, fontSize: 9, letterSpacing: '0.16em', color: UB.bad, borderBottom: `1px solid ${UB.rule2}`, background: 'oklch(0.62 0.20 25 / 0.08)' }}>ASKS</div>
                  {[
                    [1.85, 800,  '$1,480'],
                    [1.86, 1400, '$2,604'],
                    [1.88, 2200, '$4,136'],
                    [1.90, 1800, '$3,420'],
                    [1.94, 3600, '$6,984'],
                    [1.98, 1100, '$2,178'],
                    [2.10, 14200,'$29,820'],
                  ].map((r, i, arr) => (
                    <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6, padding: '5px 14px', borderBottom: i < arr.length - 1 ? `1px solid ${UB.rule3}` : 'none', fontFamily: UB.mono, fontSize: 11, position: 'relative' }}>
                      <span style={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: `${(r[1] / 14200) * 100}%`, background: 'oklch(0.62 0.20 25 / 0.10)' }} />
                      <span style={{ color: UB.bad, position: 'relative' }}>${r[0].toFixed(2)}</span>
                      <span style={{ color: UB.ink2, position: 'relative' }}>{r[1].toLocaleString()}</span>
                      <span style={{ color: UB.ink3, textAlign: 'right', position: 'relative' }}>{r[2]}</span>
                    </div>
                  ))}
                </div>
              </div>
              <div style={{ padding: '8px 14px', borderTop: `1px solid ${UB.rule2}`, fontFamily: UB.mono, fontSize: 10, color: UB.ink3, display: 'flex', justifyContent: 'space-between' }}>
                <span>Spread · $0.01 · 0.5%</span>
                <span>Mid · $1.845</span>
              </div>
            </Card>
          </div>

          {/* Right column */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <Card title="Patent metadata" code="USPTO + UB-CHAIN">
              <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, lineHeight: 1.7 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>USPTO #</span><span style={{ color: UB.ink }}>12/845,209</span></div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Filed</span><span style={{ color: UB.ink }}>14 Mar 2023</span></div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Granted</span><span style={{ color: UB.ink }}>22 Aug 2024</span></div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Expires</span><span style={{ color: UB.ink }}>14 Mar 2043</span></div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Class</span><span style={{ color: UB.ink }}>A61K · A61P 25/00</span></div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Inventors</span><span style={{ color: UB.ink }}>3</span></div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Claims</span><span style={{ color: UB.ink }}>14 (3 indep.)</span></div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Citations</span><span style={{ color: UB.ink }}>22 forward · 84 back</span></div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>dPID</span><span style={{ color: UB.accent }}>a92f.04</span></div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Contract</span><span style={{ color: UB.accent }}>0xa9…f04e</span></div>
              </div>
              <div style={{ marginTop: 12, fontSize: 11, color: UB.ink2, lineHeight: 1.55 }}>
                A method of selectively reducing astrocytic GABA reuptake via small-molecule modulators of the GAT-3 transporter, such that tonic inhibition is increased while LTP induction is preserved…
              </div>
            </Card>

            <Card title="Revenue split" code="ON-CHAIN · IMMUTABLE">
              {[
                ['Token holders (you · 18.4%)', 0.65, 'incl. you · 18.4%'],
                ['Inventors · founder pool',     0.20, '3 named'],
                ['Lab DAO · GliaInit',           0.10, '14 contributors'],
                ['Reviewer pool · TRID',         0.03, 'replication bounty'],
                ['Protocol fee · UB-Chain',      0.02, 'recycled to UBR'],
              ].map((r, i) => (
                <div key={i} style={{ marginBottom: 8 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, marginBottom: 2 }}>
                    <span style={{ color: i === 0 ? UB.ink : UB.ink2, fontWeight: i === 0 ? 600 : 400 }}>{r[0]}</span>
                    <span style={{ fontFamily: UB.mono, color: UB.ink3 }}>{(r[1] * 100).toFixed(0)}%</span>
                  </div>
                  <div style={{ height: 4, background: UB.paperDeep, position: 'relative' }}>
                    <div style={{ position: 'absolute', inset: 0, width: `${r[1] * 100}%`, background: i === 0 ? UB.accent : UB.ink2 }} />
                  </div>
                </div>
              ))}
            </Card>

            <Card title="Holders · top 10 of 218" code="DECENTRALIZATION 0.74">
              {[
                ['malcolm.harriot.eth (you)', '18.4%', 'PI'],
                ['glia-init.dao',             '14.0%', 'lab DAO'],
                ['c.lin.eth',                  '8.2%', 'co-inventor'],
                ['bms-treasury.eth',          '6.0%',  'licensee'],
                ['vita-dao.eth',               '4.8%', 'fund'],
                ['molecule-fund.eth',          '4.2%', 'fund'],
                ['anon-714…',                  '3.6%', 'retail'],
                ['…',                          '40.8%', '+ 211 holders'],
              ].map((h, i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '5px 0', borderBottom: i < 7 ? `1px solid ${UB.rule3}` : 'none', fontSize: 11 }}>
                  <span style={{ fontFamily: UB.mono, fontSize: 11, color: i === 0 ? UB.ink : UB.ink2, fontWeight: i === 0 ? 600 : 400 }}>{h[0]}</span>
                  <span style={{ fontFamily: UB.mono }}>{h[1]}</span>
                  <Tag>{h[2]}</Tag>
                </div>
              ))}
            </Card>

            <Card title="License events" code="ALL TIME · 8">
              {[
                ['BMS · field-of-use · oncology', '$120K + 6% royalty', '2024-11-04', 'ok'],
                ['RIKEN · academic non-commercial', '$0 · open',         '2024-09-12', 'info'],
                ['Verily · brain field',          '$80K + 4% royalty',  '2025-02-22', 'ok'],
                ['Charles River · CRO use',       '$0 · operational',   '2025-03-08', 'info'],
                ['Anonymous bidder · §3 pending', '$280K (offer)',      '2025-04-30', 'warn'],
              ].map((e, i) => (
                <div key={i} style={{ padding: '8px 0', borderBottom: i < 4 ? `1px solid ${UB.rule3}` : 'none' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 11 }}>
                    <span>{e[0]}</span>
                    <Tag tone={e[3]}>{e[3] === 'ok' ? 'PAID' : e[3] === 'warn' ? 'PENDING' : 'OPEN'}</Tag>
                  </div>
                  <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, marginTop: 2 }}>{e[1]} · {e[2]}</div>
                </div>
              ))}
            </Card>
          </div>
        </div>
      </Layout>
    </Dapp>
  );
}

// ───────────────────────────────────────────────── MARKETPLACE ───────────────
function PatentMarketplaceDapp() {
  const market = [
    { sym: 'AGE-04', name: 'Aging assay platform', stage: 'GRANTED', dom: 'Aging', mark: 1.32, d24: '+8.4%', vol: '$184K', mc: '$13.2M', yld: '6.2%', tone: 'accent', flame: true },
    { sym: 'CRSP-12', name: 'Off-target Crispr filter', stage: 'GRANTED', dom: 'Gene', mark: 0.92, d24: '+2.1%', vol: '$98K', mc: '$9.2M', yld: '4.4%', tone: 'accent' },
    { sym: 'VAX-09',  name: 'mRNA delivery scaffold', stage: 'GRANTED', dom: 'Vax', mark: 1.18, d24: '+11.3%', vol: '$240K', mc: '$11.8M', yld: '5.8%', tone: 'accent', flame: true },
    { sym: 'NEUR-01', name: 'BCI electrode array',     stage: 'EXAM',    dom: 'Neuro',  mark: 0.42, d24: '+0.4%', vol: '$22K', mc: '$2.1M', yld: '0%',   tone: 'warn' },
    { sym: 'BAT-04',  name: 'Solid-state Li-S cell',   stage: 'PROVISIONAL', dom: 'Mat.', mark: 0.18, d24: '−6.2%', vol: '$8K',  mc: '$0.9M', yld: '0%',   tone: 'ok' },
    { sym: 'MTL-02',  name: 'Self-healing alloy',      stage: 'GRANTED', dom: 'Mat.',   mark: 0.78, d24: '−0.6%', vol: '$42K', mc: '$3.9M', yld: '3.1%', tone: 'accent' },
    { sym: 'OPT-11',  name: 'Quantum entangler',       stage: 'EXAM',    dom: 'Phys.',  mark: 1.84, d24: '+22%',  vol: '$1.4M', mc: '$28.4M', yld: '0%',  tone: 'warn', flame: true },
    { sym: 'FUS-03',  name: 'Tokamak shielding',       stage: 'EXAM',    dom: 'Energy', mark: 0.34, d24: '+1.4%', vol: '$18K', mc: '$3.4M', yld: '0%',   tone: 'warn' },
    { sym: 'AGRO-22', name: 'Drought-tolerant root',   stage: 'GRANTED', dom: 'Agro',   mark: 0.62, d24: '+3.2%', vol: '$36K', mc: '$6.2M', yld: '2.1%', tone: 'accent' },
    { sym: 'ANTI-7',  name: 'Bacteriophage cocktail',  stage: 'GRANTED', dom: 'Bio',    mark: 1.04, d24: '+5.6%', vol: '$140K','mc': '$10.4M', yld: '4.0%', tone: 'accent' },
  ];

  const ipo = [
    { sym: 'ALZ-22',  name: 'Tau aggregation inhibitor', team: 'Park Lab · KAIST',     d: '14 May', size: '$2.4M @ $0.40', commit: 124, tone: 'accent' },
    { sym: 'PNX-04',  name: 'Pan-coronavirus nanobody',  team: 'OxBio Consortium',     d: '21 May', size: '$4.0M @ $0.80', commit: 320, tone: 'accent' },
    { sym: 'COMP-09', name: 'Photonic adder',            team: 'ETH Zurich',            d: '30 May', size: '$1.2M @ $0.32', commit: 84,  tone: 'ok' },
    { sym: 'GUT-14',  name: 'Microbiome diagnostic',     team: 'CzBiohub',              d: '04 Jun', size: '$1.8M @ $0.55', commit: 92,  tone: 'ok' },
    { sym: 'SOL-11',  name: 'Perovskite stabilizer',     team: 'NREL · Univ. Delaware', d: '12 Jun', size: '$3.0M @ $0.48', commit: 184, tone: 'accent' },
    { sym: 'AAV-02',  name: 'Targeted AAV capsid',       team: 'Verily',                d: '25 Jun', size: '$2.0M @ $0.62', commit: 48,  tone: 'default' },
  ];

  return (
    <Dapp>
      <ChromeBar dapp="PATENT TOKENS" code="MARKETPLACE · 412 LISTED" />
      <Layout rail={<PatentRail active="market" />}>
        <PageHead
          eyebrow={<PatentCrumb items={['Patent Tokens', 'Marketplace']} />}
          title="Patent token marketplace"
          sub="Buy fractional positions in any patent token issued through UB-Chain. Filter by domain, stage, royalty yield. New launches calendared on the right."
          actions={<>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, height: 32, padding: '0 12px', border: `1px solid ${UB.rule2}`, background: '#fff', minWidth: 240 }}>
              <span style={{ color: UB.ink4 }}>{Icon.search}</span>
              <span style={{ fontFamily: UB.mono, fontSize: 11, color: UB.ink3 }}>Search symbol · USPTO · domain</span>
            </div>
            <Btn small icon={Icon.bell}>Alerts · 8</Btn>
            <Btn small primary icon={Icon.cube}>Mint your patent</Btn>
          </>}
        />

        <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* Market overview */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
            <Card><Stat label="Listed tokens" value="412" sub="218 granted · 144 exam · 50 prov." /></Card>
            <Card><Stat label="Combined market cap" value="$1.84B" sub="+4.2% 7d" /></Card>
            <Card><Stat label="Volume · 24h" value="$14.2M" sub="2,140 trades" /></Card>
            <Card><Stat label="Royalties paid · TTM" value="$184M" sub="across all tokens" /></Card>
            <Card><Stat label="Median yield" value="3.4%" sub="paying tokens only" /></Card>
          </div>

          {/* Filters */}
          <div style={{ display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap' }}>
            <span style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.18em', marginRight: 4 }}>FILTER</span>
            {['All · 412', 'Granted · 218', 'Examination · 144', 'Provisional · 50', 'Paying yield · 184', 'Top movers', 'Watchlist · 4'].map((c, i) => (
              <span key={c} style={{ padding: '4px 10px', border: `1px solid ${i === 0 ? UB.ink : UB.rule2}`, background: i === 0 ? UB.ink : '#fff', color: i === 0 ? UB.paper : UB.ink2, fontFamily: UB.mono, fontSize: 10, letterSpacing: '0.04em', cursor: 'pointer' }}>{c}</span>
            ))}
            <span style={{ flex: 1 }} />
            <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>Domain:</span>
            {['Neuro', 'Bio', 'Mat.', 'Energy', 'Agro', 'Phys.'].map((d, i) => (
              <Tag key={d} tone={i === 1 ? 'ink' : 'default'}>{d}</Tag>
            ))}
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 16 }}>
            {/* Markets table */}
            <Card title="Listings" code="LIVE" pad={false}>
              <div style={{ display: 'grid', gridTemplateColumns: '90px 1fr 80px 60px 80px 70px 80px 80px 60px 70px', gap: 10, padding: '10px 16px', fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.14em', textTransform: 'uppercase', borderBottom: `1px solid ${UB.rule2}`, background: UB.paperDeep }}>
                <span>Symbol</span><span>Patent · domain</span><span>Stage</span><span></span><span>Mark</span><span>24h</span><span>Vol 24h</span><span>Mkt cap</span><span>Yield</span><span></span>
              </div>
              {market.map((m, i) => (
                <div key={m.sym} style={{ display: 'grid', gridTemplateColumns: '90px 1fr 80px 60px 80px 70px 80px 80px 60px 70px', gap: 10, padding: '11px 16px', alignItems: 'center', borderBottom: i < market.length - 1 ? `1px solid ${UB.rule3}` : 'none' }}>
                  <span style={{ fontFamily: UB.mono, fontSize: 11, fontWeight: 600 }}>{m.sym}</span>
                  <div>
                    <div style={{ fontSize: 12 }}>{m.name}</div>
                    <div style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3 }}>{m.dom}</div>
                  </div>
                  <Tag tone={m.tone}>{m.stage}</Tag>
                  <span>{m.flame && <Tag tone="warn">🔥</Tag>}</span>
                  <span style={{ fontFamily: UB.mono, fontSize: 11, fontWeight: 600 }}>${m.mark.toFixed(2)}</span>
                  <span style={{ fontFamily: UB.mono, fontSize: 11, color: m.d24.startsWith('+') ? UB.ok : m.d24.startsWith('−') ? UB.bad : UB.ink2 }}>{m.d24}</span>
                  <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{m.vol}</span>
                  <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{m.mc}</span>
                  <span style={{ fontFamily: UB.mono, fontSize: 10, color: m.yld === '0%' ? UB.ink3 : UB.accent }}>{m.yld}</span>
                  <Btn small primary>Buy</Btn>
                </div>
              ))}
              <div style={{ padding: '10px 16px', borderTop: `1px solid ${UB.rule2}`, fontFamily: UB.mono, fontSize: 10, color: UB.ink3, textAlign: 'center' }}>
                + 402 more · scroll to load
              </div>
            </Card>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <Card title="New launches · IPO" code="6 UPCOMING" pad={false}>
                {ipo.map((p, i) => (
                  <div key={p.sym} style={{ padding: '12px 16px', borderBottom: i < ipo.length - 1 ? `1px solid ${UB.rule3}` : 'none' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
                      <span style={{ fontFamily: UB.mono, fontSize: 12, fontWeight: 600 }}>{p.sym}</span>
                      <Tag tone={p.tone}>{p.d}</Tag>
                    </div>
                    <div style={{ fontSize: 12 }}>{p.name}</div>
                    <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, marginTop: 2 }}>{p.team}</div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 8 }}>
                      <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink2 }}>{p.size}</span>
                      <Btn small primary>Commit · {p.commit}</Btn>
                    </div>
                  </div>
                ))}
              </Card>

              <Card title="Top movers · 24h" code="UP">
                {[
                  ['OPT-11', 'Quantum entangler', '+22%'],
                  ['VAX-09', 'mRNA delivery', '+11.3%'],
                  ['AGE-04', 'Aging assay', '+8.4%'],
                  ['ANTI-7', 'Phage cocktail', '+5.6%'],
                ].map((r, i) => (
                  <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', borderBottom: i < 3 ? `1px solid ${UB.rule3}` : 'none', fontSize: 11 }}>
                    <span><span style={{ fontFamily: UB.mono, fontWeight: 600 }}>{r[0]}</span><span style={{ color: UB.ink3, marginLeft: 6 }}>{r[1]}</span></span>
                    <span style={{ fontFamily: UB.mono, color: UB.ok }}>{r[2]}</span>
                  </div>
                ))}
              </Card>

              <Card title="Liquidity pools" code="OPEN · APY">
                {[
                  ['AGE-04 / UBR', '14.2%', '$22.4M'],
                  ['VAX-09 / UBR', '11.7%', '$8.1M'],
                  ['OPT-11 / USDC', '24.4%', '$4.2M'],
                  ['CRSP-12 / USDC', '9.1%', '$3.4M'],
                ].map((r, i) => (
                  <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.4fr 60px 1fr', gap: 8, padding: '6px 0', borderBottom: i < 3 ? `1px solid ${UB.rule3}` : 'none', fontFamily: UB.mono, fontSize: 11, alignItems: 'center' }}>
                    <span>{r[0]}</span>
                    <Tag tone="accent">{r[1]}</Tag>
                    <span style={{ color: UB.ink3, textAlign: 'right' }}>{r[2]}</span>
                  </div>
                ))}
                <Btn small primary style={{ marginTop: 10, width: '100%', justifyContent: 'center' }}>Provide liquidity</Btn>
              </Card>
            </div>
          </div>
        </div>
      </Layout>
    </Dapp>
  );
}

window.PatentTokensDapp = PatentTokensDapp;
window.PatentTokenDetailDapp = PatentTokenDetailDapp;
window.PatentMarketplaceDapp = PatentMarketplaceDapp;