// DAO Tokens — invest in research DAOs that, post-patent or product, generate revenue.
// 3 screens: directory, DAO detail, my holdings + active proposals.

function DAORail({ 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 }}>DAO HOLDINGS</div>
        <div style={{ fontFamily: UB.mono, fontSize: 22, color: UB.ink, lineHeight: 1.05 }}>$84,210</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 4, fontFamily: UB.mono, fontSize: 10, color: UB.ok }}>
          ▲ +$1,420 · +1.71% 24h
        </div>
        <div style={{ marginTop: 8, display: 'flex', gap: 4 }}>
          <Tag tone="accent">8 DAOs</Tag>
          <Tag>3 voting</Tag>
        </div>
      </div>
      <NavGroup label="Research DAOs">
        <NavItem icon={Icon.search}  label="Browse · directory"  badge="184" active={active === 'directory'} />
        <NavItem icon={Icon.cube}    label="My holdings"          badge="8"   active={active === 'holdings'} />
        <NavItem icon={Icon.bell}    label="Active proposals"     badge="14"  />
        <NavItem icon={Icon.bank}    label="Vesting schedules"    badge="3"   />
        <NavItem icon={Icon.flask}   label="Treasury watch"       badge="42"  />
        <NavItem icon={Icon.user}    label="Voting power · TRID"  badge="1.4K" />
      </NavGroup>
      <NavGroup label="Categories">
        <NavItem icon={Icon.flask} label="Longevity"   badge="38" />
        <NavItem icon={Icon.flask} label="Neuroscience" badge="42" />
        <NavItem icon={Icon.flask} label="Open biotech" badge="56" />
        <NavItem icon={Icon.flask} label="Climate · materials" badge="22" />
        <NavItem icon={Icon.flask} label="AI for science" badge="18" />
        <NavItem icon={Icon.flask} label="Public goods" badge="8" />
      </NavGroup>
      <NavGroup label="Tools">
        <NavItem icon={Icon.doc}  label="Tax · vesting" />
        <NavItem icon={Icon.bell} label="Alerts · 12" />
        <NavItem icon={Icon.cog}  label="Settings" />
      </NavGroup>
    </>
  );
}

function DAOCrumb({ 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 DAOS = [
  { sym: 'GLIA',   name: 'Glia Initiative DAO',     cat: 'Neuroscience', members: 1840, treas: '$14.2M', mark: 1.84, d24: '+2.4%', mc: '$84M',  rev: '$1.2M', stage: 'PRODUCT',  tone: 'accent' },
  { sym: 'AGEX',   name: 'AgeX Longevity DAO',      cat: 'Longevity',    members: 4210, treas: '$42.4M', mark: 2.42, d24: '+5.1%', mc: '$240M', rev: '$3.4M', stage: 'PATENT',   tone: 'accent' },
  { sym: 'OPENVAX',name: 'OpenVax Cooperative',     cat: 'Open biotech', members: 2840, treas: '$22.1M', mark: 0.94, d24: '+1.4%', mc: '$94M',  rev: '$2.1M', stage: 'PRODUCT',  tone: 'accent' },
  { sym: 'NEURO',  name: 'NeuroTwin DAO',           cat: 'Neuroscience', members: 1420, treas: '$8.4M',  mark: 0.62, d24: '−0.8%', mc: '$22M',  rev: '$0',    stage: 'RESEARCH', tone: 'ok' },
  { sym: 'CRSPR',  name: 'OpenCrispr Foundation',   cat: 'Open biotech', members: 3120, treas: '$28.2M', mark: 1.42, d24: '+3.2%', mc: '$140M', rev: '$0.8M', stage: 'PATENT',   tone: 'accent' },
  { sym: 'FUSION', name: 'Fusion Commons DAO',      cat: 'Climate',      members: 980,  treas: '$11.4M', mark: 0.34, d24: '+11%',  mc: '$18M',  rev: '$0',    stage: 'RESEARCH', tone: 'ok' },
  { sym: 'PV+',    name: 'Open Photovoltaics',      cat: 'Climate',      members: 1240, treas: '$6.8M',  mark: 0.48, d24: '+0.6%', mc: '$24M',  rev: '$0.4M', stage: 'PATENT',   tone: 'accent' },
  { sym: 'GUTOM',  name: 'Microbiome Open DAO',     cat: 'Open biotech', members: 820,  treas: '$3.4M',  mark: 0.22, d24: '+2.0%', mc: '$8M',   rev: '$0.1M', stage: 'PRODUCT',  tone: 'accent' },
  { sym: 'AISCI',  name: 'AI for Science DAO',      cat: 'AI · science', members: 5840, treas: '$18M',   mark: 1.18, d24: '+0.4%', mc: '$140M', rev: '$0',    stage: 'RESEARCH', tone: 'ok' },
  { sym: 'PHAGE',  name: 'PhageBank Cooperative',   cat: 'Open biotech', members: 412,  treas: '$2.1M',  mark: 0.42, d24: '+8.2%', mc: '$6.4M', rev: '$0.2M', stage: 'PATENT',   tone: 'accent' },
  { sym: 'COMM',   name: 'Open Materials Commons',  cat: 'Climate',      members: 1820, treas: '$9.4M',  mark: 0.58, d24: '+1.1%', mc: '$22M',  rev: '$0',    stage: 'RESEARCH', tone: 'ok' },
  { sym: 'TRIAL',  name: 'Decentralized Trials DAO',cat: 'Open biotech', members: 612,  treas: '$4.4M',  mark: 0.84, d24: '−1.4%', mc: '$14M',  rev: '$0.6M', stage: 'PRODUCT',  tone: 'accent' },
];

// ─────────────────────────────────────────────── DIRECTORY ───────────────────
function DAOTokensDapp() {
  return (
    <Dapp>
      <ChromeBar dapp="DAO TOKENS" code="DIRECTORY · 184 DAOs" />
      <Layout rail={<DAORail active="directory" />}>
        <PageHead
          eyebrow={<DAOCrumb items={['DAO Tokens', 'Directory']} />}
          title="Research DAO directory"
          sub="Every research DAO with a token on UB-Chain. Once a DAO ships a patent or a product, its token earns a programmable cut of revenue. Invest before that point, hold through it."
          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 DAO · category · contract</span>
            </div>
            <Btn small icon={Icon.bell}>Alerts · 12</Btn>
            <Btn small primary icon={Icon.rocket}>Launch your DAO</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="Listed DAOs" value="184" sub="56 product · 78 patent · 50 research" /></Card>
            <Card><Stat label="Combined market cap" value="$2.42B" sub="+3.1% 7d" /></Card>
            <Card><Stat label="Treasury · combined" value="$418M" sub="across all DAOs" /></Card>
            <Card><Stat label="Revenue · TTM" value="$48.2M" sub="paid through token contracts" /></Card>
            <Card><Stat label="Active proposals" value="124" sub="14 closing this week" /></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 · 184', 'Product stage · 56', 'Patent stage · 78', 'Research · 50', 'Paying revenue · 38', 'Top movers'].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 }}>Category:</span>
            {['Longevity', 'Neuro', 'Open bio', 'Climate', 'AI · sci', 'Public'].map((d, i) => (
              <Tag key={d} tone={i === 1 ? 'ink' : 'default'}>{d}</Tag>
            ))}
          </div>

          {/* Featured row */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
            {[
              { sym: 'AGEX',    name: 'AgeX Longevity DAO',  thes: 'Senolytic small molecule · 2 patents granted, 1 in commercial pilot.', mark: '$2.42', d24: '+5.1%', members: 4210, rev: '$3.4M' },
              { sym: 'GLIA',    name: 'Glia Initiative DAO', thes: 'Astrocyte modulators · GAT3-LTP shipped to BMS for $120K + 6%.',     mark: '$1.84', d24: '+2.4%', members: 1840, rev: '$1.2M' },
              { sym: 'OPENVAX', name: 'OpenVax Cooperative', thes: 'mRNA scaffold IP-NFT, 4 paid licensees, 200K-dose run completed.',    mark: '$0.94', d24: '+1.4%', members: 2840, rev: '$2.1M' },
            ].map(d => (
              <div key={d.sym} style={{ background: '#fff', border: `1px solid ${UB.rule2}`, padding: 18 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
                  <div style={{ width: 40, height: 40, background: UB.ink, color: UB.accent, fontFamily: UB.mono, fontSize: 13, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', letterSpacing: '0.04em' }}>{d.sym.slice(0, 2)}</div>
                  <Tag tone="accent">FEATURED</Tag>
                </div>
                <div style={{ fontFamily: UB.serif, fontSize: 18, lineHeight: 1.2, marginBottom: 4 }}>{d.name}</div>
                <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, marginBottom: 10 }}>${d.sym} · {d.members.toLocaleString()} members</div>
                <div style={{ fontSize: 11, color: UB.ink2, lineHeight: 1.5, marginBottom: 12 }}>{d.thes}</div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6, padding: '10px 0', borderTop: `1px solid ${UB.rule3}`, borderBottom: `1px solid ${UB.rule3}`, marginBottom: 10 }}>
                  <div><div style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3 }}>MARK</div><div style={{ fontFamily: UB.mono, fontSize: 13, fontWeight: 600 }}>{d.mark}</div></div>
                  <div><div style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3 }}>24H</div><div style={{ fontFamily: UB.mono, fontSize: 13, color: UB.ok }}>{d.d24}</div></div>
                  <div><div style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3 }}>REV TTM</div><div style={{ fontFamily: UB.mono, fontSize: 13 }}>{d.rev}</div></div>
                </div>
                <div style={{ display: 'flex', gap: 6 }}>
                  <Btn small style={{ flex: 1, justifyContent: 'center' }}>Read thesis</Btn>
                  <Btn small primary style={{ flex: 1, justifyContent: 'center' }}>Buy ${d.sym}</Btn>
                </div>
              </div>
            ))}
          </div>

          {/* Full table */}
          <Card title="All DAOs · 184" code="LIVE · 17:08 UTC" pad={false}>
            <div style={{ display: 'grid', gridTemplateColumns: '90px 1fr 110px 90px 80px 70px 80px 80px 90px 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>DAO · category</span><span>Stage</span><span>Members</span><span>Mark</span><span>24h</span><span>Mkt cap</span><span>Treasury</span><span>Rev TTM</span><span></span>
            </div>
            {DAOS.map((d, i) => (
              <div key={d.sym} style={{ display: 'grid', gridTemplateColumns: '90px 1fr 110px 90px 80px 70px 80px 80px 90px 70px', gap: 10, padding: '11px 16px', alignItems: 'center', borderBottom: i < DAOS.length - 1 ? `1px solid ${UB.rule3}` : 'none', cursor: 'pointer' }}>
                <span style={{ fontFamily: UB.mono, fontSize: 11, fontWeight: 600 }}>${d.sym}</span>
                <div>
                  <div style={{ fontSize: 12 }}>{d.name}</div>
                  <div style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3 }}>{d.cat}</div>
                </div>
                <Tag tone={d.tone}>{d.stage}</Tag>
                <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{d.members.toLocaleString()}</span>
                <span style={{ fontFamily: UB.mono, fontSize: 11, fontWeight: 600 }}>${d.mark.toFixed(2)}</span>
                <span style={{ fontFamily: UB.mono, fontSize: 11, color: d.d24.startsWith('+') ? UB.ok : d.d24.startsWith('−') ? UB.bad : UB.ink2 }}>{d.d24}</span>
                <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{d.mc}</span>
                <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{d.treas}</span>
                <span style={{ fontFamily: UB.mono, fontSize: 10, color: d.rev === '$0' ? UB.ink3 : UB.accent }}>{d.rev}</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' }}>
              + 172 more · scroll to load
            </div>
          </Card>
        </div>
      </Layout>
    </Dapp>
  );
}

// ────────────────────────────────────────────────────── DAO DETAIL ───────────
function DAOTokenDetailDapp() {
  return (
    <Dapp>
      <ChromeBar dapp="DAO TOKENS" code="$AGEX · AgeX Longevity DAO" />
      <Layout rail={<DAORail active="directory" />}>
        <PageHead
          eyebrow={<DAOCrumb items={['DAO Tokens', 'Directory', 'AgeX']} />}
          title="$AGEX · AgeX Longevity DAO"
          sub="A senolytic-discovery DAO with two granted patents and a commercial pilot underway. 4,210 members, $42.4M treasury, $3.4M TTM revenue paid through the contract."
          actions={<>
            <Btn small icon={Icon.doc}>Charter · whitepaper</Btn>
            <Btn small icon={Icon.bell}>Watchlist</Btn>
            <Btn small primary icon={Icon.arrow}>Buy $AGEX · $2.42</Btn>
          </>}
        />

        <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 16 }}>
          {/* Left column */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <Card title="Price · 1 year" code="$2.42 · +118% YTD" pad={false}>
              <div style={{ padding: 18, height: 220 }}>
                <svg width="100%" height="100%" viewBox="0 0 600 180" preserveAspectRatio="none">
                  <defs>
                    <linearGradient id="agexfill" 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" />)}
                  {(() => {
                    const pts = [];
                    for (let i = 0; i <= 60; i++) {
                      let v = 150 - i * 1.4 + Math.sin(i * 0.4) * 12;
                      if (i > 22) v -= 14;  // patent grant bump
                      if (i > 42) v -= 18;  // pilot bump
                      pts.push(v);
                    }
                    let d = `M 0 ${pts[0]}`; let f = `M 0 ${pts[0]}`;
                    pts.forEach((y, i) => { const x = (i / 60) * 600; d += ` L ${x} ${y}`; f += ` L ${x} ${y}`; });
                    f += ` L 600 180 L 0 180 Z`;
                    return <><path d={f} fill="url(#agexfill)" /><path d={d} stroke={UB.accent} strokeWidth="1.6" fill="none" /></>;
                  })()}
                  {[
                    [220, 'patent #1 granted', 78],
                    [330, 'NIH grant · $4.2M', 60],
                    [420, 'commercial pilot', 38],
                    [540, 'BMS license · $480K', 22],
                  ].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>
              <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 }}>Mark</div><div style={{ color: UB.ink, fontSize: 12 }}>$2.42</div></div>
                <div><div style={{ color: UB.ink3 }}>24h</div><div style={{ color: UB.ok, fontSize: 12 }}>+5.1%</div></div>
                <div><div style={{ color: UB.ink3 }}>Mkt cap</div><div style={{ color: UB.ink, fontSize: 12 }}>$240M</div></div>
                <div><div style={{ color: UB.ink3 }}>FDV</div><div style={{ color: UB.ink, fontSize: 12 }}>$420M</div></div>
                <div><div style={{ color: UB.ink3 }}>Holders</div><div style={{ color: UB.ink, fontSize: 12 }}>4,210</div></div>
              </div>
            </Card>

            <Card title="Investment thesis" code="ON-CHAIN · v2.4">
              <div style={{ fontFamily: UB.serif, fontSize: 14, lineHeight: 1.55, color: UB.ink2 }}>
                AgeX exists to industrialise senolytic discovery: small molecules that selectively eliminate senescent cells implicated in age-related disease. The DAO has assembled a 14-member discovery pipeline — using its own AI hypothesis agent — that has shipped two granted USPTO patents, with a third in examination. Revenue is generated by license-back arrangements with pharmaceutical partners and direct-to-consumer assays produced by the DAO's wet-lab subsidiary.
              </div>
              <div style={{ marginTop: 12, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                {['Senolytic', 'Discovery agent', '2 granted patents', 'BMS · pilot', 'NIH-funded', 'AAA · audit'].map(t => <Tag key={t}>{t}</Tag>)}
              </div>
            </Card>

            <Card title="Treasury composition" code="$42.4M · 14 ASSETS" pad={false}>
              <div style={{ display: 'grid', gridTemplateColumns: '180px 1fr', gap: 0 }}>
                {/* Donut placeholder */}
                <div style={{ padding: 18, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRight: `1px solid ${UB.rule2}` }}>
                  <svg width="140" height="140" viewBox="0 0 140 140">
                    {(() => {
                      const segs = [
                        { v: 0.42, c: UB.accent },
                        { v: 0.22, c: UB.ink },
                        { v: 0.16, c: 'oklch(0.66 0.13 240)' },
                        { v: 0.10, c: UB.ok },
                        { v: 0.06, c: UB.warn },
                        { v: 0.04, c: UB.ink3 },
                      ];
                      let acc = 0;
                      return segs.map((s, i) => {
                        const start = acc * 2 * Math.PI;
                        acc += s.v;
                        const end = acc * 2 * Math.PI;
                        const x1 = 70 + Math.cos(start - Math.PI / 2) * 60;
                        const y1 = 70 + Math.sin(start - Math.PI / 2) * 60;
                        const x2 = 70 + Math.cos(end - Math.PI / 2) * 60;
                        const y2 = 70 + Math.sin(end - Math.PI / 2) * 60;
                        const large = end - start > Math.PI ? 1 : 0;
                        return <path key={i} d={`M 70 70 L ${x1} ${y1} A 60 60 0 ${large} 1 ${x2} ${y2} Z`} fill={s.c} />;
                      });
                    })()}
                    <circle cx="70" cy="70" r="36" fill="#fff" />
                    <text x="70" y="68" textAnchor="middle" fontFamily={UB.mono} fontSize="9" fill={UB.ink3} letterSpacing="0.12em">TVL</text>
                    <text x="70" y="82" textAnchor="middle" fontFamily={UB.mono} fontSize="14" fontWeight="600" fill={UB.ink}>$42.4M</text>
                  </svg>
                </div>
                <div style={{ padding: 14 }}>
                  {[
                    ['USDC',  '$17.8M', '42%', UB.accent],
                    ['UBR',   '$9.3M',  '22%', UB.ink],
                    ['$AGEX (treasury)', '$6.8M', '16%', 'oklch(0.66 0.13 240)'],
                    ['Patent tokens · own',   '$4.2M', '10%', UB.ok],
                    ['stETH',  '$2.5M', '6%',  UB.warn],
                    ['Other · 8 assets',  '$1.7M', '4%',   UB.ink3],
                  ].map((r, i) => (
                    <div key={i} style={{ display: 'grid', gridTemplateColumns: '14px 1fr 70px 50px', gap: 8, padding: '4px 0', alignItems: 'center', fontSize: 11 }}>
                      <span style={{ width: 10, height: 10, background: r[3] }} />
                      <span>{r[0]}</span>
                      <span style={{ fontFamily: UB.mono, color: UB.ink3 }}>{r[1]}</span>
                      <span style={{ fontFamily: UB.mono, color: UB.ink2, textAlign: 'right' }}>{r[2]}</span>
                    </div>
                  ))}
                </div>
              </div>
            </Card>

            <Card title="Active proposals · 6" code="14d AVG VOTING" pad={false}>
              {[
                { id: 'AIP-118', t: 'Allocate $4.2M to senolytic library expansion', votes: { yes: 0.74, no: 0.18, abst: 0.08 }, ends: '3d 14h', tone: 'accent' },
                { id: 'AIP-117', t: 'License GAT3-LTP from Glia Initiative DAO',     votes: { yes: 0.62, no: 0.24, abst: 0.14 }, ends: '6d 02h', tone: 'ok' },
                { id: 'AIP-116', t: 'Hire 4 wet-lab postdocs · 18-month contracts',    votes: { yes: 0.81, no: 0.10, abst: 0.09 }, ends: '8d 04h', tone: 'accent' },
                { id: 'AIP-115', t: 'Quarterly revenue distribution · $0.42 / token',  votes: { yes: 0.91, no: 0.04, abst: 0.05 }, ends: '12d 06h', tone: 'accent' },
              ].map((p, i, arr) => (
                <div key={p.id} style={{ padding: '12px 16px', borderBottom: i < arr.length - 1 ? `1px solid ${UB.rule3}` : 'none' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
                    <span style={{ fontFamily: UB.mono, fontSize: 11, fontWeight: 600 }}>{p.id}</span>
                    <Tag tone={p.tone}>ENDS {p.ends}</Tag>
                  </div>
                  <div style={{ fontSize: 12, marginBottom: 6 }}>{p.t}</div>
                  <div style={{ height: 4, background: UB.paperDeep, position: 'relative', display: 'flex' }}>
                    <div style={{ width: `${p.votes.yes * 100}%`, background: UB.ok }} />
                    <div style={{ width: `${p.votes.no * 100}%`, background: UB.bad }} />
                    <div style={{ width: `${p.votes.abst * 100}%`, background: UB.ink3 }} />
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: UB.mono, fontSize: 9, color: UB.ink3, marginTop: 4 }}>
                    <span style={{ color: UB.ok }}>YES {(p.votes.yes * 100).toFixed(0)}%</span>
                    <span style={{ color: UB.bad }}>NO {(p.votes.no * 100).toFixed(0)}%</span>
                    <span>ABST {(p.votes.abst * 100).toFixed(0)}%</span>
                    <span style={{ marginLeft: 12 }}>quorum 412 · 84% reached</span>
                  </div>
                </div>
              ))}
            </Card>
          </div>

          {/* Right column */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <Card title="Buy $AGEX">
              <div style={{ display: 'flex', gap: 4, marginBottom: 12 }}>
                {['MARKET', 'LIMIT'].map((m, i) => <Tag key={m} tone={i === 0 ? 'ink' : 'default'}>{m}</Tag>)}
              </div>
              <div style={{ marginBottom: 8, padding: '10px 12px', background: UB.paperDeep }}>
                <div style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.18em', marginBottom: 4 }}>YOU PAY</div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <span style={{ fontFamily: UB.mono, fontSize: 22, fontWeight: 600 }}>2,500</span>
                  <Tag tone="ink">USDC</Tag>
                </div>
                <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, marginTop: 2 }}>balance · 18,420 USDC</div>
              </div>
              <div style={{ textAlign: 'center', fontFamily: UB.mono, fontSize: 14, color: UB.ink3, padding: '4px 0' }}>↓</div>
              <div style={{ marginBottom: 12, padding: '10px 12px', background: '#fff', border: `1px solid ${UB.rule2}` }}>
                <div style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.18em', marginBottom: 4 }}>YOU RECEIVE</div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <span style={{ fontFamily: UB.mono, fontSize: 22, fontWeight: 600, color: UB.accent }}>1,033.0</span>
                  <Tag tone="accent">$AGEX</Tag>
                </div>
                <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, marginTop: 2 }}>1 $AGEX = $2.42 · slippage 0.4%</div>
              </div>
              <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, lineHeight: 1.7, marginBottom: 12 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Route</span><span>UBP-AMM v1</span></div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Network fee</span><span>$0.02 · 0.0014 UBR</span></div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Vesting</span><span style={{ color: UB.warn }}>none · liquid</span></div>
              </div>
              <Btn primary style={{ width: '100%', justifyContent: 'center' }}>Confirm purchase</Btn>
            </Card>

            <Card title="Stage · post-launch revenue map" code="WHEN $ STARTS FLOWING">
              <div style={{ fontSize: 11, color: UB.ink2, lineHeight: 1.5, marginBottom: 12 }}>
                $AGEX captures revenue at three checkpoints. You earn on each, in proportion to tokens held.
              </div>
              {[
                ['1', 'Patent grant',   '6% of any license royalty', 'CURRENT', UB.ok],
                ['2', 'Pilot pay-out',  '$0.42/token quarterly while pilot runs', 'AIP-115', UB.accent],
                ['3', 'Product ship',  '14% of net wholesale margin', 'EST. Q4 2025', 'oklch(0.66 0.13 240)'],
              ].map((s, i) => (
                <div key={i} style={{ padding: '8px 0', borderBottom: i < 2 ? `1px solid ${UB.rule3}` : 'none' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 2 }}>
                    <div style={{ width: 22, height: 22, background: s[4], color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: UB.mono, fontSize: 11, fontWeight: 700 }}>{s[0]}</div>
                    <span style={{ fontWeight: 600, fontSize: 12 }}>{s[1]}</span>
                  </div>
                  <div style={{ fontSize: 11, color: UB.ink3, paddingLeft: 32 }}>{s[2]}</div>
                  <div style={{ fontFamily: UB.mono, fontSize: 9, color: UB.accent, paddingLeft: 32, marginTop: 2 }}>{s[3]}</div>
                </div>
              ))}
            </Card>

            <Card title="Team · core" code="14 ON-CHAIN">
              {[
                ['t.kim.eth',     'PI · senolytic discovery', '★ 0.94'],
                ['s.park.eth',    'Co-PI · chem', '★ 0.91'],
                ['agex-twin.eth', 'AI agent · hypotheses', '★ 0.86'],
                ['a.ortega.eth',  'CRO ops · pilot', '★ 0.82'],
                ['+ 10 more',     'researchers · ops', ''],
              ].map((m, i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '6px 0', borderBottom: i < 4 ? `1px solid ${UB.rule3}` : 'none', fontSize: 11 }}>
                  <div>
                    <div style={{ fontFamily: UB.mono, fontWeight: 600 }}>{m[0]}</div>
                    <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{m[1]}</div>
                  </div>
                  <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.accent }}>{m[2]}</span>
                </div>
              ))}
            </Card>

            <Card title="Audits · risk" code="3 OF 3 SIGNED">
              {[
                ['Code audit · OpenZeppelin', 'PASS', 'ok'],
                ['Treasury audit · Llama',    'PASS', 'ok'],
                ['Reproducibility · CzBiohub','PASS', 'ok'],
                ['Litigation flags',           '0',   'ok'],
                ['Token concentration',        '0.62 G', 'warn'],
              ].map((r, i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '5px 0', borderBottom: i < 4 ? `1px solid ${UB.rule3}` : 'none', fontSize: 11 }}>
                  <span>{r[0]}</span>
                  <Tag tone={r[2]}>{r[1]}</Tag>
                </div>
              ))}
            </Card>
          </div>
        </div>
      </Layout>
    </Dapp>
  );
}

// ────────────────────────────────────────────── MY HOLDINGS + VOTES ──────────
function DAOHoldingsDapp() {
  const holdings = [
    { sym: 'AGEX',   units: 12400, basis: 1.10, mark: 2.42, vp: 1240, votes: 14, status: 'voting · AIP-118' },
    { sym: 'GLIA',   units: 18400, basis: 0.42, mark: 1.84, vp: 1840, votes: 22, status: 'co-founder · 18.4%' },
    { sym: 'OPENVAX',units: 4200,  basis: 0.62, mark: 0.94, vp: 420,  votes: 8,  status: 'voted · AIP-204' },
    { sym: 'CRSPR',  units: 1800,  basis: 0.94, mark: 1.42, vp: 180,  votes: 4,  status: 'lp · pool A' },
    { sym: 'AISCI',  units: 2400,  basis: 0.84, mark: 1.18, vp: 240,  votes: 2,  status: 'voting · AIP-014' },
    { sym: 'PHAGE',  units: 8400,  basis: 0.18, mark: 0.42, vp: 840,  votes: 6,  status: 'pre-token · vesting' },
    { sym: 'PV+',    units: 3200,  basis: 0.42, mark: 0.48, vp: 320,  votes: 1,  status: '—' },
    { sym: 'NEURO',  units: 1400,  basis: 0.78, mark: 0.62, vp: 140,  votes: 0,  status: 'underwater · −20%' },
  ];

  return (
    <Dapp>
      <ChromeBar dapp="DAO TOKENS" code="MY HOLDINGS · 8 DAOs" />
      <Layout rail={<DAORail active="holdings" />}>
        <PageHead
          eyebrow={<DAOCrumb items={['DAO Tokens', 'My holdings']} />}
          title="My DAO holdings"
          sub="Eight DAOs you've invested in, with vesting schedules, voting power, and active proposals you can vote on right now."
          actions={<>
            <Btn small icon={Icon.doc}>Statement · Q2'25</Btn>
            <Btn small icon={Icon.bell}>Pending votes · 3</Btn>
            <Btn small primary icon={Icon.search}>Find more DAOs</Btn>
          </>}
        />

        <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* KPIs */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
            <Card><Stat label="Holdings NAV" value="$84,210" sub="+1.71% 24h · +84% YTD" /></Card>
            <Card><Stat label="Voting power" value="1,420" sub="across 8 DAOs · TRID-weighted" /></Card>
            <Card><Stat label="Vesting · locked" value="$22,400" sub="3 schedules · 14m avg" /></Card>
            <Card><Stat label="Revenue · TTM" value="$3,180" sub="from token contracts" /></Card>
            <Card><Stat label="Pending votes" value="3" sub="closing in <7 days" /></Card>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16 }}>
            {/* Holdings */}
            <Card title="Positions · 8" code="LIVE" pad={false}>
              <div style={{ display: 'grid', gridTemplateColumns: '90px 1fr 70px 70px 80px 100px 100px', 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>Status</span><span>Units</span><span>Basis</span><span>Mark</span><span>P/L</span><span>Voting pwr</span>
              </div>
              {holdings.map((h, i) => {
                const value = h.units * h.mark;
                const cost = h.units * h.basis;
                const pl = value - cost;
                const plpct = (pl / cost) * 100;
                return (
                  <div key={h.sym} style={{ display: 'grid', gridTemplateColumns: '90px 1fr 70px 70px 80px 100px 100px', gap: 10, padding: '11px 16px', alignItems: 'center', borderBottom: i < holdings.length - 1 ? `1px solid ${UB.rule3}` : 'none', cursor: 'pointer' }}>
                    <span style={{ fontFamily: UB.mono, fontSize: 11, fontWeight: 600 }}>${h.sym}</span>
                    <span style={{ fontFamily: UB.mono, fontSize: 10, color: h.status.includes('voting') ? UB.accent : h.status.includes('underwater') ? UB.bad : UB.ink3 }}>{h.status}</span>
                    <span style={{ fontFamily: UB.mono, fontSize: 10 }}>{h.units.toLocaleString()}</span>
                    <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>${h.basis.toFixed(2)}</span>
                    <span style={{ fontFamily: UB.mono, fontSize: 11, fontWeight: 600 }}>${h.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 }}>{h.vp} · {h.votes} votes</span>
                  </div>
                );
              })}
            </Card>

            {/* Pending votes — your priority queue */}
            <Card title="Your pending votes" code="3 PROPOSALS · TIME-SENSITIVE" pad={false}>
              {[
                { dao: 'AGEX', id: 'AIP-118', t: 'Allocate $4.2M to senolytic library expansion', stance: null,  ends: '3d 14h', vp: 1240 },
                { dao: 'AISCI', id: 'AIP-014', t: 'Open-source the AISCI hypothesis-agent weights', stance: 'YES', ends: '6d 02h', vp: 240 },
                { dao: 'GLIA', id: 'GIP-042', t: 'Reduce reviewer-pool fee from 3% to 2%',         stance: null,  ends: '8d 18h', vp: 1840 },
              ].map((p, i, arr) => (
                <div key={p.id} style={{ padding: '12px 16px', borderBottom: i < arr.length - 1 ? `1px solid ${UB.rule3}` : 'none' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
                    <span style={{ fontFamily: UB.mono, fontSize: 11 }}><span style={{ fontWeight: 600 }}>${p.dao}</span> <span style={{ color: UB.ink3 }}>· {p.id}</span></span>
                    <Tag tone={p.ends.startsWith('3') ? 'warn' : 'default'}>ENDS {p.ends}</Tag>
                  </div>
                  <div style={{ fontSize: 12, marginBottom: 8 }}>{p.t}</div>
                  <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                    <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>your VP · {p.vp}</span>
                    <span style={{ flex: 1 }} />
                    {p.stance ? (
                      <Tag tone="accent">VOTED · {p.stance}</Tag>
                    ) : (
                      <>
                        <Btn small ghost>Abstain</Btn>
                        <Btn small>No</Btn>
                        <Btn small primary>Yes</Btn>
                      </>
                    )}
                  </div>
                </div>
              ))}
            </Card>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16 }}>
            <Card title="Vesting schedules" code="3 ACTIVE">
              {[
                ['$AGEX · founder grant', '8,400', '14m left', 0.42],
                ['$PHAGE · pre-token',    '8,400', '6m left',  0.78],
                ['$GLIA · co-investigator','5,600','22m left', 0.18],
              ].map((v, i) => (
                <div key={i} style={{ padding: '8px 0', borderBottom: i < 2 ? `1px solid ${UB.rule3}` : 'none' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, marginBottom: 4 }}>
                    <span>{v[0]}</span>
                    <span style={{ fontFamily: UB.mono, color: UB.ink3 }}>{v[1]} units · {v[2]}</span>
                  </div>
                  <div style={{ height: 4, background: UB.paperDeep, position: 'relative' }}>
                    <div style={{ position: 'absolute', inset: 0, width: `${v[3] * 100}%`, background: UB.accent }} />
                  </div>
                </div>
              ))}
            </Card>

            <Card title="Distributions · last 12m" code="$3,180 RECEIVED" pad={false}>
              <div style={{ padding: 14, height: 140 }}>
                <svg width="100%" height="100%" viewBox="0 0 320 100" preserveAspectRatio="none">
                  {Array.from({ length: 12 }).map((_, i) => {
                    const x = i * (320 / 12) + 4;
                    const w = (320 / 12) - 6;
                    const h = 8 + Math.sin(i * 0.6) * 6 + i * 1.6;
                    return <rect key={i} x={x} y={94 - h} width={w} height={h} fill={UB.accent} opacity="0.85" />;
                  })}
                </svg>
              </div>
              <div style={{ padding: '10px 14px', borderTop: `1px solid ${UB.rule2}`, fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>
                Average · $265 / mo · primary source: AGEX pilot pay-out
              </div>
            </Card>

            <Card title="Reputation · TRID weighted">
              <div style={{ fontFamily: UB.serif, fontSize: 22, lineHeight: 1.05, marginBottom: 4 }}>1,420</div>
              <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, marginBottom: 10 }}>voting power · across 8 DAOs</div>
              <div style={{ fontSize: 11, color: UB.ink2, lineHeight: 1.5, marginBottom: 12 }}>
                Your raw token VP is 1.0×. TRID adds 0.42× because of your reproducibility κ and active reviewing record.
              </div>
              {[
                ['Tokens held',   '1.0×'],
                ['Reviewer record', '0.18×'],
                ['Reproducibility', '0.14×'],
                ['Continuous holding ≥ 6m', '0.10×'],
              ].map((r, i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', borderBottom: i < 3 ? `1px solid ${UB.rule3}` : 'none', fontFamily: UB.mono, fontSize: 11 }}>
                  <span>{r[0]}</span>
                  <span style={{ color: UB.accent }}>{r[1]}</span>
                </div>
              ))}
            </Card>
          </div>
        </div>
      </Layout>
    </Dapp>
  );
}

window.DAOTokensDapp = DAOTokensDapp;
window.DAOTokenDetailDapp = DAOTokenDetailDapp;
window.DAOHoldingsDapp = DAOHoldingsDapp;