// Paid Pilot page
function PagePilot({ go, language }) {
  const t = (labels) => localizedLabel(labels, language);
  const packageLines = [
    { id: "package", value: "Free Fit Check", translate: t({ en: "Free Fit Check", "zh-Hant": "免費適配檢查" }) },
    { id: "package", value: "Deployment Readiness Assessment", translate: t({ en: "Deployment Readiness Assessment", "zh-Hant": "部署就緒評估" }) },
    { id: "package", value: "Private Endpoint Pilot", translate: t({ en: "Private Endpoint Pilot", "zh-Hant": "私有端點試點" }) },
    { id: "package", value: "Enterprise Rollout", translate: t({ en: "Enterprise Rollout", "zh-Hant": "企業全面推廣" }) },
  ];

  const timelineOptions = [
    { en: "4-6 weeks", zh: t({ en: "4-6 weeks", "zh-Hant": "4-6 週" }) },
    { en: "Next quarter", zh: t({ en: "Next quarter", "zh-Hant": "下季度" }) },
    { en: "Exploratory", zh: t({ en: "Exploratory", "zh-Hant": "探索性" }) },
  ];

  const formItems = [
    { en: "Workload assessment", zh: t({ en: "工作負載評估", "zh-Hant": "工作負載評估" }) },
    { en: "Model benchmark", zh: t({ en: "模型基準測試", "zh-Hant": "模型基準測試" }) },
    { en: "Cost comparison", zh: t({ en: "成本比較", "zh-Hant": "成本比較" }) },
    { en: "Savings estimate", zh: t({ en: "節省估算", "zh-Hant": "節省估算" }) },
    { en: "Deployment architecture", zh: t({ en: "部署架構", "zh-Hant": "部署架構" }) },
    { en: "Data-flow diagram", zh: t({ en: "資料流圖", "zh-Hant": "資料流圖" }) },
    { en: "Compliance checklist", zh: t({ en: "合規清單", "zh-Hant": "合規清單" }) },
    { en: "Commercial proposal", zh: t({ en: "商業提案", "zh-Hant": "商業提案" }) },
    { en: "Production rollout plan", zh: t({ en: "生產部署計畫", "zh-Hant": "生產部署計畫" }) },
  ];

  const checklist = [
    { en: "Clear route recommendation (Azure / ModelPort / Hybrid)", zh: t({ en: "清晰建議路線（Azure / ModelPort / 混合）", "zh-Hant": "清晰建議路線（Azure / ModelPort / 混合）" }) },
    { en: "Scoped pilot statement of work", zh: t({ en: "範圍化試點工作聲明", "zh-Hant": "範圍化試點工作聲明" }) },
    { en: "Initial savings estimate", zh: t({ en: "初步節省預估", "zh-Hant": "初步節省預估" }) },
    { en: "Compliance pack checklist", zh: t({ en: "合規套件清單", "zh-Hant": "合規套件清單" }) },
  ];

  const [form, setForm] = React.useState({
    company: "",
    name: "",
    email: "",
    workload: "",
    timeline: "4-6 weeks",
    package: "Deployment Readiness Assessment",
  });
  const [submitted, setSubmitted] = React.useState(false);

  const canSubmit = form.company && form.name && form.email && form.workload;

  function set(k, v) { setForm(f => ({ ...f, [k]: v })); }

  return (
    <div data-screen-label="09 Pilot">
      <section style={{ paddingTop: 64, paddingBottom: 32 }}>
        <div className="wrap">
          <div className="eyebrow" style={{ marginBottom: 12 }}>{t({ en: "Paid Pilot", "zh-Hant": "付費試點" })}</div>
          <h1 className="display" style={{ fontSize: 64, margin: 0, lineHeight: 1.04, maxWidth: 1000 }}>
            {t({ en: "Start with one real use case.", "zh-Hant": "從一個真實場景開始。" })}<br/>
            {t({ en: "Prove it works.", "zh-Hant": "先驗證可行。" })}<br/>
            <em style={{ fontStyle: "italic", color: "var(--accent)" }}>{t({ en: "Then build the platform.", "zh-Hant": "再建立起整體平台。" })}</em>
          </h1>
          <p style={{ color: "var(--ink-2)", fontSize: 17, marginTop: 20, maxWidth: 760, textWrap: "pretty" }}>
            {t({
              en: "Start with a 4–6 week deployment assessment. We help you compare model performance,",
              "zh-Hant": "從 4-6 週部署就緒評估開始。我們幫你比較模型效能、",
            })}
            {" "}
            {t({
              en: "validate savings, design the data flow and decide whether ModelPort local delivery is worth scaling.",
              "zh-Hant": "驗證節省幅度、設計資料流，並決定是否要把 ModelPort 本地交付擴展到更多工作負載。",
            })}
          </p>
        </div>
      </section>

      <section className="rule">
        <div className="wrap" style={{ paddingTop: 40, paddingBottom: 16 }}>
          <div className="grid pilot-top-grid" style={{ gridTemplateColumns: "1.1fr 1fr", gap: 20 }}>
            {/* Pilot package */}
            <div className="card" style={{ padding: 32 }}>
              <div className="row between center" style={{ marginBottom: 20 }}>
                <span className="mono-sm">{t({ en: "Pilot package · includes", "zh-Hant": "試點套件 · 含有" })}</span>
                <span className="tag tag-dot">{t({ en: "Fixed-scope", "zh-Hant": "限定範圍" })}</span>
              </div>
              <ul className="dot-list">
                {formItems.map(item => <li key={item.en}>{item.zh}</li>)}
              </ul>
            </div>

            {/* Pricing tiers */}
            <div className="card" style={{ padding: 32 }}>
              <div className="row between center" style={{ marginBottom: 20 }}>
                <span className="mono-sm">{t({ en: "Pricing", "zh-Hant": "定價" })}</span>
                <span className="mono-sm">HKD</span>
              </div>
              <div className="col" style={{ gap: 0 }}>
                {[
                  { label: t({ en: "Free Fit Check", "zh-Hant": "免費適配檢查" }), price: t({ en: "Free", "zh-Hant": "免費" }), desc: t({ en: "2-minute route assessment", "zh-Hant": "2 分鐘路線評估" }), cta: "fit", primary: false },
                  { label: t({ en: "Deployment Readiness Assessment", "zh-Hant": "部署就緒評估" }), price: "HK$100k – 300k", desc: t({ en: "4–6 weeks · one workload", "zh-Hant": "4-6 週 · 1 個工作負載" }), primary: true },
                  { label: t({ en: "Private Endpoint Pilot", "zh-Hant": "私有端點試點" }), price: t({ en: "Custom", "zh-Hant": "客製" }), desc: t({ en: "HK private endpoint, audit, no-training option", "zh-Hant": "香港私有端點、審計、不訓練選項" }) },
                  { label: t({ en: "Enterprise Rollout", "zh-Hant": "企業全面推廣" }), price: t({ en: "Usage + platform fee", "zh-Hant": "使用量 + 平台費" }), desc: t({ en: "Production. SLA + support.", "zh-Hant": "生產環境。SLA + 支援。" }) },
                ].map((tier, i) => (
                  <div key={tier.label} style={{
                    padding: "18px 0",
                    borderTop: i === 0 ? "none" : "1px solid var(--rule)",
                  }}>
                    <div className="row between center">
                      <div className="col gap-4">
                        <div className="row gap-8 center">
                          <span style={{ fontWeight: 600, fontSize: 15 }}>{tier.label}</span>
                          {tier.primary && <span className="tag tag-dot tag-ok">{t({ en: "Most teams start here", "zh-Hant": "多數團隊先從這裡開始" })}</span>}
                        </div>
                        <div className="muted" style={{ fontSize: 13 }}>{tier.desc}</div>
                      </div>
                      <div className="mono" style={{ fontSize: 14, fontWeight: 600 }}>{tier.price}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Request form */}
      <section className="rule">
        <div className="wrap" style={{ paddingTop: 56, paddingBottom: 72 }}>
          <div className="grid pilot-form-grid" style={{ gridTemplateColumns: "1fr 1.2fr", gap: 64, alignItems: "start" }}>
            <div className="col gap-16">
                  <div className="eyebrow">{t({ en: "Request Paid Pilot", "zh-Hant": "申請付費試點" })}</div>
                  <h2 className="display" style={{ fontSize: 44, margin: 0, lineHeight: 1.05 }}>
                    {t({ en: "Tell us what you want to validate.", "zh-Hant": "請告訴我們你想驗證什麼。" })}
                  </h2>
              <p style={{ color: "var(--ink-2)", maxWidth: 420, textWrap: "pretty" }}>
                {t({
                  en: "Share one real workload. We will come back within two business days with a",
                  "zh-Hant": "分享一個真實工作負載。兩個工作天內，我們會回覆一份",
                })}
                {" "}
                {t({
                  en: "scoped pilot proposal. ModelPort delivery is based in Hong Kong; calls in HKT, SGT and JST.",
                  "zh-Hant": "針對性試點方案。ModelPort 交付團隊位於香港，提供港、星、新等時區協作支持。",
                })}
              </p>
              <div className="card card-muted" style={{ padding: 20 }}>
                <div className="mono-sm" style={{ marginBottom: 10 }}>{t({ en: "What you'll get back", "zh-Hant": "你將收到什麼" })}</div>
                <ul className="dot-list dot">
                  {checklist.map(item => <li key={item.en}>{item.zh}</li>)}
                </ul>
              </div>
            </div>

            <div className="card" style={{ padding: 32 }}>
              {submitted ? (
                <div className="col gap-16 rise" style={{ padding: "20px 0" }}>
                  <span className="tag tag-dot tag-ok" style={{ width: "fit-content" }}>{t({ en: "Request received", "zh-Hant": "已提交申請" })}</span>
                  <h3 className="display" style={{ fontSize: 32, margin: 0 }}>{t({ en: "Thank you,", "zh-Hant": "感謝你，" })} {form.name.split(" ")[0] || t({ en: "there", "zh-Hant": "您" })}。</h3>
                  <p style={{ color: "var(--ink-2)", margin: 0 }}>
                    {t({
                      en: "A ModelPort delivery lead will contact",
                      "zh-Hant": "ModelPort 專案負責人將聯絡",
                    })}
                    <span className="mono" style={{ fontSize: 13 }}>{" " + form.email}</span>
                    {" "}
                    {t({
                      en: "within two business days with a scoped",
                      "zh-Hant": "，在兩個工作天內提供一份",
                    })}
                    {" "}
                    <em>{packageLabel(form.package, language)}</em>
                    {" "}
                    {t({ en: "proposal for", "zh-Hant": "客製提案，針對" })}
                    {" "}
                    <em>{form.workload || t({ en: "your workload", "zh-Hant": "你的工作負載" })}</em>。
                  </p>
                  <div className="grid" style={{ gridTemplateColumns: "1fr 1fr", gap: 12, marginTop: 8 }}>
                    <div className="card card-muted" style={{ padding: 14 }}>
                      <div className="mono-sm">{t({ en: "Reference", "zh-Hant": "參考編號" })}</div>
                      <div className="mono" style={{ fontSize: 13, marginTop: 4 }}>MP-{Math.floor(Math.random() * 90000 + 10000)}</div>
                    </div>
                    <div className="card card-muted" style={{ padding: 14 }}>
                      <div className="mono-sm">SLA</div>
                      <div style={{ fontSize: 13, marginTop: 4 }}>{t({ en: "Response within 2 business days", "zh-Hant": "兩個工作天內回覆" })}</div>
                    </div>
                  </div>
                  <div className="row gap-12" style={{ marginTop: 12 }}>
                    <button className="btn" onClick={() => { setSubmitted(false); setForm({ company: "", name: "", email: "", workload: "", timeline: "4-6 weeks", package: "Deployment Readiness Assessment" }); }}>
                      {t({ en: "Submit another workload", "zh-Hant": "提交另一個工作負載" })}
                    </button>
                    <button className="btn btn-ghost" onClick={() => go("home")}>{t({ en: "Back to home", "zh-Hant": "返回首頁" })}</button>
                  </div>
                </div>
              ) : (
                <form className="col gap-20" onSubmit={e => { e.preventDefault(); if (canSubmit) setSubmitted(true); }}>
                  <div className="grid" style={{ gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                    <Field label={t({ en: "Company", "zh-Hant": "公司" })} v={form.company} set={v => set("company", v)} placeholder={t({ en: "Harbour Finance", "zh-Hant": "海港金融" })} />
                    <Field label={t({ en: "Your name", "zh-Hant": "你的姓名" })} v={form.name} set={v => set("name", v)} placeholder={t({ en: "Mei Chan", "zh-Hant": "陳美" })} />
                  </div>
                  <Field label={t({ en: "Work email", "zh-Hant": "工作電郵" })} v={form.email} set={v => set("email", v)} placeholder={t({ en: "you@company.com", "zh-Hant": "you@company.com" })} type="email" />
                  <FieldArea
                    label={t({ en: "Workload to validate", "zh-Hant": "待驗證工作負載" })}
                    v={form.workload}
                    set={v => set("workload", v)}
                    placeholder={t({
                      en: "e.g. Contract review across 5,000 Chinese-language commercial leases. Confidential data. Must stay in HK.",
                      "zh-Hant": "例：審閱約 5,000 份中文商務合約。資料為機密，必須留在香港。"
                    })}
                  />

                  <div className="col gap-10">
                    <div className="field-label">{t({ en: "Pilot package", "zh-Hant": "試點方案" })}</div>
                    <div className="choices">
                      {packageLines.map(p => (
                        <button key={p.value} type="button" className={"choice" + (form.package === p.value ? " on" : "")} onClick={() => set("package", p.value)}>{p.translate}</button>
                      ))}
                    </div>
                  </div>

                  <div className="col gap-10">
                    <div className="field-label">{t({ en: "Target timeline", "zh-Hant": "目標時程" })}</div>
                    <div className="choices">
                      {timelineOptions.map(tl => (
                        <button key={tl.en} type="button" className={"choice" + (form.timeline === tl.en ? " on" : "")} onClick={() => set("timeline", tl.en)}>{tl.zh}</button>
                      ))}
                    </div>
                  </div>

                  <div className="row between center" style={{ marginTop: 8 }}>
                    <div className="muted" style={{ fontSize: 12 }}>{t({ en: "By submitting you agree to a one-time delivery follow-up. No marketing list.", "zh-Hant": "送出申請即表示同意由我們進行一次性交付跟進，不作為市場推廣名單。" })}</div>
                    <button className="btn btn-lg btn-arrow"
                      type="submit"
                      style={{ opacity: canSubmit ? 1 : 0.4, cursor: canSubmit ? "pointer" : "not-allowed" }}
                      disabled={!canSubmit}>
                      {t({ en: "Request Paid Pilot", "zh-Hant": "申請付費試點" })}
                    </button>
                  </div>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function packageLabel(name, language) {
  const map = {
    "free fit check": {
      en: "Free Fit Check",
      "zh-Hant": "免費適配檢查",
    },
    "deployment readiness assessment": {
      en: "Deployment Readiness Assessment",
      "zh-Hant": "部署就緒評估",
    },
    "private endpoint pilot": {
      en: "Private Endpoint Pilot",
      "zh-Hant": "私有端點試點",
    },
    "enterprise rollout": {
      en: "Enterprise Rollout",
      "zh-Hant": "企業全面推廣",
    },
  };
  return localizedLabel(map[name.toLowerCase()] || { en: name, "zh-Hant": name }, language);
}

function Field({ label, v, set, placeholder, type = "text" }) {
  return (
    <label className="col gap-8">
      <span className="field-label">{label}</span>
      <input
        type={type}
        value={v}
        onChange={e => set(e.target.value)}
        placeholder={placeholder}
        style={{
          padding: "12px 14px",
          border: "1px solid var(--rule)",
          borderRadius: 8,
          background: "var(--bg)",
          fontFamily: "inherit",
          fontSize: 14,
          color: "var(--ink)",
          outline: "none",
        }}
        onFocus={e => e.target.style.borderColor = "var(--ink)"}
        onBlur={e => e.target.style.borderColor = "var(--rule)"}
      />
    </label>
  );
}

function FieldArea({ label, v, set, placeholder }) {
  return (
    <label className="col gap-8">
      <span className="field-label">{label}</span>
      <textarea
        value={v}
        onChange={e => set(e.target.value)}
        placeholder={placeholder}
        rows={3}
        style={{
          padding: "12px 14px",
          border: "1px solid var(--rule)",
          borderRadius: 8,
          background: "var(--bg)",
          fontFamily: "inherit",
          fontSize: 14,
          color: "var(--ink)",
          outline: "none",
          resize: "vertical",
        }}
        onFocus={e => e.target.style.borderColor = "var(--ink)"}
        onBlur={e => e.target.style.borderColor = "var(--rule)"}
      />
    </label>
  );
}

Object.assign(window, { PagePilot });