// ============================================================
// Platform Constraints — designer-facing reference page
// Plain-language version. Avoids API names / web jargon.
// ============================================================

window.PlatformConstraints = function PlatformConstraints() {
  return (
    <div className="constraints">
      <div className="constraints__head">
        <div className="constraints__crumbs">📌 設計師必讀 · 開工前 5 分鐘</div>
        <h1 className="constraints__title">LINE 卡片有哪些做不到的事</h1>
        <p className="constraints__lede">
          這頁列出 LINE 卡片<strong>真的做不到</strong>、和<strong>能做但有限制</strong>的事情。<br/>
          不在這頁上 → 你想得到的需求大多都能畫、放心設計。
        </p>
      </div>

      <div className="constraints__body">

        {/* ============================================================ */}
        <section className="constraints__section constraints__section--no">
          <h2>A. 完全做不到</h2>
          <p className="constraints__intro">
            這些 LINE 平台規格根本不支援、<strong>請不要畫</strong>。如果設計裡有出現、麻煩換成右欄的替代做法。
          </p>

          <table className="constraints__table">
            <thead>
              <tr><th>需求</th><th>為什麼做不到</th><th>能做的最接近</th></tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <strong>自訂 loading 動畫</strong>
                  <span className="constraints__sub">例：「正在搜尋 28 位客戶...」+ 進度條</span>
                </td>
                <td>LINE 只有那種「正在輸入...」三個點打字動畫、是 LINE 寫死的、無法改顏色、塞文字、放進度條</td>
                <td>用 LINE 預設的三點動畫即可、<strong>設計師零工作量</strong>；不要花時間畫 spinner 或進度條</td>
              </tr>
              <tr>
                <td><strong>依照用戶開不開深色模式換色</strong></td>
                <td>LINE 不會告訴 bot 對方手機是淺色還深色模式</td>
                <td>設計<strong>一份兩種模式都讀得清</strong>的中性配色（見 B 區）</td>
              </tr>
              <tr>
                <td><strong>卡片送出後即時更新</strong>
                  <span className="constraints__sub">例：ChatGPT 一字一字印、或卡片內計時器</span>
                </td>
                <td>卡片送出之後就定格了、無法再改內容、也無法慢慢印</td>
                <td>要更新就再發一張新卡片（會消耗 push 配額）</td>
              </tr>
              <tr>
                <td><strong>卡片裡放輸入框 / 下拉選單 / 複選框</strong></td>
                <td>LINE 卡片只能放「展示用」的元件（文字、圖、按鈕），不能放任何「給用戶填」的元件</td>
                <td>用按鈕、點下去 bot 會跳出「請打字告訴 finfo ___」、然後讀用戶下一句話當答案</td>
              </tr>
              <tr>
                <td><strong>分頁切換 / 收合面板 / 彈出視窗</strong></td>
                <td>LINE 卡片沒有 tabs、accordion、modal 這些介面</td>
                <td>用左右滑的 carousel 切換不同卡片、或直接送下一張新卡片</td>
              </tr>
              <tr>
                <td><strong>表格</strong>
                  <span className="constraints__sub">例：職業等級對照表、體位加費表</span>
                </td>
                <td>LINE 卡片無法畫真正的格線分明表格、就算硬畫、單張卡片大小也撐不下</td>
                <td>列幾條重點 + 一顆按鈕「看完整表」跳網站（s08 投保規則就是這策略）</td>
              </tr>
              <tr>
                <td><strong>因應螢幕大小調整卡片寬度</strong>
                  <span className="constraints__sub">就是網頁的 RWD / breakpoint</span>
                </td>
                <td>LINE 卡片只有幾種固定寬度可選（小 120 / 中 300 / 大 386 px）、不會依用戶手機自動調整、bot 也不知道對方螢幕多大</td>
                <td>設計一份就好、確認在最小手機（iPhone SE 寬 375px）能讀就 ok</td>
              </tr>
              <tr>
                <td><strong>滑鼠 / 手指 hover 提示</strong>
                  <span className="constraints__sub">tooltip、focus 高亮、長按選單</span>
                </td>
                <td>LINE 卡片只認「點一下」、不認 hover / focus / 長按</td>
                <td>補充說明只能直接寫成小字一行、或另一張說明 bubble</td>
              </tr>
              <tr>
                <td><strong>動畫 / 過場 / 微互動</strong></td>
                <td>卡片完全靜態、按鈕按下沒有縮放、切換沒有淡入淡出</td>
                <td>—（不要設計動態效果）</td>
              </tr>
              <tr>
                <td><strong>disabled 按鈕</strong>
                  <span className="constraints__sub">畫成灰色但點不下去那種</span>
                </td>
                <td>LINE 沒有「按鈕不能按」這種狀態、就算畫灰、點下去還是會觸發</td>
                <td>如果功能不能用、bot 端就直接不送這顆按鈕；不要靠視覺暗示</td>
              </tr>
              <tr>
                <td><strong>卡片記住用戶後續操作</strong>
                  <span className="constraints__sub">例：點過愛心就變紅 + 下次打開記得</span>
                </td>
                <td>已送出的卡片不會自動更新、用戶下次打開看到的還是當初送出的樣子</td>
                <td>用戶每點一次、bot 端送一張新卡片反映新狀態（舊卡片變成歷史紀錄）</td>
              </tr>
              <tr>
                <td><strong>只圓上方兩個角的卡片</strong></td>
                <td>圓角是整個方塊的屬性、無法只圓部分角</td>
                <td>想做部分圓角、用兩個方塊疊起來模擬（上方圓角、下方直角）</td>
              </tr>
              <tr>
                <td><strong>陰影 / 漸層 / 模糊 / 任何特效</strong></td>
                <td>LINE 卡片不支援這些視覺效果</td>
                <td>用實色 + 細線分隔模擬「卡片裡的卡片」層次</td>
              </tr>
              <tr>
                <td><strong>絕對位置擺放元素</strong>
                  <span className="constraints__sub">例：右上角浮一個徽章</span>
                </td>
                <td>LINE 卡片元素只能用「上下排列」或「左右排列」依序擺、不能像網頁那樣自由位移</td>
                <td>用上下/左右排列組合 + 微調對齊模擬</td>
              </tr>
              <tr>
                <td><strong>同行對齊 layout 裡塞方塊</strong>
                  <span className="constraints__sub">就是文字 + icon 對齊在同一基準線上的那種</span>
                </td>
                <td>這個 layout 只能放「文字 / icon / 空白」、再塞方塊進去 LINE 會直接拒收</td>
                <td>改用「水平排列」layout（功能類似、但允許塞方塊）</td>
              </tr>
              <tr>
                <td><strong>指定字型</strong>
                  <span className="constraints__sub">例：要用 Noto Sans / 思源黑體 / 品牌字</span>
                </td>
                <td>字型完全由用戶手機決定（iOS、Android、電腦版各看到不同字型）、設計沒辦法指定</td>
                <td>用粗細 + 字級設計層次、別假設用戶看到特定字型</td>
              </tr>
              <tr>
                <td><strong>精確 px 設定字級 / 間距</strong>
                  <span className="constraints__sub">例：標題 17px、padding 14px</span>
                </td>
                <td>LINE 字級只有 9 種固定大小（11 / 13 / 14 / 16 / 19 / 22 / 27 / 30 / 36 / 39 px）、間距只有 7 種（2 / 4 / 8 / 12 / 16 / 20 / 24 px）、其他值都不認</td>
                <td>交付直接用「變數名」（例：標題用 <code>md</code>、副標用 <code>xs</code>）、不要寫精確 px</td>
              </tr>
            </tbody>
          </table>
        </section>

        {/* ============================================================ */}
        <section className="constraints__section constraints__section--maybe">
          <h2>B. 能做、但有限制要妥協</h2>
          <p className="constraints__intro">
            這些可以畫、但要在 LINE 的限制下設計、不能照桌機 / app 那種自由度套。
          </p>

          <table className="constraints__table">
            <thead>
              <tr><th>需求</th><th>限制是什麼</th><th>設計師要怎麼做</th></tr>
            </thead>
            <tbody>
              <tr>
                <td><strong>深色模式相容</strong></td>
                <td>背景顏色不會因為用戶開深色模式自動翻轉、且 bot 不知道對方是哪種模式</td>
                <td>
                  設計<strong>一套兩種模式下都讀得清的中性配色</strong>：<br/>
                  • 文字用 <code>#444</code> 暗灰（淺底深底都讀得到）、不要用純黑 <code>#000</code><br/>
                  • 不要用純白 <code>#ffffff</code> 當 chip 文字（深色底會消失）<br/>
                  • 強調色用 <code>#FFA73B</code> 橘 → 對比高、兩模式都 ok
                </td>
              </tr>
              <tr>
                <td><strong>多條件 AND / OR 視覺</strong>
                  <span className="constraints__sub">例：「壽險 &lt; 100 萬 且 年齡 30-40」</span>
                </td>
                <td>LINE 沒有「括號」「群組框」這類視覺元件可以表達布林邏輯</td>
                <td>用上下排列 + 縮排模擬、或翻成自然語言句子（「壽險不到 100 萬<u>且</u>年齡 30-40」）</td>
              </tr>
              <tr>
                <td><strong>放很多顆按鈕（&gt; 4 顆）</strong></td>
                <td>每顆按鈕的文字超過 10 個中文字會被切斷（顯示 ...）、同卡片放超過 4 顆會擠</td>
                <td>用「選項卡」設計（最多 4 顆）、超過就用 carousel 多張卡片</td>
              </tr>
              <tr>
                <td><strong>規則裡的註腳符號（※、許1）</strong></td>
                <td>文字無法做上標（像論文那種 ⁽¹⁾）、※ 只能跟一般文字同大小</td>
                <td>用「小字」級（<code>xs</code> 灰字）另起一行平鋪、不要嘗試做上標效果</td>
              </tr>
              <tr>
                <td><strong>客服電話「點了直接撥號」</strong></td>
                <td>iOS 版 LINE 一定能撥、Android 版有些版本不會跳號（用戶體驗不一致）</td>
                <td>主按鈕設計成「複製電話」（保證可用）、副按鈕「撥打電話」（嘗試跳號、失敗也不影響）</td>
              </tr>
              <tr>
                <td><strong>保險公司 / 銀行 logo</strong></td>
                <td>圖片連結壞掉時、LINE 不會自動顯示備用圖、會直接空白一格</td>
                <td>全部統一用 placeholder（首字 + 品牌色方塊）、確定要 logo 才換成真實圖檔</td>
              </tr>
              <tr>
                <td><strong>多張可左右滑的卡片（carousel）</strong></td>
                <td>同一組 carousel 內、所有卡片寬度必須統一（不能一張寬一張窄）；其中一張比較高、其他張會被撐到一樣高（留白）</td>
                <td>短內容用空白行補滿到同高度、或拆成兩組 carousel</td>
              </tr>
              <tr>
                <td><strong>超長文字「展開查看更多」</strong></td>
                <td>LINE 卡片沒有展開按鈕、文字被切斷後不會出現「更多」連結</td>
                <td>畫一顆「看完整內容」按鈕跳網站、或在下一張卡片顯示全文</td>
              </tr>
              <tr>
                <td><strong>「即將結束」「已過期」這類時間狀態</strong></td>
                <td>卡片文字是死的、不會隨時間自動變</td>
                <td>設計師畫好 chip 樣式、bot 端每次送卡片時動態計算當下狀態貼上去（不是卡片自己會變）</td>
              </tr>
              <tr>
                <td><strong>影片 / 地圖嵌入</strong></td>
                <td>影片只能擺在卡片最上方那一大塊區域、不能跟其他元素並排；地圖完全無法嵌入卡片</td>
                <td>影片放卡片頂部、地圖改成「打開 Google Maps」按鈕</td>
              </tr>
            </tbody>
          </table>
        </section>

        {/* ============================================================ */}
        <section className="constraints__section constraints__section--tips">
          <h2>C. 設計交付 Dos &amp; Don'ts</h2>

          <div className="constraints__cards">
            <div className="constraints__card constraints__card--do">
              <h3>✅ Do</h3>
              <ul>
                <li>用 LINE 的尺寸名稱標尺寸（例：標題用 <code>md</code>、副標用 <code>xs</code>），<strong>不要寫 px</strong></li>
                <li>用 6 位數 hex 色碼（例：<code>#FFA73B</code>），需要透明度寫 8 位數（<code>#FFA73B66</code>）</li>
                <li>所有卡片都用最常見的「中」寬度（300 px）設計、確認讀得清</li>
                <li>每個可點的元素標清楚「點下去要做什麼」（跳網頁 / 自動發訊息 / 後台處理 / 複製文字）</li>
                <li>邊界 case 都畫：欄位是空的 / 文字超長 / 0 筆結果 / 超過上限 / 連線失敗 / 意圖不明</li>
                <li>深色模式：用中性灰、避免純白純黑</li>
                <li>交付 Figma 檔（含元件層級拆解、每個 component 標好尺寸名）</li>
              </ul>
            </div>
            <div className="constraints__card constraints__card--dont">
              <h3>❌ Don't</h3>
              <ul>
                <li>不要只交 PNG 圖檔（沒辦法看 component 結構、無法 spec）</li>
                <li>不要設計 hover 提示、focus 高亮、長按選單</li>
                <li>不要在卡片裡放輸入框、下拉選單、tab、收合面板、彈窗</li>
                <li>不要畫進度條、loading spinner（用 LINE 預設）</li>
                <li>不要畫表格（拆成幾條重點 + 連結網站）</li>
                <li>不要畫 disabled 灰色按鈕（要 disable 就直接不送這顆）</li>
                <li>不要假設 bot 知道用戶螢幕大小或開深色模式</li>
                <li>不要在「同行對齊」layout 裡塞方塊（會直接被 LINE 拒收）</li>
              </ul>
            </div>
          </div>
        </section>

        {/* ============================================================ */}
        <section className="constraints__section">
          <h2>D. 想更深入</h2>
          <ul className="constraints__links">
            <li>
              <a href="https://developers.line.biz/flex-simulator/" target="_blank" rel="noreferrer">
                LINE Flex Message Simulator
              </a>
              {' '}— 拖元件、即時預覽、輸出 JSON、強烈建議花 30 分鐘玩一下
            </li>
            <li>
              <a href="https://developers.line.biz/en/reference/messaging-api/#flex-message" target="_blank" rel="noreferrer">
                LINE Flex Message 官方 spec（英文）
              </a>
              {' '}— 想知道某個屬性的細節時可查
            </li>
            <li>
              <code>docs/flex-message-design-brief.md</code>
              {' '}— finfo 內部設計 brief（含過往踩過的坑與配色規範）
            </li>
          </ul>
        </section>

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