// ============================================================
// How To Use — orientation page for designers + PM colleagues
// ============================================================

window.HowToUse = function HowToUse() {
  return (
    <div className="constraints">
      <div className="constraints__head">
        <div className="constraints__crumbs">📌 必讀 · 開始之前</div>
        <h1 className="constraints__title">如何使用這份 prototype</h1>
        <p className="constraints__lede">
          這是 finfo LINE AI 助手回覆訊息的 wireframe，用來在開設計稿之前先收斂「卡片要呈現哪些資訊、按下去會發生什麼事」。<br/>
          <strong>這份文件還沒進入視覺設計階段</strong> — 排版、配色、間距都是 PM 暫定。請依角色分階段給回饋。
        </p>
      </div>

      <div className="constraints__body">

        {/* ============================================================ */}
        <section className="constraints__section">
          <h2>🧑‍💼 其他同事</h2>
          <p className="constraints__intro">
            優先回饋 <strong>功能面</strong>：
          </p>
          <ul style={{ marginLeft: 20, lineHeight: 1.8, color: 'var(--panel-fg)' }}>
            <li><strong>欄位的增減</strong> — 哪些資訊應該出現 / 不該出現？（例：保戶卡是否要顯示電話末 4 碼？）</li>
            <li><strong>互動 spec</strong> — 按鈕點下去會發生什麼事？目前的行為對嗎？（例：「保單內容」應該開網頁還是 bot 回訊息？）</li>
            <li><strong>資訊密度</strong> — 一張卡塞太多 / 太少？業務員實際使用會不會看不下去？</li>
            <li><strong>情境覆蓋</strong> — 有沒有遺漏的使用情境（例：保單 status、空狀態、錯誤情境）？</li>
          </ul>
          <p className="constraints__intro" style={{ marginTop: 12 }}>
            每個情境右側「<strong>規格</strong>」面板的「<strong>互動 spec</strong>」、「<strong>邊界處理</strong>」都是可以進行回饋的地方。
          </p>
        </section>

        {/* ============================================================ */}
        <section className="constraints__section">
          <h2>🎨 設計師</h2>
          <p className="constraints__intro">
            設計師同時擁有「使用者視角」和「視覺視角」，兩種建議都歡迎：
          </p>

          <h3 style={{ fontSize: 14, marginTop: 16, marginBottom: 8 }}>功能面（隨時都可以提）</h3>
          <ul style={{ marginLeft: 20, lineHeight: 1.8, color: 'var(--panel-fg)' }}>
            <li>跟其他同事一樣 — 欄位、互動 spec、資訊密度、情境覆蓋都可以給意見</li>
            <li>從使用者體驗的角度反饋特別有價值（例：這個按鈕擺這裡業務員會不會誤點？）</li>
          </ul>

          <h3 style={{ fontSize: 14, marginTop: 16, marginBottom: 8 }}>視覺面</h3>
          <ul style={{ marginLeft: 20, lineHeight: 1.8, color: 'var(--panel-fg)' }}>
            <li>卡片版型 / 視覺層級 / 配色</li>
            <li>字級、間距、按鈕樣式</li>
            <li>設計系統 catalog（D–F 段，全權由設計師決定，只要在「平台限制」頁列出的 LINE Flex 規範內）</li>
          </ul>

        </section>

        {/* ============================================================ */}
        <section className="constraints__section">
          <h2>📋 在 LINE 模擬器看真實渲染（Flex JSON 操作）</h2>
          <p className="constraints__intro">
            prototype 上看到的卡片是用 React 模擬的、會跟 LINE 實際渲染有些微差異。要看 LINE 上「真正長什麼樣」：
          </p>
          <ol style={{ marginLeft: 20, lineHeight: 1.8, color: 'var(--panel-fg)' }}>
            <li>點右側面板上方的「<strong>Flex JSON</strong>」分頁</li>
            <li>按「<strong>Copy JSON</strong>」複製卡片內容</li>
            <li>開 <a href="https://developers.line.biz/flex-simulator/" target="_blank" rel="noreferrer">LINE Flex Simulator</a></li>
            <li>點右上角「<strong>Showcase</strong>」旁的下拉、選「<strong>Paste JSON</strong>」貼上</li>
            <li>切到「Mobile / Desktop」就能看 LINE 真實渲染效果</li>
          </ol>

          <h3 style={{ fontSize: 14, marginTop: 16, marginBottom: 8 }}>什麼時候會用到？</h3>
          <ul style={{ marginLeft: 20, lineHeight: 1.8, color: 'var(--panel-fg)' }}>
            <li>設計師想確認自己畫的版型 LINE 能不能做出來</li>
            <li>PM / 工程師想驗證互動實作前的視覺正確性</li>
            <li>想看在不同裝置（手機 vs 桌面）下的呈現差異</li>
          </ul>
        </section>

      </div>
    </div>
  );
};