// Project Pipeline — LIMS that lives ABOVE Open Labbook.
// 7 screens: pipeline overview, AI hypothesis (drug discovery), grant builder,
// protocol designer, experiment marketplace, LaTeX drafting, submit checklist.
// Third-party integrations are surfaced at every stage.

const PIPE_PROJECT = 'Astrocyte-mediated GABA reuptake · LTP modulation';
const PIPE_ID = 'PRJ-NB-219';

function PipeRail({ 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 }}>PROJECT</div>
        <div style={{ fontFamily: UB.serif, fontSize: 16, lineHeight: 1.2, color: UB.ink, marginBottom: 4 }}>{PIPE_PROJECT}</div>
        <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{PIPE_ID} · stage 4 of 7</div>
        <div style={{ marginTop: 8, display: 'flex', gap: 4 }}>
          <Tag tone="accent">EXECUTING</Tag>
          <Tag>14d in</Tag>
        </div>
      </div>
      <NavGroup label="Pipeline">
        <NavItem icon={Icon.flask}  label="Overview"            active={active === 'overview'} />
        <NavItem icon={Icon.book}   label="Ideation"            badge="✓" />
        <NavItem icon={Icon.cube}   label="Hypothesis · AI"     badge="✓" active={active === 'hypothesis'} />
        <NavItem icon={Icon.bank}   label="Grant"               badge="✓" active={active === 'grant'} />
        <NavItem icon={Icon.cog}    label="Protocol"            badge="·" active={active === 'protocol'} />
        <NavItem icon={Icon.cpu}    label="Experiment"          badge="·" active={active === 'experiment'} />
        <NavItem icon={Icon.doc}    label="Drafting"            active={active === 'drafting'} />
        <NavItem icon={Icon.rocket} label="Submit"              active={active === 'submit'} />
      </NavGroup>
      <NavGroup label="Other projects">
        <NavItem icon={Icon.flask} label="NB-204 · Replication" badge="3" />
        <NavItem icon={Icon.flask} label="NB-231 · Dendrite model" badge="1" />
        <NavItem icon={Icon.flask} label="NB-187 · Dataset release" badge="✓" />
      </NavGroup>
      <NavGroup label="Workspace">
        <NavItem icon={Icon.user}   label="Team · 7" />
        <NavItem icon={Icon.cube}   label="Integrations · 14" />
        <NavItem icon={Icon.cog}    label="Settings" />
      </NavGroup>
    </>
  );
}

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

// Reusable integration chip strip (third-party apps at every stage)
function IntegrationStrip({ apps, title = 'INTEGRATIONS' }) {
  return (
    <div style={{ background: UB.paperDeep, border: `1px solid ${UB.rule2}`, padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
      <span style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.18em' }}>{title}</span>
      {apps.map((a, i) => (
        <span key={i} style={{
          padding: '3px 8px', background: '#fff', border: `1px solid ${UB.rule2}`,
          fontFamily: UB.mono, fontSize: 10, color: UB.ink2, letterSpacing: '0.04em',
          display: 'inline-flex', alignItems: 'center', gap: 5,
        }}>
          <span style={{ width: 6, height: 6, background: a.on ? UB.ok : UB.ink4, borderRadius: '50%' }} />
          {a.name}
        </span>
      ))}
      <span style={{ flex: 1 }} />
      <Btn small ghost icon={Icon.plus}>Add</Btn>
    </div>
  );
}

// ───────────────────────────────────────────────── PIPELINE · OVERVIEW ───────
function ProjectPipelineDapp() {
  const stages = [
    { n: 1, t: 'Ideation',     s: 'Problem framing · prior art scan', state: 'DONE',     pct: 100, dur: '6d',   owner: 'M.H.', tone: 'ok' },
    { n: 2, t: 'Hypothesis',   s: 'AI drug-discovery agent · 3 leads', state: 'DONE',    pct: 100, dur: '4d',   owner: 'M.H. + Twin', tone: 'ok' },
    { n: 3, t: 'Grant',        s: 'NIH-R01 · 2.4M USD funded',          state: 'DONE',    pct: 100, dur: '38d',  owner: 'L.S.', tone: 'ok' },
    { n: 4, t: 'Protocol',     s: '14 steps · 3 reagents pending QC',   state: 'ACTIVE',  pct: 64,  dur: '3d',   owner: 'R.O.', tone: 'accent' },
    { n: 5, t: 'Experiment',   s: 'CRO Charles River + automation rig', state: 'ACTIVE',  pct: 18,  dur: '11d',  owner: 'CRO',  tone: 'accent' },
    { n: 6, t: 'Drafting',     s: 'LaTeX · §1 outline only',            state: 'PENDING', pct: 8,   dur: '—',    owner: 'M.H.', tone: 'default' },
    { n: 7, t: 'Submit',       s: 'Target: Cell · pre-flight 0/12',     state: 'PENDING', pct: 0,   dur: '—',    owner: '—',    tone: 'default' },
  ];

  return (
    <Dapp>
      <ChromeBar dapp="PIPELINE" code={`${PIPE_ID}`} />
      <Layout rail={<PipeRail active="overview" />}>
        <PageHead
          eyebrow={<PipeCrumb items={['Project Pipeline', PIPE_PROJECT]} />}
          title="Project Pipeline"
          sub="A research project from idea to publication, in seven stages. Each stage hands off to the next; integrations plug in at every junction."
          actions={<>
            <Btn small icon={Icon.user}>Team · 7</Btn>
            <Btn small icon={Icon.cube}>Integrations · 14</Btn>
            <Btn small primary icon={Icon.arrow}>Advance stage</Btn>
          </>}
        />

        <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* Pipeline chevron map */}
          <Card title="Pipeline map" code="7 STAGES · 14d ELAPSED" pad={false}>
            <div style={{ padding: '20px 24px', overflow: 'auto' }}>
              <div style={{ display: 'flex', alignItems: 'stretch', minWidth: 1080 }}>
                {stages.map((st, i) => {
                  const isActive = st.state === 'ACTIVE';
                  const isDone = st.state === 'DONE';
                  return (
                    <div key={st.n} style={{
                      flex: 1,
                      padding: 14,
                      background: isDone ? UB.ink : isActive ? UB.accent : '#fff',
                      color: isDone ? UB.paper : UB.ink,
                      border: `1px solid ${isDone ? UB.ink : isActive ? UB.accent : UB.rule2}`,
                      marginLeft: i === 0 ? 0 : -8,
                      clipPath: 'polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%)',
                      paddingLeft: i === 0 ? 14 : 24,
                      paddingRight: i === stages.length - 1 ? 14 : 24,
                      position: 'relative',
                    }}>
                      <div style={{ fontFamily: UB.mono, fontSize: 9, letterSpacing: '0.18em', opacity: 0.7, marginBottom: 4 }}>STAGE {st.n}</div>
                      <div style={{ fontFamily: UB.serif, fontSize: 17, lineHeight: 1.1, marginBottom: 4 }}>{st.t}</div>
                      <div style={{ fontSize: 11, lineHeight: 1.35, opacity: isDone ? 0.85 : 1, color: isDone ? UB.paper : isActive ? UB.ink : UB.ink3, marginBottom: 8 }}>{st.s}</div>
                      <div style={{ height: 3, background: isDone ? 'rgba(255,255,255,.18)' : isActive ? 'rgba(0,0,0,.15)' : UB.paperDeep, position: 'relative' }}>
                        <div style={{ position: 'absolute', inset: 0, width: `${st.pct}%`, background: isDone ? UB.accent : isActive ? UB.ink : UB.ink3 }} />
                      </div>
                      <div style={{ fontFamily: UB.mono, fontSize: 9, marginTop: 4, opacity: 0.8, letterSpacing: '0.06em' }}>{st.dur} · {st.owner}</div>
                    </div>
                  );
                })}
              </div>
            </div>
          </Card>

          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 16 }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {/* Health & dependencies */}
              <Card title="Stage details" code="LIVE" pad={false}>
                <div style={{ display: 'grid', gridTemplateColumns: '36px 1fr 90px 110px 90px 100px 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>#</span><span>Stage · summary</span><span>State</span><span>Owner</span><span>% done</span><span>Duration</span><span style={{ textAlign: 'right' }}>Action</span>
                </div>
                {stages.map((st, i) => (
                  <div key={st.n} style={{ display: 'grid', gridTemplateColumns: '36px 1fr 90px 110px 90px 100px 100px', gap: 12, padding: '12px 16px', alignItems: 'center', borderBottom: i < stages.length - 1 ? `1px solid ${UB.rule3}` : 'none' }}>
                    <span style={{ fontFamily: UB.mono, fontSize: 11, color: UB.ink3 }}>{st.n}</span>
                    <div>
                      <div style={{ fontWeight: 600, fontSize: 12 }}>{st.t}</div>
                      <div style={{ fontSize: 11, color: UB.ink3 }}>{st.s}</div>
                    </div>
                    <Tag tone={st.tone}>{st.state}</Tag>
                    <span style={{ fontFamily: UB.mono, fontSize: 11, color: UB.ink2 }}>{st.owner}</span>
                    <span style={{ fontFamily: UB.mono, fontSize: 11, color: UB.ink2 }}>{st.pct}%</span>
                    <span style={{ fontFamily: UB.mono, fontSize: 11, color: UB.ink3 }}>{st.dur}</span>
                    <div style={{ display: 'flex', gap: 4, justifyContent: 'flex-end' }}>
                      <Btn small ghost>Open →</Btn>
                    </div>
                  </div>
                ))}
              </Card>

              {/* Activity */}
              <Card title="Recent activity" code="ACROSS STAGES" pad={false}>
                {[
                  ['17:08', 'protocol', 'R. Okafor', 'Replaced step 7 reagent (TTX → TTX-citrate · QC pass)'],
                  ['16:42', 'experiment', 'Charles River', 'Cohort B · 12 / 24 mice processed · 92.4% retention'],
                  ['15:30', 'protocol', 'Twin', 'Auto-flagged step 11 — variance > 8% on 3 prior runs'],
                  ['14:18', 'grant',    'NIH', 'Disbursed milestone M2 · 580K USD → treasury'],
                  ['11:02', 'hypothesis', 'M. Harriot', 'Promoted lead H-3 (astrocyte GAT-3) to active hypothesis'],
                ].map((a, i, arr) => (
                  <div key={i} style={{ display: 'grid', gridTemplateColumns: '60px 90px 130px 1fr', gap: 10, padding: '10px 16px', borderBottom: i < arr.length - 1 ? `1px solid ${UB.rule3}` : 'none', alignItems: 'center', fontSize: 11 }}>
                    <span style={{ fontFamily: UB.mono, color: UB.ink3 }}>{a[0]}</span>
                    <Tag>{a[1].toUpperCase()}</Tag>
                    <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{a[2]}</span>
                    <span>{a[3]}</span>
                  </div>
                ))}
              </Card>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <Card title="Project health" code="MULTI-FACTOR">
                {[
                  ['Schedule risk', 0.34, 'on track'],
                  ['Budget burn',   0.62, '1.4M of 2.4M'],
                  ['Reproducibility κ', 0.88, 'predicted'],
                  ['Reviewer match', 0.74, '12 candidates'],
                  ['Compute headroom', 0.56, '8.4 GPU-mo left'],
                ].map(([k, v, n], i) => (
                  <div key={k} style={{ marginBottom: 8 }}>
                    <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: 4, background: UB.paperDeep, position: 'relative' }}>
                      <div style={{ position: 'absolute', inset: 0, width: `${v * 100}%`, background: v > 0.7 ? UB.ok : v > 0.4 ? UB.ink : UB.warn }} />
                    </div>
                  </div>
                ))}
              </Card>

              <Card title="Team" code="7 PEOPLE · 3 ORGS">
                {[
                  ['M. Harriot', 'PI', 'UCSF', 'accent'],
                  ['L. Singh', 'Co-investigator', 'UCSF', 'default'],
                  ['R. Okafor', 'Postdoc · protocols', 'UCSF', 'default'],
                  ['A. Mwangi', 'Eng · automation', 'CZB', 'info'],
                  ['Charles River · M.O.', 'CRO lead', 'Charles River', 'ok'],
                  ['Twin · M⁂', 'AI agent', 'local', 'accent'],
                  ['+ 1 reviewer', 'unassigned', '—', 'warn'],
                ].map((r, i) => (
                  <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '7px 0', borderBottom: i < 6 ? `1px solid ${UB.rule3}` : 'none', fontSize: 11 }}>
                    <div>
                      <div style={{ fontWeight: 600 }}>{r[0]}</div>
                      <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{r[1]} · {r[2]}</div>
                    </div>
                    <Tag tone={r[3]}>{r[3] === 'accent' ? 'PI' : r[3] === 'info' ? 'PARTNER' : r[3] === 'ok' ? 'CRO' : r[3] === 'warn' ? 'NEEDS' : 'CO'}</Tag>
                  </div>
                ))}
              </Card>
            </div>
          </div>

          {/* Integrations strip */}
          <IntegrationStrip apps={[
            { name: 'Benchling', on: true },
            { name: 'AlphaFold', on: true },
            { name: 'Overleaf', on: true },
            { name: 'Charles River CRO', on: true },
            { name: 'Hamilton STAR', on: true },
            { name: 'Slack #pipeline', on: true },
            { name: 'GitHub · NB-219', on: true },
            { name: 'Zenodo', on: false },
            { name: 'Stripe (treasury)', on: true },
            { name: 'NIH RePORTER', on: true },
            { name: '+ 4 more', on: false },
          ]} title="THIRD-PARTY APPS · ALL STAGES" />
        </div>
      </Layout>
    </Dapp>
  );
}

// ─────────────────────────────────────────────── HYPOTHESIS · AI AGENT ───────
function PipelineHypothesisDapp() {
  return (
    <Dapp>
      <ChromeBar dapp="PIPELINE" code={`${PIPE_ID} / HYPOTHESIS · AI`} />
      <Layout rail={<PipeRail active="hypothesis" />}>
        <PageHead
          eyebrow={<PipeCrumb items={['Pipeline', 'Stage 2 · Hypothesis']} />}
          title="AI drug-discovery agent"
          sub="The agent reads your library, queries chem-bio databases, simulates targets via AlphaFold/Boltz, and proposes ranked hypotheses you can promote or reject."
          actions={<>
            <Btn small>Switch to manual</Btn>
            <Btn small icon={Icon.cube}>Sandbox</Btn>
            <Btn small primary icon={Icon.flask}>Promote H-3 → protocol</Btn>
          </>}
        />

        <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 16 }}>
          <IntegrationStrip apps={[
            { name: 'AlphaFold-3', on: true }, { name: 'Boltz-2', on: true },
            { name: 'PubChem', on: true }, { name: 'ChEMBL', on: true },
            { name: 'OpenTargets', on: true }, { name: 'UniProt', on: true },
            { name: 'PDB', on: true }, { name: 'RDKit', on: true },
            { name: 'Schrödinger Maestro', on: false },
          ]} title="HYPOTHESIS APPS" />

          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16 }}>
            {/* Left — agent loop */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <Card title="Agent objective" code="EDIT">
                <div style={{ fontFamily: UB.serif, fontSize: 17, lineHeight: 1.35, color: UB.ink, marginBottom: 8 }}>
                  Find a molecular handle that selectively reduces astrocytic GABA reuptake, increasing tonic inhibition without depressing LTP induction in CA1 pyramidal cells.
                </div>
                <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
                  {['target: GAT-3', 'tissue: cortex/CA1', 'modality: small molecule', 'tox: low', 'permeable: BBB', 'similar to: SNAP-5114'].map(c => (
                    <Tag key={c}>{c}</Tag>
                  ))}
                </div>
              </Card>

              <Card title="Reasoning trace" code="64 STEPS · 12.4s · LOCAL ZK" pad={false}>
                {[
                  ['retrieve', 'Pulled 184 refs on GAT-1/2/3 selectivity · 22 with kinetic data', UB.ink2],
                  ['simulate', 'AlphaFold-3 · GAT-3 + 3 candidate scaffolds · ΔΔG range −5.2 → −9.1 kcal/mol', UB.accent],
                  ['filter',   'Excluded 14 hits failing CYP3A4 / hERG admet rules', UB.warn],
                  ['rank',     'Ranked by selectivity over GAT-1 (rank-norm), 6 leads remain', UB.ink2],
                  ['critique', '3 leads share scaffold to SNAP-5114 — propose orthogonal lead H-3 (β-amino acid linker)', UB.ok],
                  ['cite',     'Patel & Mehta 2025 (arXiv:2503.18112) — useful prior on attention decoding for binding pose', UB.info],
                ].map(([k, t, c], i, arr) => (
                  <div key={i} style={{ display: 'grid', gridTemplateColumns: '90px 1fr', gap: 10, padding: '12px 16px', borderBottom: i < arr.length - 1 ? `1px solid ${UB.rule3}` : 'none' }}>
                    <Tag tone="default" style={{ background: UB.paperDeep, color: c, fontFamily: UB.mono }}>{k.toUpperCase()}</Tag>
                    <div style={{ fontSize: 12, lineHeight: 1.5, color: UB.ink2 }}>{t}</div>
                  </div>
                ))}
              </Card>

              <Card title="Generated hypotheses · ranked" code="4 OF 6 SHOWN" pad={false}>
                {[
                  { id: 'H-3', t: 'β-amino acid linker analog of SNAP-5114', target: 'GAT-3', sel: 0.92, dock: -8.7, tox: 'low', pos: 'PROMOTED', tone: 'accent' },
                  { id: 'H-1', t: 'Cyclic guanidinium scaffold', target: 'GAT-3 / GAT-1', sel: 0.78, dock: -9.1, tox: 'med', pos: 'CANDIDATE', tone: 'ok' },
                  { id: 'H-4', t: 'Allosteric Na⁺-coupling disruptor', target: 'GAT-3', sel: 0.71, dock: -7.4, tox: 'low', pos: 'CANDIDATE', tone: 'ok' },
                  { id: 'H-2', t: 'Lipophilic SNAP-5114 derivative', target: 'GAT-3', sel: 0.62, dock: -8.2, tox: 'high', pos: 'REJECTED', tone: 'bad' },
                ].map((h, i, arr) => (
                  <div key={h.id} style={{ display: 'grid', gridTemplateColumns: '60px 1fr 80px 70px 60px 80px 90px', gap: 10, padding: '12px 16px', alignItems: 'center', borderBottom: i < arr.length - 1 ? `1px solid ${UB.rule3}` : 'none', background: h.pos === 'PROMOTED' ? UB.accentDim : 'transparent' }}>
                    <span style={{ fontFamily: UB.mono, fontSize: 11, fontWeight: 600 }}>{h.id}</span>
                    <span style={{ fontSize: 12 }}>{h.t}</span>
                    <span style={{ fontFamily: UB.mono, fontSize: 11, color: UB.ink3 }}>{h.target}</span>
                    <span style={{ fontFamily: UB.mono, fontSize: 11 }}>sel · {h.sel}</span>
                    <span style={{ fontFamily: UB.mono, fontSize: 11 }}>{h.dock}</span>
                    <span style={{ fontFamily: UB.mono, fontSize: 11, color: h.tox === 'high' ? UB.bad : h.tox === 'med' ? UB.warn : UB.ok }}>{h.tox}</span>
                    <Tag tone={h.tone}>{h.pos}</Tag>
                  </div>
                ))}
              </Card>
            </div>

            {/* Right — molecule preview + actions */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <Card title="Lead H-3 · structure" code="ALPHAFOLD-3">
                <div style={{ height: 220, background: UB.ink, position: 'relative', overflow: 'hidden' }}>
                  {/* schematic protein/binding visual */}
                  <svg width="100%" height="100%" viewBox="0 0 320 220" style={{ display: 'block' }}>
                    <defs>
                      <radialGradient id="glow" cx="0.5" cy="0.5" r="0.7"><stop offset="0" stopColor={UB.accent} stopOpacity="0.4" /><stop offset="1" stopColor={UB.accent} stopOpacity="0" /></radialGradient>
                    </defs>
                    <circle cx="160" cy="110" r="80" fill="url(#glow)" />
                    {/* protein ribbon — wavy */}
                    {[0, 1, 2, 3, 4, 5].map(i => (
                      <path key={i} d={`M 30 ${50 + i * 18} Q 100 ${70 + i * 12}, 160 ${100 + i * 8} T 290 ${130 + i * 6}`} stroke="rgba(255,255,255,.45)" strokeWidth="1.4" fill="none" />
                    ))}
                    {/* ligand */}
                    {[[155, 105], [165, 100], [175, 108], [170, 118], [160, 120], [150, 115]].map(([x, y], i, arr) => (
                      <circle key={i} cx={x} cy={y} r="4" fill={UB.accent} />
                    ))}
                    {[[155, 105, 165, 100], [165, 100, 175, 108], [175, 108, 170, 118], [170, 118, 160, 120], [160, 120, 150, 115], [150, 115, 155, 105]].map(([x1, y1, x2, y2], i) => (
                      <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke={UB.accent} strokeWidth="1.6" />
                    ))}
                    <text x="14" y="200" fill="rgba(255,255,255,.5)" fontFamily={UB.mono} fontSize="9" letterSpacing="0.18em">GAT-3 · TM5/TM8 BINDING POCKET · pose 03</text>
                  </svg>
                </div>
                <div style={{ marginTop: 10, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                  <Stat label="ΔΔG" value="−8.7" sub="kcal/mol · pose 03" />
                  <Stat label="Selectivity" value="0.92" sub="vs GAT-1" />
                  <Stat label="cLogP" value="2.4" sub="BBB OK" />
                  <Stat label="hERG IC50" value=">50 μM" sub="low risk" />
                </div>
              </Card>

              <Card title="Cited from your library" code="22 REFS">
                {[
                  ['Lin & Harriot 2024 · Cell Reports Methods', 'rwif scoring · §3'],
                  ['Yamamoto et al. 2025 · Nat. Neurosci.', 'replication of Lin 2024'],
                  ['SNAP-5114 patent · US6093570', 'lead scaffold prior art'],
                  ['Patel & Mehta 2025 · arXiv:2503.18112', 'pose decoding'],
                ].map((r, i) => (
                  <div key={i} style={{ padding: '8px 0', borderBottom: i < 3 ? `1px solid ${UB.rule3}` : 'none' }}>
                    <div style={{ fontSize: 12 }}>{r[0]}</div>
                    <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.accent }}>↳ {r[1]}</div>
                  </div>
                ))}
              </Card>

              <Card title="Sign-off" code="REQUIRED">
                <div style={{ fontSize: 11, color: UB.ink3, marginBottom: 10, lineHeight: 1.5 }}>The agent cannot promote without your signature. All reasoning is logged to UB-Chain.</div>
                {[['Twin · proposed', 'ok'], ['L. Singh · co-investigator', 'ok'], ['M. Harriot · PI', 'pending'], ['IRB / IACUC required', 'default']].map((s, i) => (
                  <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', borderBottom: i < 3 ? `1px solid ${UB.rule3}` : 'none', fontSize: 11 }}>
                    <span>{s[0]}</span>
                    <Tag tone={s[1]}>{s[1] === 'ok' ? '✓ SIGNED' : s[1] === 'pending' ? 'AWAITING' : 'INFO'}</Tag>
                  </div>
                ))}
              </Card>
            </div>
          </div>
        </div>
      </Layout>
    </Dapp>
  );
}

// ───────────────────────────────────────────────────── GRANT BUILDER ─────────
function PipelineGrantDapp() {
  return (
    <Dapp>
      <ChromeBar dapp="PIPELINE" code={`${PIPE_ID} / GRANT BUILDER`} />
      <Layout rail={<PipeRail active="grant" />}>
        <PageHead
          eyebrow={<PipeCrumb items={['Pipeline', 'Stage 3 · Grant']} />}
          title="Grant builder"
          sub="Compose a grant once. Submit to NIH, NSF, Wellcome, or pitch to research DAOs on UB-Chain. Templates align fields and budgets to each call."
          actions={<>
            <Btn small icon={Icon.search}>Browse open calls · 184</Btn>
            <Btn small icon={Icon.bank}>Pitch to DAO</Btn>
            <Btn small primary icon={Icon.arrow}>Submit application</Btn>
          </>}
        />

        <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 16 }}>
          <IntegrationStrip apps={[
            { name: 'NIH eRA Commons', on: true }, { name: 'NSF Research.gov', on: true },
            { name: 'Wellcome WTeS', on: true }, { name: 'Horizon Europe', on: false },
            { name: 'VitaDAO', on: true }, { name: 'Molecule.to', on: true },
            { name: 'BioBank Funder', on: false }, { name: 'DocuSign', on: true },
          ]} title="GRANT INTEGRATIONS" />

          <div style={{ display: 'grid', gridTemplateColumns: '300px 1fr 280px', gap: 18 }}>
            {/* Left — call selector */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <Card title="Active call" code="NIH-R01-25-180">
                <div style={{ fontFamily: UB.serif, fontSize: 16, lineHeight: 1.25 }}>R01 · Distributed Brain Initiative</div>
                <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, marginTop: 4 }}>NIH NINDS · ceiling 3.0M USD · 5y</div>
                <div style={{ marginTop: 10, fontSize: 11, color: UB.ink2, lineHeight: 1.5 }}>
                  Mechanistic studies of glia–neuron interactions across cortical regions, with mandatory open data and reproducibility commitments.
                </div>
                <div style={{ marginTop: 12, padding: 10, background: UB.paperDeep, fontFamily: UB.mono, fontSize: 10, color: UB.ink2, lineHeight: 1.6 }}>
                  Deadline · 14 Jun 2025<br />
                  Review cycle · Q3 2025<br />
                  Earliest start · Mar 2026
                </div>
              </Card>

              <Card title="Suggested matches" code="ML · YOUR PROJECT">
                {[
                  ['Wellcome · Neuroscience Investigator', '4.0M GBP', '92%'],
                  ['NSF · CAREER', '500K USD', '88%'],
                  ['VitaDAO · Astrocyte Track', '300K UBR', '84%'],
                  ['Molecule · IP-NFT lab launch', '~250K USD', '78%'],
                ].map(([n, b, m], i) => (
                  <div key={i} style={{ padding: '8px 0', borderBottom: i < 3 ? `1px solid ${UB.rule3}` : 'none', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <div style={{ minWidth: 0 }}>
                      <div style={{ fontSize: 12 }}>{n}</div>
                      <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{b}</div>
                    </div>
                    <Tag tone="accent">{m}</Tag>
                  </div>
                ))}
              </Card>
            </div>

            {/* Center — composer */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <Card title="Application sections" code="11 / 14 COMPLETE" pad={false}>
                {[
                  ['1', 'Specific Aims', 'COMPLETE', 'ok', '412 of 1 page'],
                  ['2', 'Significance', 'COMPLETE', 'ok', '1.2 of 2 pages'],
                  ['3', 'Innovation', 'COMPLETE', 'ok', '0.9 of 1 page'],
                  ['4', 'Approach', 'EDITING', 'accent', '8.4 of 12 pages'],
                  ['5', 'Preliminary data', 'COMPLETE', 'ok', '5 figures attached'],
                  ['6', 'Bibliography', 'AUTO · 184 refs', 'ok', 'pulled from library'],
                  ['7', 'Budget · year-by-year', 'EDITING', 'accent', '1.4 of 2.4M'],
                  ['8', 'Budget justification', 'PENDING', 'warn', '—'],
                  ['9', 'Facilities & resources', 'COMPLETE', 'ok', 'auto from UCSF'],
                  ['10', 'Equipment', 'COMPLETE', 'ok', '14 items'],
                  ['11', 'Biosketches', 'COMPLETE', 'ok', '3 of 3 signed'],
                  ['12', 'Letters of support', 'PENDING', 'warn', '2 of 4 received'],
                  ['13', 'Data & resource sharing plan', 'COMPLETE', 'ok', 'IPFS + Zenodo'],
                  ['14', 'Vertebrate animals', 'COMPLETE', 'ok', 'IACUC #21408'],
                ].map(([n, t, st, tone, meta], i, arr) => (
                  <div key={n} style={{ display: 'grid', gridTemplateColumns: '36px 1fr 130px 1.2fr 70px', gap: 10, padding: '10px 16px', alignItems: 'center', borderBottom: i < arr.length - 1 ? `1px solid ${UB.rule3}` : 'none' }}>
                    <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{n}</span>
                    <span style={{ fontSize: 12, fontWeight: 500 }}>{t}</span>
                    <Tag tone={tone}>{st}</Tag>
                    <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{meta}</span>
                    <Btn small ghost>Edit</Btn>
                  </div>
                ))}
              </Card>

              <Card title="Specific Aims · live preview" code="§ 1 OF 14">
                <div style={{ fontFamily: UB.serif, fontSize: 13, lineHeight: 1.65, color: UB.ink2 }}>
                  <strong style={{ fontFamily: UB.sans, fontSize: 11, fontWeight: 600, letterSpacing: '0.04em' }}>AIM 1.</strong> Identify a selective astrocytic GAT-3 modulator with low neuronal-network impact. We will deploy lead H-3 (a β-amino linker analog of SNAP-5114) generated by the project's AI hypothesis agent (Pipeline §2)…
                  <br /><br />
                  <strong style={{ fontFamily: UB.sans, fontSize: 11, fontWeight: 600, letterSpacing: '0.04em' }}>AIM 2.</strong> Characterise the impact of GAT-3 modulation on hippocampal LTP induction and maintenance, using paired-pulse, theta-burst and chemical-LTP paradigms, in mouse acute slice…
                  <br /><br />
                  <strong style={{ fontFamily: UB.sans, fontSize: 11, fontWeight: 600, letterSpacing: '0.04em' }}>AIM 3.</strong> Translate to behavioural relevance via a <em>Gad65-cre × GAT3-flox</em> conditional model and operant memory tasks, with an automated home-cage phenotyping CRO partner (see Letters of Support).
                </div>
              </Card>
            </div>

            {/* Right — budget + DAO mode */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <Card title="Budget · 5-year" code="2,400,000 USD">
                {[
                  ['Personnel',     0.54, '1,296'],
                  ['Equipment',     0.12, '288'],
                  ['Reagents · animals', 0.18, '432'],
                  ['Compute · UB-Chain', 0.06, '144'],
                  ['CRO · Charles River', 0.07, '168'],
                  ['Other · IRB · indirect', 0.03, '72'],
                ].map(([k, v, n], i, arr) => (
                  <div key={k} style={{ marginBottom: i < arr.length - 1 ? 8 : 0 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11 }}>
                      <span>{k}</span>
                      <span style={{ fontFamily: UB.mono, color: UB.ink3 }}>${n}K</span>
                    </div>
                    <div style={{ height: 4, background: UB.paperDeep, position: 'relative', marginTop: 2 }}>
                      <div style={{ position: 'absolute', inset: 0, width: `${v * 100}%`, background: UB.ink }} />
                    </div>
                  </div>
                ))}
              </Card>

              <Card title="Submit destinations" code="MULTI">
                {[
                  ['NIH eRA Commons', 'PRIMARY', 'accent'],
                  ['NSF (parallel)', 'OPTIONAL', 'default'],
                  ['VitaDAO · pitch', 'COMPLEMENT', 'ok'],
                  ['Molecule · IP-NFT', 'COMPLEMENT', 'ok'],
                ].map((d, i) => (
                  <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 0', borderBottom: i < 3 ? `1px solid ${UB.rule3}` : 'none', fontSize: 12 }}>
                    <span>{d[0]}</span>
                    <Tag tone={d[2]}>{d[1]}</Tag>
                  </div>
                ))}
                <Btn small primary style={{ marginTop: 10, width: '100%', justifyContent: 'center' }}>Pre-flight check</Btn>
              </Card>

              <Card title="Pre-flight" code="VALIDATORS">
                {[
                  ['Page limits',    'ok'],
                  ['Required figures (5/5)', 'ok'],
                  ['Biosketches signed', 'ok'],
                  ['Letters of support (2/4)', 'warn'],
                  ['Budget caps · personnel', 'warn'],
                  ['Animal protocols', 'ok'],
                  ['Data sharing plan', 'ok'],
                ].map((v, i) => (
                  <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '5px 0', borderBottom: i < 6 ? `1px solid ${UB.rule3}` : 'none', fontFamily: UB.mono, fontSize: 11 }}>
                    <span>{v[0]}</span>
                    <span style={{ color: v[1] === 'ok' ? UB.ok : UB.warn }}>{v[1] === 'ok' ? '✓' : '!'}</span>
                  </div>
                ))}
              </Card>
            </div>
          </div>
        </div>
      </Layout>
    </Dapp>
  );
}

window.ProjectPipelineDapp = ProjectPipelineDapp;
window.PipelineHypothesisDapp = PipelineHypothesisDapp;
window.PipelineGrantDapp = PipelineGrantDapp;