// Dapp Store — third-party modules for the Personal Dapp.

function StoreDapp() {
  const sidebar = (
    <>
      <NavGroup label="Discover">
        <NavItem icon={Icon.store} label="All apps" active />
        <NavItem icon={Icon.cube} label="AI assistants" />
        <NavItem icon={Icon.flask} label="Lab tools" />
        <NavItem icon={Icon.bank} label="Funding" />
        <NavItem icon={Icon.shield} label="Security" />
        <NavItem icon={Icon.doc} label="Writing" />
      </NavGroup>
      <NavGroup label="Library">
        <NavItem icon={Icon.check} label="Installed" badge="6" />
        <NavItem icon={Icon.bell} label="Updates" badge="2" />
      </NavGroup>
      <NavGroup label="Build">
        <NavItem icon={Icon.plus} label="Publish a dapp" />
      </NavGroup>
    </>
  );

  const apps = [
    { id: 'AI', n: 'Twin · AI Co-Author', cat: 'AI ASSIST', desc: 'A digital scientist trained on your notebooks. Pre-reviews drafts, surfaces relevant prior art, drafts methods sections.', dl: '8.4K', rating: 4.8, price: '20 UBR/mo', tone: 'accent' },
    { id: 'PF', n: 'ProteinFold Suite', cat: 'BIO·ML', desc: 'On-chain AlphaFold-class structure prediction with ZK-verified inference and citation auto-attribution.', dl: '14.1K', rating: 4.9, price: 'pay/run', tone: 'info' },
    { id: 'CZ', n: 'CitationZoom', cat: 'ANALYTICS', desc: 'Live citation graph + altmetric tracker for any dPID. Shows downstream replications and refutations.', dl: '6.0K', rating: 4.6, price: 'free', tone: 'ok' },
    { id: 'WT', n: 'Writing Workbench', cat: 'WRITING', desc: 'Multi-author Markdown + LaTeX with on-chain CRediT attribution and git-style history of every paragraph.', dl: '4.2K', rating: 4.5, price: '8 UBR/mo', tone: 'default' },
    { id: 'GR', n: 'GrantRadar', cat: 'FUNDING', desc: 'Watches all grant DAOs and conventional foundations. Notifies on calls aligned with your TRID profile.', dl: '11.3K', rating: 4.7, price: 'free', tone: 'ok' },
    { id: 'ZK', n: 'ZK Vault', cat: 'SECURITY', desc: 'Hardware-backed local enclave for keys + zero-knowledge proof generation. Recovery via social shards.', dl: '2.1K', rating: 4.9, price: '40 UBR', tone: 'warn' },
    { id: 'LB', n: 'OpenLab Connect', cat: 'LAB TOOLS', desc: 'Bridge to physical lab equipment — auto-logs runs, instruments and reagents into your active notebook.', dl: '1.8K', rating: 4.4, price: 'pay/run', tone: 'info' },
    { id: 'IM', n: 'IRB Manifold', cat: 'COMPLIANCE', desc: 'Verifiable IRB / ethics packet generation across jurisdictions, signed with institution SBTs.', dl: '0.9K', rating: 4.6, price: '12 UBR/mo', tone: 'default' },
    { id: 'TR', n: 'TransLater', cat: 'WRITING', desc: 'Bounty-driven multilingual translation of your published work. Translators paid from access fees.', dl: '3.4K', rating: 4.3, price: 'free', tone: 'ok' },
  ];

  return (
    <Dapp>
      <ChromeBar dapp="DAPP STORE" code="UBP·EXT" />
      <Layout rail={sidebar}>
        <PageHead
          eyebrow="Dapp Store · 412 modules · all open-source / audited"
          title="Extend your researcher OS"
          sub="Every dapp is a smart contract. Permissions are explicit, payments are on-chain, code is signed by its publisher."
          actions={<>
            <Btn small icon={Icon.search}>Search</Btn>
            <Btn small primary>Publish a dapp</Btn>
          </>}
        />

        <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
          {apps.map(a => (
            <div key={a.id} style={{ border: `1px solid ${UB.rule2}`, background: '#fff', display: 'flex', flexDirection: 'column' }}>
              <div style={{ padding: 14, borderBottom: `1px solid ${UB.rule3}`, display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                <div style={{ width: 44, height: 44, background: UB.paperDeep, border: `1px solid ${UB.rule}`, fontFamily: UB.mono, fontSize: 13, fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{a.id}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', gap: 6, marginBottom: 2 }}>
                    <span style={{ fontWeight: 600, fontSize: 13 }}>{a.n}</span>
                    <Tag tone={a.tone}>{a.cat}</Tag>
                  </div>
                  <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>★ {a.rating} · {a.dl} installs</div>
                </div>
              </div>
              <div style={{ padding: 14, flex: 1, display: 'flex', flexDirection: 'column' }}>
                <div style={{ fontSize: 12, color: UB.ink2, lineHeight: 1.5, marginBottom: 14, flex: 1 }}>{a.desc}</div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span style={{ fontFamily: UB.mono, fontSize: 11, color: UB.ink2 }}>{a.price}</span>
                  <Btn small primary>Install</Btn>
                </div>
              </div>
            </div>
          ))}
        </div>
      </Layout>
    </Dapp>
  );
}

window.StoreDapp = StoreDapp;