// Overseas-Ready Enterprise Versions
function PageOverseas({ go, language }) {
  const t = (labels) => localizedLabel(labels, language);

  const controlCards = [
    {
      label: t({ en: "Region binding", "zh-Hant": "區域綁定" }),
      desc: t({
        en: "Lock inference and metadata to your chosen region.",
        "zh-Hant": "鎖定推論與元數據至你選定的區域。",
      }),
    },
    {
      label: t({ en: "Private endpoint", "zh-Hant": "私有端點" }),
      desc: t({
        en: "VPC-routed or HK colo-based endpoint, no public ingress.",
        "zh-Hant": "VPC 路由或香港機房端點，不提供公網入口。",
      }),
    },
    {
      label: t({ en: "No-training option", "zh-Hant": "不參與訓練選項" }),
      desc: t({
        en: "Where partner supports, opt out of training reuse.",
        "zh-Hant": "如合作方支援，可選擇不同意重用訓練。",
      }),
    },
    {
      label: t({ en: "Audit logs", "zh-Hant": "審計日誌" }),
      desc: t({
        en: "Per-request logging surfaced through ModelPort dashboard.",
        "zh-Hant": "每個請求日誌由 ModelPort 控制台集中顯示。",
      }),
    },
    {
      label: t({ en: "DPA + DPIA", "zh-Hant": "DPA + DPIA" }),
      desc: t({
        en: "Contract and assessment pack prepared for legal review.",
        "zh-Hant": "為法務審閱備妥合約及評估文件。",
      }),
    },
    {
      label: t({ en: "Content policy tuning", "zh-Hant": "內容政策調整" }),
      desc: t({
        en: "Region-specific enterprise policy, not mainland public.",
        "zh-Hant": "依區域訂製企業政策，不是大陸公開版本。",
      }),
    },
    {
      label: t({ en: "Rate + spend controls", "zh-Hant": "速率與費用控管" }),
      desc: t({
        en: "Per-department caps and rate ceilings.",
        "zh-Hant": "按部門設定費用上限與速率上限。",
      }),
    },
    {
      label: t({ en: "Key isolation", "zh-Hant": "金鑰隔離" }),
      desc: t({
        en: "Separate keys per workload, rotated on schedule.",
        "zh-Hant": "各工作負載使用獨立金鑰，並按排程輪替。",
      }),
    },
  ];

  return (
    <div data-screen-label="07 Overseas Versions">
      <section style={{ paddingTop: 64, paddingBottom: 24 }}>
        <div className="wrap">
          <div className="eyebrow" style={{ marginBottom: 12 }}>{t({ en: "Overseas Enterprise Versions", "zh-Hant": "海外企業版本" })}</div>
          <h1 className="display" style={{ fontSize: 64, margin: 0, lineHeight: 1.04, maxWidth: 1000 }}>
            {t({
              en: "Make China & Asia models",
              "zh-Hant": "將中國及亞洲模型",
            })}<br/>{t({ en: "ready for overseas enterprise use.", "zh-Hant": "打造成可供海外企業使用。" })}
          </h1>
          <p style={{ color: "var(--ink-2)", fontSize: 17, marginTop: 20, maxWidth: 820, textWrap: "pretty" }}>
            {t({
              en: "Overseas enterprise workloads often need different model configurations than",
              "zh-Hant": "海外企業工作負載常常需要與",
            })}
            {" "}
            {t({ en: "mainland public consumer services. ModelPort helps deliver enterprise-ready",
              "zh-Hant": "大陸面向公眾的消費者服務不同的模型配置。ModelPort 可協助交付企業就緒版本，" })}
            {t({
              en: "versions with private deployment options, regional policy configuration and",
              "zh-Hant": "提供私有化部署選項、區域化政策設定及",
            })}
            {t({
              en: "safety controls that compliance teams can review.",
              "zh-Hant": "安全控制，供合規團隊審閱。",
            })}
          </p>
        </div>
      </section>

      <section className="rule">
        <div className="wrap" style={{ paddingTop: 40, paddingBottom: 56 }}>
          <div className="cmp">
            <div className="left">
              <div className="row between center" style={{ marginBottom: 18 }}>
                <span className="mono-sm">A</span>
                <span className="tag tag-dot tag-warn">{t({ en: "Public consumer", "zh-Hant": "公眾消費者" })}</span>
              </div>
              <h4 className="display" style={{ fontSize: 28, margin: 0 }}>{t({ en: "Mainland Public Service Version", "zh-Hant": "大陸公眾服務版本" })}</h4>
              <p style={{ color: "var(--ink-3)", fontSize: 14, marginTop: 8 }}>
                {t({
                  en: "The service profile many overseas teams first encounter through a partner's mainland-facing app.",
                  "zh-Hant": "海外團隊最先透過合作方面向內地的應用接觸到的服務版本。",
                })}
              </p>
              <ul>
                <li>{t({ en: "Built for mainland public users", "zh-Hant": "面向大陸公眾用戶設計" })}</li>
                <li>{t({ en: "Public consumer-facing policy layer", "zh-Hant": "公眾服務導向的政策層" })}</li>
                <li>{t({ en: "More restrictive consumer service controls", "zh-Hant": "更嚴格的消費者服務控管" })}</li>
                <li>{t({ en: "Often needs review before overseas enterprise deployment", "zh-Hant": "通常在海外企業部署前需進行審閱" })}</li>
              </ul>
            </div>
            <div className="right">
              <div className="row between center" style={{ marginBottom: 18 }}>
                <span className="mono-sm">B · {t({ en: "ModelPort delivery", "zh-Hant": "ModelPort 交付" })}</span>
                <span className="tag tag-dot tag-ok">{t({ en: "Enterprise overseas", "zh-Hant": "海外企業" })}</span>
              </div>
              <h4 className="display" style={{ fontSize: 28, margin: 0 }}>{t({ en: "Overseas-Ready Enterprise Version", "zh-Hant": "海外就緒企業版本" })}</h4>
              <p style={{ color: "var(--ink-3)", fontSize: 14, marginTop: 8 }}>
                {t({
                  en: "The configuration ModelPort negotiates and delivers for overseas enterprise customers.",
                  "zh-Hant": "ModelPort 與合作方協商後，為海外企業客戶交付的版本設定。",
                })}
              </p>
              <ul>
                <li>{t({ en: "Built for overseas enterprise use", "zh-Hant": "為海外企業使用場景而設計" })}</li>
                <li>{t({ en: "Region-specific configuration", "zh-Hant": "區域化配置" })}</li>
                <li>{t({ en: "Private endpoint support", "zh-Hant": "私有端點支援" })}</li>
                <li>{t({ en: "Enterprise safety controls", "zh-Hant": "企業級安全控制" })}</li>
                <li>{t({ en: "Local deployment options", "zh-Hant": "本地部署選項" })}</li>
                <li>{t({ en: "DPA and audit support", "zh-Hant": "DPA 與審計支援" })}</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <section className="rule">
        <div className="wrap section-tight">
          <div className="card card-muted" style={{ padding: 40, display: "grid", gridTemplateColumns: "auto 1fr", gap: 32, alignItems: "center" }}>
            <div className="placeholder" style={{ width: 96, height: 96, fontSize: 10 }}>{t({ en: "NOTE", "zh-Hant": "注意" })}</div>
            <div>
              <div className="mono-sm" style={{ marginBottom: 10 }}>{t({ en: "Important framing", "zh-Hant": "重點框架" })}</div>
              <p className="display" style={{ fontSize: 28, lineHeight: 1.25, margin: 0, textWrap: "pretty" }}>
                {t({
                  en: "Tuned for overseas enterprise workloads while retaining safety controls,",
                  "zh-Hant": "專為海外企業工作負載優化，同時保留安全控管、",
                })}
                <br/>
                {t({
                  en: "auditability and regional delivery boundaries.",
                  "zh-Hant": "可審計性與區域交付邊界。",
                })}
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Controls in the box */}
      <section className="rule">
        <div className="wrap section-tight">
          <div className="row between center" style={{ marginBottom: 20 }}>
            <h2 className="display" style={{ fontSize: 32, margin: 0 }}>{t({ en: "Enterprise safety controls included", "zh-Hant": "包含的企業安全控制" })}</h2>
            <span className="mono-sm">{t({ en: "Configurable per workload", "zh-Hant": "可按工作負載配置" })}</span>
          </div>
          <div className="grid control-grid" style={{ gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
            {controlCards.map((card) => (
              <div key={card.label} className="card" style={{ padding: 20 }}>
                <div className="mono-sm" style={{ marginBottom: 10 }}>{t({ en: "Control", "zh-Hant": "控制項" })}</div>
                <div style={{ fontWeight: 600, fontSize: 15 }}>{card.label}</div>
                <div className="muted" style={{ fontSize: 13, marginTop: 6 }}>{card.desc}</div>
              </div>
            ))}
          </div>

          <div className="row gap-12" style={{ marginTop: 32 }}>
            <button className="btn btn-arrow" onClick={() => go("fit")}>{t({ en: "Find the right version for my workload", "zh-Hant": "為我的工作負載選擇合適版本" })}</button>
            <button className="btn btn-ghost" onClick={() => go("pilot")}>{t({ en: "Talk to a delivery advisor", "zh-Hant": "聯絡交付顧問" })}</button>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { PageOverseas });