// Why ModelPort
function PageWhy({ go, language }) {
  const t = (labels) => localizedLabel(labels, language);

  const cards = [
    {
      n: "01",
      t: t({ en: "Better Pricing", "zh-Hant": "更佳定價" }),
      lede: t({
        en: "We aggregate enterprise demand and negotiate better commercial terms with model providers.",
        "zh-Hant": "我們彙整企業需求，與模型供應商協商更有利的商務條件。",
      }),
      bullets: [
        t({ en: "Bulk model capacity", "zh-Hant": "批量模型容量" }),
        t({ en: "Channel pricing", "zh-Hant": "通路價格" }),
        t({ en: "Dedicated usage packages", "zh-Hant": "專用使用方案" }),
        t({ en: "Better cost control", "zh-Hant": "更佳成本控制" }),
        t({ en: "Enterprise billing", "zh-Hant": "企業計費" }),
      ],
    },
    {
      n: "02",
      t: t({ en: "Overseas-Ready Versions", "zh-Hant": "海外就緒版本" }),
      lede: t({
        en: "Access enterprise overseas versions of China & Asia models, configured for non-mainland deployment requirements.",
        "zh-Hant": "取得中國及亞洲模型的海外企業版本，並依據非大陸部署需求進行設定。",
      }),
      bullets: [
        t({ en: "Overseas enterprise use", "zh-Hant": "海外企業使用" }),
        t({ en: "Region-specific configuration", "zh-Hant": "區域化配置" }),
        t({ en: "Private endpoint support", "zh-Hant": "私有端點支援" }),
        t({ en: "Enterprise safety controls", "zh-Hant": "企業安全控制" }),
        t({ en: "No-training options where available", "zh-Hant": "如有提供，可選擇不訓練選項" }),
      ],
    },
    {
      n: "03",
      t: t({ en: "Local Delivery", "zh-Hant": "本地交付" }),
      lede: t({
        en: "Deploy through Hong Kong contracts, private endpoints, data-centre infrastructure and enterprise support.",
        "zh-Hant": "透過香港合約、私有端點、數據中心基建及企業支援交付。",
      }),
      bullets: [
        t({ en: "Hong Kong deployment options", "zh-Hant": "香港部署選項" }),
        t({ en: "Telco / data-centre delivery", "zh-Hant": "電訊 / 數據中心交付" }),
        t({ en: "Private cloud support", "zh-Hant": "私有雲支援" }),
        t({ en: "DPA and audit logs", "zh-Hant": "DPA 與審計日誌" }),
        t({ en: "SLA and support", "zh-Hant": "SLA 與支援" }),
      ],
    },
  ];

  return (
    <div data-screen-label="02 Why ModelPort">
      {/* header */}
      <section className="section" style={{ paddingTop: 80, paddingBottom: 48 }}>
        <div className="wrap">
          <div className="eyebrow" style={{ marginBottom: 16 }}>{t({ en: "Why ModelPort", "zh-Hant": "為何選擇 ModelPort" })}</div>
          <h1 className="display" style={{ fontSize: 72, margin: 0, lineHeight: 1.04, maxWidth: 1000 }}>
            {t({
              en: "Azure is strong for cloud-native access.",
              "zh-Hant": "Azure 在原生雲端存取方面表現強大。",
            })}
            <br/>
            {t({ en: "ModelPort is built for", "zh-Hant": "ModelPort 則著重" })}{" "}
            <em style={{ fontStyle: "italic", color: "var(--accent)" }}>
              {t({ en: "pricing,", "zh-Hant": "定價、" })}
            </em>{" "}
            <em style={{ fontStyle: "italic", color: "var(--accent)" }}>
              {t({ en: "overseas versions", "zh-Hant": "海外企業版本" })}
            </em>{" "}
            {t({ en: "and", "zh-Hant": "與" })}{" "}
            <em style={{ fontStyle: "italic", color: "var(--accent)" }}>
              {t({ en: "local delivery", "zh-Hant": "本地交付" })}
            </em>
            .
          </h1>
          <p style={{ color: "var(--ink-2)", fontSize: 18, marginTop: 28, maxWidth: 720 }}>
            {t({
              en: "Three reasons enterprises in Hong Kong, Singapore and the wider region still need a",
              "zh-Hant": "香港、新加坡及更廣區域企業為何仍需要非 Azure 的中國及亞洲模型路徑，原因有三點：",
            })}
            <br/>
            {t({
              en: "non-Azure path to China & Asia models — even when they're already on Azure.",
              "zh-Hant": "無論是否已使用 Azure。",
            })}
          </p>
        </div>
      </section>

      {/* three cards */}
      <section className="rule">
        <div className="wrap section-tight">
          <div className="grid" style={{ gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
            {cards.map((c) => (
              <div key={c.n} className="card" style={{ padding: 32, display: "flex", flexDirection: "column", gap: 20 }}>
                <div className="row between center">
                  <span className="mono-sm">{c.n}</span>
                  <span className="tag tag-dot">{t({ en: "Pillar", "zh-Hant": "核心" })}</span>
                </div>
                <h3 className="display" style={{ fontSize: 38, margin: 0, lineHeight: 1.05 }}>{c.t}</h3>
                <p style={{ color: "var(--ink-2)", margin: 0, fontSize: 14.5, lineHeight: 1.55 }}>{c.lede}</p>
                <ul className="dot-list" style={{ marginTop: 4 }}>
                  {c.bullets.map((b) => <li key={b}>{b}</li>)}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* contrast table */}
      <section className="rule">
        <div className="wrap section-tight">
          <div className="row between center" style={{ marginBottom: 24 }}>
            <h2 className="display" style={{ fontSize: 38, margin: 0 }}>{t({ en: "Where each path fits", "zh-Hant": "各路線適用場景" })}</h2>
            <button className="btn btn-ghost btn-sm btn-arrow" onClick={() => go("fit")}>{t({ en: "Run the Fit Check", "zh-Hant": "開始適配檢查" })}</button>
          </div>
          <div style={{ border: "1px solid var(--rule)", borderRadius: 16, overflow: "hidden" }}>
            <table className="t">
              <thead>
                <tr>
                  <th></th>
                  <th>{t({ en: "Azure Foundry", "zh-Hant": "Azure Foundry" })}</th>
                  <th>{t({ en: "ModelPort Local Delivery", "zh-Hant": "ModelPort 本地交付" })}</th>
                  <th>{t({ en: "Hybrid Setup", "zh-Hant": "混合部署" })}</th>
                </tr>
              </thead>
              <tbody>
                {[
                  [
                    t({ en: "Workload profile", "zh-Hant": "工作負載特徵" }),
                    t({ en: "Cloud-native, low sensitivity", "zh-Hant": "雲原生、低敏感度" }),
                    t({ en: "Sensitive, regulated or cost-driven", "zh-Hant": "敏感、受規範或成本導向" }),
                    t({ en: "Mixed portfolio", "zh-Hant": "混合型負載" }),
                  ],
                  [
                    t({ en: "China & Asia models", "zh-Hant": "中國及亞洲模型" }),
                    t({ en: "Limited catalog", "zh-Hant": "目錄有限" }),
                    t({ en: "Kimi, MiniMax, Qwen, GLM, DeepSeek", "zh-Hant": "Kimi、MiniMax、Qwen、GLM、DeepSeek" }),
                    t({ en: "Routed to ModelPort", "zh-Hant": "透過 ModelPort 路由" }),
                  ],
                  [
                    t({ en: "Pricing model", "zh-Hant": "定價模式" }),
                    t({ en: "Retail API", "zh-Hant": "零售 API" }),
                    t({ en: "Discounted bulk capacity", "zh-Hant": "折扣批量容量" }),
                    t({ en: "Per-workload optimised", "zh-Hant": "按工作負載最佳化" }),
                  ],
                  [
                    t({ en: "Deployment", "zh-Hant": "部署" }),
                    t({ en: "Public cloud", "zh-Hant": "公有雲" }),
                    t({ en: "HK private endpoint, telco / DC", "zh-Hant": "香港私有端點、電訊或數據中心" }),
                    t({ en: "Best-of-both", "zh-Hant": "雙路並行" }),
                  ],
                  [
                    t({ en: "Overseas-ready version", "zh-Hant": "海外就緒版本" }),
                    t({ en: "Not available", "zh-Hant": "不可用" }),
                    t({ en: "Available where partner supports", "zh-Hant": "依合作方支援提供" }),
                    t({ en: "Available for routed workloads", "zh-Hant": "適用於路由到的工作負載" }),
                  ],
                  [
                    t({ en: "Compliance pack", "zh-Hant": "合規套件" }),
                    t({ en: "Standard", "zh-Hant": "標準" }),
                    t({ en: "DPA, audit logs, data-flow, no-training opt", "zh-Hant": "DPA、審計日誌、資料流、不訓練選項" }),
                    t({ en: "Per-workload", "zh-Hant": "按工作負載" }),
                  ],
                ].map((row, i) => (
                  <tr key={i}>
                    <td className="mono-sm" style={{ textTransform: "uppercase" }}>{row[0]}</td>
                    <td style={{ color: "var(--ink-2)" }}>{row[1]}</td>
                    <td>{row[2]}</td>
                    <td style={{ color: "var(--ink-2)" }}>{row[3]}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { PageWhy });