// Model Delivery Catalog
const PARTNERS = [
  {
    id: "kimi",
    name: "Kimi / Moonshot",
    primary: true,
    bestFor: ["Long-context documents", "Enterprise Q&A", "Knowledge work"],
    commercial: "Discounted bulk capacity available",
    deployment: ["API", "Private endpoint", "Hong Kong deployment"],
    overseas: "Enterprise overseas deployment available",
    compliance: ["DPA", "Audit logs", "No-training option where available"],
    support: "Enterprise pilot support",
  },
  {
    id: "minimax",
    name: "MiniMax",
    primary: true,
    bestFor: ["Multimodal experiences", "Voice / audio", "Conversational agents"],
    commercial: "Discounted bulk capacity available",
    deployment: ["API", "Private endpoint", "Hong Kong deployment"],
    overseas: "Enterprise overseas deployment available",
    compliance: ["DPA", "Audit logs", "Regional configuration"],
    support: "Enterprise pilot support",
  },
  {
    id: "qwen",
    name: "Qwen",
    primary: true,
    bestFor: ["General reasoning", "Coding assistance", "Multilingual workloads"],
    commercial: "Discounted bulk capacity available",
    deployment: ["API", "Private endpoint", "Dedicated capacity"],
    overseas: "Enterprise overseas deployment available",
    compliance: ["DPA", "Audit logs", "No-training option where available"],
    support: "Enterprise pilot support",
  },
  {
    id: "glm",
    name: "Zhipu GLM",
    primary: false,
    bestFor: ["Reasoning", "Domain workflows", "Agentic tasks"],
    commercial: "Channel pricing available",
    deployment: ["API", "Private endpoint"],
    overseas: "Enterprise overseas configuration available",
    compliance: ["DPA", "Audit logs"],
    support: "Pilot support",
  },
  {
    id: "deepseek",
    name: "DeepSeek",
    primary: false,
    bestFor: ["Cost-efficient inference", "Coding", "Batch workloads"],
    commercial: "Channel pricing available",
    deployment: ["API", "Private endpoint", "Dedicated capacity"],
    overseas: "Enterprise overseas configuration available",
    compliance: ["DPA", "Audit logs"],
    support: "Pilot support",
  },
];

const DEEPSEEK_V4_PROVIDERS = [
  {
    id: "modelport-promo",
    name: "ModelPort Pilot Capacity",
    region: "HK",
    quantization: "fp8",
    promo: "40% lower",
    badge: "Preferred pilot route",
    latency: "1.12s",
    throughput: "74tps",
    uptime: "99.9%",
    context: "1.05M",
    maxOutput: "1.05M",
    inputPrice: "$0.067",
    outputPrice: "$0.134",
    cacheRead: "$0.013",
    note: "Promotional enterprise capacity for DeepSeek V4 pilot workloads routed through Hong Kong.",
  },
  {
    id: "gmicloud",
    name: "GMICloud",
    region: "US",
    quantization: "fp8",
    latency: "1.35s",
    throughput: "68tps",
    uptime: "99.6%",
    context: "1.05M",
    maxOutput: "1.05M",
    inputPrice: "$0.112",
    outputPrice: "$0.224",
    cacheRead: "$0.022",
    note: "Reference public provider shown for cost and latency comparison.",
  },
  {
    id: "atlascompute",
    name: "AtlasCompute",
    region: "SG",
    quantization: "fp8",
    latency: "1.48s",
    throughput: "62tps",
    uptime: "99.4%",
    context: "1.05M",
    maxOutput: "512K",
    inputPrice: "$0.118",
    outputPrice: "$0.236",
    cacheRead: "$0.024",
    note: "Regional reference endpoint with standard on-demand pricing.",
  },
  {
    id: "nebulagpu",
    name: "NebulaGPU",
    region: "US",
    quantization: "fp8",
    latency: "1.58s",
    throughput: "59tps",
    uptime: "99.2%",
    context: "512K",
    maxOutput: "512K",
    inputPrice: "$0.121",
    outputPrice: "$0.242",
    cacheRead: "$0.025",
    note: "Commodity GPU endpoint reference for price benchmarking.",
  },
];

function PartnerLogo({ name }) {
  // Original placeholder monogram — no real brand marks
  const letters = name.split(/\s|\//)[0].slice(0, 2).toUpperCase();
  return (
    <div className="placeholder" style={{ width: 56, height: 56, fontSize: 16, letterSpacing: "0.05em", fontWeight: 600 }}>
      {letters}
    </div>
  );
}

function DeepSeekPromoNotice({ language, region, setRegion, sort, setSort }) {
  const t = (labels) => localizedLabel(labels, language);
  const providers = DEEPSEEK_V4_PROVIDERS
    .filter(provider => region === "all" || provider.region === region)
    .sort((a, b) => {
      if (sort === "latency") return parseFloat(a.latency) - parseFloat(b.latency);
      return parseFloat(a.inputPrice.replace("$", "")) - parseFloat(b.inputPrice.replace("$", ""));
    });

  return (
    <section className="rule">
      <div className="wrap section-tight">
        <div className="promo-shell">
          <div className="promo-hero">
            <div className="row gap-8 center" style={{ marginBottom: 14 }}>
              <span className="tag tag-dot tag-ok">{t({ en: "Pilot offer", "zh-Hant": "試點優惠" })}</span>
              <span className="tag">{t({ en: "DeepSeek V4", "zh-Hant": "DeepSeek V4" })}</span>
            </div>
            <h2 className="display" style={{ fontSize: 42, lineHeight: 1.06, margin: 0 }}>
              {t({ en: "DeepSeek V4 pilot capacity with", "zh-Hant": "DeepSeek V4 試點容量，以" })}
              <em style={{ fontStyle: "italic", color: "var(--accent)" }}>40% {t({ en: "lower", "zh-Hant": "較低" })}</em>
              {t({ en: " input pricing.", "zh-Hant": " 輸入價格" })}
            </h2>
            <p style={{ color: "var(--ink-2)", fontSize: 15, margin: "16px 0 0", maxWidth: 620 }}>
              {t({
                en: "Compare the preferred ModelPort pilot route against reference providers before you commit",
                "zh-Hant": "在正式決策前，先將 ModelPort 建議路線與參考供應商做比較，",
              })}
              <br/>
              {t({ en: "to a benchmark, private endpoint or dedicated capacity package.", "zh-Hant": "以便對標、私有端點或專用容量方案。" })}
            </p>
          </div>

          <div className="provider-panel">
            <div className="row between center provider-toolbar">
              <div>
                <div className="mono-sm">{t({ en: "Provider options for DeepSeek V4", "zh-Hant": "DeepSeek V4 供應商選項" })}</div>
                <div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 4 }}>{t({ en: "Illustrative fp8 enterprise comparison", "zh-Hant": "示意型 fp8 企業比較" })}</div>
              </div>
              <div className="row gap-8 center provider-controls">
                {[
                  ["all", "All regions", "全部區域"],
                  ["HK", "HK", "香港"],
                  ["SG", "SG", "新加坡"],
                  ["US", "US", "美國"],
                ].map(([id, enLabel, zhLabel]) => (
                  <button key={id} className={"choice" + (region === id ? " on" : "")} onClick={() => setRegion(id)}>
                    {t({ en: enLabel, "zh-Hant": zhLabel })}
                  </button>
                ))}
                {[
                  ["cost", "Lowest cost", "最低成本"],
                  ["latency", "Fastest", "最快"],
                ].map(([id, enLabel, zhLabel]) => (
                  <button key={id} className={"choice" + (sort === id ? " on" : "")} onClick={() => setSort(id)}>
                    {t({ en: enLabel, "zh-Hant": zhLabel })}
                  </button>
                ))}
              </div>
            </div>

            <div className="col gap-12">
              {providers.map(provider => (
                <ProviderCard key={provider.id} provider={provider} language={language} />
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ProviderCard({ provider, language }) {
  const t = (labels) => localizedLabel(labels, language);
  const promoted = !!provider.promo;
  return (
    <article className={"provider-card" + (promoted ? " promoted" : "") }>
      <div className="provider-main">
        <div className="row between center" style={{ gap: 16 }}>
          <div className="col gap-6">
              <div className="row gap-8 center">
                <h3 style={{ margin: 0, fontSize: 18, lineHeight: 1.2 }}>{provider.name}</h3>
                {promoted && <span className="tag tag-dot tag-ok">{providerTagLabel(provider.promo, t)}</span>}
              </div>
              <div className="row gap-8 center">
                <span className="provider-pill">{provider.region}</span>
                <span className="provider-pill">{provider.quantization}</span>
                {provider.badge && <span className="provider-pill accent">{providerTagLabel(provider.badge, t)}</span>}
              </div>
            </div>
            <div className="provider-price">
              <span>{provider.inputPrice}</span>
              <small>{t({ en: "/M input tokens", "zh-Hant": "/百萬輸入代幣" })}</small>
            </div>
          </div>

        <div className="provider-stats">
          <ProviderStat label={t({ en: "Latency", "zh-Hant": "延遲" })} value={provider.latency} />
          <ProviderStat label={t({ en: "Throughput", "zh-Hant": "吞吐量" })} value={provider.throughput} />
          <ProviderStat label={t({ en: "Uptime", "zh-Hant": "可用性" })} value={provider.uptime} />
          <ProviderStat label={t({ en: "Total Context", "zh-Hant": "總上下文" })} value={provider.context} />
          <ProviderStat label={t({ en: "Max Output", "zh-Hant": "最大輸出" })} value={provider.maxOutput} />
        </div>
        <p className="provider-note">{providerNote(provider.note, t)}</p>
      </div>

      <div className="provider-pricing">
        <div className="mono-sm">{t({ en: "Pricing", "zh-Hant": "定價" })}</div>
        <PriceLine
          label={t({ en: "Input Price", "zh-Hant": "輸入價" })}
          value={provider.inputPrice}
          unit={t({ en: "per M input tokens", "zh-Hant": "每百萬輸入代幣" })}
        />
        <PriceLine
          label={t({ en: "Output Price", "zh-Hant": "輸出價" })}
          value={provider.outputPrice}
          unit={t({ en: "per M output tokens", "zh-Hant": "每百萬輸出代幣" })}
        />
        <PriceLine
          label={t({ en: "Cache Read", "zh-Hant": "快取讀取" })}
          value={provider.cacheRead}
          unit={t({ en: "per M tokens", "zh-Hant": "每百萬代幣" })}
        />
      </div>
    </article>
  );
}

function providerTagLabel(value, t) {
  return t({
    en: value,
    "zh-Hant": {
      "40% lower": "低 40%",
      "Preferred pilot route": "建議試點路徑",
    }[value] || value,
  });
}

function providerNote(note, t) {
  return t({
    en: note,
    "zh-Hant": {
      "Promotional enterprise capacity for DeepSeek V4 pilot workloads routed through Hong Kong.": "香港路由試點負載的 DeepSeek V4 企業優惠容量。",
      "Reference public provider shown for cost and latency comparison.": "作為成本與延遲比較的參考公開供應商。",
      "Regional reference endpoint with standard on-demand pricing.": "提供區域參考端點，使用標準隨需應計價。",
      "Commodity GPU endpoint reference for price benchmarking.": "作為價格基準的通用 GPU 端點參考。",
    }[note] || note,
  });
}

function ProviderStat({ label, value }) {
  return (
    <div className="provider-stat">
      <div className="mono-sm">{label}</div>
      <strong>{value}</strong>
    </div>
  );
}

function PriceLine({ label, value, unit }) {
  return (
    <div className="price-line">
      <span>{label}</span>
      <strong>{value}</strong>
      <small>{unit}</small>
    </div>
  );
}

function ModelCard({ m, expanded, toggle, language }) {
  const t = (labels) => localizedLabel(labels, language);
  return (
    <div className="card" style={{ padding: 0, overflow: "hidden" }}>
      <div className="row between center" style={{ padding: 24, gap: 20 }}>
        <div className="row gap-16 center" style={{ flex: 1 }}>
          <PartnerLogo name={m.name} />
          <div className="col gap-4">
            <div className="row gap-8 center">
              <div style={{ fontSize: 19, fontWeight: 600 }}>{m.name}</div>
              {m.primary && <span className="tag tag-dot">{t({ en: "Primary partner", "zh-Hant": "核心合作夥伴" })}</span>}
            </div>
            <div className="muted" style={{ fontSize: 13 }}>
              <span>{t({ en: "Best for", "zh-Hant": "適用於" })}</span>{" "}
              <span>{t({ en: m.bestFor[0], "zh-Hant": modelLabel(m.bestFor[0]) })}</span>
              <span> · </span>
              <span>{t({ en: m.bestFor[1], "zh-Hant": modelLabel(m.bestFor[1]) })}</span>
            </div>
          </div>
        </div>
        <div className="row gap-8 center">
          <span className="tag tag-dot tag-ok">{t({ en: "Overseas-ready", "zh-Hant": "海外就緒" })}</span>
          <button className="btn btn-ghost btn-sm" onClick={toggle}>
            {expanded ? t({ en: "Collapse", "zh-Hant": "收合" }) : t({ en: "Details", "zh-Hant": "詳情" })} {expanded ? "↑" : "↓"}
          </button>
        </div>
      </div>
      {expanded && (
        <div className="rise" style={{ borderTop: "1px solid var(--rule)", padding: 24, background: "var(--bg-2)" }}>
          <div className="grid model-detail-grid" style={{ gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
            <CardSection label={t({ en: "Best for", "zh-Hant": "適用於" })} items={m.bestFor} language={language} />
            <CardSection label={t({ en: "Deployment", "zh-Hant": "部署" })} items={m.deployment} language={language} />
            <CardSection label={t({ en: "Compliance", "zh-Hant": "合規" })} items={m.compliance} language={language} />
          </div>
          <div className="rule-2" style={{ marginTop: 24, paddingTop: 20 }}>
            <div className="grid model-detail-grid" style={{ gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
              <Inline label={t({ en: "Commercial option", "zh-Hant": "商務方案" })} v={providerLabel(m.commercial, t)} />
              <Inline label={t({ en: "Overseas version", "zh-Hant": "海外版本" })} v={providerLabel(m.overseas, t)} />
              <Inline label={t({ en: "Support", "zh-Hant": "支援" })} v={providerLabel(m.support, t)} />
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function modelLabel(text) {
  return {
    "Long-context documents": "長上下文文件",
    "Enterprise Q&A": "企業問答",
    "Knowledge work": "知識工作",
    "Multimodal experiences": "多模態體驗",
    "Voice / audio": "語音 / 音訊",
    "Conversational agents": "對話代理",
    "General reasoning": "通用推理",
    "Coding assistance": "程式協助",
    "Multilingual workloads": "多語言工作負載",
    "Reasoning": "推理",
    "Domain workflows": "領域工作流",
    "Agentic tasks": "代理任務",
    "Cost-efficient inference": "成本效率推論",
    "Coding": "程式生成",
    "Batch workloads": "批次工作負載",
  }[text] || text;
}

function providerLabel(value, t) {
  return t({
    en: value,
    "zh-Hant": {
      "Discounted bulk capacity available": "提供折扣批量容量",
      "Channel pricing available": "支持通路定價",
      "Enterprise pilot support": "企業試點支援",
      "Pilot support": "試點支援",
      "Enterprise overseas deployment available": "提供海外企業交付",
      "Enterprise overseas configuration available": "提供海外企業配置",
    }[value] || value,
  });
}

function CardSection({ label, items, language }) {
  const t = (labels) => localizedLabel(labels, language);
  return (
    <div className="col gap-8">
      <div className="mono-sm">{label}</div>
      <ul className="dot-list">
        {items.map(i => <li key={i}>{t({ en: i, "zh-Hant": modelLabel(i) })}</li>)}
      </ul>
    </div>
  );
}

function Inline({ label, v }) {
  return (
    <div className="col gap-4">
      <div className="mono-sm">{label}</div>
      <div style={{ fontSize: 13.5, color: "var(--ink-2)" }}>{v}</div>
    </div>
  );
}

function PageCatalog({ go, language }) {
  const t = (labels) => localizedLabel(labels, language);
  const [expanded, setExpanded] = React.useState({ kimi: true });
  const [filter, setFilter] = React.useState("all");
  const [region, setRegion] = React.useState("all");
  const [sort, setSort] = React.useState("cost");

  const visible = PARTNERS.filter(p => filter === "all" || (filter === "primary" && p.primary) || (filter === "secondary" && !p.primary));

  return (
    <div data-screen-label="05 Model Catalog">
      <section style={{ paddingTop: 64, paddingBottom: 32 }}>
        <div className="wrap">
          <div className="eyebrow" style={{ marginBottom: 12 }}>{t({ en: "Deliverable Model Catalog", "zh-Hant": "可交付模型目錄" })}</div>
          <h1 className="display" style={{ fontSize: 64, margin: 0, lineHeight: 1.04, maxWidth: 980 }}>
            {t({ en: "Partner models, delivered with", "zh-Hant": "合作模型，透過" })}{" "}
            <em style={{ fontStyle: "italic", color: "var(--accent)" }}>{t({ en: "discounted capacity", "zh-Hant": "折扣容量" })}</em>,
            {t({ en: "overseas enterprise versions and private endpoints", "zh-Hant": "海外企業版本與私有端點" })}。
          </h1>
          <p style={{ color: "var(--ink-2)", fontSize: 17, marginTop: 20, maxWidth: 760 }}>
            {t({
              en: "ModelPort is a curated delivery desk for enterprise model capacity. We help negotiate",
              "zh-Hant": "ModelPort 是為企業模型容量打造的精選交付窗口，",
            })}
            <br/>
            {t({
              en: "partner access and deliver it into enterprise environments with the compliance pack,",
              "zh-Hant": "協助協商合作方存取，並交付到企業環境，附帶合規套件、",
            })}
            <br/>
            {t({
              en: "deployment route and commercial model you need.",
              "zh-Hant": "部署路線與你所需的商務方案。",
            })}
          </p>
        </div>
      </section>

      <DeepSeekPromoNotice language={language} region={region} setRegion={setRegion} sort={sort} setSort={setSort} />

      <section className="rule">
        <div className="wrap" style={{ paddingTop: 28, paddingBottom: 32 }}>
          <div className="row between center" style={{ marginBottom: 20 }}>
            <div className="row gap-8 center">
              <span className="mono-sm">{t({ en: "Filter", "zh-Hant": "篩選" })}</span>
              {[
                ["all", "All partners", "全部"],
                ["primary", "Primary (3)", "核心 (3)"],
                ["secondary", "Optional (2)", "延伸 (2)"],
              ].map(([k, enLabel, zhLabel]) => (
                <button key={k} className={"choice" + (filter === k ? " on" : "")} onClick={() => setFilter(k)}>{t({ en: enLabel, "zh-Hant": zhLabel })}</button>
              ))}
            </div>
            <div className="mono-sm">{t({ en: "Showing", "zh-Hant": "顯示中" })} {visible.length} / {PARTNERS.length}</div>
          </div>

          <div className="col gap-12">
            {visible.map(m => (
              <ModelCard
                key={m.id}
                m={m}
                expanded={!!expanded[m.id]}
                language={language}
                toggle={() => setExpanded(e => ({ ...e, [m.id]: !e[m.id] }))}
              />
            ))}
          </div>
        </div>
      </section>

      <section className="rule">
        <div className="wrap section-tight">
          <div className="card card-ink" style={{ padding: 40, display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 32, alignItems: "center" }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 10 }}>{t({ en: "Need another model?", "zh-Hant": "還需要其他模型嗎？" })}</div>
              <div className="display" style={{ fontSize: 32, lineHeight: 1.1 }}>
                {t({ en: "Tell us the workload, target model and expected usage.", "zh-Hant": "告訴我們你的工作負載、目標模型和預計使用量。" })}
                <br/>
                {t({ en: "We can extend coverage when there is enterprise demand.", "zh-Hant": "在有企業需求時，我們可以再擴大交付範圍。" })}
              </div>
            </div>
            <div className="row gap-12" style={{ justifyContent: "flex-end" }}>
              <button className="btn btn-lg"
                style={{ background: "var(--bg)", borderColor: "var(--bg)", color: "var(--ink)" }}
                onClick={() => go("pilot")}
              >
                {t({ en: "Request model coverage", "zh-Hant": "申請模型交付" })}
              </button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { PageCatalog });