// UBP sub-pages: Settings, Affiliations, Institutions, Publisher Dashboard.
// All share UBP's left rail so they feel like inner pages of the Personal Dapp.

function UBPRail({ 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" active={active === 'overview'} />
        <NavItem icon={Icon.user} label="TRID Profile" />
        <NavItem icon={Icon.doc} label="Papers & Drafts" badge="14" />
        <NavItem icon={Icon.book} label="Notebooks" badge="3" />
        <NavItem icon={Icon.flask} label="Active Research" badge="6" />
      </NavGroup>
      <NavGroup label="Career">
        <NavItem icon={Icon.bank} label="Affiliations" badge="3" active={active === 'affiliations'} />
        <NavItem icon={Icon.shield} label="Institutions" active={active === 'institutions'} />
        <NavItem icon={Icon.doc} label="Publisher" active={active === 'publisher'} />
      </NavGroup>
      <NavGroup label="Account">
        <NavItem icon={Icon.cog} label="Settings" active={active === 'settings'} />
        <NavItem icon={Icon.cube} label="Wallet" />
        <NavItem icon={Icon.store} label="Dapp Store" />
      </NavGroup>
    </>
  );
}

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

// ────────────────────────────────────────────────────────────── SETTINGS ─────
function SettingsDapp() {
  const Group = ({ title, code, children }) => (
    <Card title={title} code={code} pad={false}>{children}</Card>
  );
  const Field = ({ label, hint, control, danger }) => (
    <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', gap: 20, padding: '14px 16px', borderBottom: `1px solid ${UB.rule3}`, alignItems: 'flex-start' }}>
      <div>
        <div style={{ fontSize: 12, fontWeight: 500, color: danger ? UB.bad : UB.ink }}>{label}</div>
        {hint && <div style={{ fontSize: 11, color: UB.ink3, marginTop: 3, lineHeight: 1.45 }}>{hint}</div>}
      </div>
      <div>{control}</div>
    </div>
  );
  const Toggle = ({ on }) => (
    <div style={{ width: 36, height: 20, background: on ? UB.ink : UB.paperDeep, border: `1px solid ${UB.rule2}`, position: 'relative', cursor: 'pointer' }}>
      <div style={{ position: 'absolute', top: 1, left: on ? 17 : 1, width: 16, height: 16, background: on ? UB.accent : '#fff', border: `1px solid ${UB.rule2}` }} />
    </div>
  );
  const Input = ({ value, mono, w = 280 }) => (
    <div style={{ display: 'inline-flex', alignItems: 'center', height: 28, padding: '0 10px', border: `1px solid ${UB.rule2}`, background: '#fff', fontFamily: mono ? UB.mono : UB.sans, fontSize: 12, width: w }}>{value}</div>
  );

  return (
    <Dapp>
      <ChromeBar dapp="PERSONAL" code="UBP / SETTINGS" />
      <Layout rail={<UBPRail active="settings" />}>
        <PageHead
          eyebrow={<Crumb items={['Personal Dapp', 'Account', 'Settings']} />}
          title="Settings"
          sub="Configure how the ecosystem represents you, who can transact on your behalf, and how your data flows."
          actions={<><Btn small>Discard</Btn><Btn small primary>Save changes</Btn></>}
        />
        <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'grid', gridTemplateColumns: '180px 1fr', gap: 24 }}>
          <div style={{ fontFamily: UB.mono, fontSize: 10, letterSpacing: '0.14em', color: UB.ink3 }}>
            {['IDENTITY', 'KEYS & SIGNERS', 'NOTIFICATIONS', 'PRIVACY', 'BILLING', 'CONNECTED DAPPS', 'DEVELOPER', 'DANGER ZONE'].map((s, i) => (
              <div key={s} style={{ padding: '8px 12px', background: i === 0 ? UB.paperDeep : 'transparent', color: i === 0 ? UB.ink : UB.ink3, borderLeft: i === 0 ? `2px solid ${UB.accent}` : '2px solid transparent' }}>{s}</div>
            ))}
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <Group title="Identity" code="DID·v3">
              <Field label="Display name" hint="Shown across publications, reviews, labbooks." control={<Input value="Malcolm A. Harriot" />} />
              <Field label="UB-handle" hint="Human-readable alias resolved by UB-Chain name service." control={<Input value="malcolm.harriot.eth" mono />} />
              <Field label="ORCID" hint="Imports prior works for TIS bootstrapping." control={<Input value="0000-0001-7782-9914" mono />} />
              <Field label="Pronouns" control={<Input value="he / they" w={120} />} />
              <Field label="Primary language" control={<Input value="English (UK)" w={180} />} />
            </Group>

            <Group title="Keys & signers" code="ZK·VAULT">
              <Field label="Identity key" hint="Hardware-backed. Used only for DID + ZK proofs." control={<div style={{ display: 'flex', gap: 6, alignItems: 'center' }}><Tag tone="ok">Active · YubiKey 5C</Tag><Btn small>Rotate</Btn></div>} />
              <Field label="Spending key" hint="Signs treasury & royalty transfers." control={<div style={{ display: 'flex', gap: 6, alignItems: 'center' }}><Tag tone="ok">Active · Ledger Nano</Tag><Btn small>Rotate</Btn></div>} />
              <Field label="Co-signers" hint="Require N-of-M for transfers above threshold." control={<div style={{ display: 'flex', gap: 6 }}><Tag>2 of 3</Tag><Tag mono={false}>R. Okafor · L. Singh · IT-UCSF</Tag><Btn small>Manage</Btn></div>} />
              <Field label="Recovery shards" hint="Social recovery via 5 trusted contacts." control={<div style={{ display: 'flex', gap: 6 }}><Tag tone="ok">5 / 5 healthy</Tag><Btn small>Audit</Btn></div>} />
            </Group>

            <Group title="Notifications" code="WEBHOOKS·5">
              <Field label="Review requests" control={<Toggle on />} />
              <Field label="Milestone payouts" control={<Toggle on />} />
              <Field label="Citation events" hint="When your work is cited, replicated, or refuted." control={<Toggle on />} />
              <Field label="DAO votes you can vote on" control={<Toggle on />} />
              <Field label="Marketing & ecosystem updates" control={<Toggle />} />
            </Group>

            <Group title="Privacy" code="ZK·POLICY">
              <Field label="Profile visibility" hint="Who sees your full TIS breakdown." control={<div style={{ display: 'flex', gap: 4 }}><Tag>Public</Tag><Tag tone="ink">Verified peers</Tag><Tag>Co-authors only</Tag><Tag>Private</Tag></div>} />
              <Field label="Reveal name on review" hint="Reviews are signed but identity remains ZK-blinded by default." control={<Toggle />} />
              <Field label="Allow training on my work" hint="Open dapps may train on your published artifacts." control={<Toggle on />} />
              <Field label="Data residency" control={<Input value="EU + US (replicated)" w={220} />} />
            </Group>

            <Group title="Danger zone" code="">
              <Field danger label="Export & migrate identity" hint="Generates a portable, signed bundle of your TRID." control={<Btn small>Export bundle</Btn>} />
              <Field danger label="Pause all dapps" hint="Halt outbound signatures across the ecosystem." control={<Btn small>Pause</Btn>} />
              <Field danger label="Burn this UBID" hint="Irreversible. Reputation is voided; soulbound tokens revoked." control={<Btn small style={{ color: UB.bad, borderColor: UB.bad }}>Begin burn ceremony</Btn>} />
            </Group>
          </div>
        </div>
      </Layout>
    </Dapp>
  );
}

// ────────────────────────────────────────────────────────── AFFILIATIONS ─────
function AffiliationsDapp() {
  const affs = [
    { type: 'PRIMARY', logo: 'UC', name: 'UCSF · Weill Institute for Neurosciences', role: 'Assistant Professor · Department of Neurology', period: '2022 — present', sbt: 'SBT-EMP-0x7a91', verified: true, tone: 'accent' },
    { type: 'SECONDARY', logo: 'CZ', name: 'Chan Zuckerberg Biohub · SF', role: 'Visiting Investigator · Glia Initiative', period: '2024 — present', sbt: 'SBT-EMP-0x44e2', verified: true, tone: 'info' },
    { type: 'GRANT', logo: 'NIH', name: 'NIH · Distributed Brain Initiative', role: 'PI · R01-NS-128443', period: '2025 — 2028 · 2.4M USD', sbt: 'SBT-FND-0x9c00', verified: true, tone: 'ok' },
    { type: 'DAO', logo: 'VDP', name: 'VitaDAO Protocol', role: 'Reviewer · Tier 2', period: '2024 — present', sbt: 'SBT-DAO-0xff14', verified: true, tone: 'default' },
    { type: 'PAST', logo: 'MIT', name: 'MIT · Picower Institute', role: 'Postdoctoral Fellow · McCarroll Lab', period: '2018 — 2022', sbt: 'SBT-EMP-0x182f', verified: true, tone: 'default' },
  ];

  const pending = [
    { who: 'Allen Institute for Brain Science', role: 'Visiting Scientist', sent: '3d ago', step: 'Awaiting institution counter-sign' },
    { who: 'OpenLongevity DAO', role: 'Council member', sent: '6d ago', step: 'Vote tallying · 28 / 40 quorum' },
  ];

  return (
    <Dapp>
      <ChromeBar dapp="PERSONAL" code="UBP / AFFILIATIONS" />
      <Layout rail={<UBPRail active="affiliations" />}>
        <PageHead
          eyebrow={<Crumb items={['Personal Dapp', 'Career', 'Affiliations']} />}
          title="Affiliations"
          sub="Soulbound proofs of where you work, who funds you, and which DAOs you serve. Each is signed by both parties and visible in your TRID."
          actions={<><Btn small icon={Icon.search}>Find institution</Btn><Btn small primary icon={Icon.plus}>Request affiliation</Btn></>}
        />

        <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* summary strip */}
          <Card pad={false}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)' }}>
              {[['Active', '4', 'verified soulbound'],
                ['Past', '3', 'archived'],
                ['Pending', '2', 'awaiting countersign'],
                ['Disputes', '0', 'all clear'],
                ['Visibility', 'Public', 'on TRID profile']].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 style={{ fontSize: 11, color: UB.ink3 }}>{s[2]}</div>
                </div>
              ))}
            </div>
          </Card>

          <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 16 }}>
            <Card title="Verified affiliations" code={`${affs.length} · CHAIN-SIGNED`} pad={false}>
              {affs.map((a, i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '44px 1fr 130px 90px', gap: 14, alignItems: 'center', padding: '14px 16px', borderBottom: i < affs.length - 1 ? `1px solid ${UB.rule3}` : 'none' }}>
                  <div style={{ width: 44, height: 44, background: UB.paperDeep, border: `1px solid ${UB.rule2}`, fontFamily: UB.mono, fontSize: 11, fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{a.logo}</div>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ display: 'flex', gap: 6, alignItems: 'center', marginBottom: 2 }}>
                      <Tag tone={a.tone}>{a.type}</Tag>
                      {a.verified && <Tag tone="ok">✓ ZK-VERIFIED</Tag>}
                    </div>
                    <div style={{ fontWeight: 600, fontSize: 13 }}>{a.name}</div>
                    <div style={{ fontSize: 11, color: UB.ink3 }}>{a.role}</div>
                    <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink4, marginTop: 2 }}>{a.sbt}</div>
                  </div>
                  <div style={{ fontFamily: UB.mono, fontSize: 11, color: UB.ink2 }}>{a.period}</div>
                  <div style={{ display: 'flex', gap: 4, justifyContent: 'flex-end' }}>
                    <Btn small ghost>View</Btn>
                    <Btn small>Manage</Btn>
                  </div>
                </div>
              ))}
            </Card>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <Card title="Pending requests" code={`${pending.length}`}>
                {pending.map((p, i) => (
                  <div key={i} style={{ padding: '10px 0', borderBottom: i < pending.length - 1 ? `1px solid ${UB.rule3}` : 'none' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 2 }}>
                      <span style={{ fontWeight: 600, fontSize: 12 }}>{p.who}</span>
                      <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{p.sent}</span>
                    </div>
                    <div style={{ fontSize: 11, color: UB.ink3 }}>{p.role}</div>
                    <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.accent, marginTop: 4 }}>↳ {p.step}</div>
                  </div>
                ))}
              </Card>

              <Card title="Affiliation policy" code="DEFAULTS">
                <div style={{ fontSize: 11, color: UB.ink2, marginBottom: 10, lineHeight: 1.5 }}>
                  How new affiliation requests are handled when a DAO or institution invites you.
                </div>
                {[
                  ['Auto-accept verified universities', true],
                  ['Auto-accept granting bodies (≥ NIH-tier)', true],
                  ['Notify on DAO invites', true],
                  ['Require manual sign for industry', false],
                ].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>
                    <div style={{ width: 30, height: 18, background: on ? UB.ink : UB.paperDeep, border: `1px solid ${UB.rule2}`, position: 'relative' }}>
                      <div style={{ position: 'absolute', top: 1, left: on ? 13 : 1, width: 14, height: 14, background: on ? UB.accent : '#fff' }} />
                    </div>
                  </div>
                ))}
              </Card>
            </div>
          </div>
        </div>
      </Layout>
    </Dapp>
  );
}

// ─────────────────────────────────────────────────────────── INSTITUTIONS ────
function InstitutionsDirectoryDapp() {
  const insts = [
    { tag: 'PRIMARY', short: 'UCSF', name: 'UCSF · Weill Institute', kind: 'University', country: 'US', members: 1842, treasury: '4.2M', tis: 92.4, role: 'Faculty', tone: 'accent' },
    { tag: 'PARTNER', short: 'CZB', name: 'Chan Zuckerberg Biohub', kind: 'Research Institute', country: 'US', members: 412, treasury: '12.1M', tis: 89.1, role: 'Visiting', tone: 'info' },
    { tag: '', short: 'MIT', name: 'MIT · Picower Institute', kind: 'University', country: 'US', members: 980, treasury: '6.8M', tis: 94.0, role: '—', tone: 'default' },
    { tag: '', short: 'ETHZ', name: 'ETH Zürich · D-BSSE', kind: 'University', country: 'CH', members: 2210, treasury: '5.2M', tis: 91.2, role: '—', tone: 'default' },
    { tag: '', short: 'MAX', name: 'Max Planck · MPI for Brain Research', kind: 'Research Institute', country: 'DE', members: 540, treasury: '3.4M', tis: 90.8, role: '—', tone: 'default' },
    { tag: 'GRANT', short: 'NIH', name: 'NIH · Distributed Brain Initiative', kind: 'Funder', country: 'US', members: 8200, treasury: '128M', tis: '—', role: 'Grantee', tone: 'ok' },
    { tag: '', short: 'WT', name: 'Wellcome Trust', kind: 'Funder', country: 'UK', members: 3400, treasury: '94M', tis: '—', role: '—', tone: 'default' },
    { tag: 'DAO', short: 'VDP', name: 'VitaDAO Protocol', kind: 'Research DAO', country: '—', members: 6804, treasury: '8.4M', tis: '—', role: 'Reviewer', tone: 'default' },
    { tag: 'DAO', short: 'OL', name: 'OpenLongevity DAO', kind: 'Research DAO', country: '—', members: 2104, treasury: '2.1M', tis: '—', role: '—', tone: 'default' },
  ];

  return (
    <Dapp>
      <ChromeBar dapp="PERSONAL" code="UBP / INSTITUTIONS" />
      <Layout rail={<UBPRail active="institutions" />}>
        <PageHead
          eyebrow={<Crumb items={['Personal Dapp', 'Career', 'Institutions']} />}
          title="Institutions directory"
          sub="Browse the universities, funders, institutes and research DAOs registered on UB-Chain. Apply for affiliation directly from here."
          actions={<><Btn small icon={Icon.search}>Search · 1,408</Btn><Btn small icon={Icon.plus}>Register an institution</Btn></>}
        />

        <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* Filter chips */}
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', alignItems: 'center' }}>
            <span style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.16em', marginRight: 4 }}>FILTER</span>
            {['All · 1,408', 'Universities · 612', 'Research institutes · 318', 'Funders · 84', 'Research DAOs · 218', 'Industry labs · 176', '— My affiliations · 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>
            ))}
          </div>

          <Card pad={false}>
            <div style={{ display: 'grid', gridTemplateColumns: '50px 1.6fr 130px 60px 90px 80px 70px 130px', gap: 12, padding: '10px 16px', borderBottom: `1px solid ${UB.rule2}`, fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.14em', textTransform: 'uppercase' }}>
              <span></span><span>Institution</span><span>Type</span><span>Loc</span><span style={{ textAlign: 'right' }}>Members</span><span style={{ textAlign: 'right' }}>Treasury</span><span style={{ textAlign: 'right' }}>TIS·μ</span><span style={{ textAlign: 'right' }}>Action</span>
            </div>
            {insts.map((it, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '50px 1.6fr 130px 60px 90px 80px 70px 130px', gap: 12, padding: '12px 16px', borderBottom: i < insts.length - 1 ? `1px solid ${UB.rule3}` : 'none', alignItems: 'center' }}>
                <div style={{ width: 36, height: 36, background: UB.paperDeep, border: `1px solid ${UB.rule2}`, fontFamily: UB.mono, fontSize: 10, fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{it.short}</div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                    <span style={{ fontWeight: 600, fontSize: 13 }}>{it.name}</span>
                    {it.tag && <Tag tone={it.tone}>{it.tag}</Tag>}
                  </div>
                  <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, marginTop: 2 }}>role: {it.role}</div>
                </div>
                <span style={{ fontSize: 11, color: UB.ink2 }}>{it.kind}</span>
                <span style={{ fontFamily: UB.mono, fontSize: 11, color: UB.ink3 }}>{it.country}</span>
                <span style={{ fontFamily: UB.mono, fontSize: 11, textAlign: 'right' }}>{it.members.toLocaleString()}</span>
                <span style={{ fontFamily: UB.mono, fontSize: 11, textAlign: 'right', color: UB.accent }}>{it.treasury}</span>
                <span style={{ fontFamily: UB.mono, fontSize: 11, textAlign: 'right', color: UB.ink2 }}>{it.tis}</span>
                <div style={{ display: 'flex', gap: 4, justifyContent: 'flex-end' }}>
                  <Btn small ghost>Open →</Btn>
                  {it.role === '—' ? <Btn small primary>Apply</Btn> : <Btn small>Manage</Btn>}
                </div>
              </div>
            ))}
          </Card>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }}>
            <Card title="Recommended for you" code="ML·MATCH">
              <div style={{ fontSize: 11, color: UB.ink3, lineHeight: 1.5, marginBottom: 10 }}>Based on your TRID profile — neuroscience, glia, open-data.</div>
              {['Allen Institute · Brain Science', 'EMBL · Heidelberg', 'Janelia · HHMI'].map((n, i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '7px 0', borderBottom: i < 2 ? `1px solid ${UB.rule3}` : 'none' }}>
                  <span style={{ fontSize: 12 }}>{n}</span>
                  <Btn small>Apply</Btn>
                </div>
              ))}
            </Card>
            <Card title="On-chain map" code="GLOBAL">
              <div style={{ fontFamily: UB.mono, fontSize: 11, color: UB.ink2, lineHeight: 1.7 }}>
                <div>🌎 Americas · <span style={{ color: UB.accent }}>418 institutions</span></div>
                <div>🌍 EMEA · <span style={{ color: UB.accent }}>684 institutions</span></div>
                <div>🌏 APAC · <span style={{ color: UB.accent }}>306 institutions</span></div>
              </div>
              <MiniBars values={[418, 684, 306]} h={48} color={UB.ink} />
            </Card>
            <Card title="New this month" code="REGISTRATIONS">
              {[
                ['Crick Institute · London', '4d ago'],
                ['RIKEN · Brain Science', '11d ago'],
                ['DeSci Africa Cohort 1', '16d ago'],
                ['Karolinska Institutet', '22d ago'],
              ].map(([n, t], i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', borderBottom: i < 3 ? `1px solid ${UB.rule3}` : 'none', fontSize: 12 }}>
                  <span>{n}</span>
                  <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{t}</span>
                </div>
              ))}
            </Card>
          </div>
        </div>
      </Layout>
    </Dapp>
  );
}

// ────────────────────────────────────────────────────── PUBLISHER DASHBOARD ─
function PublisherDashboardDapp() {
  return (
    <Dapp>
      <ChromeBar dapp="PERSONAL" code="UBP / PUBLISHER" />
      <Layout rail={<UBPRail active="publisher" />}>
        <PageHead
          eyebrow={<Crumb items={['Personal Dapp', 'Career', 'Publisher Dashboard']} />}
          title="Publisher dashboard"
          sub="Your published works, royalties and access revenue across the ecosystem. Royalties auto-split to co-authors, datasets and reproducers."
          actions={<>
            <Btn small icon={Icon.doc}>Export ledger</Btn>
            <Btn small primary icon={Icon.plus}>Submit a manuscript</Btn>
          </>}
        />

        <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* KPI strip */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 0, border: `1px solid ${UB.rule2}`, background: '#fff' }}>
            {[
              ['Published works', '23', '+2 / 90d'],
              ['Drafts in review', '4', '2 ready'],
              ['Total royalties', '38,420', 'UBR · all-time'],
              ['Royalties · 30d', '2,184', 'UBR · ↑ 41%'],
              ['Citations · 30d', '184', '14 replications'],
              ['Avg review SLA', '11d', 'vs. 92d journal'],
            ].map((s, i) => (
              <div key={i} style={{ padding: 16, borderRight: i < 5 ? `1px solid ${UB.rule2}` : 'none' }}>
                <div style={{ fontFamily: UB.mono, fontSize: 9, letterSpacing: '0.16em', 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>

          <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 16 }}>
            <Card title="Royalty stream · 12 months" code="UBR" action={<Tag tone="accent">+41% YoY</Tag>}>
              <div style={{ display: 'flex', alignItems: 'flex-end', gap: 16, marginBottom: 10 }}>
                <div style={{ fontFamily: UB.serif, fontSize: 48, lineHeight: 0.95 }}>38,420</div>
                <div style={{ fontFamily: UB.mono, fontSize: 11, color: UB.ink3, paddingBottom: 6 }}>cumulative · 23 works · 9 datasets</div>
              </div>
              <MiniBars values={[120, 180, 220, 260, 310, 380, 420, 510, 640, 720, 1280, 2184]} h={70} color={UB.ink} />
              <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: UB.mono, fontSize: 9, color: UB.ink3, marginTop: 4, letterSpacing: '0.1em' }}>
                <span>JUN</span><span>SEP</span><span>DEC</span><span>MAR</span><span>MAY</span>
              </div>
            </Card>

            <Card title="Auto-splits · last payout" code="04 MAY · 2,184 UBR" pad={false}>
              {[
                ['You (lead author)', 0.42, '917'],
                ['Co-authors · 4', 0.28, '611'],
                ['Datasets cited · 3', 0.14, '305'],
                ['Reviewers (escrow)', 0.08, '174'],
                ['Reproducers · 2', 0.05, '109'],
                ['Treasury (UBP fee)', 0.03, '68'],
              ].map(([k, v, n], i) => (
                <div key={k} style={{ padding: '11px 14px', borderBottom: i < 5 ? `1px solid ${UB.rule3}` : 'none' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 4 }}>
                    <span>{k}</span>
                    <span style={{ fontFamily: UB.mono }}>{Math.round(v * 100)}% · {n}</span>
                  </div>
                  <div style={{ height: 3, background: UB.paperDeep, position: 'relative' }}>
                    <div style={{ position: 'absolute', inset: 0, width: `${v * 100}%`, background: i === 0 ? UB.accent : UB.ink }} />
                  </div>
                </div>
              ))}
            </Card>
          </div>

          <Card title="Published works" code={`23 · SORT: ROYALTY 30D`} pad={false}>
            <div style={{ display: 'grid', gridTemplateColumns: '90px 2fr 90px 80px 90px 90px 110px', gap: 12, padding: '10px 16px', borderBottom: `1px solid ${UB.rule2}`, fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.14em', textTransform: 'uppercase' }}>
              <span>dPID</span><span>Title</span><span>Status</span><span style={{ textAlign: 'right' }}>Cites 30d</span><span style={{ textAlign: 'right' }}>Replic.</span><span style={{ textAlign: 'right' }}>Royalty 30d</span><span style={{ textAlign: 'right' }}>Action</span>
            </div>
            {[
              ['dPID·a92f.04', 'Astrocytic gating of slow-wave sleep across cortical depth', 'PUBLISHED', 28, '3 ✓', '482', 'accent'],
              ['dPID·81b3.02', 'A reproducibility-weighted citation index for neuroimaging', 'PUBLISHED', 22, '5 ✓', '318', 'accent'],
              ['dPID·c401.07', 'Glial heterogeneity beyond morphology: a single-cell atlas', 'PUBLISHED', 18, '2 ✓', '264', 'ok'],
              ['dPID·56dd.01', 'Open-source 2-photon rig: BoM v3 + reproducible build', 'PUBLISHED', 11, '8 ✓', '210', 'ok'],
              ['DRAFT·219',     'Sleep-state classification from astrocyte calcium dynamics', 'IN REVIEW · M3', 0, '—', '0', 'warn'],
              ['DRAFT·220',     'Negative result: μ-glia ablation does not impair LTP recall', 'IN REVIEW · M2', 0, '—', '0', 'warn'],
              ['dPID·17c0.03', 'Cortical microcircuit motifs across 14 species', 'PUBLISHED', 6, '0', '92', 'default'],
              ['dPID·8e21.01', 'Interneuron diversity in human dorsolateral PFC', 'PUBLISHED', 4, '1 ✓', '74', 'default'],
            ].map((r, i, arr) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '90px 2fr 90px 80px 90px 90px 110px', gap: 12, padding: '11px 16px', alignItems: 'center', borderBottom: i < arr.length - 1 ? `1px solid ${UB.rule3}` : 'none' }}>
                <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{r[0]}</span>
                <span style={{ fontSize: 12 }}>{r[1]}</span>
                <Tag tone={r[6]}>{r[2]}</Tag>
                <span style={{ fontFamily: UB.mono, fontSize: 11, textAlign: 'right' }}>{r[3]}</span>
                <span style={{ fontFamily: UB.mono, fontSize: 11, textAlign: 'right', color: UB.ink3 }}>{r[4]}</span>
                <span style={{ fontFamily: UB.mono, fontSize: 11, textAlign: 'right', color: UB.accent }}>{r[5]}</span>
                <div style={{ display: 'flex', gap: 4, justifyContent: 'flex-end' }}>
                  <Btn small ghost>Splits</Btn>
                  <Btn small>Open</Btn>
                </div>
              </div>
            ))}
          </Card>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }}>
            <Card title="Pending payouts" code="ESCROW">
              {[['Replication · dPID·a92f.04', '+182', 'auto · in 6h'],
                ['Review escrow · DRAFT·219', '+90', 'on M3 sign'],
                ['Translation bounty · ES', '+44', 'awaiting verifier']].map((r, i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '7px 0', borderBottom: i < 2 ? `1px solid ${UB.rule3}` : 'none' }}>
                  <div>
                    <div style={{ fontSize: 12 }}>{r[0]}</div>
                    <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{r[2]}</div>
                  </div>
                  <span style={{ fontFamily: UB.mono, fontSize: 12, color: UB.accent }}>{r[1]} UBR</span>
                </div>
              ))}
            </Card>
            <Card title="Reader geography · 30d" code="DOWNLOADS">
              {[['🇺🇸 United States', 0.34, 1240], ['🇬🇧 United Kingdom', 0.18, 658], ['🇩🇪 Germany', 0.14, 511], ['🇯🇵 Japan', 0.10, 364], ['Other · 38', 0.24, 877]].map(([k, v, n], i) => (
                <div key={i} style={{ marginBottom: 6 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, marginBottom: 2 }}>
                    <span>{k}</span><span style={{ fontFamily: UB.mono, color: UB.ink3 }}>{n}</span>
                  </div>
                  <div style={{ height: 3, background: UB.paperDeep, position: 'relative' }}>
                    <div style={{ position: 'absolute', inset: 0, width: `${v * 100}%`, background: UB.ink }} />
                  </div>
                </div>
              ))}
            </Card>
            <Card title="Quick actions" code="">
              {[
                ['Edit royalty splits across all works', Icon.bank],
                ['Add a co-author to dPID·a92f.04', Icon.user],
                ['Mint IP-NFT from DRAFT·220', Icon.cube],
                ['Open a translation bounty', Icon.doc],
                ['Withdraw to spending wallet', Icon.arrow],
              ].map(([k, ic], i) => (
                <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'center', padding: '8px 0', borderBottom: i < 4 ? `1px solid ${UB.rule3}` : 'none', cursor: 'pointer' }}>
                  <span style={{ width: 14 }}>{ic}</span>
                  <span style={{ fontSize: 12, flex: 1 }}>{k}</span>
                  <span style={{ fontFamily: UB.mono, fontSize: 11, color: UB.ink3 }}>→</span>
                </div>
              ))}
            </Card>
          </div>
        </div>
      </Layout>
    </Dapp>
  );
}

window.SettingsDapp = SettingsDapp;
window.AffiliationsDapp = AffiliationsDapp;
window.InstitutionsDirectoryDapp = InstitutionsDirectoryDapp;
window.PublisherDashboardDapp = PublisherDashboardDapp;