// Project Pipeline — part 2: protocol designer, experiment marketplace,
// LaTeX drafting, submit-to-publication checklist.

// ─────────────────────────────────────────────── PROTOCOL DESIGNER ───────────
function PipelineProtocolDapp() {
  const steps = [
    { n: 1,  t: 'Animal prep', d: '8w C57BL/6J · GAT3-flox', dur: '20 min', op: 'Manual', tone: 'default', risk: 'low' },
    { n: 2,  t: 'Decapitation · brain extraction', d: 'ACSF 4°C · sucrose-substituted', dur: '6 min', op: 'Manual', tone: 'default', risk: 'low' },
    { n: 3,  t: 'Vibratome slice · 350 μm', d: 'Coronal · CA1', dur: '14 min', op: 'Manual', tone: 'default', risk: 'low' },
    { n: 4,  t: 'Recovery', d: 'ACSF 32°C · 30 min · 95/5 O₂/CO₂', dur: '30 min', op: 'Manual', tone: 'default', risk: 'low' },
    { n: 5,  t: 'Mount in chamber', d: 'Slice anchor · perfusion 2 ml/min', dur: '4 min', op: 'Manual', tone: 'default', risk: 'low' },
    { n: 6,  t: 'Patch electrode pull', d: 'Sutter P-97 · 4–6 MΩ', dur: '6 min', op: 'Hamilton', tone: 'ok', risk: 'low' },
    { n: 7,  t: 'Apply lead H-3', d: '10 μM bath · 8 min wash-in', dur: '8 min', op: 'Hamilton', tone: 'ok', risk: 'med' },
    { n: 8,  t: 'Baseline fEPSP · 20 min', d: 'Schaffer collateral · θ-burst probe', dur: '20 min', op: 'MultiClamp · auto', tone: 'ok', risk: 'low' },
    { n: 9,  t: 'LTP induction · θ-burst', d: '4× TBS · 20 Hz · 10 trains', dur: '2 min', op: 'MultiClamp · auto', tone: 'ok', risk: 'low' },
    { n: 10, t: 'Post-LTP recording · 60 min', d: 'fEPSP every 30 s', dur: '60 min', op: 'MultiClamp · auto', tone: 'ok', risk: 'low' },
    { n: 11, t: 'Wash-out + control', d: 'ACSF only · 20 min', dur: '20 min', op: 'Hamilton', tone: 'ok', risk: 'med' },
    { n: 12, t: 'Slice fixation', d: '4% PFA · 24h · 4°C', dur: '24 h',  op: 'Manual', tone: 'default', risk: 'low' },
    { n: 13, t: 'Confocal imaging', d: '20× tile · GAT-3 antibody', dur: '90 min', op: 'CRO · CzBiohub', tone: 'info', risk: 'low' },
    { n: 14, t: 'Data upload · UB-Storage', d: 'IPFS pin · 14 GB · sha-512', dur: '8 min', op: 'Auto', tone: 'accent', risk: 'low' },
  ];
  return (
    <Dapp>
      <ChromeBar dapp="PIPELINE" code={`${PIPE_ID} / PROTOCOL · v0.4`} />
      <Layout rail={<PipeRail active="protocol" />}>
        <PageHead
          eyebrow={<PipeCrumb items={['Pipeline', 'Stage 4 · Protocol']} />}
          title="Protocol designer"
          sub="Drag steps from the palette. Each step compiles to a machine-readable run book — your bench protocol, the Hamilton script, and the CRO statement of work all stay in sync."
          actions={<>
            <Btn small icon={Icon.book}>Import .protocol</Btn>
            <Btn small icon={Icon.cube}>Variant fork</Btn>
            <Btn small primary icon={Icon.arrow}>Send to experiment</Btn>
          </>}
        />

        <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 16 }}>
          <IntegrationStrip apps={[
            { name: 'Benchling',  on: true }, { name: 'protocols.io', on: true },
            { name: 'Hamilton STAR', on: true }, { name: 'Opentrons OT-2', on: true },
            { name: 'MultiClamp 700B', on: true }, { name: 'Sutter P-97', on: true },
            { name: 'CRO · CzBiohub', on: true }, { name: 'IRB · DocuSign', on: true },
          ]} title="PROTOCOL APPS" />

          <div style={{ display: 'grid', gridTemplateColumns: '220px minmax(0, 1fr) 260px', gap: 16 }}>
            {/* Step palette */}
            <Card title="Step palette" code="DRAG ↓" pad={false}>
              {[
                ['Animal prep · IACUC', 'manual'],
                ['Tissue extraction', 'manual'],
                ['Vibratome slice', 'manual'],
                ['Reagent application', 'hamilton'],
                ['Patch · whole cell', 'auto'],
                ['Patch · field', 'auto'],
                ['Optogenetic stim', 'auto'],
                ['LTP · θ-burst', 'auto'],
                ['Calcium imaging', 'auto'],
                ['Confocal · IHC', 'cro'],
                ['Data upload', 'auto'],
                ['Animal sacrifice', 'manual'],
              ].map(([k, kind], i, arr) => (
                <div key={k} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '9px 14px', borderBottom: i < arr.length - 1 ? `1px solid ${UB.rule3}` : 'none', cursor: 'grab', fontSize: 11 }}>
                  <span>{k}</span>
                  <Tag tone={kind === 'auto' ? 'ok' : kind === 'cro' ? 'info' : kind === 'hamilton' ? 'accent' : 'default'}>{kind.toUpperCase()}</Tag>
                </div>
              ))}
            </Card>

            {/* Steps timeline */}
            <Card title="Run book · 14 steps · ~26h" code="v0.4 · DRAFT" pad={false}>
              <div style={{ padding: '14px 18px', borderBottom: `1px solid ${UB.rule2}`, display: 'flex', gap: 8, alignItems: 'center', fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>
                <span>BLOCK A · in vivo prep</span>
                <span style={{ flex: 1, height: 1, background: UB.rule2 }} />
                <span>BLOCK B · electrophysiology</span>
                <span style={{ flex: 1, height: 1, background: UB.rule2 }} />
                <span>BLOCK C · imaging + upload</span>
              </div>
              {steps.map((s, i, arr) => (
                <div key={s.n} style={{
                  display: 'grid', gridTemplateColumns: '28px 1.5fr 0.8fr 56px 92px 64px 20px',
                  gap: 8, padding: '11px 14px', alignItems: 'center', minWidth: 0,
                  borderBottom: i < arr.length - 1 ? `1px solid ${UB.rule3}` : 'none',
                  background: s.n === 7 ? UB.accentDim : s.n === 11 ? 'oklch(0.78 0.16 70 / 0.15)' : 'transparent',
                }}>
                  <span style={{ fontFamily: UB.mono, fontSize: 11, color: UB.ink3 }}>{String(s.n).padStart(2, '0')}</span>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontWeight: 600, fontSize: 12, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{s.t}</div>
                    <div style={{ fontSize: 11, color: UB.ink3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{s.d}</div>
                  </div>
                  <div style={{ height: 4, background: UB.paperDeep, position: 'relative', minWidth: 0 }}>
                    <div style={{ position: 'absolute', height: '100%', left: `${(i / arr.length) * 100}%`, width: `${(parseInt(s.dur) || 4) * 0.6}%`, background: s.tone === 'accent' ? UB.accent : s.tone === 'info' ? 'oklch(0.66 0.13 240)' : s.tone === 'ok' ? UB.ok : UB.ink2, maxWidth: '40%' }} />
                  </div>
                  <span style={{ fontFamily: UB.mono, fontSize: 11, color: UB.ink3 }}>{s.dur}</span>
                  <Tag tone={s.tone}>{s.op}</Tag>
                  <span style={{ fontFamily: UB.mono, fontSize: 10, color: s.risk === 'med' ? UB.warn : UB.ink3, whiteSpace: 'nowrap' }}>· {s.risk}</span>
                  <span style={{ color: UB.ink4 }}>⋮⋮</span>
                </div>
              ))}
              <div style={{ padding: '12px 18px', background: UB.paperDeep, fontFamily: UB.mono, fontSize: 10, color: UB.ink3, display: 'flex', justifyContent: 'space-between' }}>
                <span>Total · 14 steps · 26 h 18 min · 4 person-hours · 22 h auto</span>
                <span>Cost estimate · 4,820 USD</span>
              </div>
            </Card>

            {/* Step inspector */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <Card title="Step 07 · Apply lead H-3" code="HAMILTON · medium risk">
                <div style={{ fontSize: 11, color: UB.ink2, lineHeight: 1.5, marginBottom: 12 }}>
                  Bath-apply 10 μM lead H-3 in ACSF (vehicle DMSO 0.1%) for 8 min wash-in. Final concentration verified by inline UV (280 nm).
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                  <Stat label="Reagent" value="H-3 · 10 μM" sub="UCSF stock #211" />
                  <Stat label="Vehicle" value="ACSF + 0.1% DMSO" sub="filtered" />
                  <Stat label="Volume" value="14 ml" sub="2 ml/min · 8 min" />
                  <Stat label="QC" value="UV 280 nm" sub="±5%" />
                </div>
              </Card>

              <Card title="Reagents" code="3 PENDING QC">
                {[
                  ['lead H-3', 'PENDING', 'warn',  '14 mg · UCSF #211'],
                  ['ACSF (slice)', 'OK', 'ok',     '4 L batch · 04 May'],
                  ['DMSO · 100%',  'OK', 'ok',      'Sigma · D2650'],
                  ['Picrotoxin (back-up)', 'PENDING', 'warn', 'Tocris · 1128'],
                ].map((r, i) => (
                  <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', borderBottom: i < 3 ? `1px solid ${UB.rule3}` : 'none', fontSize: 11 }}>
                    <div>
                      <div>{r[0]}</div>
                      <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{r[3]}</div>
                    </div>
                    <Tag tone={r[2]}>{r[1]}</Tag>
                  </div>
                ))}
              </Card>

              <Card title="Compliance" code="REQUIRED">
                {[
                  ['IACUC #21408', 'ok'],
                  ['Biosafety BL-2', 'ok'],
                  ['Chemical SDS · H-3', 'pending'],
                  ['Animal welfare check', 'ok'],
                ].map((c, i) => (
                  <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '5px 0', borderBottom: i < 3 ? `1px solid ${UB.rule3}` : 'none', fontFamily: UB.mono, fontSize: 11 }}>
                    <span>{c[0]}</span>
                    <span style={{ color: c[1] === 'ok' ? UB.ok : UB.warn }}>{c[1] === 'ok' ? '✓' : '!'}</span>
                  </div>
                ))}
              </Card>

              <Card title="Variants" code="A/B FORK">
                {[
                  ['v0.4 · current', 'BASELINE', 'accent'],
                  ['v0.4-A · 5 μM dose', 'CHILD', 'default'],
                  ['v0.4-B · 25 μM dose', 'CHILD', 'default'],
                ].map((v, i) => (
                  <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', borderBottom: i < 2 ? `1px solid ${UB.rule3}` : 'none', fontSize: 11 }}>
                    <span>{v[0]}</span>
                    <Tag tone={v[2]}>{v[1]}</Tag>
                  </div>
                ))}
              </Card>
            </div>
          </div>
        </div>
      </Layout>
    </Dapp>
  );
}

// ─────────────────────────────────────────── EXPERIMENT MARKETPLACE ──────────
function PipelineExperimentDapp() {
  return (
    <Dapp>
      <ChromeBar dapp="PIPELINE" code={`${PIPE_ID} / EXPERIMENT · MARKETPLACE`} />
      <Layout rail={<PipeRail active="experiment" />}>
        <PageHead
          eyebrow={<PipeCrumb items={['Pipeline', 'Stage 5 · Experiment']} />}
          title="Experiment marketplace"
          sub="Run the protocol yourself, hand it to your automation rig, or post the run book to vetted CROs and other UB-Chain labs that bid on your statement of work."
          actions={<>
            <Btn small icon={Icon.cog}>Run locally</Btn>
            <Btn small icon={Icon.cpu}>Send to rig</Btn>
            <Btn small primary icon={Icon.user}>Hire CRO</Btn>
          </>}
        />

        <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 16 }}>
          <IntegrationStrip apps={[
            { name: 'Charles River', on: true }, { name: 'CzBiohub', on: true },
            { name: 'Inscopix services', on: true }, { name: 'Hamilton STAR', on: true },
            { name: 'Opentrons cloud', on: true }, { name: 'Slack #ops', on: true },
            { name: 'Stripe (escrow)', on: true }, { name: 'IPFS · capture', on: true },
          ]} title="EXECUTION APPS" />

          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16 }}>
            {/* Active runs */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <Card title="Active runs · 3" code="LIVE" pad={false}>
                {[
                  { id: 'RUN-441', op: 'Charles River · CRO', cohort: 'Cohort B · 12/24 mice', stage: 'Step 9 · LTP induction', pct: 64, eta: '4d 11h', cost: '$3,840' },
                  { id: 'RUN-442', op: 'In-house · Hamilton + MultiClamp', cohort: 'Cohort A · 6/6 slices', stage: 'Step 11 · wash-out', pct: 88, eta: '0h 42m', cost: '$420' },
                  { id: 'RUN-443', op: 'CzBiohub · CRO', cohort: 'Imaging · 96 slices queued', stage: 'Pending intake', pct: 4, eta: 'Mon 09:00', cost: '$1,800' },
                ].map((r, i, arr) => (
                  <div key={r.id} style={{ padding: '14px 16px', borderBottom: i < arr.length - 1 ? `1px solid ${UB.rule3}` : 'none' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
                      <div>
                        <div style={{ fontFamily: UB.mono, fontSize: 11, fontWeight: 600 }}>{r.id} <span style={{ color: UB.ink3, marginLeft: 6, fontWeight: 400 }}>{r.op}</span></div>
                        <div style={{ fontSize: 11, color: UB.ink3, marginTop: 2 }}>{r.cohort}</div>
                      </div>
                      <Tag tone={r.pct > 60 ? 'accent' : r.pct > 20 ? 'ok' : 'default'}>{r.pct > 80 ? 'WRAP-UP' : r.pct > 20 ? 'EXECUTING' : 'INTAKE'}</Tag>
                    </div>
                    <div style={{ height: 4, background: UB.paperDeep, position: 'relative', marginBottom: 8 }}>
                      <div style={{ position: 'absolute', inset: 0, width: `${r.pct}%`, background: UB.accent }} />
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>
                      <span>{r.stage}</span>
                      <span>{r.pct}% · ETA {r.eta} · {r.cost} escrowed</span>
                    </div>
                  </div>
                ))}
              </Card>

              {/* Live data feed */}
              <Card title="Live data · RUN-442" code="MULTICLAMP · CH 1–4" pad={false}>
                <div style={{ padding: 14, background: UB.ink, height: 180, position: 'relative', overflow: 'hidden' }}>
                  <svg width="100%" height="100%" viewBox="0 0 480 150" preserveAspectRatio="none">
                    {[0, 1, 2, 3].map(ch => {
                      const off = ch * 36 + 18;
                      let d = `M 0 ${off}`;
                      for (let x = 0; x <= 480; x += 4) {
                        const sp = (x === 120 || x === 220 || x === 340) ? 14 : 0;
                        const noise = (Math.sin(x * 0.18 + ch) + Math.sin(x * 0.07 + ch * 1.3)) * 1.2;
                        d += ` L ${x} ${off + noise - sp}`;
                      }
                      return <path key={ch} d={d} stroke={ch === 1 ? UB.accent : 'rgba(255,255,255,.5)'} strokeWidth="1.2" fill="none" />;
                    })}
                    <text x="8" y="12" fill="rgba(255,255,255,.6)" fontFamily={UB.mono} fontSize="9" letterSpacing="0.18em">CH1 fEPSP · CA1 sr</text>
                    <text x="8" y="48" fill="rgba(255,255,255,.6)" fontFamily={UB.mono} fontSize="9" letterSpacing="0.18em">CH2 stim mark</text>
                    <text x="8" y="84" fill="rgba(255,255,255,.6)" fontFamily={UB.mono} fontSize="9" letterSpacing="0.18em">CH3 perfusion T°</text>
                    <text x="8" y="120" fill="rgba(255,255,255,.6)" fontFamily={UB.mono} fontSize="9" letterSpacing="0.18em">CH4 H-3 conc · UV</text>
                  </svg>
                </div>
                <div style={{ padding: '8px 14px', display: 'flex', justifyContent: 'space-between', fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>
                  <span>SAMPLE · 20 kHz · 4 ch · live</span>
                  <span>STREAM → IPFS · 2.4 MB/s · pinned</span>
                </div>
              </Card>

              <Card title="Available bidders · open SoW" code="POSTED 14h · RUN-443B">
                {[
                  ['Charles River',     'Boston, MA',     '★ 4.9 · 2,140 runs', '$1,800', '4d', 'top'],
                  ['CzBiohub Imaging',  'San Francisco',  '★ 4.8 · 410 runs',    '$1,640', '6d', 'good'],
                  ['Inscopix Services', 'Mountain View',  '★ 4.7 · 198 runs',    '$2,200', '3d', 'fast'],
                  ['Verily · Brain',    'Boulder, CO',    '★ 4.6 · 88 runs',     '$2,400', '7d', 'good'],
                  ['Lab · Tanaka (RIKEN)', 'Tokyo · UB-Chain', '★ 4.9 · 84 runs',    '$1,400', '9d', 'frontier'],
                ].map((b, i, arr) => (
                  <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1.2fr 70px 60px 80px', gap: 10, padding: '9px 0', borderBottom: i < arr.length - 1 ? `1px solid ${UB.rule3}` : 'none', alignItems: 'center', fontSize: 11 }}>
                    <span style={{ fontWeight: 600 }}>{b[0]}</span>
                    <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{b[1]}</span>
                    <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{b[2]}</span>
                    <span style={{ fontFamily: UB.mono }}>{b[3]}</span>
                    <span style={{ fontFamily: UB.mono, color: UB.ink3 }}>{b[4]}</span>
                    <Btn small primary>Award</Btn>
                  </div>
                ))}
              </Card>
            </div>

            {/* Right column */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <Card title="Statement of work" code="AUTO · FROM PROTOCOL">
                <div style={{ fontFamily: UB.serif, fontSize: 14, lineHeight: 1.4 }}>v0.4 · 14 steps · 26 h</div>
                <div style={{ marginTop: 10, fontFamily: UB.mono, fontSize: 10, color: UB.ink3, lineHeight: 1.7 }}>
                  PARTY-A · UCSF · Harriot Lab<br />
                  PARTY-B · selected vendor<br />
                  ASSETS · 24 mice · GAT3-flox<br />
                  DATA · raw + analyzed → IPFS pin<br />
                  IP · paper credit + license-back<br />
                  ESCROW · UB-Chain smart contract
                </div>
                <Btn small style={{ marginTop: 10 }} icon={Icon.doc}>View full SoW</Btn>
              </Card>

              <Card title="Escrow · runs">
                {[
                  ['RUN-441', '$3,840', 'In escrow'],
                  ['RUN-442', '$420',   'Released'],
                  ['RUN-443', '$1,800', 'Pending award'],
                ].map((e, i) => (
                  <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '7px 0', borderBottom: i < 2 ? `1px solid ${UB.rule3}` : 'none', fontFamily: UB.mono, fontSize: 11 }}>
                    <span>{e[0]}</span>
                    <span>{e[1]}</span>
                    <span style={{ color: e[2] === 'Released' ? UB.ok : UB.ink3 }}>{e[2]}</span>
                  </div>
                ))}
                <div style={{ marginTop: 10, padding: 10, background: UB.paperDeep, fontFamily: UB.mono, fontSize: 10, color: UB.ink3, lineHeight: 1.6 }}>
                  Total escrowed · $6,060<br />
                  Released to vendors · $420<br />
                  Refundable on dispute · 100%
                </div>
              </Card>

              <Card title="Quality flags" code="ML · TWIN">
                {[
                  ['No outliers detected · last 14 trials', 'ok'],
                  ['Cohort B variance trending up · check', 'warn'],
                  ['Drift on CH3 perfusion T°', 'warn'],
                  ['CRO sign-off pending on cohort A', 'default'],
                ].map((f, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 0', borderBottom: i < 3 ? `1px solid ${UB.rule3}` : 'none', fontSize: 11 }}>
                    <span style={{ width: 6, height: 6, borderRadius: '50%', background: f[1] === 'ok' ? UB.ok : f[1] === 'warn' ? UB.warn : UB.ink3 }} />
                    <span>{f[0]}</span>
                  </div>
                ))}
              </Card>
            </div>
          </div>
        </div>
      </Layout>
    </Dapp>
  );
}

// ─────────────────────────────────────────────── LATEX DRAFTING ──────────────
function PipelineDraftingDapp() {
  return (
    <Dapp>
      <ChromeBar dapp="PIPELINE" code={`${PIPE_ID} / DRAFT-219.tex`} />
      <Layout rail={<PipeRail active="drafting" />}>
        <PageHead
          eyebrow={<PipeCrumb items={['Pipeline', 'Stage 6 · Drafting']} />}
          title="LaTeX drafting"
          sub="Write in TeX, get a live PDF preview. Citations come from your library, figures from your experiments, and reviewers from your TRID network."
          actions={<>
            <Btn small icon={Icon.book}>Citations · 184</Btn>
            <Btn small icon={Icon.flask}>Figures · 5</Btn>
            <Btn small primary icon={Icon.arrow}>Send for internal review</Btn>
          </>}
        />

        <div style={{ flex: 1, display: 'flex', minHeight: 0 }}>
          {/* File tree */}
          <div style={{ width: 220, borderRight: `1px solid ${UB.rule2}`, background: UB.paperDeep, padding: 12, fontFamily: UB.mono, fontSize: 11, color: UB.ink2, overflow: 'auto', flexShrink: 0 }}>
            <div style={{ fontSize: 9, color: UB.ink3, letterSpacing: '0.18em', marginBottom: 8 }}>FILES · DRAFT-219</div>
            {[
              ['📁', 'draft-219/', false, 0],
              ['📄', 'main.tex', true,  1],
              ['📄', 'preamble.tex', false, 1],
              ['📄', 'macros.tex', false, 1],
              ['📁', 'sections/', false, 1],
              ['📄', '01-intro.tex', false, 2],
              ['📄', '02-results.tex', false, 2],
              ['📄', '03-discussion.tex', false, 2],
              ['📄', '04-methods.tex', false, 2],
              ['📁', 'figures/', false, 1],
              ['🖼', 'fig01-pipeline.pdf', false, 2],
              ['🖼', 'fig02-ltp.pdf', false, 2],
              ['🖼', 'fig03-dose.pdf', false, 2],
              ['🖼', 'fig04-ihc.pdf', false, 2],
              ['🖼', 'fig05-cohort.pdf', false, 2],
              ['📄', 'references.bib', false, 1],
              ['📄', 'cell.cls', false, 1],
              ['', '', false, 0],
              ['📁', 'output/', false, 0],
              ['📄', 'draft-219.pdf', false, 1],
            ].map((f, i) => f[1] === '' ? <div key={i} style={{ height: 6 }} /> : (
              <div key={i} style={{ display: 'flex', gap: 6, padding: '3px 0', paddingLeft: f[3] * 12, color: f[2] ? UB.accent : UB.ink2, fontWeight: f[2] ? 600 : 400 }}>
                <span style={{ width: 14 }}>{f[0]}</span>
                <span>{f[1]}</span>
              </div>
            ))}
          </div>

          {/* Editor */}
          <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }}>
            <div style={{ height: 32, borderBottom: `1px solid ${UB.rule2}`, display: 'flex', alignItems: 'center', padding: '0 14px', gap: 12, fontFamily: UB.mono, fontSize: 10, color: UB.ink3, background: '#fff' }}>
              <span style={{ color: UB.ink, fontWeight: 600 }}>main.tex</span>
              <span>02-results.tex</span>
              <span>references.bib</span>
              <span style={{ flex: 1 }} />
              <Tag tone="ok">SAVED 2s</Tag>
              <Tag>BUILD ✓ 1.4s</Tag>
            </div>

            <div style={{ flex: 1, overflow: 'auto', background: '#fbfaf6', display: 'flex' }}>
              {/* line numbers */}
              <div style={{ padding: '14px 8px 14px 14px', fontFamily: UB.mono, fontSize: 11, color: UB.ink4, lineHeight: 1.6, textAlign: 'right', userSelect: 'none' }}>
                {Array.from({ length: 28 }).map((_, i) => <div key={i}>{i + 142}</div>)}
              </div>
              <pre style={{ margin: 0, padding: '14px 18px', fontFamily: UB.mono, fontSize: 12, lineHeight: 1.6, color: UB.ink, flex: 1, whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
{`\\section{Results}\\label{sec:results}

We first asked whether `}<span style={{ color: UB.accent, fontWeight: 600 }}>{`\\textbf{lead H-3}`}</span>{` modulates astrocytic GAT-3
without affecting GAT-1-mediated synaptic clearance. Bath
application of `}<span style={{ background: UB.accentDim, padding: '0 2px' }}>{`10\\,$\\mu$M H-3`}</span>{` in
acute hippocampal slices `}<span style={{ color: 'oklch(0.66 0.13 240)' }}>{`\\citep{harriot2025astro}`}</span>{`
produced a `}<span style={{ color: UB.accent, fontWeight: 600 }}>{`33.4\\,\\%$\\pm$2.1`}</span>{` reduction in tonic GABA
current relative to vehicle (Fig.~`}<span style={{ color: UB.ok }}>{`\\ref{fig:ltp}`}</span>{`a),
without affecting paired-pulse ratios `}<span style={{ color: 'oklch(0.66 0.13 240)' }}>{`\\citep{lin2024rwif,
yamamoto2025sleep}`}</span>{`.

\\subsection{LTP induction is preserved under H-3}

Theta-burst stimulation evoked normal LTP in slices treated
with H-3 (potentiation `}<span style={{ color: UB.accent, fontWeight: 600 }}>{`172\\,\\%$\\pm$8`}</span>{` of baseline
at 60\\,min) compared to vehicle (`}<span style={{ color: UB.accent, fontWeight: 600 }}>{`168\\,\\%$\\pm$11`}</span>{`;
$p\\,{=}\\,0.42$, $n\\,{=}\\,12$ slices per group). This finding
contrasts with non-selective `}<span style={{ background: 'oklch(0.78 0.16 70 / 0.30)' }}>{`SNAP-5114, which`}</span>{`
suppresses LTP at equivalent doses `}<span style={{ color: 'oklch(0.66 0.13 240)' }}>{`\\citep{patel2025sparse}`}</span>{`,
suggesting that astrocyte-selective GABA reuptake inhibition
spares the synaptic mechanisms required for LTP.`}
              </pre>
            </div>

            <div style={{ height: 28, borderTop: `1px solid ${UB.rule2}`, padding: '0 14px', display: 'flex', alignItems: 'center', gap: 14, fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>
              <span>main.tex · ln 168 · col 24</span>
              <span>UTF-8 · LaTeX</span>
              <span>spell · en-GB · 2 issues</span>
              <span style={{ flex: 1 }} />
              <span>Twin · suggested 3 cites</span>
              <span style={{ color: UB.accent }}>● live build</span>
            </div>
          </div>

          {/* PDF preview */}
          <div style={{ width: 420, borderLeft: `1px solid ${UB.rule2}`, display: 'flex', flexDirection: 'column', flexShrink: 0, background: UB.paperDeep }}>
            <div style={{ height: 32, borderBottom: `1px solid ${UB.rule2}`, padding: '0 14px', display: 'flex', alignItems: 'center', gap: 10, fontFamily: UB.mono, fontSize: 10, color: UB.ink3, background: '#fff' }}>
              <span style={{ color: UB.ink, fontWeight: 600 }}>draft-219.pdf</span>
              <span>p.4 / 18</span>
              <span>112%</span>
              <span style={{ flex: 1 }} />
              <Tag tone="accent">LIVE</Tag>
            </div>
            <div style={{ flex: 1, overflow: 'auto', padding: 18, display: 'flex', justifyContent: 'center' }}>
              <div style={{ background: '#fff', width: 360, padding: '40px 38px', boxShadow: '0 1px 3px rgba(0,0,0,.08)', fontFamily: UB.serif, fontSize: 10.5, lineHeight: 1.55, color: UB.ink2 }}>
                <h3 style={{ fontFamily: UB.serif, fontSize: 13, fontWeight: 700, marginTop: 0, color: UB.ink }}>2 · Results</h3>
                <p style={{ marginBottom: 8 }}>
                  We first asked whether <strong>lead H-3</strong> modulates astrocytic GAT-3 without affecting GAT-1-mediated synaptic clearance. Bath application of 10 μM H-3 in acute hippocampal slices<sup>4</sup> produced a 33.4% ± 2.1 reduction in tonic GABA current relative to vehicle (Fig. 1a), without affecting paired-pulse ratios<sup>1,2</sup>.
                </p>
                <h4 style={{ fontFamily: UB.serif, fontSize: 11, fontWeight: 600, marginTop: 10 }}>2.1 · LTP induction is preserved under H-3</h4>
                <p style={{ marginBottom: 8 }}>
                  Theta-burst stimulation evoked normal LTP in slices treated with H-3 (potentiation 172% ± 8 of baseline at 60 min) compared to vehicle (168% ± 11; p = 0.42, n = 12 slices per group). This finding contrasts with non-selective SNAP-5114, which suppresses LTP at equivalent doses<sup>5</sup>, suggesting that astrocyte-selective GABA reuptake inhibition spares the synaptic mechanisms required for LTP.
                </p>
                <div style={{ margin: '14px 0', padding: '10px 12px', border: `1px solid ${UB.rule2}`, fontSize: 9 }}>
                  <div style={{ fontFamily: UB.mono, color: UB.ink3, marginBottom: 4 }}>FIG. 1 · LTP under H-3</div>
                  <svg width="100%" height="60" viewBox="0 0 280 60">
                    <line x1="20" y1="50" x2="260" y2="50" stroke={UB.ink3} strokeWidth="0.6" />
                    <line x1="20" y1="10" x2="20" y2="50" stroke={UB.ink3} strokeWidth="0.6" />
                    {Array.from({ length: 60 }).map((_, i) => {
                      const x = 20 + i * 4;
                      const dip = i > 30 ? 8 : 0;
                      const v = 38 - Math.sin(i * 0.4) * 2 - dip - (i > 30 ? Math.min((i - 30) * 0.5, 14) : 0);
                      return <circle key={i} cx={x} cy={v} r="1.2" fill={i > 30 ? UB.accent : UB.ink2} />;
                    })}
                    <line x1="160" y1="6" x2="160" y2="48" stroke={UB.warn} strokeDasharray="2 2" strokeWidth="0.6" />
                    <text x="164" y="14" fill={UB.warn} fontFamily={UB.mono} fontSize="6">θ-burst</text>
                  </svg>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Layout>
    </Dapp>
  );
}

// ────────────────────────────────────────────── SUBMIT TO PUBLICATION ────────
function PipelineSubmitDapp() {
  return (
    <Dapp>
      <ChromeBar dapp="PIPELINE" code={`${PIPE_ID} / SUBMIT · PRE-FLIGHT`} />
      <Layout rail={<PipeRail active="submit" />}>
        <PageHead
          eyebrow={<PipeCrumb items={['Pipeline', 'Stage 7 · Submit']} />}
          title="Submit for publication"
          sub="One canonical paper, many destinations. Submit to a journal, a preprint server, and the UB-Chain Publication dapp simultaneously — with reproducible artifacts attached."
          actions={<>
            <Btn small icon={Icon.book}>View paper</Btn>
            <Btn small>Save preflight</Btn>
            <Btn small primary icon={Icon.rocket}>Submit · all destinations</Btn>
          </>}
        />

        <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 16 }}>
          <IntegrationStrip apps={[
            { name: 'Cell · Editorial Manager', on: true }, { name: 'eLife · sub.', on: true },
            { name: 'bioRxiv', on: true }, { name: 'arXiv', on: true },
            { name: 'UB-Chain Publication', on: true }, { name: 'Zenodo (data)', on: true },
            { name: 'GitHub release', on: true }, { name: 'ORCID', on: true },
          ]} title="SUBMIT INTEGRATIONS" />

          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16 }}>
            {/* Paper bundle */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <Card title="Paper bundle" code="DRAFT-219 · v0.9-rc1" pad={false}>
                {[
                  ['Manuscript · main.pdf', '1.4 MB · 18 pp', '✓', UB.ok],
                  ['Manuscript · main.tex', '184 KB', '✓', UB.ok],
                  ['Supplementary · 6 figures', '8.2 MB', '✓', UB.ok],
                  ['Supplementary · 2 videos', '142 MB', '✓', UB.ok],
                  ['Code · GitHub release', 'harriot/glia-h3 v1.0.0', '✓', UB.ok],
                  ['Data · IPFS pin', '482 GB · sha-512', '✓', UB.ok],
                  ['Reagents · BoM', '14 items', '✓', UB.ok],
                  ['Animal model card', 'IACUC #21408', '✓', UB.ok],
                  ['Author contributions', 'CRediT taxonomy', '✓', UB.ok],
                  ['Conflicts of interest', '0 declared', '✓', UB.ok],
                  ['Pre-registration', 'OSF · DOI 10.17605', '✓', UB.ok],
                  ['ORCIDs · all authors', '7 of 7', '✓', UB.ok],
                ].map((f, i, arr) => (
                  <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 30px', gap: 10, padding: '8px 16px', borderBottom: i < arr.length - 1 ? `1px solid ${UB.rule3}` : 'none', alignItems: 'center', fontSize: 11 }}>
                    <span>{f[0]}</span>
                    <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{f[1]}</span>
                    <span style={{ color: f[3], textAlign: 'center' }}>{f[2]}</span>
                  </div>
                ))}
              </Card>

              <Card title="Pre-flight checklist · 12 / 14" code="2 PENDING" pad={false}>
                {[
                  ['Title length ≤ 14 words',         'ok',   'PASS · 11 words'],
                  ['Abstract ≤ 250 words',            'ok',   'PASS · 218 words'],
                  ['Page limit (Cell article)',       'ok',   'PASS · 18 / 22'],
                  ['References formatted · Nature',   'ok',   'PASS · 184 entries'],
                  ['Figures resolution ≥ 300 dpi',    'ok',   'PASS · all 5'],
                  ['Reproducibility statement',       'ok',   'PASS · code + data'],
                  ['Reagents · RRIDs assigned',       'warn', 'WARN · 2 missing'],
                  ['Statistics · effect sizes',       'ok',   'PASS'],
                  ['Sex as biological variable',      'ok',   'PASS · M+F included'],
                  ['Conflict of interest',            'ok',   'PASS · 0 declared'],
                  ['Author CRediT taxonomy',          'ok',   'PASS · 7 / 7'],
                  ['Open data DOI registered',        'ok',   'PASS · Zenodo'],
                  ['Cover letter (Cell req.)',        'warn', 'PENDING · 0 / 1'],
                  ['Pre-print embargo decision',      'ok',   'PASS · biorxiv · concurrent'],
                ].map((c, i, arr) => (
                  <div key={i} style={{ display: 'grid', gridTemplateColumns: '24px 1.4fr 1fr', gap: 10, padding: '8px 16px', borderBottom: i < arr.length - 1 ? `1px solid ${UB.rule3}` : 'none', alignItems: 'center', fontSize: 11 }}>
                    <span style={{ color: c[1] === 'ok' ? UB.ok : UB.warn, fontFamily: UB.mono, fontWeight: 600 }}>{c[1] === 'ok' ? '✓' : '!'}</span>
                    <span>{c[0]}</span>
                    <span style={{ fontFamily: UB.mono, fontSize: 10, color: c[1] === 'ok' ? UB.ink3 : UB.warn }}>{c[2]}</span>
                  </div>
                ))}
              </Card>
            </div>

            {/* Destinations */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <Card title="Destinations" code="MULTI-SUBMIT" pad={false}>
                {[
                  { n: 'Cell · primary',     k: 'Editorial Manager', s: 'Cover letter pending', tone: 'warn',  pri: 'P1' },
                  { n: 'eLife · backup',     k: 'eLife submission',  s: 'Ready · holds for Cell decision', tone: 'default', pri: 'P2' },
                  { n: 'bioRxiv · preprint', k: 'Public · concurrent', s: 'Auto-post on submit', tone: 'ok',    pri: 'P1' },
                  { n: 'UB-Chain Publication', k: 'Decentralized peer review', s: 'Mints dPID + reviewer pool', tone: 'accent', pri: 'P1' },
                  { n: 'Zenodo · data',      k: 'Dataset DOI', s: '482 GB · pinned', tone: 'ok', pri: 'AUTO' },
                  { n: 'GitHub · release',   k: 'Tag v1.0.0', s: 'Auto-tag on submit', tone: 'ok', pri: 'AUTO' },
                ].map((d, i, arr) => (
                  <div key={i} style={{ padding: '12px 16px', borderBottom: i < arr.length - 1 ? `1px solid ${UB.rule3}` : 'none' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
                      <span style={{ fontWeight: 600, fontSize: 12 }}>{d.n}</span>
                      <Tag tone={d.tone}>{d.pri}</Tag>
                    </div>
                    <div style={{ fontSize: 11, color: UB.ink3 }}>{d.k}</div>
                    <div style={{ fontFamily: UB.mono, fontSize: 10, color: d.tone === 'warn' ? UB.warn : UB.ink3, marginTop: 2 }}>{d.s}</div>
                  </div>
                ))}
              </Card>

              <Card title="UB-Chain Publication · preview" code="WHAT'S MINTED">
                <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, lineHeight: 1.7 }}>
                  dPID · pending · v1<br />
                  License · CC-BY-4.0<br />
                  Reviewer pool · TRID-matched · est. 4–7d<br />
                  Reproducibility cap · auto-claim post-review<br />
                  Patent token · OPTIONAL · see Stage 8 →
                </div>
                <Btn small style={{ marginTop: 10 }} icon={Icon.cube}>Configure on-chain mint</Btn>
              </Card>

              <Card title="Reviewer suggestion · TRID" code="MATCHED · 12">
                {[
                  ['Lin C. · UCSF', '★ 0.91', 'cited 6×'],
                  ['Yamamoto K. · RIKEN', '★ 0.88', 'replicated your work'],
                  ['Mehta R. · Stanford', '★ 0.84', 'methods overlap'],
                  ['Park S. · KAIST', '★ 0.81', 'astrocyte field'],
                ].map((r, i) => (
                  <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.4fr 50px 1fr', gap: 6, padding: '6px 0', borderBottom: i < 3 ? `1px solid ${UB.rule3}` : 'none', fontSize: 11, alignItems: 'center' }}>
                    <span>{r[0]}</span>
                    <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.accent }}>{r[1]}</span>
                    <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{r[2]}</span>
                  </div>
                ))}
              </Card>
            </div>
          </div>
        </div>
      </Layout>
    </Dapp>
  );
}

window.PipelineProtocolDapp = PipelineProtocolDapp;
window.PipelineExperimentDapp = PipelineExperimentDapp;
window.PipelineDraftingDapp = PipelineDraftingDapp;
window.PipelineSubmitDapp = PipelineSubmitDapp;