---
import BaseLayout from "@/layouts/BaseLayout.astro";
import { chapters, statusLabel } from "@/data/chapters";

const totalPapers = chapters.reduce((sum, chapter) => sum + chapter.papers, 0);
const averageProgress = Math.round(chapters.reduce((sum, chapter) => sum + chapter.progress, 0) / chapters.length);

const stages = [
  { label: "A · 起点", items: ["00", "01"] },
  { label: "B · 核心架构", items: ["02", "03", "04", "05"] },
  { label: "C · 规模化", items: ["06", "07", "08", "09"] },
  { label: "D · 行为与能力", items: ["10", "11", "12", "13"] },
  { label: "E · 落地与判断", items: ["14", "15"] },
];
---

<BaseLayout
  title="完整学习地图"
  description="LLM Atlas 的 16 个专题、先修依赖、关键问题、论文规模、完成状态与四条推荐学习路径。"
  section="roadmap"
>
  <header class="page-hero">
    <div class="page-hero-inner">
      <div>
        <p class="eyebrow"><span>CURRICULUM / 00</span> LEARNING GRAPH</p>
        <h1>先知道自己在哪里，<br />再决定往哪里深入</h1>
        <p class="lead">
          16 个专题不是一条必须顺序走完的直线。它们组成有依赖的图：
          Transformer 是共同地基，MoE/长上下文/训练系统相互牵引，后训练再通向推理与 Agent。
        </p>
      </div>
      <dl class="page-facts">
        <div><dt>MODULES</dt><dd>16 个专题</dd></div>
        <div><dt>PAPER SLOTS</dt><dd>{totalPapers} 篇核心论文位</dd></div>
        <div><dt>PATHS</dt><dd>4 条推荐路径</dd></div>
        <div><dt>PROGRESS</dt><dd>首版平均 {averageProgress}%</dd></div>
        <div><dt>DEPTH</dt><dd>L0 直觉 → L3 工程</dd></div>
      </dl>
    </div>
  </header>

  <section class="section" id="graph">
    <div class="section-heading">
      <div>
        <p class="eyebrow"><span>01</span> DEPENDENCY GRAPH</p>
        <h2>从左到右，是知识依赖，不是历史年份</h2>
      </div>
      <p class="section-lead">
        一篇论文可能跨多个专题。例如 DeepSeek-V3 同时属于 MoE、训练系统、低精度和后训练；
        K3 则是几乎全部主线的汇流点。
      </p>
    </div>

    <div class="learning-graph" role="img" aria-label="LLM Atlas 专题依赖图">
      {stages.map((stage, stageIndex) => (
        <div class="graph-stage">
          <span>{stage.label}</span>
          <div>
            {stage.items.map((number) => {
              const chapter = chapters.find((item) => item.number === number)!;
              return (
                <a href={`#chapter-${number}`} class:list={{ hot: ["02", "03", "06", "07", "11"].includes(number) }}>
                  <b>{number}</b>
                  <p>{chapter.title}</p>
                </a>
              );
            })}
          </div>
          {stageIndex < stages.length - 1 && <i aria-hidden="true">→</i>}
        </div>
      ))}
    </div>

    <div class="graph-legend">
      <div><i class="base"></i><span>普通节点：专题章节</span></div>
      <div><i class="hot"></i><span>关键枢纽：被多条路径依赖</span></div>
      <div><b>→</b><span>建议先修方向</span></div>
    </div>
  </section>

  <section class="section" id="paths">
    <div class="section-heading">
      <div>
        <p class="eyebrow"><span>02</span> FOUR ROUTES</p>
        <h2>四条路径，四种不同的“读懂”</h2>
      </div>
      <p class="section-lead">路线可以交叉。每条路线的终点不是记住术语，而是具备一项可验证的阅读或设计能力。</p>
    </div>

    <div class="route-grid">
      <article>
        <span>ROUTE A · BEGINNER</span>
        <h3>从零建立架构直觉</h3>
        <p>01 → 02 → 03 → 04 → 10</p>
        <ol>
          <li>解释 next-token objective</li>
          <li>手算一次 self-attention</li>
          <li>画出 decoder block</li>
          <li>区分 pretrain 与 post-train</li>
        </ol>
      </article>
      <article>
        <span>ROUTE B · K3 REVERSE</span>
        <h3>从 47 页 K3 报告反向拆组件</h3>
        <p>K3 架构 → 07/06/03 → 05/04 → 11/12 → 08/14/15</p>
        <ol>
          <li>沿 32 张问题账解释三维信息流</li>
          <li>用 8 个实验比较 KDA、MLA、AttnRes 与 LatentMoE</li>
          <li>分清 2.78T / 104.2B、2.5× 与 1M 的证据口径</li>
          <li>读懂九专家 MOPD、AgentENV、混合缓存与评测协议</li>
        </ol>
      </article>
      <article>
        <span>ROUTE C · DEEPSEEK</span>
        <h3>沿论文看算法—系统协同</h3>
        <p>04 → 06 → 07 → 09 → 11 → 12</p>
        <ol>
          <li>推导 MLA 缓存压缩</li>
          <li>理解 FP8 scaling</li>
          <li>区分 PPO 与 GRPO</li>
          <li>对照 V4 与 K3 长上下文</li>
        </ol>
      </article>
      <article>
        <span>ROUTE D · SYSTEMS</span>
        <h3>跟一个 Token 穿过真实集群</h3>
        <p>02 → 04 → 08 → 09 → 14 → 15</p>
        <ol>
          <li>做显存与 FLOPs 账本</li>
          <li>选择并行切分</li>
          <li>理解 KV Cache 与调度</li>
          <li>设计评测 harness</li>
        </ol>
      </article>
    </div>
  </section>

  <section class="section" id="modules">
    <div class="section-heading">
      <div>
        <p class="eyebrow"><span>03</span> ALL MODULES</p>
        <h2>每个专题都有问题、先修、论文和完成标准</h2>
      </div>
      <p class="section-lead">
        “研究中”表示资料已建立但正文未完成；“首版可读”表示已有连贯解释，不代表内容已经停止迭代。
      </p>
    </div>

    <div class="module-list">
      {chapters.map((chapter) => (
        <article id={`chapter-${chapter.number}`} class="module-row">
          <div class="module-index">
            <b>{chapter.number}</b>
            <span>{chapter.kicker}</span>
          </div>
          <div class="module-main">
            <div class="module-heading">
              <h3>{chapter.title}</h3>
              <span class={`status ${chapter.status}`}>{statusLabel[chapter.status]}</span>
            </div>
            <p class="question">{chapter.question}</p>
            <p>{chapter.summary}</p>
            <div class="module-tags">
              {chapter.highlights.map((item) => <span>{item}</span>)}
            </div>
          </div>
          <aside>
            <div><span>PREREQUISITES</span><b>{chapter.prerequisites.length ? chapter.prerequisites.join(" · ") : "无"}</b></div>
            <div><span>CORE PAPERS</span><b>{chapter.papers}</b></div>
            <div><span>PROGRESS</span><b>{chapter.progress}%</b></div>
            <div class="progress-track"><span style={`width:${chapter.progress}%`}></span></div>
          </aside>
        </article>
      ))}
    </div>
  </section>

  <section class="section compact" id="standard">
    <div class="section-heading">
      <div>
        <p class="eyebrow"><span>04</span> DEFINITION OF DONE</p>
        <h2>什么时候一个专题才算真正完成</h2>
      </div>
      <p class="section-lead">完成不是“字数够长”。每个专题必须通过结构、事实、来源、教学、对照和可访问性六道闸门。</p>
    </div>
    <div class="feature-grid">
      <article class="feature-card"><span class="card-number">01</span><h3>问题链</h3><p>旧方法为何失败、新方法改变什么、怎样通向下一篇论文。</p></article>
      <article class="feature-card"><span class="card-number">02</span><h3>一手证据</h3><p>8–20 篇核心论文，数字与结论链接到原始来源。</p></article>
      <article class="feature-card"><span class="card-number">03</span><h3>视觉推导</h3><p>至少两张可缩放图和一个交互实验或逐步动画。</p></article>
      <article class="feature-card"><span class="card-number">04</span><h3>贯穿对照</h3><p>明确回答这项技术在 K3 与 DeepSeek 中怎样出现。</p></article>
    </div>
  </section>

  <style>
    .learning-graph {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      max-width: 1200px;
      border-top: 1px solid var(--line);
      border-left: 1px solid var(--line);
    }

    .graph-stage {
      position: relative;
      min-height: 440px;
      padding: 22px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .graph-stage > span {
      color: var(--muted);
      font: 0.62rem/1 var(--mono);
      letter-spacing: 0.1em;
    }

    .graph-stage > div {
      display: grid;
      gap: 12px;
      margin-top: 27px;
    }

    .graph-stage a {
      min-height: 74px;
      padding: 13px;
      border: 1px solid var(--line);
      background: var(--paper-raised);
      text-decoration: none;
    }

    .graph-stage a.hot {
      border-color: rgba(173, 100, 69, 0.5);
      background: var(--copper-pale);
    }

    .graph-stage a b {
      color: var(--copper);
      font: 0.62rem/1 var(--mono);
    }

    .graph-stage a p {
      margin-top: 9px;
      font-size: 0.75rem;
      line-height: 1.5;
    }

    .graph-stage > i {
      position: absolute;
      z-index: 2;
      top: 50%;
      right: -12px;
      display: grid;
      place-items: center;
      width: 24px;
      height: 24px;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: var(--paper);
      color: var(--muted);
      font-style: normal;
    }

    .graph-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      margin-top: 18px;
    }

    .graph-legend div {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      font-size: 0.7rem;
    }

    .graph-legend i {
      width: 14px;
      height: 14px;
      border: 1px solid var(--line-strong);
      background: var(--paper-raised);
    }

    .graph-legend i.hot {
      border-color: var(--copper);
      background: var(--copper-pale);
    }

    .route-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      max-width: 1100px;
      border-top: 1px solid var(--line);
      border-left: 1px solid var(--line);
    }

    .route-grid article {
      min-height: 330px;
      padding: 30px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .route-grid article > span,
    .module-index span,
    .module-row aside span {
      color: var(--copper);
      font: 0.62rem/1 var(--mono);
      letter-spacing: 0.1em;
    }

    .route-grid h3 {
      margin: 30px 0 15px;
      font-size: 1.4rem;
    }

    .route-grid article > p {
      color: var(--muted);
      font: 0.7rem/1.6 var(--mono);
    }

    .route-grid ol {
      display: grid;
      gap: 10px;
      margin: 25px 0 0;
      padding-left: 1.2rem;
      color: var(--muted);
      font-size: 0.8rem;
    }

    .module-list {
      max-width: 1150px;
      border-top: 1px solid var(--line);
    }

    .module-row {
      display: grid;
      grid-template-columns: 120px minmax(0, 1fr) 180px;
      gap: 32px;
      padding: 34px 8px;
      border-bottom: 1px solid var(--line);
      scroll-margin-top: 96px;
    }

    .module-index b {
      display: block;
      margin-bottom: 18px;
      color: var(--copper);
      font: 700 1.1rem/1 var(--mono);
    }

    .module-index span {
      color: var(--muted-light);
      font-size: 0.55rem;
      line-height: 1.5;
    }

    .module-heading {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 20px;
    }

    .module-heading h3 {
      font-size: 1.4rem;
    }

    .module-main > p {
      max-width: 700px;
      margin-top: 12px;
      color: var(--muted);
      font-size: 0.8rem;
      line-height: 1.72;
    }

    .module-main > p.question {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 1rem;
    }

    .module-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 18px;
    }

    .module-tags span {
      padding: 5px 8px;
      border: 1px solid var(--line);
      color: var(--muted);
      font-size: 0.64rem;
    }

    .module-row aside {
      display: grid;
      gap: 14px;
      align-content: start;
      padding-left: 22px;
      border-left: 1px solid var(--line);
    }

    .module-row aside div:not(.progress-track) {
      display: grid;
      gap: 6px;
    }

    .module-row aside span {
      color: var(--muted-light);
      font-size: 0.54rem;
    }

    .module-row aside b {
      font-size: 0.76rem;
      font-weight: 550;
    }

    @media (max-width: 900px) {
      .learning-graph {
        grid-template-columns: 1fr;
      }

      .graph-stage {
        min-height: auto;
      }

      .graph-stage > div {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .graph-stage > i {
        top: auto;
        right: 50%;
        bottom: -12px;
        transform: rotate(90deg);
      }

      .module-row {
        grid-template-columns: 70px 1fr;
      }

      .module-row aside {
        grid-column: 2;
        grid-template-columns: repeat(3, 1fr);
        padding: 20px 0 0;
        border-top: 1px solid var(--line);
        border-left: 0;
      }
    }

    @media (max-width: 650px) {
      .route-grid {
        grid-template-columns: 1fr;
      }

      .module-row {
        grid-template-columns: 1fr;
      }

      .module-row aside {
        grid-column: auto;
      }
    }
  </style>
</BaseLayout>