// Research DAO Launchpad — IP-token issuance, project funding rounds, vesting.

function LaunchpadDapp() {
  const sidebar = (
    <>
      <NavGroup label="Discover">
        <NavItem icon={Icon.rocket} label="Live rounds" badge="14" active />
        <NavItem icon={Icon.flask} label="Upcoming" badge="6" />
        <NavItem icon={Icon.check} label="Closed" />
      </NavGroup>
      <NavGroup label="My positions">
        <NavItem icon={Icon.cube} label="Holdings" badge="9" />
        <NavItem icon={Icon.bank} label="Vesting" />
        <NavItem icon={Icon.doc} label="IP-NFTs" badge="3" />
      </NavGroup>
      <NavGroup label="Issue">
        <NavItem icon={Icon.plus} label="New project" />
      </NavGroup>
    </>
  );

  const projects = [
    { id: 'PROT', name: 'Protea — open protein folding', desc: 'Distributed protein structure prediction trained on 14M open sequences.', tag: 'BIO·ML', raised: 0.78, target: '1.2M', tis: 87, days: '3d 4h', tone: 'accent' },
    { id: 'CRYO', name: 'CryoLayer Cooperative', desc: 'A self-governing cryopreservation co-op for biosamples & DNA archives.', tag: 'BIOTECH', raised: 0.41, target: '800K', tis: 79, days: '6d', tone: 'info' },
    { id: 'ASTR', name: 'AstroGate sleep atlas', desc: 'Multi-lab atlas linking astrocyte signaling to sleep states.', tag: 'NEURO', raised: 0.92, target: '600K', tis: 84, days: '12h', tone: 'warn' },
    { id: 'CLIM', name: 'ClimateNote · open eddy data', desc: 'On-chain ingestion of distributed flux towers, paid by access.', tag: 'CLIMATE', raised: 0.34, target: '2.0M', tis: 81, days: '14d', tone: 'default' },
    { id: 'PSYC', name: 'PsycRepro cohort', desc: 'A standing rapid-reproduction lab funded by token & access fees.', tag: 'META-SCI', raised: 0.62, target: '420K', tis: 88, days: '8d', tone: 'accent' },
    { id: 'DRUG', name: 'Off-patent reformulation DAO', desc: 'Public-domain drug reformulation pipeline, royalty-shared.', tag: 'PHARMA', raised: 0.20, target: '3.6M', tis: 76, days: '21d', tone: 'default' },
  ];

  return (
    <Dapp>
      <ChromeBar dapp="LAUNCHPAD" code="DAO·LAB" />
      <Layout rail={sidebar}>
        <PageHead
          eyebrow="Research DAO Launchpad"
          title="Live funding rounds"
          sub="Issue and trade research-backed tokens. Vesting unlocks against on-chain milestones — never against marketing."
          actions={<>
            <Btn small icon={Icon.search}>Filter by field</Btn>
            <Btn small primary icon={Icon.plus}>List a project</Btn>
          </>}
        />

        <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
          {projects.map(p => (
            <div key={p.id} style={{
              border: `1px solid ${UB.rule2}`, background: '#fff',
              display: 'flex', flexDirection: 'column',
            }}>
              <div style={{ padding: 16, borderBottom: `1px solid ${UB.rule3}` }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8, marginBottom: 10 }}>
                  <div style={{
                    width: 44, height: 44, background: UB.ink, color: UB.paper,
                    fontFamily: UB.mono, fontSize: 11, fontWeight: 600,
                    display: 'flex', alignItems: 'center', justifyContent: 'center', letterSpacing: '0.05em',
                  }}>{p.id}</div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'flex-end' }}>
                    <Tag tone={p.tone}>{p.tag}</Tag>
                    <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>closes {p.days}</span>
                  </div>
                </div>
                <div style={{ fontFamily: UB.serif, fontSize: 20, lineHeight: 1.15, marginBottom: 6 }}>{p.name}</div>
                <div style={{ fontSize: 11, color: UB.ink3, lineHeight: 1.5 }}>{p.desc}</div>
              </div>
              <div style={{ padding: '14px 16px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: UB.mono, fontSize: 10, color: UB.ink3, marginBottom: 4, letterSpacing: '0.08em' }}>
                  <span>RAISED {Math.round(p.raised * 100)}%</span>
                  <span>TARGET {p.target} UBR</span>
                </div>
                <div style={{ height: 4, background: UB.paperDeep, position: 'relative', marginBottom: 12 }}>
                  <div style={{ position: 'absolute', inset: 0, width: `${p.raised * 100}%`, background: UB.accent }} />
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginBottom: 12 }}>
                  <Stat label="Lead TIS" value={p.tis} />
                  <Stat label="Vesting" value="36mo" mono />
                  <Stat label="Royalty" value="14%" mono />
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
                  <Btn small>Read brief</Btn>
                  <Btn small primary icon={Icon.arrow}>Stake</Btn>
                </div>
              </div>
            </div>
          ))}
        </div>
      </Layout>
    </Dapp>
  );
}

window.LaunchpadDapp = LaunchpadDapp;