// More UBP sub-pages: AI Twin · Wallet · Reviewer Hub · Patents · Discovery
// Each is reachable from the Personal Dapp left rail.

function UBPRail2({ active }) {
  return (
    <>
      <div style={{ padding: '0 16px 14px', borderBottom: `1px solid ${UB.rule2}`, marginBottom: 14 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <div style={{ width: 28, height: 28, background: UB.ink, color: UB.paper, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: UB.serif, fontSize: 16 }}>M</div>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontWeight: 600, fontSize: 12, lineHeight: 1.1 }}>M. Harriot</div>
            <div style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.06em' }}>UBID·0x7a91…3fc2</div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 4 }}>
          <Tag tone="accent">TIS 85.8</Tag>
          <Tag>NEUROSCI</Tag>
        </div>
      </div>
      <NavGroup label="Workspace">
        <NavItem icon={Icon.home} label="Overview" />
        <NavItem icon={Icon.user} label="TRID Profile" />
        <NavItem icon={Icon.flask} label="AI Twin" badge="·" active={active === 'twin'} />
        <NavItem icon={Icon.search} label="Discovery" active={active === 'discovery'} />
        <NavItem icon={Icon.check} label="Reviewer Hub" badge="3" active={active === 'reviews'} />
        <NavItem icon={Icon.cube} label="Patents / IP" badge="2" active={active === 'patents'} />
      </NavGroup>
      <NavGroup label="Account">
        <NavItem icon={Icon.bank} label="Wallet" active={active === 'wallet'} />
        <NavItem icon={Icon.cog} label="Settings" />
      </NavGroup>
    </>
  );
}

function Crumb2({ 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>
  );
}

// ────────────────────────────────────────────────────────── AI TWIN ──────────
function AITwinDapp() {
  const conv = [
    { who: 'twin', t: 'I pre-reviewed DRAFT·219. Section 3.4 reuses methods from your 2024 Cell paper without citation — likely an oversight; suggested a self-citation.', meta: 'reviewed · 12 min ago' },
    { who: 'me',   t: 'Find me three labs that\'ve replicated dPID·a92f.04 outside the US.' },
    { who: 'twin', t: '3 candidates: Picotti Lab (ETHZ, partial), Kim Lab (KAIST, replicated M2 only), Yamamoto Lab (RIKEN, full replication, dPID·91c2.03 published 2 weeks ago).', meta: 'searched 14 sources · 1.4s' },
    { who: 'me',   t: 'Draft a Methods paragraph from notebook NB-219 cells 1.1–1.4.' },
    { who: 'twin', t: 'Draft attached. Length 412 words · Cohen\'s κ vs your prior style 0.89. Used 11 prior references; flagged 2 as potentially outdated.', meta: 'draft · 04 May 17:42' },
  ];

  return (
    <Dapp>
      <ChromeBar dapp="PERSONAL" code="UBP / AI TWIN" />
      <Layout rail={<UBPRail2 active="twin" />}>
        <PageHead
          eyebrow={<Crumb2 items={['Personal Dapp', 'Workspace', 'AI Twin Scientist']} />}
          title="Your digital twin"
          sub="Trained on your notebooks, papers, drafts and citations. Pre-reviews work, finds prior art, drafts methods sections — always under your sign-off."
          actions={<>
            <Btn small>Settings</Btn>
            <Btn small primary icon={Icon.plus}>New conversation</Btn>
          </>}
        />

        <div style={{ flex: 1, padding: 24, overflow: 'hidden', display: 'grid', gridTemplateColumns: '320px 1fr 280px', gap: 16 }}>
          {/* Left: training + skills */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, minHeight: 0 }}>
            <Card title="Training corpus" code="LOCAL · ZK">
              <div style={{ fontSize: 11, color: UB.ink3, marginBottom: 10, lineHeight: 1.5 }}>Indexed on your machine. The model never leaves your enclave.</div>
              {[
                ['Notebooks · NB-001 → NB-219', '14,201 cells'],
                ['Published papers · 23', '482K tokens'],
                ['Drafts in review · 4', '38K tokens'],
                ['Reviews you wrote · 91', '54K tokens'],
                ['Citation graph (2nd-order)', '2,184 nodes'],
              ].map(([k, v], i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', borderBottom: i < 4 ? `1px solid ${UB.rule3}` : 'none', fontSize: 12 }}>
                  <span>{k}</span>
                  <span style={{ fontFamily: UB.mono, fontSize: 11, color: UB.ink3 }}>{v}</span>
                </div>
              ))}
              <div style={{ marginTop: 10, padding: 8, background: UB.paperDeep, fontFamily: UB.mono, fontSize: 10, color: UB.ink2 }}>
                ↻ Last sync: 12 min ago · drift 0.4% · re-train on diff
              </div>
            </Card>
            <Card title="Skills" code="9 ENABLED">
              {[
                ['Pre-review drafts', true, 'accent'],
                ['Surface prior art', true, 'accent'],
                ['Draft methods sections', true, 'accent'],
                ['Reproducibility checker', true, 'ok'],
                ['Reviewer matchmaking', true, 'ok'],
                ['Grant call alignment', true, 'ok'],
                ['Auto-cite my own work', false, 'default'],
                ['Critique my own claims', true, 'warn'],
                ['Generate hypotheses', false, 'default'],
              ].map(([k, on, tone], i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '6px 0', borderBottom: i < 8 ? `1px solid ${UB.rule3}` : 'none' }}>
                  <span style={{ fontSize: 11 }}>{k}</span>
                  <Tag tone={on ? tone : 'default'}>{on ? 'ON' : 'OFF'}</Tag>
                </div>
              ))}
            </Card>
          </div>

          {/* Center: conversation */}
          <Card title="Conversation · 04 May" code="THREAD-082" pad={false} style={{ minHeight: 0 }}>
            <div style={{ flex: 1, padding: 16, overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 12 }}>
              {conv.map((m, i) => (
                <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                  <div style={{
                    width: 28, height: 28, flexShrink: 0,
                    background: m.who === 'twin' ? UB.ink : UB.paperDeep,
                    color: m.who === 'twin' ? UB.accent : UB.ink,
                    fontFamily: UB.serif, fontSize: 14,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>{m.who === 'twin' ? 'M⁂' : 'M'}</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontFamily: UB.mono, fontSize: 9, letterSpacing: '0.14em', color: UB.ink3, marginBottom: 3 }}>
                      {m.who === 'twin' ? 'M.HARRIOT · TWIN' : 'YOU'}
                      {m.meta && <span style={{ marginLeft: 8, color: UB.ink4 }}>· {m.meta}</span>}
                    </div>
                    <div style={{ fontSize: 13, lineHeight: 1.55, color: UB.ink2, padding: m.who === 'twin' ? '8px 12px' : 0, background: m.who === 'twin' ? UB.paperDeep : 'transparent', borderLeft: m.who === 'twin' ? `2px solid ${UB.accent}` : 'none' }}>{m.t}</div>
                  </div>
                </div>
              ))}
            </div>
            <div style={{ borderTop: `1px solid ${UB.rule2}`, padding: 10, display: 'flex', gap: 8, alignItems: 'center' }}>
              <div style={{ flex: 1, height: 32, padding: '0 12px', display: 'flex', alignItems: 'center', border: `1px solid ${UB.rule2}`, background: '#fff', fontFamily: UB.mono, fontSize: 11, color: UB.ink3 }}>
                Ask your twin · @paper @notebook /command
              </div>
              <Btn small primary>Send</Btn>
            </div>
          </Card>

          {/* Right: actions + audit */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, minHeight: 0 }}>
            <Card title="Twin can act" code="REQUIRES SIGN">
              {[
                ['Pre-review DRAFT·220', '+0 UBR'],
                ['Submit to publication', 'sign'],
                ['Open replication bounty', '40 UBR'],
                ['Fetch from Compute', 'estimate'],
                ['Mint IP-NFT from NB-219', 'sign'],
              ].map(([k, v], i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '7px 0', borderBottom: i < 4 ? `1px solid ${UB.rule3}` : 'none' }}>
                  <span style={{ fontSize: 11 }}>{k}</span>
                  <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{v}</span>
                </div>
              ))}
            </Card>
            <Card title="Audit trail · 24h" code="ZK·LOG">
              {[
                ['Inferred answer', '14×'],
                ['Fetched citation', '8×'],
                ['Drafted text', '3×'],
                ['Auto-flagged for review', '2×'],
                ['Acted with sign-off', '0×'],
              ].map(([k, v], i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '5px 0', borderBottom: i < 4 ? `1px solid ${UB.rule3}` : 'none', fontFamily: UB.mono, fontSize: 11 }}>
                  <span style={{ color: UB.ink2 }}>{k}</span>
                  <span style={{ color: UB.accent }}>{v}</span>
                </div>
              ))}
            </Card>
          </div>
        </div>
      </Layout>
    </Dapp>
  );
}

// ──────────────────────────────────────────────────────────── WALLET ─────────
function WalletDapp() {
  const txs = [
    ['+2,184',  'Royalty payout · dPID·a92f.04', '04 May · 17:02', 'ROYALTY', 'accent'],
    ['+340',    'Access fees · QmZ7…91fe', '04 May · 09:14', 'ACCESS', 'ok'],
    ['-12.40',  'Compute · NB-219 H100×4', '03 May · 22:08', 'COMPUTE', 'default'],
    ['+90',     'Reviewer reward · dPID·81b3', '03 May · 14:33', 'REVIEW', 'ok'],
    ['+8,400',  'Milestone · NB-219 M3', '02 May · 11:00', 'GRANT', 'accent'],
    ['-200',    'Bounty · ES translation', '01 May · 18:50', 'BOUNTY', 'warn'],
    ['+62',     'Citation tip · A. Patel', '30 Apr · 21:18', 'TIP', 'default'],
    ['-18.00',  'Storage rent · 482 GB', '30 Apr · 08:00', 'STORAGE', 'default'],
  ];

  return (
    <Dapp>
      <ChromeBar dapp="PERSONAL" code="UBP / WALLET" />
      <Layout rail={<UBPRail2 active="wallet" />}>
        <PageHead
          eyebrow={<Crumb2 items={['Personal Dapp', 'Account', 'Wallet']} />}
          title="Wallet"
          sub="UBR balance, royalty streams, milestone escrow, and authorized contracts."
          actions={<>
            <Btn small icon={Icon.arrow}>Receive</Btn>
            <Btn small icon={Icon.arrow}>Send</Btn>
            <Btn small primary>Bridge</Btn>
          </>}
        />

        <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* Hero balance */}
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', gap: 16 }}>
            <div style={{ background: UB.ink, color: UB.paper, padding: 22, position: 'relative' }}>
              <div style={{ fontFamily: UB.mono, fontSize: 10, letterSpacing: '0.2em', color: '#A8A7A0', marginBottom: 8 }}>BALANCE · UBR</div>
              <div style={{ fontFamily: UB.serif, fontSize: 56, lineHeight: 0.95, letterSpacing: '-0.03em', color: UB.accent }}>12,840.42</div>
              <div style={{ fontFamily: UB.mono, fontSize: 11, color: '#A8A7A0', marginTop: 8 }}>≈ $4,212 USD · 1 UBR ≈ $0.328</div>
              <div style={{ marginTop: 14, display: 'flex', gap: 6 }}>
                <Tag tone="ink">SPENDABLE 9,840</Tag>
                <Tag style={{ background: 'rgba(255,255,255,.1)', color: UB.paper }}>STAKED 2,400</Tag>
                <Tag style={{ background: 'rgba(255,255,255,.1)', color: UB.paper }}>ESCROW 600</Tag>
              </div>
            </div>
            <Card title="Inflows · 30d" code="UBR">
              <div style={{ fontFamily: UB.serif, fontSize: 36, lineHeight: 1, color: UB.accent }}>+11,184</div>
              <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, marginBottom: 10 }}>↑ 38% vs prior · 5 sources</div>
              <MiniBars values={[120, 220, 180, 300, 460, 540, 612, 720, 840, 1080, 1640, 2184]} h={48} color={UB.accent} />
            </Card>
            <Card title="Outflows · 30d" code="UBR">
              <div style={{ fontFamily: UB.serif, fontSize: 36, lineHeight: 1 }}>-1,842</div>
              <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, marginBottom: 10 }}>compute · storage · bounties</div>
              <MiniBars values={[40, 80, 60, 120, 180, 220, 200, 240, 280, 300, 360, 460]} h={48} color={UB.ink} />
            </Card>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 16 }}>
            <Card title="Recent transactions" code={`${txs.length} · LIVE`} pad={false}>
              <div style={{ display: 'grid', gridTemplateColumns: '110px 1fr 130px 90px', gap: 12, padding: '10px 16px', fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.14em', textTransform: 'uppercase', borderBottom: `1px solid ${UB.rule2}` }}>
                <span style={{ textAlign: 'right' }}>Amount</span><span>Memo</span><span>When</span><span>Kind</span>
              </div>
              {txs.map((t, i) => {
                const positive = t[0].startsWith('+');
                return (
                  <div key={i} style={{ display: 'grid', gridTemplateColumns: '110px 1fr 130px 90px', gap: 12, padding: '11px 16px', fontFamily: UB.mono, fontSize: 11, alignItems: 'center', borderBottom: i < txs.length - 1 ? `1px solid ${UB.rule3}` : 'none' }}>
                    <span style={{ textAlign: 'right', color: positive ? UB.accent : UB.ink, fontWeight: 600 }}>{t[0]}</span>
                    <span style={{ color: UB.ink2, fontFamily: UB.sans, fontSize: 12 }}>{t[1]}</span>
                    <span style={{ color: UB.ink3 }}>{t[2]}</span>
                    <Tag tone={t[4]}>{t[3]}</Tag>
                  </div>
                );
              })}
            </Card>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <Card title="Authorized contracts" code="6">
                {[
                  ['Publication royalty splitter', 'auto', 'ok'],
                  ['Compute marketplace', 'cap 200/d', 'ok'],
                  ['Storage rent · IPFS', 'cap 50/mo', 'ok'],
                  ['UCSF treasury (grant)', 'inflow only', 'ok'],
                  ['Reviewer escrow', 'auto', 'ok'],
                  ['VitaDAO voting', 'sign per tx', 'warn'],
                ].map((c, i) => (
                  <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '7px 0', borderBottom: i < 5 ? `1px solid ${UB.rule3}` : 'none', fontSize: 12 }}>
                    <div>
                      <div>{c[0]}</div>
                      <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{c[1]}</div>
                    </div>
                    <Tag tone={c[2]}>{c[2] === 'ok' ? 'ALLOW' : 'PROMPT'}</Tag>
                  </div>
                ))}
              </Card>
              <Card title="Staking & yield" code="2,400 UBR">
                <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, marginBottom: 8 }}>YIELDING · 7.2% APY · ucsf-weill-01 validator</div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                  <Stat label="Earned" value="172.8" sub="UBR · 30d" />
                  <Stat label="Unstake delay" value="14d" sub="standard" />
                </div>
                <Btn small style={{ marginTop: 10 }}>Manage stake →</Btn>
              </Card>
            </div>
          </div>
        </div>
      </Layout>
    </Dapp>
  );
}

// ──────────────────────────────────────────────────── REVIEWER HUB ───────────
function ReviewerHubDapp() {
  return (
    <Dapp>
      <ChromeBar dapp="PERSONAL" code="UBP / REVIEWER HUB" />
      <Layout rail={<UBPRail2 active="reviews" />}>
        <PageHead
          eyebrow={<Crumb2 items={['Personal Dapp', 'Workspace', 'Reviewer Hub']} />}
          title="Reviewer Hub"
          sub="Open assignments, claimable bounties, and your reviewer reputation. Reviews boost your TIS — rejections without rationale cost it."
          actions={<>
            <Btn small icon={Icon.search}>Browse open papers</Btn>
            <Btn small primary icon={Icon.plus}>Set my expertise</Btn>
          </>}
        />

        <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* KPI strip */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', border: `1px solid ${UB.rule2}`, background: '#fff' }}>
            {[['Reviews · all-time', '91'], ['Avg quality score', '4.6 / 5'], ['Median turnaround', '8.4d'], ['Earned · all-time', '6,420 UBR'], ['TIS contribution', '+8.2 pts']].map((s, i) => (
              <div key={i} style={{ padding: 16, borderRight: i < 4 ? `1px solid ${UB.rule2}` : 'none' }}>
                <div style={{ fontFamily: UB.mono, fontSize: 9, letterSpacing: '0.18em', color: UB.ink3, marginBottom: 4 }}>{s[0].toUpperCase()}</div>
                <div style={{ fontFamily: UB.mono, fontSize: 22, fontWeight: 500 }}>{s[1]}</div>
              </div>
            ))}
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 16 }}>
            <Card title="Assigned to me" code="3 · 1 OVERDUE" pad={false}>
              {[
                { id: 'DRAFT·219', t: 'Sleep-state classification from astrocyte calcium dynamics', from: 'Springer-Nature · Cell Reports', due: 'overdue 1d', reward: '90', bounty: '240', tone: 'bad' },
                { id: 'DRAFT·092', t: 'Glia-pruning regulators in murine neocortex', from: 'eLife', due: 'due 4d', reward: '60', bounty: '120', tone: 'warn' },
                { id: 'DRAFT·541', t: 'Open imaging benchmark v3 · 14 sites', from: 'Cold-spring · Open', due: 'due 11d', reward: '60', bounty: '80', tone: 'ok' },
              ].map((r, i, arr) => (
                <div key={r.id} style={{ padding: 14, borderBottom: i < arr.length - 1 ? `1px solid ${UB.rule3}` : 'none' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 }}>
                    <div style={{ minWidth: 0, flex: 1 }}>
                      <div style={{ display: 'flex', gap: 6, alignItems: 'center', marginBottom: 3 }}>
                        <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{r.id}</span>
                        <Tag tone={r.tone}>{r.due}</Tag>
                      </div>
                      <div style={{ fontWeight: 600, fontSize: 13 }}>{r.t}</div>
                      <div style={{ fontSize: 11, color: UB.ink3, marginTop: 2 }}>{r.from}</div>
                    </div>
                    <div style={{ textAlign: 'right' }}>
                      <div style={{ fontFamily: UB.mono, fontSize: 11, color: UB.accent }}>+{r.reward} UBR</div>
                      <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>+{r.bounty} bounty</div>
                    </div>
                  </div>
                  <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
                    <Btn small ghost>Decline</Btn>
                    <Btn small>Open paper</Btn>
                    <Btn small primary>Begin review</Btn>
                  </div>
                </div>
              ))}
            </Card>

            <Card title="Claimable bounties" code="12 OPEN · MATCHED TO YOU" pad={false}>
              {[
                ['Reproducibility · dPID·c401.07', 'replicate full', '480'],
                ['Translation · dPID·a92f.04 → ZH', 'native level', '160'],
                ['Counter-review · DRAFT·077', 'unbias check', '120'],
                ['Code audit · ipfs://QmK9…', 'security', '320'],
                ['Negative-result re-run · NB-088', '3 cohorts', '210'],
                ['Methods clarification · DRAFT·112', 'short', '40'],
              ].map((b, i, arr) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 90px 60px', gap: 8, padding: '10px 14px', borderBottom: i < arr.length - 1 ? `1px solid ${UB.rule3}` : 'none', alignItems: 'center' }}>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 12 }}>{b[0]}</div>
                    <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{b[1]}</div>
                  </div>
                  <span style={{ fontFamily: UB.mono, fontSize: 11, color: UB.accent, textAlign: 'right' }}>{b[2]} UBR</span>
                  <Btn small primary>Claim</Btn>
                </div>
              ))}
            </Card>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }}>
            <Card title="My reviewer reputation" code="TIS·SUB-SCORE">
              <div style={{ fontFamily: UB.serif, fontSize: 36, lineHeight: 1 }}>4.62 <span style={{ fontFamily: UB.mono, fontSize: 12, color: UB.ink3 }}>/5</span></div>
              <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, marginBottom: 10 }}>91 reviews · 14 disputed · 2 upheld against me</div>
              {[['Constructiveness', 0.92], ['Calibration', 0.88], ['Speed', 0.78], ['Bias resistance', 0.86]].map(([k, v]) => (
                <div key={k} style={{ marginBottom: 6 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11 }}><span>{k}</span><span style={{ fontFamily: UB.mono, color: UB.ink3 }}>{Math.round(v * 100)}</span></div>
                  <div style={{ height: 3, background: UB.paperDeep, position: 'relative', marginTop: 2 }}>
                    <div style={{ position: 'absolute', inset: 0, width: `${v * 100}%`, background: UB.ink }} />
                  </div>
                </div>
              ))}
            </Card>
            <Card title="Anonymity & visibility" code="ZK">
              {[
                ['Reveal name on accept', false],
                ['Reveal name on reject', false],
                ['Show reviews on TRID', true],
                ['Allow citations of my reviews', true],
              ].map(([k, on], i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '6px 0', borderBottom: i < 3 ? `1px solid ${UB.rule3}` : 'none' }}>
                  <span style={{ fontSize: 11 }}>{k}</span>
                  <Tag tone={on ? 'ok' : 'default'}>{on ? 'ON' : 'OFF'}</Tag>
                </div>
              ))}
            </Card>
            <Card title="Conflicts of interest" code="AUTO-DETECT">
              {[
                ['M. Yamamoto (RIKEN)', 'co-author × 2024'],
                ['L. Singh (UCSF)', 'same lab'],
                ['B. Ortega (Janelia)', 'past supervisor'],
              ].map((c, i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', borderBottom: i < 2 ? `1px solid ${UB.rule3}` : 'none', fontSize: 11 }}>
                  <span>{c[0]}</span>
                  <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{c[1]}</span>
                </div>
              ))}
              <Btn small style={{ marginTop: 8 }}>Add manual exclusion</Btn>
            </Card>
          </div>
        </div>
      </Layout>
    </Dapp>
  );
}

// ──────────────────────────────────────────────────────── PATENTS / IP-NFT ───
function PatentsDapp() {
  const ip = [
    { id: 'IP-NFT·0x91c2', t: 'Astrocyte-targeted optogenetic actuator (AAV9-GFAP-ChR2-mScarlet)', kind: 'IP-NFT', stage: 'GRANTED', country: 'US', filed: '2024-03-12', granted: '2025-11-04', license: '2 active', revenue: '8,420', tone: 'accent' },
    { id: 'IP-NFT·0x44e2', t: 'Method for reproducibility-weighted citation indexing', kind: 'IP-NFT', stage: 'PENDING', country: 'PCT', filed: '2025-01-08', granted: '—', license: '0', revenue: '0', tone: 'warn' },
    { id: 'PAT·EP-22910', t: '2-photon imaging rig with on-chain calibration ledger', kind: 'CLASSIC', stage: 'GRANTED', country: 'EP', filed: '2022-08-19', granted: '2024-06-30', license: '4 active', revenue: '14,180', tone: 'ok' },
    { id: 'IP-NFT·0xff14', t: 'Hardware-secured ZK identity dongle for SBT-DID issuance', kind: 'IP-NFT', stage: 'PROVISIONAL', country: 'US', filed: '2026-02-02', granted: '—', license: '0', revenue: '0', tone: 'default' },
  ];

  return (
    <Dapp>
      <ChromeBar dapp="PERSONAL" code="UBP / PATENTS · IP-NFT" />
      <Layout rail={<UBPRail2 active="patents" />}>
        <PageHead
          eyebrow={<Crumb2 items={['Personal Dapp', 'Workspace', 'Patents & IP-NFT']} />}
          title="Patents & IP-NFTs"
          sub="Mint research IP as on-chain NFTs with programmable royalty splits. Files convert to classic patent applications via authorized filing partners."
          actions={<>
            <Btn small>Filing partners</Btn>
            <Btn small primary icon={Icon.plus}>Mint IP-NFT</Btn>
          </>}
        />

        <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* KPI strip */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', border: `1px solid ${UB.rule2}`, background: '#fff' }}>
            {[['Active IP', '4', '2 NFT · 2 classic'],
              ['Granted', '2', '50% grant rate'],
              ['Pending', '1', 'PCT'],
              ['License revenue', '22,600', 'UBR · all-time'],
              ['TIS · IP boost', '+4.1', 'commercialised']].map((s, i) => (
              <div key={i} style={{ padding: 16, borderRight: i < 4 ? `1px solid ${UB.rule2}` : 'none' }}>
                <div style={{ fontFamily: UB.mono, fontSize: 9, letterSpacing: '0.18em', color: UB.ink3, marginBottom: 4, textTransform: 'uppercase' }}>{s[0]}</div>
                <div style={{ fontFamily: UB.mono, fontSize: 22, fontWeight: 500 }}>{s[1]}</div>
                <div style={{ fontSize: 10, color: UB.ink3, fontFamily: UB.mono }}>{s[2]}</div>
              </div>
            ))}
          </div>

          <Card title="My intellectual property" code={`${ip.length}`} pad={false}>
            <div style={{ display: 'grid', gridTemplateColumns: '140px 1.6fr 80px 90px 60px 100px 110px 100px', gap: 12, padding: '10px 16px', fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.14em', textTransform: 'uppercase', borderBottom: `1px solid ${UB.rule2}` }}>
              <span>ID</span><span>Title</span><span>Kind</span><span>Stage</span><span>CC</span><span>Filed</span><span style={{ textAlign: 'right' }}>Revenue UBR</span><span style={{ textAlign: 'right' }}>Action</span>
            </div>
            {ip.map((p, i) => (
              <div key={p.id} style={{ display: 'grid', gridTemplateColumns: '140px 1.6fr 80px 90px 60px 100px 110px 100px', gap: 12, padding: '12px 16px', alignItems: 'center', borderBottom: i < ip.length - 1 ? `1px solid ${UB.rule3}` : 'none' }}>
                <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{p.id}</span>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 12, fontWeight: 500 }}>{p.t}</div>
                  <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, marginTop: 2 }}>licenses: {p.license}</div>
                </div>
                <Tag tone={p.kind === 'IP-NFT' ? 'accent' : 'default'}>{p.kind}</Tag>
                <Tag tone={p.tone}>{p.stage}</Tag>
                <span style={{ fontFamily: UB.mono, fontSize: 11, color: UB.ink3 }}>{p.country}</span>
                <span style={{ fontFamily: UB.mono, fontSize: 11, color: UB.ink3 }}>{p.filed}</span>
                <span style={{ fontFamily: UB.mono, fontSize: 11, color: UB.accent, textAlign: 'right' }}>{p.revenue}</span>
                <div style={{ display: 'flex', gap: 4, justifyContent: 'flex-end' }}>
                  <Btn small ghost>View</Btn>
                  <Btn small>License</Btn>
                </div>
              </div>
            ))}
          </Card>

          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16 }}>
            <Card title="Active license: AAV9-GFAP-ChR2-mScarlet" code="IP-NFT·0x91c2" pad={false}>
              {[
                ['Allen Institute · non-exclusive · research-only', '4,200', 'paid · streaming'],
                ['Neuralink · exclusive option · 18-mo', '4,220', 'option fee · vested 8 / 18'],
              ].map((l, i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 100px 130px', gap: 10, padding: '12px 16px', borderBottom: i === 0 ? `1px solid ${UB.rule3}` : 'none', alignItems: 'center' }}>
                  <span style={{ fontSize: 12 }}>{l[0]}</span>
                  <span style={{ fontFamily: UB.mono, fontSize: 12, color: UB.accent, textAlign: 'right' }}>{l[1]} UBR</span>
                  <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, textAlign: 'right' }}>{l[2]}</span>
                </div>
              ))}
              <div style={{ padding: 14 }}>
                <div style={{ fontFamily: UB.mono, fontSize: 9, letterSpacing: '0.18em', color: UB.ink3, marginBottom: 6 }}>ROYALTY SPLIT (CONTRACTUAL)</div>
                <div style={{ display: 'flex', height: 16 }}>
                  {[['You · 0.42', 0.42, UB.accent], ['Co-inv · 0.28', 0.28, UB.ink], ['UCSF · 0.22', 0.22, '#7CC4F2'], ['Treasury · 0.08', 0.08, '#A8A7A0']].map(([k, w, c], i) => (
                    <div key={i} style={{ width: `${w * 100}%`, background: c, color: i === 0 ? UB.ink : UB.paper, fontFamily: UB.mono, fontSize: 9, display: 'flex', alignItems: 'center', justifyContent: 'center', letterSpacing: '0.04em' }}>{k}</div>
                  ))}
                </div>
              </div>
            </Card>

            <Card title="Filing partners" code="AUTHORIZED">
              {[
                ['Cooley LLP · global', 'NFT → US/PCT/EP'],
                ['Marks & Clerk · UK + EP', 'NFT → UK/EP'],
                ['Inoue Pat. · APAC', 'NFT → JP/KR/CN'],
                ['IPzero (DAO)', 'community defense'],
              ].map((p, i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '7px 0', borderBottom: i < 3 ? `1px solid ${UB.rule3}` : 'none', fontSize: 12 }}>
                  <span>{p[0]}</span>
                  <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{p[1]}</span>
                </div>
              ))}
            </Card>
          </div>
        </div>
      </Layout>
    </Dapp>
  );
}

// ────────────────────────────────────────────────── DISCOVERY & INDEXING ─────
function DiscoveryDapp() {
  const results = [
    { dpid: 'dPID·91c2.03', t: 'Astrocyte calcium signaling encodes sleep depth — RIKEN replication of Harriot 2024', authors: 'Yamamoto · Tanaka · Mori · +4', tis: 88, cites: 14, repro: 'REPLICATED ✓', when: '2 weeks', tone: 'ok' },
    { dpid: 'dPID·08fa.01', t: 'A reproducibility-weighted citation index — extension to clinical trials', authors: 'Patel · Lin · Harriot', tis: 81, cites: 8, repro: 'IN PROGRESS', when: '1 mo', tone: 'warn' },
    { dpid: 'dPID·44e2.05', t: 'Glia heterogeneity beyond morphology — multi-omic atlas v2', authors: 'Singh · Okafor · Harriot', tis: 79, cites: 22, repro: 'REPLICATED ✓ ×3', when: '2 mo', tone: 'ok' },
    { dpid: 'DRAFT·812', t: 'Negative result: μ-glia ablation does not impair LTP recall (Yamamoto)', authors: 'Yamamoto · Mori', tis: 72, cites: 0, repro: 'PRE-REVIEW', when: '4d', tone: 'default' },
    { dpid: 'dPID·17c0.03', t: 'Cortical microcircuit motifs across 14 species', authors: 'Harriot · +6', tis: 84, cites: 11, repro: 'REPLICATED ✓', when: '6 mo', tone: 'ok' },
    { dpid: 'dPID·c019.04', t: 'Open imaging benchmark v3 · 14 sites · ~482 GB', authors: 'OpenImaging Consortium', tis: 86, cites: 38, repro: 'INFRASTRUCTURE', when: '3 mo', tone: 'accent' },
  ];

  return (
    <Dapp>
      <ChromeBar dapp="PERSONAL" code="UBP / DISCOVERY" />
      <Layout rail={<UBPRail2 active="discovery" />}>
        <PageHead
          eyebrow={<Crumb2 items={['Personal Dapp', 'Workspace', 'Discovery & Indexing']} />}
          title="Discovery"
          sub="Search the entire UB-Chain index — papers, datasets, notebooks, IP, reviews. Ranked by reproducibility and TRID, not impact factor."
          actions={<>
            <Btn small>Saved searches · 4</Btn>
            <Btn small primary>Save this query</Btn>
          </>}
        />

        <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'grid', gridTemplateColumns: '260px 1fr', gap: 18 }}>
          {/* Filters rail */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {/* Search input */}
            <div style={{ border: `1px solid ${UB.ink}`, background: '#fff', padding: '10px 12px' }}>
              <div style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.18em', marginBottom: 4 }}>QUERY</div>
              <div style={{ fontFamily: UB.serif, fontSize: 18 }}>astrocyte AND sleep</div>
              <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.accent, marginTop: 4 }}>↳ 1,418 hits · 0.04s</div>
            </div>

            {[
              ['ARTIFACT', [['Papers', 612, true], ['Datasets', 340, true], ['Notebooks', 218, false], ['IP-NFTs', 18, false], ['Reviews', 230, true]]],
              ['REPRO STATUS', [['Replicated', 312, true], ['Refuted', 22, true], ['In progress', 88, true], ['None', 996, false]]],
              ['TIS · AUTHOR', [['≥ 90', 84, false], ['80 – 90', 412, true], ['70 – 80', 612, true], ['< 70', 310, false]]],
              ['DATE', [['7 days', 14], ['30 days', 92], ['90 days', 304], ['1 year', 740], ['All time', 1418]]],
            ].map(([title, items]) => (
              <div key={title}>
                <div style={{ fontFamily: UB.mono, fontSize: 9, letterSpacing: '0.18em', color: UB.ink3, marginBottom: 6 }}>{title}</div>
                {items.map(([k, n, on]) => (
                  <div key={k} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '4px 0', fontSize: 11 }}>
                    <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                      <span style={{ width: 10, height: 10, border: `1px solid ${UB.ink}`, background: on ? UB.ink : '#fff', display: 'inline-block' }} />
                      {k}
                    </span>
                    <span style={{ fontFamily: UB.mono, color: UB.ink3 }}>{n}</span>
                  </div>
                ))}
              </div>
            ))}
          </div>

          {/* Results */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: `1px solid ${UB.rule2}`, paddingBottom: 8 }}>
              <div style={{ fontFamily: UB.mono, fontSize: 11, color: UB.ink3 }}>
                <span style={{ color: UB.ink, fontWeight: 600 }}>1,418 results</span> · sort by{' '}
                <span style={{ color: UB.accent }}>repro-weighted relevance</span> · TIS-tilted on
              </div>
              <div style={{ display: 'flex', gap: 6 }}>
                <Tag tone="ink">LIST</Tag><Tag>GRAPH</Tag><Tag>TIMELINE</Tag>
              </div>
            </div>

            {results.map((r, i) => (
              <div key={i} style={{ border: `1px solid ${UB.rule2}`, background: '#fff', padding: 14, display: 'grid', gridTemplateColumns: '1fr 180px', gap: 14 }}>
                <div>
                  <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 4 }}>
                    <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{r.dpid}</span>
                    <Tag tone={r.tone}>{r.repro}</Tag>
                    <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink4 }}>· {r.when} ago</span>
                  </div>
                  <div style={{ fontFamily: UB.serif, fontSize: 18, lineHeight: 1.2, marginBottom: 4 }}>{r.t}</div>
                  <div style={{ fontSize: 11, color: UB.ink3 }}>{r.authors}</div>
                </div>
                <div style={{ borderLeft: `1px solid ${UB.rule3}`, paddingLeft: 14, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                    <Stat label="TIS" value={r.tis} />
                    <Stat label="Cites" value={r.cites} />
                  </div>
                  <div style={{ display: 'flex', gap: 4, justifyContent: 'flex-end' }}>
                    <Btn small ghost>Save</Btn>
                    <Btn small primary>Open</Btn>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </Layout>
    </Dapp>
  );
}

window.AITwinDapp = AITwinDapp;
window.WalletDapp = WalletDapp;
window.ReviewerHubDapp = ReviewerHubDapp;
window.PatentsDapp = PatentsDapp;
window.DiscoveryDapp = DiscoveryDapp;