<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>PLAI Chain Listing Materials</title>
  <link rel="icon" type="image/png" href="/images/plai-symbol-mark-v1.png" />
  <link rel="apple-touch-icon" sizes="180x180" href="/images/plai-icon-180.png" />
  <link rel="manifest" href="/site.webmanifest" />
  <meta name="theme-color" content="#087b73" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-title" content="PLAI Chain" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      color: #07111f;
      background: #eef5f8;
      font-family: Arial, "Noto Sans KR", sans-serif;
      letter-spacing: 0;
    }
    a { color: inherit; text-decoration: none; }
    .hero {
      color: #fff;
      background: linear-gradient(135deg, #087b73 0%, #1f65d9 68%, #253fb0 100%);
      padding: 34px 0 48px;
    }
    .wrap {
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
    }
    .nav {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      margin-bottom: 34px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 22px;
      font-weight: 900;
    }
    .brand-symbol {
      width: 42px;
      height: 42px;
      border-radius: 9px;
      border: 1px solid rgba(255,255,255,.3);
      object-fit: cover;
      flex: 0 0 auto;
    }
    .actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 10px 15px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,.28);
      background: rgba(255,255,255,.12);
      color: #fff;
      font-weight: 900;
    }
    .btn.primary {
      background: #fff;
      color: #07111f;
      border-color: #fff;
    }
    .btn.dark {
      background: #07111f;
      color: #fff;
      border-color: #07111f;
    }
    h1 {
      margin: 0;
      max-width: 960px;
      font-size: clamp(34px, 5vw, 58px);
      line-height: 1.08;
      font-weight: 950;
    }
    .lead {
      max-width: 860px;
      margin: 16px 0 0;
      color: #dff7ff;
      font-size: 18px;
      line-height: 1.62;
      font-weight: 700;
    }
    .hero-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-top: 26px;
    }
    .hero-stat {
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 8px;
      padding: 14px;
      background: rgba(0,0,0,.16);
    }
    .hero-stat span {
      display: block;
      color: #bdeeff;
      font-size: 13px;
      font-weight: 800;
    }
    .hero-stat strong {
      display: block;
      margin-top: 6px;
      font-size: 24px;
      word-break: break-word;
    }
    main { padding: 26px 0 58px; }
    .grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(330px, .46fr);
      gap: 14px;
      align-items: start;
    }
    .panel {
      border: 1px solid #d8e3ee;
      background: #fff;
      border-radius: 8px;
      padding: 20px;
    }
    .panel h2 {
      margin: 0 0 12px;
      font-size: 24px;
      line-height: 1.2;
    }
    .panel h3 {
      margin: 0 0 8px;
      font-size: 17px;
    }
    .panel p,
    .panel li {
      color: #506178;
      line-height: 1.62;
      font-size: 15px;
    }
    .section { margin-top: 14px; }
    .two-col {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }
    .three-col {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }
    .card {
      border: 1px solid #d8e3ee;
      border-radius: 8px;
      background: #fbfdff;
      padding: 16px;
      min-height: 126px;
    }
    .card small {
      display: block;
      color: #00796b;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .04em;
    }
    .card strong {
      display: block;
      margin-top: 8px;
      font-size: 25px;
      word-break: break-word;
    }
    .side {
      background: #071421;
      color: #fff;
      border-color: #071421;
      position: sticky;
      top: 16px;
    }
    .side p,
    .side li {
      color: #bfd0e2;
    }
    .side .btn {
      width: 100%;
      margin-top: 10px;
    }
    .tag {
      display: inline-flex;
      width: fit-content;
      align-items: center;
      border-radius: 999px;
      padding: 5px 9px;
      background: #dffaf0;
      color: #006b57;
      font-size: 12px;
      font-weight: 900;
    }
    .warning {
      border-color: #e4bd49;
      background: #fff8db;
    }
    .warning p,
    .warning li {
      color: #6f4e00;
      font-weight: 700;
    }
    .roadmap {
      display: grid;
      gap: 10px;
    }
    .roadmap-row {
      display: grid;
      grid-template-columns: 150px 1fr;
      gap: 12px;
      border: 1px solid #d8e3ee;
      border-radius: 8px;
      background: #fbfdff;
      padding: 14px;
    }
    .link-list {
      display: grid;
      gap: 10px;
    }
    .link-list a {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 8px;
      padding: 12px;
      color: #fff;
      background: rgba(255,255,255,.06);
      font-weight: 900;
    }
    .link-list span {
      color: #9fc0d8;
      font-weight: 700;
      text-align: right;
    }
    code {
      background: #eef5f8;
      border: 1px solid #d8e3ee;
      border-radius: 6px;
      padding: 2px 6px;
      color: #0f513e;
      word-break: break-word;
    }
    .muted {
      color: #617188;
      font-size: 13px;
      line-height: 1.55;
    }
    @media (max-width: 900px) {
      .nav { align-items: flex-start; flex-direction: column; }
      .actions { justify-content: flex-start; }
      .grid,
      .two-col,
      .three-col,
      .hero-grid { grid-template-columns: 1fr; }
      .side { position: static; }
      .roadmap-row { grid-template-columns: 1fr; }
    }
  </style>
</head>
<body>
  <%
    const manifest = sourceManifest || {};
    const hasSource = !!manifest.ok;
    const sourceVersion = hasSource ? manifest.version : '-';
    const sourceSha = hasSource ? manifest.sha256 : '-';
    const sourceFileCount = hasSource ? Number(manifest.fileCount || 0).toLocaleString('ko-KR') : '0';
    const sourceDate = hasSource && manifest.generatedAt ? new Date(manifest.generatedAt).toLocaleString('ko-KR', { timeZone: 'Asia/Seoul' }) : '-';
    const rewardNet = formatNumber(rewardSummary?.net || 0, 2);
    const rewardCount = Number(rewardSummary?.count || 0).toLocaleString('ko-KR');
  %>
  <section class="hero">
    <div class="wrap">
      <div class="nav">
        <a class="brand" href="/listing"><img class="brand-symbol" src="/images/plai-symbol-mark-v1.png" alt="PLAI Chain symbol" />PLAI Chain Listing Materials</a>
        <div class="actions">
          <a class="btn" href="/">Chain Home</a>
          <a class="btn" href="/explorer">Explorer</a>
          <a class="btn" href="/source">Source</a>
          <a class="btn" href="/whitepaper/ko">백서</a>
          <a class="btn" href="https://aisfor.kr/home">PLAIFOR 홈</a>
        </div>
      </div>
      <h1>상장 심사와 외부 검토를 위한 PLAI Chain 공식 자료 허브입니다.</h1>
      <p class="lead">
        프로젝트 개요, 코인 정책, 보상 구조, 노드 운영, 공개 소스, Explorer 원장, 백서와 로드맵을 한 곳에서 확인할 수 있게 정리했습니다.
      </p>
      <div class="hero-grid">
        <div class="hero-stat"><span>네트워크</span><strong><%= isMainnet ? 'Mainnet' : 'Testnet' %></strong></div>
        <div class="hero-stat"><span>심볼</span><strong><%= symbol %></strong></div>
        <div class="hero-stat"><span>체인 검증</span><strong><%= chainStatus %></strong></div>
        <div class="hero-stat"><span>준비도</span><strong><%= readinessScore %>%</strong></div>
      </div>
    </div>
  </section>

  <main>
    <div class="wrap grid">
      <div>
        <section class="panel">
          <span class="tag">Project Summary</span>
          <h2 style="margin-top:12px;">프로젝트 개요</h2>
          <p>
            PLAI Chain은 PLAIFOR 생태계의 앱 사용 active 보상, 분산 저장 보상, 노드 active 보상, 감점/정정 기록을
            지갑, 블록, 증명 원장으로 추적하는 AI 서비스형 블록체인입니다.
          </p>
          <div class="three-col">
            <div class="card"><small>Chain</small><strong><%= chainName %></strong><p><%= networkId %></p></div>
            <div class="card"><small>Total Supply</small><strong><%= totalSupply %> <%= symbol %></strong><p>정책 기준 최대 공급량</p></div>
            <div class="card"><small>Address Prefix</small><strong><%= addressPrefix %></strong><p>지갑 주소 접두어</p></div>
          </div>
        </section>

        <section class="panel section">
          <h2>코인/원장 정책</h2>
          <div class="two-col">
            <div class="card">
              <h3>발행과 전환</h3>
              <p>
                테스트넷에서는 보상과 전환 흐름을 시뮬레이션 원장으로 운영하며, 메인넷 전환 시 정책 확정 후 실제 코인 원장으로 이어질 수 있게 설계합니다.
              </p>
            </div>
            <div class="card">
              <h3>PLAI Point 전환</h3>
              <p>
                사용자 포인트는 현재 <code>1,000P = 1 PLAI</code> 기준으로 전환 신청할 수 있고, 자동 승인 정책으로 지갑 반영 흐름을 검증합니다.
              </p>
            </div>
          </div>
        </section>

        <section class="panel section">
          <h2>보상 구조</h2>
          <div class="three-col">
            <div class="card"><small>App Active</small><strong>앱 활동 보상</strong><p>메모, 녹음, 클라우드, AI펫 성장 등 사용자 활동 기록</p></div>
            <div class="card"><small>Storage</small><strong>분산 저장 보상</strong><p>저장소 제공, chunk 저장/검증, 용량 제공 보상</p></div>
            <div class="card"><small>Node Active</small><strong>노드 운영 보상</strong><p>PC 노드 온라인 유지와 네트워크 기여 기록</p></div>
          </div>
          <p class="muted">현재 Explorer 기준 순 보상 <strong><%= rewardNet %> <%= symbol %></strong>, 원장 기록 <strong><%= rewardCount %>건</strong>을 추적 중입니다.</p>
        </section>

        <section class="panel section">
          <h2>운영 지표</h2>
          <div class="three-col">
            <div class="card"><small>Latest Block</small><strong>#<%= latestHeight %></strong><p>최근 블록 높이</p></div>
            <div class="card"><small>Wallets</small><strong><%= walletCount %></strong><p>체인 지갑 수</p></div>
            <div class="card"><small>Nodes</small><strong><%= onlineNodeCount %>/<%= nodeCount %></strong><p>온라인 노드 / 전체 노드</p></div>
            <div class="card"><small>Validators</small><strong><%= validatorCount %></strong><p>검증자 / 노드</p></div>
            <div class="card"><small>Finalized</small><strong><%= finalizedBlocks %></strong><p>확정 블록</p></div>
            <div class="card"><small>Circulating</small><strong><%= circulating %> <%= symbol %></strong><p>지갑 원장 기준 유통량</p></div>
          </div>
        </section>

        <section class="panel section">
          <h2>투명성 자료</h2>
          <div class="two-col">
            <div class="card">
              <h3>공개 소스</h3>
              <p>민감정보 제거 후 공개 ZIP, 버전 기록, 파일 인덱스, SHA256 검증값을 제공합니다.</p>
              <p class="muted">최신 버전 <%= sourceVersion %> · 파일 <%= sourceFileCount %>개 · 생성 <%= sourceDate %></p>
              <code><%= sourceSha %></code>
            </div>
            <div class="card">
              <h3>Explorer 원장</h3>
              <p>보상, 감점, 지갑, 블록, Proof 흐름을 직접 조회할 수 있습니다.</p>
              <p class="muted">검색 가능한 항목: 주소, txHash, 블록 높이/hash, proof id/hash</p>
            </div>
          </div>
        </section>

        <section class="panel section">
          <h2>로드맵</h2>
          <div class="roadmap">
            <div class="roadmap-row"><span class="tag">현재</span><div><h3>테스트넷 운영</h3><p>앱 활동, 저장소, 노드 보상과 지갑 전환 흐름을 검증합니다.</p></div></div>
            <div class="roadmap-row"><span class="tag">준비</span><div><h3>메인넷 전환 기준 확정</h3><p>총 공급량, 전환 비율, 보상 정책, 운영/보안 기준을 문서화합니다.</p></div></div>
            <div class="roadmap-row"><span class="tag">다음</span><div><h3>상장 심사 자료 패키지</h3><p>백서, 소스 공개, Explorer, 노드 운영 자료를 하나의 공식 검토 자료로 정리합니다.</p></div></div>
          </div>
        </section>

        <section class="panel section warning">
          <h2>심사 자료 사용 안내</h2>
          <p>
            이 페이지는 상장 보장을 의미하지 않습니다. 다만 외부 검토자가 프로젝트의 실제 운영 상태, 공개 소스, 백서, Explorer 원장을 확인할 수 있는
            공식 근거 자료로 사용할 수 있습니다.
          </p>
        </section>
      </div>

      <aside class="panel side">
        <h2>심사 자료 링크</h2>
        <p>외부 검토자가 가장 먼저 확인해야 할 핵심 자료입니다.</p>
        <div class="link-list">
          <a href="/whitepaper/ko">Whitepaper <span>정책/구조</span></a>
          <a href="/source">Source <span>공개 소스</span></a>
          <a href="/explorer">Explorer <span>원장 검증</span></a>
          <a href="/status">Status <span>운영 상태</span></a>
          <a href="https://aisfor.kr/points">PLAI Point <span>사용자 보상</span></a>
          <a href="https://aisfor.kr/sync-client/pool">Node Pool <span>저장 노드</span></a>
        </div>
        <a class="btn primary" href="/source">공개 소스 확인</a>
        <a class="btn" href="/explorer">원장 검증 열기</a>
      </aside>
    </div>
  </main>
</body>
</html>
