// System Map — bird's-eye visualization of how the dapps interconnect.

function SystemMap() {
  return (
    <Dapp>
      <ChromeBar dapp="ECOSYSTEM" code="MAP·v0.4" />
      <div style={{ flex: 1, padding: '32px 40px', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        <div style={{ marginBottom: 18 }}>
          <div style={{ fontFamily: UB.mono, fontSize: 10, letterSpacing: '0.2em', color: UB.ink3, marginBottom: 6 }}>UNBLOCK RESEARCH · ECOSYSTEM ARCHITECTURE</div>
          <h1 style={{ margin: 0, fontFamily: UB.serif, fontWeight: 400, fontSize: 36, letterSpacing: '-0.02em', lineHeight: 1.05 }}>One platform. Eleven dapps. One token.</h1>
          <div style={{ marginTop: 6, color: UB.ink3, maxWidth: 720 }}>Each surface below opens to a working interface. The Personal Dapp (UBP) is the entry point — every other dapp authenticates through it.</div>
        </div>

        <div style={{ flex: 1, display: 'grid', gridTemplateRows: 'auto auto 1fr auto', gap: 16, minHeight: 0 }}>
          {/* Application layer */}
          <Section title="APPLICATION LAYER · DAPPS">
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 10 }}>
              {[
                ['UBP', 'Personal Dapp', 'identity · workspace'],
                ['LAB', 'Open Labbook', 'collab · git for science'],
                ['PUB', 'Publication', 'review · royalties'],
                ['INST', 'Institution / Grant DAO', 'funding · milestones'],
                ['LP', 'DAO Launchpad', 'IP-tokens · vesting'],
                ['TRID', 'Trust + Reputation + Identity', 'TIS v3 · SBTs'],
                ['CMP', 'Compute Marketplace', 'GPU bidding · ZK exec'],
                ['STR', 'Decentralized Storage', 'IPFS · pay-per-query'],
                ['CHN', 'UB-Chain Explorer', 'L1 · Cerberus shards'],
                ['DAPP', 'Dapp Store', 'extensions · audited'],
              ].map(([id, n, sub]) => (
                <div key={id} style={{ border: `1px solid ${UB.rule}`, padding: 10, background: id === 'UBP' ? UB.ink : '#fff', color: id === 'UBP' ? UB.paper : UB.ink }}>
                  <div style={{ fontFamily: UB.mono, fontSize: 10, color: id === 'UBP' ? UB.accent : UB.accent, letterSpacing: '0.1em', marginBottom: 4 }}>{id}</div>
                  <div style={{ fontWeight: 600, fontSize: 12, marginBottom: 2 }}>{n}</div>
                  <div style={{ fontFamily: UB.mono, fontSize: 9, color: id === 'UBP' ? '#A8A7A0' : UB.ink3, letterSpacing: '0.04em' }}>{sub}</div>
                </div>
              ))}
            </div>
          </Section>

          <Section title="PROTOCOL LAYER · IDENTITY × VALUE × DATA">
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
              {[
                ['DID + ZKP + SBT', 'Decentralized identifiers, zero-knowledge proofs, soulbound tokens.'],
                ['UBR token', 'Utility + governance. Fees, bounties, royalties, staking.'],
                ['Smart contracts', 'Royalty splits, vesting, milestones, repro pools — auto-executed.'],
              ].map(([k, v]) => (
                <div key={k} style={{ border: `1px solid ${UB.rule2}`, padding: 12, background: UB.paperDeep }}>
                  <div style={{ fontFamily: UB.mono, fontSize: 11, fontWeight: 600, marginBottom: 4 }}>{k}</div>
                  <div style={{ fontSize: 11, color: UB.ink2, lineHeight: 1.4 }}>{v}</div>
                </div>
              ))}
            </div>
          </Section>

          <Section title="INFRASTRUCTURE · UB-CHAIN L1" flex>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 10, height: '100%' }}>
              {[
                ['CONSENSUS', 'Cerberus BFT · 8 shards · 500 ms blocks · 980 ms finality'],
                ['EXECUTION', 'Custom EVM · optimistic parallel · async I/O · 100K+ TPS'],
                ['COMPUTE NODES', 'GPU/CPU · ZK-verified · spot market + reserved tiers'],
                ['STORAGE NODES', 'IPFS clusters · encrypted shards · FAIR-compliant'],
              ].map(([k, v]) => (
                <div key={k} style={{ border: `1px solid ${UB.rule}`, padding: 14, background: UB.ink, color: UB.paper, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                  <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.accent, letterSpacing: '0.14em' }}>{k}</div>
                  <div style={{ fontSize: 11, lineHeight: 1.45, color: '#D9D8D2' }}>{v}</div>
                </div>
              ))}
            </div>
          </Section>

          {/* Footer note */}
          <div style={{ borderTop: `1px solid ${UB.rule2}`, paddingTop: 10, fontFamily: UB.mono, fontSize: 10, color: UB.ink3, letterSpacing: '0.1em', display: 'flex', justifyContent: 'space-between' }}>
            <span>↳ DRAG BELOW TO REORDER ARTBOARDS · CLICK A LABEL TO FOCUS FULLSCREEN · ESC TO RETURN</span>
            <span>UNBLOCK RESEARCH ALLIANCE · v0.4 · 2026</span>
          </div>
        </div>
      </div>
    </Dapp>
  );
}

function Section({ title, children, flex }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8, minHeight: 0, ...(flex ? { flex: 1 } : {}) }}>
      <div style={{ fontFamily: UB.mono, fontSize: 9, letterSpacing: '0.22em', color: UB.ink3 }}>{title}</div>
      <div style={flex ? { flex: 1, minHeight: 0 } : null}>{children}</div>
    </div>
  );
}

window.SystemMap = SystemMap;