// ============================================================
// Design System Catalog — strict alignment with finfo-web
// 來源：~/Documents/GitHub/finfo-web-master/tailwind.config.js
//
// 規則：
// - Section A-C 只列 Tailwind config 真實存在的設計變數
// - Section D LINE 平台限制 / bot 端慣例、明確標示「非 finfo-web」
// - Section F「待設計師補完」清楚指出哪些 chip PM 暫定、需要設計師
//   挑現有 Tailwind 變數對應
// ============================================================

window.DesignSystem = function DesignSystem() {
  return (
    <div className="constraints">
      <div className="constraints__head">
        <div className="constraints__crumbs">📌 設計師必讀 · 設計系統 catalog</div>
        <h1 className="constraints__title">finfo LINE 卡片設計系統</h1>
        <p className="constraints__lede">
          <strong>A–C 區</strong>：finfo-web 已存在的色票與樣式設定（<code>tailwind.config.js</code>），列出來方便對齊現有品牌。<br/>
          <strong>D–F 區</strong>：LINE 卡片端的暫定樣式 — <strong>設計師決定</strong>，只要在 LINE Flex 平台限制內可以任意發揮（細節見「平台限制」頁）。
        </p>
      </div>

      <div className="constraints__body">

        {/* ============================================================ */}
        <section className="constraints__section">
          <h2>A. Primary 主橘 palette（finfo-web）</h2>

          <div className="ds-color-grid">
            {[
              ['primary.40', '#FF8E03', '深變體、強調或 hover'],
              ['primary.50', '#FF9A1F', '中深變體'],
              ['primary.DEFAULT / primary.60', '#FFA73B', '主要 CTA、品牌色、強調數字'],
              ['primary.70', '#FFC072', '淺變體'],
              ['primary.80', '#FFDCB1', '更淺變體'],
              ['primary.85', '#FFEAD0', 'Chip bg（公開 / 範本 / 要保人）'],
              ['primary.90', '#FFF1E0', '極淺背景'],
              ['primary.95', '#FFF8EF', '保戶卡 stat block 背景'],
            ].map(([name, hex, usage]) => (
              <div key={name} className="ds-color-card">
                <div className="ds-color-swatch" style={{ background: hex }} />
                <div className="ds-color-info">
                  <div className="ds-color-name">{name}</div>
                  <code className="ds-color-hex">{hex}</code>
                  <div className="ds-color-usage">{usage}</div>
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* ============================================================ */}
        <section className="constraints__section">
          <h2>B. Neutral 灰階 palette（finfo-web）</h2>

          <div className="ds-color-grid">
            {[
              ['neutral.0', '#000000', '純黑、極少用'],
              ['neutral.10', '#282828', '深暗色'],
              ['neutral.DEFAULT / neutral.20', '#444444', '預設 body text、卡片主要文字'],
              ['neutral.40', '#787878', 'Row label、副標、輔助文字'],
              ['neutral.50', '#969696', '更弱輔助文字'],
              ['neutral.60', '#C3C3C3', 'Placeholder、停用文字'],
              ['neutral.70', '#E1E1E1', '邊界'],
              ['neutral.80', '#E9E9E9', '邊界 / 分隔'],
              ['neutral.85', '#F0F0F0', '次要 chip 背景（失效）'],
              ['neutral.90', '#F8F8F8', '極淺背景'],
              ['neutral.95', '#FBFBFB', '極淺背景'],
              ['neutral.100', '#FFFFFF', '卡片底色'],
            ].map(([name, hex, usage]) => (
              <div key={name} className="ds-color-card">
                <div className="ds-color-swatch" style={{ background: hex, border: hex === '#FFFFFF' ? '1px solid #ddd' : 'none' }} />
                <div className="ds-color-info">
                  <div className="ds-color-name">{name}</div>
                  <code className="ds-color-hex">{hex}</code>
                  <div className="ds-color-usage">{usage}</div>
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* ============================================================ */}
        <section className="constraints__section">
          <h2>C. 語意色與其他命名變數（finfo-web）</h2>

          <div className="ds-color-grid">
            {[
              ['bg.light / gray.brown', '#FAF8F5', '條件區塊背景'],
              ['gray.light', '#F5F5F5', '次要 chip 背景（停售可加保）'],
              ['link.DEFAULT / indigo', '#307AB4', 'Link 樣式按鈕'],
              ['link.dark', '#276291', 'Link hover'],
              ['indigo-dark', '#1F5177', '更深 link'],
              ['error.DEFAULT / danger / red', '#FA5B5B', '錯誤、停售紅字'],
              ['error.dark', '#E51A1A', '錯誤強調'],
              ['blue.DEFAULT', '#59ABEB', '保險公司品牌（遠雄人壽 等）'],
              ['green.DEFAULT', '#50C59B', '成功 / 已繳清 / 全球人壽品牌'],
              ['purple.DEFAULT', '#B38FEC', '次要強調'],
              ['secondary.DEFAULT / pink', '#F88F88', '副品牌色'],
            ].map(([name, hex, usage]) => (
              <div key={name} className="ds-color-card">
                <div className="ds-color-swatch" style={{ background: hex }} />
                <div className="ds-color-info">
                  <div className="ds-color-name">{name}</div>
                  <code className="ds-color-hex">{hex}</code>
                  <div className="ds-color-usage">{usage}</div>
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* ============================================================ */}
        <section className="constraints__section constraints__section--maybe">
          <h2>D. LINE Flex 變數對應（非 finfo-web、LINE 平台規範）</h2>
          <p className="constraints__intro">
            ⚠️ 這節不是 finfo-web 規範、是 LINE Messaging API 自身的變數系統。
            LINE 字級 / 間距只有以下幾個變數、跟 finfo-web Tailwind 完全獨立。
          </p>

          <h3 style={{ fontSize: 14, marginTop: 16, marginBottom: 8 }}>字級變數（LINE 9 階）</h3>
          <table className="constraints__table">
            <thead>
              <tr><th>LINE 變數</th><th>近似 px</th><th>finfo LINE 卡片用法</th></tr>
            </thead>
            <tbody>
              {[
                ['xxs', '11', '極小字（很少用）'],
                ['xs', '13', '副標、row label、chip 文字'],
                ['sm', '14', 'row value、一般 body'],
                ['md', '16', '卡片標題（客戶名、商品名）'],
                ['lg', '19', '強調數字（年繳保費、保額）'],
                ['xl', '22', '更大強調'],
                ['xxl', '27', 'Hero 數字（s07 保費結果）'],
                ['3xl–5xl', '30–39', '不建議用、會撐版'],
              ].map(([t, px, usage]) => (
                <tr key={t}>
                  <td><code>{t}</code></td>
                  <td>{px} px</td>
                  <td>{usage}</td>
                </tr>
              ))}
            </tbody>
          </table>

          <h3 style={{ fontSize: 14, marginTop: 16, marginBottom: 8 }}>間距變數（LINE 7 階）</h3>
          <table className="constraints__table">
            <thead>
              <tr><th>LINE 變數</th><th>近似 px</th><th>finfo LINE 卡片用法</th></tr>
            </thead>
            <tbody>
              {[
                ['none', '0', '消除預設間距'],
                ['xs', '4', '同行元素 spacing'],
                ['sm', '8', 'chip 之間、按鈕之間'],
                ['md', '12', 'kv row 之間、小區塊間距'],
                ['lg', '16', '主要 padding、區塊大間距'],
                ['xl', '20', '空狀態卡 padding、大區塊'],
                ['xxl', '24', '版面大型分隔'],
              ].map(([t, px, usage]) => (
                <tr key={t}>
                  <td><code>{t}</code></td>
                  <td>{px} px</td>
                  <td>{usage}</td>
                </tr>
              ))}
            </tbody>
          </table>

          <p className="constraints__intro" style={{ marginTop: 12 }}>
            注意：finfo-web Tailwind 有自己的 <code>fontSize</code>（display-lg / t1–t7 etc）與 <code>spacing</code>、
            但這些<strong>不能直接用在 LINE 卡片</strong>、要轉成 LINE 對應的變數。
          </p>
        </section>

        {/* ============================================================ */}
        <section className="constraints__section constraints__section--tips">
          <h2>F. 待設計師補完：Chip 樣式對應</h2>
          <p className="constraints__intro">
            ⚠️ <strong>PM 暫定 / 設計師要 review</strong>：以下 chip 在 prototype 各情境出現、但目前的 bg/fg 配色不一定都對到 Tailwind 既有變數。<br/>
            請設計師逐一指定：每個 chip 應該用<strong>哪個 Tailwind 變數組合</strong>。如果現有變數都不適合、再跟 PM 討論是否要在 finfo-web Tailwind 加新 step。
          </p>

          <table className="constraints__table">
            <thead>
              <tr><th>Chip 名稱</th><th>出現情境</th><th>PM 暫定 bg / fg</th><th>建議 Tailwind 對應</th></tr>
            </thead>
            <tbody>
              {[
                {
                  label: '公開',
                  scenes: 's04 試算清單',
                  bg: '#FFEAD0', fg: '#444',
                  suggested: 'bg=primary.85 / fg=neutral.20 ✅',
                  ok: true,
                },
                {
                  label: '範本',
                  scenes: 's04 試算清單',
                  bg: '#FFEAD0', fg: '#444',
                  suggested: 'bg=primary.85 / fg=neutral.20 ✅',
                  ok: true,
                },
                {
                  label: '含舊保單',
                  scenes: 's04 試算清單',
                  bg: '#F5F5F5', fg: '#787878',
                  suggested: 'bg=gray.light / fg=neutral.40 ✅',
                  ok: true,
                },
                {
                  label: '新保單',
                  scenes: 's04 試算清單',
                  bg: '#FFA73B', fg: '#FFFFFF',
                  suggested: 'bg=primary.DEFAULT / fg=neutral.100 ✅',
                  ok: true,
                },
                {
                  label: '舊保單',
                  scenes: 's04 試算清單',
                  bg: '#C3C3C3', fg: '#FFFFFF',
                  suggested: 'bg=neutral.60 / fg=neutral.100 ✅',
                  ok: true,
                },
                {
                  label: '已繳清',
                  scenes: 's03 保單狀態',
                  bg: '#E6F4EC', fg: '#2D7A52',
                  suggested: '⚠️ 兩色都不在 Tailwind。建議用 green.90 / green.40 或請設計師決定',
                  ok: false,
                },
                {
                  label: '停效',
                  scenes: 's03 保單狀態',
                  bg: '#FFF0F0', fg: '#C8474B',
                  suggested: '⚠️ 兩色都不在 Tailwind。建議用 secondary.95 / error.DEFAULT 或請設計師決定',
                  ok: false,
                },
                {
                  label: '本月熱門 #N',
                  scenes: 's06 商品清單',
                  bg: '#FFA73B', fg: '#FFFFFF',
                  suggested: 'bg=primary.DEFAULT / fg=neutral.100 ✅',
                  ok: true,
                },
                {
                  label: '新上架',
                  scenes: 's06 商品清單',
                  bg: '#FFA73B', fg: '#FFFFFF',
                  suggested: 'bg=primary.DEFAULT / fg=neutral.100 ✅',
                  ok: true,
                },
                {
                  label: '黃金會員',
                  scenes: 's11 系統通知',
                  bg: '#FFEAD0', fg: '#444',
                  suggested: 'bg=primary.85 / fg=neutral.20 ✅',
                  ok: true,
                },
                {
                  label: '最新版',
                  scenes: 's07 保費（PM #13）',
                  bg: '#F5F5F5', fg: '#787878',
                  suggested: 'bg=gray.light / fg=neutral.40 ✅',
                  ok: true,
                },
              ].map((chip, idx) => (
                <tr key={idx}>
                  <td>
                    <span
                      className="ds-chip-sample"
                      style={{ background: chip.bg, color: chip.fg, display: 'inline-block', padding: '2px 8px', borderRadius: 4, fontSize: 11, fontWeight: 700 }}
                    >{chip.label}</span>
                  </td>
                  <td><span className="ds-color-usage" style={{ fontSize: 12 }}>{chip.scenes}</span></td>
                  <td>
                    <code style={{ fontSize: 10 }}>{chip.bg}</code> / <code style={{ fontSize: 10 }}>{chip.fg}</code>
                  </td>
                  <td style={{ color: chip.ok ? 'var(--panel-fg)' : '#B85C00', fontSize: 12 }}>{chip.suggested}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </section>

        {/* ============================================================ */}
        <section className="constraints__section constraints__section--tips">
          <h2>G. 按鈕樣式</h2>
          <p className="constraints__intro">
            LINE Flex 原生 button 只有 3 種 style。<strong>color 屬性對應 bg</strong>（primary / secondary）或 <strong>對應 fg</strong>（link）。
            這 3 種樣式 + Tailwind 既有色就足以覆蓋所有 finfo 按鈕需求。
          </p>

          <div className="ds-button-grid">
            <div className="ds-button-card">
              <button
                className="ds-button-sample"
                style={{ background: '#FFA73B', color: '#FFFFFF', border: 'none' }}
              >主要動作</button>
              <div className="ds-button-info">
                <div className="ds-button-name"><code>style: "primary"</code></div>
                <div className="ds-button-usage">卡片首要 CTA</div>
                <div className="ds-button-spec">
                  color=<code>primary.DEFAULT</code> · 文字=<code>neutral.100</code>
                </div>
              </div>
            </div>

            <div className="ds-button-card">
              <button
                className="ds-button-sample"
                style={{ background: '#E1E1E1', color: '#444', border: 'none' }}
              >次要動作</button>
              <div className="ds-button-info">
                <div className="ds-button-name"><code>style: "secondary"</code></div>
                <div className="ds-button-usage">次要 CTA</div>
                <div className="ds-button-spec">
                  color=<code>neutral.70</code>（#E1E1E1）· 文字=<code>neutral.DEFAULT</code>（#444）<br/>
                  <span style={{ color: '#B85C00' }}>※ 原本用 #E5E5E5 不在 Tailwind、建議改 neutral.70 = #E1E1E1</span>
                </div>
              </div>
            </div>

            <div className="ds-button-card">
              <button
                className="ds-button-sample"
                style={{ background: 'transparent', color: '#307AB4', border: 'none' }}
              >輔助動作</button>
              <div className="ds-button-info">
                <div className="ds-button-name"><code>style: "link"</code></div>
                <div className="ds-button-usage">弱化選項（建議與回饋、看更多）</div>
                <div className="ds-button-spec">
                  color=<code>link.DEFAULT</code>（文字色）· bg=transparent
                </div>
              </div>
            </div>
          </div>
        </section>

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