// 使用說明 — 玩家操作手冊（靜態內容頁）
(() => {
const { Panel, Badge, SectionTitle } = window.WCATalentGameDesignSystem_377d00;

const H = ({ children }) => (
  <div style={{ color: "var(--gold-300)", fontWeight: 700, fontSize: 14, letterSpacing: ".08em", margin: "14px 0 6px" }}>{children}</div>
);
const P = ({ children }) => (
  <div style={{ color: "var(--text-secondary)", fontSize: 13.5, lineHeight: 1.8, marginBottom: 8 }}>{children}</div>
);
const Kbd = ({ children }) => (
  <span style={{ border: "1px solid rgba(212,175,55,.35)", borderRadius: 4, padding: "1px 6px", fontSize: 12, color: "var(--gold-300)", whiteSpace: "nowrap" }}>{children}</span>
);

const AI_TASKS = [
  { name: "快速解釋", cost: "約 1%", when: "隨時", desc: "選一個知識卡名詞，AI 用牙科情境白話解釋給你聽。" },
  { name: "完整度檢查", cost: "約 2%", when: "隨時", desc: "檢查本關欄位還缺什麼、哪裡寫得太籠統。" },
  { name: "蘇格拉底追問", cost: "3–4%", when: "隨時", desc: "AI 不給答案，只丟關鍵問題逼你想得更深。" },
  { name: "結構化整理", cost: "12–18%", when: "必填過半", desc: "把你零散的輸入整理成有條理的草稿，可逐段採納。" },
  { name: "反方挑戰", cost: "8–12%", when: "必填過半", desc: "AI 扮演唱反調的投資人，攻擊你論述的弱點。" },
  { name: "下一步建議", cost: "8–15%", when: "必填過半", desc: "根據目前進度，建議下一步最該驗證或補強的事。" },
  { name: "跨關卡一致性檢查", cost: "9–12%", when: "≥3 關過半", desc: "檢查各關內容有沒有互相矛盾（例如客群和定價對不上）。" },
  { name: "Pitch 組裝", cost: "10–15%", when: "≥4 關過半", desc: "把前面關卡的成果組裝成 Pitch 大綱草稿（第 9 關與 Pitch 組裝台限定）。" },
];

const PAGES = [
  { name: "戰情總覽", en: "COMMAND", desc: "隊伍儀表板：各關進度、AI 能量核心狀態、WCA 軍餉餘額、提交狀態，一眼掌握全局。" },
  { name: "創業地圖", en: "MAP", desc: "10 關的地圖總覽，點任一關直接進入該關工作區。" },
  { name: "關卡工作區", en: "QUESTS", desc: "主戰場：讀知識卡、填欄位、召喚 AI 教練都在這裡。" },
  { name: "能量與軍餉", en: "SUPPLY", desc: "查看每顆能量核心的剩餘量、WCA 帳本明細、AI 出擊紀錄；能量耗盡時在這裡購買新核心。" },
  { name: "Pitch 組裝台", en: "FINAL", desc: "終點站：預覽 Pitch 大綱、AI 組裝、產生評審連結、最終提交鎖定。" },
];

function Guide() {
  return (
    <div style={{ maxWidth: 860 }}>
      <SectionTitle eyebrow="FIELD MANUAL" align="left" size="h2" subtitle="五分鐘看懂怎麼玩">使用說明</SectionTitle>

      <div style={{ display: "grid", gap: 16, marginTop: 18 }}>

        <Panel header="快速上手：三步開戰">
          <P><Kbd>1</Kbd>　從「創業地圖」或「關卡工作區」進入 <b>第 0 關・戰場盤點</b>，依序往後打。每一關左欄有知識卡與好壞範例，先讀再填。</P>
          <P><Kbd>2</Kbd>　卡住就召喚右欄的 <b>AI 教練</b>——它消耗「AI 能量」，省著用、用在刀口上。</P>
          <P><Kbd>3</Kbd>　十關的成果最後在 <b>Pitch 組裝台</b> 組成 Pitch 大綱，按「最終提交 · 鎖定」交卷，評審看到的就是那一版。</P>
        </Panel>

        <Panel header="五個頁面在幹嘛">
          {PAGES.map((p) => (
            <div key={p.name} style={{ display: "flex", gap: 12, padding: "8px 0", borderBottom: "1px solid rgba(212,175,55,.1)", alignItems: "baseline" }}>
              <span style={{ minWidth: 108, color: "var(--gold-300)", fontWeight: 700, fontSize: 13.5 }}>{p.name}</span>
              <span style={{ color: "var(--text-secondary)", fontSize: 13, lineHeight: 1.7 }}>{p.desc}</span>
            </div>
          ))}
        </Panel>

        <Panel header="關卡工作區怎麼用">
          <H>三個區域（手機版為「學習／填寫／AI 教練」三個分頁）</H>
          <P><b>左欄・學習</b>：本關任務、知識卡（可折疊）、好與壞的範例、完成標準。範例都用牙科診所情境，先看再動筆。</P>
          <P><b>中欄・填寫</b>：輸入工作區，標示「必填 X/Y」。內容<b>每 1.2 秒自動儲存</b>，不用按存檔，換頁也不會丟。第 5 關（商業模式）額外有「商業模式九宮格 · 即時畫布」，邊填邊看 BMC 成形。</P>
          <P><b>右欄・AI 教練</b>：能量條、AI 任務按鈕、本關 AI 對話紀錄。AI 給的草稿可以「採納（覆蓋）」或「附加在後」寫進欄位。</P>
          <H>事實標記</H>
          <P>部分欄位要標注內容性質：<Badge tone="gold" size="sm">事實為主</Badge>　<Badge tone="neutral" size="sm">含假設</Badge>　<Badge tone="neutral" size="sm">待驗證</Badge>——誠實標記，評審看的是你驗證假設的能力，不是編故事的能力。</P>
        </Panel>

        <Panel header="AI 教練：8 種任務">
          <P>輕量任務隨時可用；重量任務要求你先自己填到一定程度——AI 是教練，不是槍手。「消耗」為一顆能量核心的大約百分比。</P>
          <div style={{ overflowX: "auto" }}>
            <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12.5 }}>
              <thead>
                <tr style={{ color: "var(--gold-300)", textAlign: "left" }}>
                  <th style={{ padding: "6px 8px" }}>任務</th>
                  <th style={{ padding: "6px 8px" }}>消耗</th>
                  <th style={{ padding: "6px 8px" }}>解鎖條件</th>
                  <th style={{ padding: "6px 8px" }}>做什麼</th>
                </tr>
              </thead>
              <tbody>
                {AI_TASKS.map((t) => (
                  <tr key={t.name} style={{ borderTop: "1px solid rgba(212,175,55,.1)", color: "var(--text-secondary)" }}>
                    <td style={{ padding: "6px 8px", color: "var(--gold-300)", whiteSpace: "nowrap" }}>{t.name}</td>
                    <td style={{ padding: "6px 8px", whiteSpace: "nowrap" }}>{t.cost}</td>
                    <td style={{ padding: "6px 8px", whiteSpace: "nowrap" }}>{t.when}</td>
                    <td style={{ padding: "6px 8px", lineHeight: 1.6 }}>{t.desc}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Panel>

        <Panel header="能量核心與 WCA 軍餉">
          <P><b>AI 能量核心</b>：每次召喚 AI 都會依實際用量扣能量。核心耗盡時 AI 會鎖定，顯示「能量耗盡 · AI 已鎖定」。</P>
          <P><b>WCA Token（軍餉）</b>：隊伍的獎勵貨幣，唯一用途是購買新的能量核心。到「能量與軍餉」頁按「購買新核心」即可續命；價格與剩餘量以該頁顯示為準。</P>
          <P style={{ color: "var(--text-muted)" }}>省能量心法：先用便宜的「完整度檢查」確認方向，自己填到過半，再上重量級任務——比一開始就狂按有效得多。</P>
        </Panel>

        <Panel header="最終提交與鎖定">
          <P><Kbd>提交</Kbd>　在 Pitch 組裝台按「最終提交 · 鎖定」後，<b>全部十關變成唯讀</b>，評審連結看到的就是這一版快照。</P>
          <P><Kbd>反悔</Kbd>　還想改？按「重新開啟（須留原因）」解鎖——原因會留紀錄給評審與管理員看，請想清楚再提交。</P>
          <P><Kbd>評審連結</Kbd>　Pitch 組裝台可產生唯讀分享連結，不用登入就能看你們的成果；提交前分享出去的連結會顯示即時進度。</P>
        </Panel>

        <Panel header="常見問題">
          <H>Q：內容要按存檔嗎？</H>
          <P>不用，自動儲存。看到欄位旁的儲存提示就代表已存。</P>
          <H>Q：AI 按鈕怎麼按不了？</H>
          <P>三種可能：① 能量耗盡（去能量頁買新核心）；② 該任務有解鎖條件還沒達成（見上表）；③ 已最終提交鎖定（去 Pitch 組裝台重新開啟）。</P>
          <H>Q：AI 給的內容可以直接用嗎？</H>
          <P>AI 產出是草稿，採納前先確認符合你們的真實情況——評審分得出來哪些是隊伍的思考、哪些是 AI 的通用套話。</P>
          <H>Q：手機能玩嗎？</H>
          <P>可以，關卡頁會變成「學習／填寫／AI 教練」三個分頁；大量填寫仍建議用電腦。</P>
        </Panel>

      </div>
    </div>
  );
}

window.Guide = Guide;
})();
