// ==========================================================================
// 2. Principles 規範
// ==========================================================================

const Principles = () => (
  <Section id="principles" num="02" zh="Principles 規範" en="Principles · Usage Rules">

    {/* ---------- COLOR (從 Foundations 移動過來) ---------- */}
    <Card id="p-color" title="Principles-Color">
      <h2 className="ds-h2">主要使用顏色</h2>
      <p className="ds-desc">
        以下為原本的色彩規範系統，描述各色系在 UI 中的「視覺權重」與「色彩語意」用途，
        定義何時用哪一階、為何用這個顏色。實際 token 命名與工程使用值，請參考
        <a href="#s-palette">Semantic / Palette</a>。
      </p>
      <ColorSystem />
    </Card>

    <Card id="p-buttons" title="Principles-All Buttons">
      <h2 className="ds-h2">如何使用</h2>
      <p className="ds-desc">
        按鈕在廣義的定義中，所有點擊後可以觸發特定指令和操作的元素都是按鈕，可以是文字、圖片、圖示、幾何圖形等。
        在這裡，我們指的按鈕是由幾何圖形 + 文字或圖示組成的元素。
      </p>

      <h2 className="ds-h2">按鈕類型（共分 3 大類）</h2>
      <div style={{
        display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16,
        background: "var(--n-50)", border: "1px solid var(--n-200)", borderRadius: 12,
        padding: "32px 24px", marginTop: 8,
      }}>
        {[
          { en: "Button",      zh: "一般按鈕",     demo: <PrincipleBtn variant="filled" kind="text" /> },
          { en: "Icon Button", zh: "圖示按鈕",     demo: <PrincipleBtn variant="filled" kind="icon" /> },
          { en: "FAB",         zh: "懸浮動作按鈕", demo: <PrincipleBtn variant="filled" kind="fab" /> },
        ].map((t) => (
          <div key={t.en} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 24 }}>
            <div style={{ textAlign: "center" }}>
              <div style={{ fontSize: 18, fontWeight: 600, color: "var(--n-900)" }}>{t.en}</div>
              <div style={{ fontSize: 14, color: "var(--n-700)", marginTop: 4 }}>{t.zh}</div>
            </div>
            {t.demo}
          </div>
        ))}
      </div>

      <h2 className="ds-h2">按鈕變體</h2>
      <div style={{ background: "var(--n-50)", border: "1px solid var(--n-200)", borderRadius: 12, padding: "12px 0", marginTop: 8 }}>
        {[
          { variant: "filled",   name: "Button:Filled",   strength: "(高強度)", sc: "var(--error)" },
          { variant: "toner",    name: "Button:Toner",    strength: "(中強度)", sc: "var(--blue-500)" },
          { variant: "outlined", name: "Button:Outlined", strength: "(中強度)", sc: "var(--blue-500)" },
          { variant: "ghost",    name: "Button:Ghost",    strength: "(低強度)", sc: "var(--success)" },
          { variant: "text",     name: "Button:Text",     strength: "(低強度)", sc: "var(--success)" },
          { variant: "link",     name: "Button:Link",     strength: "(低強度)", sc: "var(--success)" },
        ].map((r, i, arr) => (
          <div key={r.variant} style={{
            display: "grid", gridTemplateColumns: "180px 1fr 1fr 1fr",
            alignItems: "center", padding: "20px 24px", gap: 16,
            borderBottom: i < arr.length - 1 ? "1px solid var(--n-200)" : "none",
          }}>
            <div>
              <div style={{ fontSize: 14, fontWeight: 600, color: "var(--n-900)" }}>{r.name}</div>
              <div style={{ fontSize: 13, color: r.sc, marginTop: 2 }}>{r.strength}</div>
            </div>
            <div style={{ display: "flex", justifyContent: "center" }}><PrincipleBtn variant={r.variant} kind="text" /></div>
            <div style={{ display: "flex", justifyContent: "center" }}>
              {r.variant !== "link" && r.variant !== "text"
                ? <PrincipleBtn variant={r.variant} kind="icon" />
                : <span className="ds-cap">—</span>}
            </div>
            <div style={{ display: "flex", justifyContent: "center" }}>
              {(r.variant === "filled" || r.variant === "toner" || r.variant === "outlined")
                ? <PrincipleBtn variant={r.variant} kind="fab" />
                : <span className="ds-cap">—</span>}
            </div>
          </div>
        ))}
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "180px 1fr 1fr 1fr", gap: 16, padding: "6px 24px 0", fontSize: 11, color: "var(--n-500)", fontFamily: "var(--ff-en)", textTransform: "uppercase", letterSpacing: ".06em" }}>
        <div></div>
        <div style={{ textAlign: "center" }}>Button</div>
        <div style={{ textAlign: "center" }}>Icon Button</div>
        <div style={{ textAlign: "center" }}>FAB</div>
      </div>
    </Card>



    {/* ---------- ACCESSIBILITY ---------- */}
    <Card id="p-a11y" title="Principles-Accessibility">
      <h2 className="ds-h2">無障礙準則</h2>
      <p className="ds-desc">所有元件設計與實作須符合 <strong>WCAG 2.1 AA</strong>。</p>

      <h3 className="ds-h3">色彩對比</h3>
      <Spec headers={["項目", "最低對比度", "建議"]} rows={[
    ["一般文字 (< 18px)", "4.5 : 1", "5 : 1 以上"],
    ["大字 (≥ 18px / 14px Bold)", "3 : 1", "4.5 : 1 以上"],
    ["UI 元件 / 圖示邊界", "3 : 1", "—"],
    ["焦點指示器 (focus ring)", "3 : 1", "與背景及主色皆需通過"]]
    } />

      <h3 className="ds-h3">焦點 (Focus) 規則</h3>
      <ul style={{ paddingLeft: 18, color: "var(--n-700)", lineHeight: 1.8, fontSize: 14, margin: 0 }}>
        <li>所有可互動元件須有可見焦點：2px 主色描邊 + 2px 偏移。</li>
        <li>焦點順序符合視覺閱讀順序 (左→右、上→下)。</li>
        <li>禁止移除 outline，可改寫為設計系統的 focus ring 樣式。</li>
        <li>所有功能須能僅以鍵盤完成 (Tab / Shift+Tab / Enter / Space / Esc)。</li>
      </ul>

      <h3 className="ds-h3">語意與輔助文字</h3>
      <ul style={{ paddingLeft: 18, color: "var(--n-700)", lineHeight: 1.8, fontSize: 14, margin: 0 }}>
        <li>使用語意 HTML：<code>button</code>、<code>nav</code>、<code>main</code>、<code>label</code>。</li>
        <li>圖示按鈕必須有 <code>aria-label</code>。</li>
        <li>表單必有 <code>label</code>，錯誤訊息與欄位以 <code>aria-describedby</code> 串接。</li>
        <li>動態內容變化使用 <code>aria-live</code> 通知讀屏器。</li>
      </ul>
    </Card>

    {/* ---------- VOICE & TONE ---------- */}
    <Card id="p-voice" title="Principles-Voice & Tone">
      <h2 className="ds-h2">語氣與文案</h2>
      <p className="ds-desc">UI 文字是介面的一部分。簡短、清楚、以使用者為主詞，避免技術腔調。</p>

      <div className="ds-grid ds-grid--2">
        <div style={{ border: "1px solid var(--success)", borderRadius: 12, padding: 20, background: "var(--success-bg)" }}>
          <div style={{ color: "var(--success)", fontWeight: 600, fontSize: 14, marginBottom: 12, display: "flex", alignItems: "center", gap: 6 }}>
            <Icon name="ok" size={16} />建議用法
          </div>
          <div style={{ fontSize: 14, color: "var(--n-800)", lineHeight: 1.7 }}>
            「找不到此筆記。試試其他關鍵字。」<br />
            「儲存成功」<br />
            「刪除這筆資料？此動作無法復原。」
          </div>
        </div>
        <div style={{ border: "1px solid var(--error)", borderRadius: 12, padding: 20, background: "var(--error-bg)" }}>
          <div style={{ color: "var(--error)", fontWeight: 600, fontSize: 14, marginBottom: 12, display: "flex", alignItems: "center", gap: 6 }}>
            <Icon name="x" size={16} />避免
          </div>
          <div style={{ fontSize: 14, color: "var(--n-800)", lineHeight: 1.7 }}>
            「Error: 404 Resource not found」<br />
            「Operation completed」<br />
            「您是否確定要進行此項刪除操作？」
          </div>
        </div>
      </div>

      <h3 className="ds-h3">原則</h3>
      <Spec headers={["原則", "說明"]} rows={[
    ["親近不油膩", "用「我們 / 你」說話，但不裝熟、不灑狗血。"],
    ["清楚不冗長", "句子越短越好。能用 5 個字說清楚就不要 10 個。"],
    ["專業不術語", "避免內部黑話、避免技術代碼，使用使用者熟悉的名詞。"],
    ["具體不抽象", "「儲存成功」勝過「操作已完成」。"],
    ["指引下一步", "錯誤訊息不只說錯，要告訴使用者怎麼解決。"]]
    } />
    </Card>

  </Section>
);

// 規範頁專用按鈕：依 variant × kind 渲染對應樣式
const PrincipleBtn = ({ variant, kind, label = "登入" }) => {
  const styles = {
    filled:   { bg: "var(--blue-500)", color: "#fff",            border: "none" },
    toner:    { bg: "var(--blue-50)",  color: "var(--blue-500)", border: "none" },
    outlined: { bg: "#fff",            color: "var(--blue-500)", border: "1.5px solid var(--blue-500)" },
    ghost:    { bg: "#fff",            color: "var(--blue-500)", border: "1.5px dashed var(--n-400)" },
    text:     { bg: "transparent",     color: "var(--n-900)",    border: "none" },
    link:     { bg: "transparent",     color: "var(--blue-500)", border: "none", underline: true },
  }[variant];

  // Icon Button：圓形 / 圓角，只放圖示
  if (kind === "icon") {
    return (
      <button style={{
        width: 36, height: 36, borderRadius: "50%",
        background: styles.bg, color: styles.color,
        border: styles.border, padding: 0,
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        cursor: "pointer",
      }}>
        <Icon name="set" size={16} color={styles.color} />
      </button>
    );
  }

  // FAB：較大、明顯陰影、圓角方形
  if (kind === "fab") {
    return (
      <button style={{
        width: 48, height: 48, borderRadius: 12,
        background: styles.bg, color: styles.color,
        border: styles.border, padding: 0,
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        cursor: "pointer",
        boxShadow: variant === "filled" ? "0 6px 16px rgba(36,146,255,.35)"
                 : variant === "toner"  ? "0 6px 16px rgba(36,146,255,.18)"
                                        : "0 4px 12px rgba(0,0,0,.06)",
      }}>
        <Icon name="edit" size={18} color={styles.color} />
      </button>
    );
  }

  // 一般 Button：文字
  return (
    <button style={{
      minWidth: 140, height: 40, padding: "0 24px",
      borderRadius: 4, background: styles.bg, color: styles.color,
      border: styles.border, cursor: "pointer", fontSize: 14, fontWeight: 500,
      textDecoration: styles.underline ? "underline" : "none",
      textUnderlineOffset: 3,
      fontFamily: "var(--ff)",
    }}>
      {label}
    </button>
  );
};

window.Principles = Principles;