// Home page
const MODELPORT_ASSET_BASE = Array.from(document.scripts).some(script =>
  script.src.includes("model-port/project/")
) ? "model-port/project/" : "";

function modelPortAsset(fileName) {
  return MODELPORT_ASSET_BASE + "assets/" + fileName;
}

function HeroMascot() {
  return (
    <div className="hero-visual" aria-label="ModelPort routing mascot">
      <img src={modelPortAsset("modelport-mascot.png")} alt="" />
    </div>
  );
}

function ProcessVisual() {
  return (
    <div className="process-visual" aria-label="Enterprise AI workload routing map">
      <img src={modelPortAsset("modelport-routing-map.png")} alt="" />
    </div>
  );
}

function PromoBanner({ go, language }) {
  const t = (labels) => localizedLabel(labels, language);
  const originalPrice = "$0.112 /M input";
  const promoPrice = "$0.067 /M input";

  return (
    <div className="promo-banner rise rise-1" role="note" aria-label="DeepSeek V4 promotion">
      <div className="promo-banner-sale" aria-hidden="true">
        <span>40%</span>
        <small>{t({ en: "lower input", "zh-Hant": "輸入成本更低" })}</small>
      </div>
      <div className="promo-banner-copy">
        <span className="tag tag-dot tag-ok">{t({ en: "Limited pilot offer", "zh-Hant": "限時試點優惠" })}</span>
        <strong>{t({
          en: "DeepSeek V4 Hong Kong capacity is now open for enterprise pilots.",
          "zh-Hant": "DeepSeek V4 香港容量現已開放企業試點。",
        })}</strong>
        <span>{t({
          en: "Reserve overseas-ready endpoint access with negotiated input pricing and guided rollout support.",
          "zh-Hant": "預留海外可用端點、協議輸入價格與導入支援。",
        })}</span>
      </div>
      <div className="promo-banner-metrics">
        <div className="promo-price-stack">
          <span className="promo-price-caption">{t({ en: "Original", "zh-Hant": "原價" })}</span>
          <span className="promo-price-original"><s>{originalPrice}</s></span>
          <span className="promo-price-current">{promoPrice}</span>
        </div>
        <span>{t({ en: "HK private endpoint", "zh-Hant": "香港私有端點" })}</span>
        <span>{t({ en: "fp8 capacity", "zh-Hant": "fp8 容量" })}</span>
      </div>
      <button className="btn btn-sm btn-arrow" onClick={() => go("catalog")}>
        {t({ en: "View promotion", "zh-Hant": "查看優惠" })}
      </button>
    </div>
  );
}

function Home({ go, language }) {
  const t = (labels) => localizedLabel(labels, language);
  const pillars = [
    {
      k: "01",
      t: t({ en: "Lower model costs", "zh-Hant": "降低模型成本" }),
      d: t({
        en: "Use aggregated enterprise demand to access better capacity terms than standard retail API pricing.",
        "zh-Hant": "集合企業需求，取得優於標準零售 API 價格的容量條款。",
      }),
      tag: t({ en: "Bulk procurement", "zh-Hant": "批量採購" }),
    },
    {
      k: "02",
      t: t({ en: "Overseas enterprise versions", "zh-Hant": "海外企業版本" }),
      d: t({
        en: "Deploy China & Asia models in configurations designed for non-mainland enterprise workloads.",
        "zh-Hant": "以適合非內地企業工作負載的配置部署中國及亞洲模型。",
      }),
      tag: t({ en: "Region-specific", "zh-Hant": "區域配置" }),
    },
    {
      k: "03",
      t: t({ en: "Hong Kong delivery", "zh-Hant": "香港交付" }),
      d: t({
        en: "Move faster with Hong Kong contracts, private endpoints, telco / data-centre routing, DPA and audit logs.",
        "zh-Hant": "透過香港合約、私有端點、電訊及數據中心路由、DPA 與審計日誌加速落地。",
      }),
      tag: t({ en: "HK private endpoint", "zh-Hant": "香港私有端點" }),
    },
  ];
  const partners = [
    { n: "Kimi / Moonshot", s: t({ en: "Long-context", "zh-Hant": "長上下文" }) },
    { n: "MiniMax", s: t({ en: "Multimodal", "zh-Hant": "多模態" }) },
    { n: "Qwen", s: t({ en: "General + coding", "zh-Hant": "通用與編程" }) },
    { n: "Zhipu GLM", s: t({ en: "Reasoning", "zh-Hant": "推理" }) },
    { n: "DeepSeek", s: t({ en: "Cost-efficient", "zh-Hant": "高性價比" }) },
  ];
  const processRows = [
    {
      s: t({ en: "Step 01", "zh-Hant": "步驟 01" }),
      t: t({ en: "Fit Check", "zh-Hant": "適配檢查" }),
      d: t({
        en: "Answer six questions to see whether Azure, ModelPort or a hybrid route is the best starting point.",
        "zh-Hant": "回答六個問題，判斷 Azure、ModelPort 或混合路線哪個最適合作為起點。",
      }),
    },
    {
      s: t({ en: "Step 02", "zh-Hant": "步驟 02" }),
      t: t({ en: "Deployment assessment", "zh-Hant": "部署評估" }),
      d: t({
        en: "Benchmark models, compare cost, map data flow and prepare the compliance checklist.",
        "zh-Hant": "進行模型基準測試、成本比較、資料流梳理與合規清單準備。",
      }),
    },
    {
      s: t({ en: "Step 03", "zh-Hant": "步驟 03" }),
      t: t({ en: "Private endpoint pilot", "zh-Hant": "私有端點試點" }),
      d: t({
        en: "Test Hong Kong delivery, audit logs, overseas enterprise versions and no-training options where available.",
        "zh-Hant": "測試香港交付、審計日誌、海外企業版本與可用的不訓練資料選項。",
      }),
    },
    {
      s: t({ en: "Step 04", "zh-Hant": "步驟 04" }),
      t: t({ en: "Enterprise rollout", "zh-Hant": "企業推廣" }),
      d: t({
        en: "Scale with usage-based pricing, platform fees, department billing, SLA and support.",
        "zh-Hant": "以用量計價、平台費、部門帳單、SLA 與支援進行規模化。",
      }),
    },
  ];

  return (
    <div data-screen-label="01 Home">
      {/* Hero */}
      <section className="section home-hero-section">
        <div className="wrap">
          <PromoBanner go={go} language={language} />
          <div className="grid hero-grid" style={{ gridTemplateColumns: "1.25fr 1fr", gap: 64, alignItems: "center" }}>
            <div className="col gap-24 rise">
              <div className="row center gap-12">
                <span className="step">PoC · Hong Kong</span>
                <span className="mono-sm">{t({ en: "v0.4 · Preview", "zh-Hant": "v0.4 · 預覽" })}</span>
              </div>
              <h1 className="display hero-title" style={{ fontSize: 80, margin: 0 }}>
                {t({ en: "China & Asia AI models.", "zh-Hant": "中國及亞洲 AI 模型。" })}<br/>
                <em style={{ fontStyle: "italic", color: "var(--accent)" }}>
                  {t({ en: "Better pricing.", "zh-Hant": "更佳價格。" })}
                </em><br/>
                {t({ en: "Ready for overseas enterprise use.", "zh-Hant": "為海外企業使用就緒。" })}
              </h1>
              <p style={{ fontSize: 18, lineHeight: 1.55, color: "var(--ink-2)", maxWidth: 580, textWrap: "pretty" }}>
                {t({
                  en: "ModelPort helps enterprises procure and deploy partner models from Kimi, MiniMax, Qwen, DeepSeek and others with discounted capacity, overseas enterprise versions, private endpoints and Hong Kong delivery support.",
                  "zh-Hant": "ModelPort 協助企業採購與部署 Kimi、MiniMax、Qwen、DeepSeek 等合作模型，提供折扣容量、海外企業版本、私有端點與香港交付支援。",
                })}
              </p>
              <div className="row gap-12">
                <button className="btn btn-lg btn-arrow" onClick={() => go("fit")}>{t({ en: "Run Fit Check", "zh-Hant": "開始適配檢查" })}</button>
                <button className="btn btn-ghost btn-lg" onClick={() => go("pilot")}>{t({ en: "Request Paid Pilot", "zh-Hant": "申請付費試點" })}</button>
              </div>
              <div className="row gap-8 center" style={{ marginTop: 8 }}>
                <span className="tag tag-dot tag-ok">{t({ en: "Enterprise procurement", "zh-Hant": "企業採購" })}</span>
                <span className="tag tag-dot tag-ok">{t({ en: "Private delivery", "zh-Hant": "私有交付" })}</span>
                <span className="tag tag-dot tag-ok">{t({ en: "Governed model capacity", "zh-Hant": "受管模型容量" })}</span>
              </div>
            </div>
            <div className="rise rise-2">
              <HeroMascot />
            </div>
          </div>
        </div>
      </section>

      {/* Three pillars */}
      <section className="rule">
        <div className="wrap section-tight">
          <div className="row between center" style={{ marginBottom: 32 }}>
            <div className="eyebrow">{t({ en: "What you can unlock", "zh-Hant": "可解鎖能力" })}</div>
            <div className="mono-sm">{t({ en: "03 / pillars", "zh-Hant": "03 / 支柱" })}</div>
          </div>
          <div className="grid pillar-grid" style={{ gridTemplateColumns: "repeat(3, 1fr)", gap: 0, borderTop: "1px solid var(--rule)" }}>
            {pillars.map((p, i) => (
              <div key={p.k} style={{
                padding: "32px 28px",
                borderRight: i < 2 ? "1px solid var(--rule)" : "none",
                borderBottom: "1px solid var(--rule)",
              }}>
                <div className="row between center" style={{ marginBottom: 24 }}>
                  <span className="mono-sm" style={{ color: "var(--ink-3)" }}>{p.k}</span>
                  <span className="tag tag-dot">{p.tag}</span>
                </div>
                <h3 className="display" style={{ fontSize: 36, margin: "0 0 12px" }}>{p.t}</h3>
                <p style={{ color: "var(--ink-2)", margin: 0, fontSize: 14.5, lineHeight: 1.55 }}>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Partners strip */}
      <section className="rule">
        <div className="wrap section-tight">
          <div className="row between center" style={{ marginBottom: 24 }}>
            <div className="display" style={{ fontSize: 28 }}>{t({ en: "Example partner models", "zh-Hant": "合作模型示例" })}</div>
            <button className="btn btn-ghost btn-sm btn-arrow" onClick={() => go("catalog")}>{t({ en: "View deliverable models", "zh-Hant": "查看可交付模型" })}</button>
          </div>
          <div className="grid partner-grid" style={{ gridTemplateColumns: "repeat(5, 1fr)", gap: 12 }}>
            {partners.map(m => (
              <div key={m.n} className="card" style={{ padding: 18 }}>
                <div className="mono-sm" style={{ marginBottom: 8 }}>{t({ en: "partner", "zh-Hant": "合作夥伴" })}</div>
                <div style={{ fontWeight: 600, fontSize: 14 }}>{m.n}</div>
                <div className="muted" style={{ fontSize: 12.5, marginTop: 4 }}>{m.s}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* How it works */}
      <section className="rule">
        <div className="wrap section">
          <div className="grid process-grid" style={{ gridTemplateColumns: "1fr 1.4fr", gap: 64 }}>
            <div className="col gap-16">
              <div className="eyebrow">{t({ en: "From assessment to pilot", "zh-Hant": "從評估到試點" })}</div>
              <h2 className="display" style={{ fontSize: 54, margin: 0, lineHeight: 1.05 }}>
                {t({ en: "Find the route,", "zh-Hant": "找出路線，" })}<br/>
                {t({ en: "prove the savings,", "zh-Hant": "驗證節省，" })}<br/>
                {t({ en: "then scale.", "zh-Hant": "再規模化。" })}
              </h2>
              <p style={{ color: "var(--ink-2)", maxWidth: 460, fontSize: 16 }}>
                {t({
                  en: "Start with a two-minute Fit Check. Then validate one real workload in a 4–6 week paid pilot before committing to a larger rollout.",
                  "zh-Hant": "先用兩分鐘完成適配檢查，再以 4 至 6 週付費試點驗證一個真實工作負載，然後再擴大導入。",
                })}
              </p>
            </div>
            <div className="col gap-12">
              <ProcessVisual />
              {processRows.map((row, i) => (
                <div key={i} className="row gap-24 start" style={{ padding: "20px 0", borderTop: "1px solid var(--rule)" }}>
                  <div className="mono-sm" style={{ width: 80, color: "var(--ink-3)", flexShrink: 0 }}>{row.s}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 18, fontWeight: 600 }}>{row.t}</div>
                    <div className="muted" style={{ fontSize: 14, marginTop: 4 }}>{row.d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Big CTA strip */}
      <section className="rule">
        <div className="wrap section-tight">
          <div className="card card-ink cta-grid" style={{ padding: 48, display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 32, alignItems: "center" }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 12 }}>{t({ en: "Free · 2 minutes", "zh-Hant": "免費 · 2 分鐘" })}</div>
              <div className="display" style={{ fontSize: 44, lineHeight: 1.05 }}>
                {t({
                  en: "Stop guessing. Find the right route for your AI workload in two minutes.",
                  "zh-Hant": "不用再猜。兩分鐘找出最適合你 AI 工作負載的路線。",
                })}
              </div>
            </div>
            <div className="row gap-12" style={{ justifyContent: "flex-end" }}>
              <button className="btn btn-lg btn-arrow"
                style={{ background: "var(--bg)", borderColor: "var(--bg)", color: "var(--ink)" }}
                onClick={() => go("fit")}>
                {t({ en: "Run Fit Check", "zh-Hant": "開始適配檢查" })}
              </button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Home });