// Fit Check form + recommendation engine + result page

const FIT_FIELDS = [
  {
    id: "workload",
    label: "Workload",
    options: [
      "Internal knowledge base",
      "Customer service chatbot",
      "Contract review",
      "Financial research assistant",
      "AI coding assistant",
      "Ecommerce support",
      "Agent workflow",
    ],
  },
  {
    id: "sensitivity",
    label: "Data sensitivity",
    options: ["Public", "Internal", "Confidential", "Regulated"],
  },
  {
    id: "azure",
    label: "Azure policy",
    options: [
      "Already use Azure",
      "Azure only for non-sensitive workloads",
      "Prefer non-Azure infrastructure",
      "Azure blocked for this workload",
      "Not sure",
    ],
  },
  {
    id: "deployment",
    label: "Deployment requirement",
    options: [
      "Public cloud is fine",
      "Must stay in Hong Kong",
      "Must stay in private cloud",
      "Must use telco / data-centre infrastructure",
      "Hybrid setup preferred",
    ],
  },
  {
    id: "goal",
    label: "Primary goal",
    options: [
      "Lower model cost",
      "Overseas-ready model version",
      "Local deployment",
      "Compliance and auditability",
      "Vendor diversification",
      "Best accuracy",
    ],
  },
  {
    id: "commercial",
    label: "Commercial preference",
    options: [
      "Pay-as-you-go",
      "Discounted bulk capacity",
      "Dedicated capacity",
      "Private deployment",
      "Not sure",
    ],
  },
];

const FIT_TEXT = {
  "Workload": "工作負載",
  "Internal knowledge base": "內部知識庫",
  "Customer service chatbot": "客服聊天機械人",
  "Contract review": "合約審閱",
  "Financial research assistant": "金融研究助理",
  "AI coding assistant": "AI 編程助理",
  "Ecommerce support": "電商支援",
  "Agent workflow": "智能代理流程",
  "Data sensitivity": "資料敏感度",
  "Public": "公開",
  "Internal": "內部",
  "Confidential": "機密",
  "Regulated": "受監管",
  "Azure policy": "Azure 政策",
  "Already use Azure": "已使用 Azure",
  "Azure only for non-sensitive workloads": "Azure 僅用於非敏感工作負載",
  "Prefer non-Azure infrastructure": "偏好非 Azure 基礎設施",
  "Azure blocked for this workload": "此工作負載不可使用 Azure",
  "Not sure": "不確定",
  "Deployment requirement": "部署要求",
  "Public cloud is fine": "可使用公有雲",
  "Must stay in Hong Kong": "必須留在香港",
  "Must stay in private cloud": "必須留在私有雲",
  "Must use telco / data-centre infrastructure": "必須使用電訊或數據中心基礎設施",
  "Hybrid setup preferred": "偏好混合部署",
  "Primary goal": "主要目標",
  "Lower model cost": "降低模型成本",
  "Overseas-ready model version": "海外可用模型版本",
  "Local deployment": "本地部署",
  "Compliance and auditability": "合規與可審計性",
  "Vendor diversification": "供應商多元化",
  "Best accuracy": "最佳準確度",
  "Commercial preference": "商務偏好",
  "Pay-as-you-go": "按量付費",
  "Discounted bulk capacity": "折扣批量容量",
  "Dedicated capacity": "專用容量",
  "Private deployment": "私有部署",
  "Free Fit Check · 2 minutes": "免費適配檢查 · 2 分鐘",
  "answered": "已回答",
  "Find the right AI model route": "找出合適的 AI 模型路線",
  "for your workload.": "配合你的工作負載。",
  "Answer six questions to see whether Azure Foundry, ModelPort Local Delivery or a Hybrid Setup is the strongest starting point — and why.": "回答六個問題，了解 Azure Foundry、ModelPort 本地交付或混合部署哪個最適合作為起點，以及原因。",
  "Answered": "已回答",
  "Privacy": "私隱",
  "Answers stay local in your browser. We don't store them until you submit a pilot request.": "答案只會保留在你的瀏覽器本機。除非你提交試點申請，否則我們不會儲存。",
  "See Recommended Route": "查看建議路線",
  "Recommendation": "建議",
  "Start over": "重新開始",
  "Start with Azure Foundry.": "從 Azure Foundry 開始。",
  "Start with ModelPort Local Delivery.": "從 ModelPort 本地交付開始。",
  "Use a hybrid setup.": "使用混合部署。",
  "This workload looks cloud-native and does not yet require local delivery, discounted bulk capacity or overseas enterprise versions. ModelPort becomes useful when cost pressure, private delivery or China / Asia model coverage matters more.": "此工作負載較偏向雲原生，暫時不需要本地交付、折扣批量容量或海外企業版本。當成本壓力、私有交付或中國及亞洲模型覆蓋更重要時，ModelPort 會更有價值。",
  "This workload shows cost, compliance, overseas-version or private-endpoint signals. A focused ModelPort pilot can validate savings, deployment risk and compliance readiness before a larger rollout.": "此工作負載顯示成本、合規、海外版本或私有端點需求。聚焦的 ModelPort 試點可在大規模導入前驗證節省、部署風險與合規準備度。",
  "Keep general workloads on Azure Foundry and route cost-sensitive, private, local or overseas China / Asia model workloads through ModelPort.": "一般工作負載保留在 Azure Foundry，將成本敏感、私有、本地或海外中國及亞洲模型工作負載交由 ModelPort 處理。",
  "Azure Foundry": "Azure Foundry",
  "ModelPort Local Delivery": "ModelPort 本地交付",
  "Hybrid (Azure + ModelPort)": "混合部署（Azure + ModelPort）",
  "Low": "低",
  "High": "高",
  "Targeted": "精準",
  "Cloud-native workload": "雲原生工作負載",
  "Private / cost / overseas-ready requirements": "私有、成本或海外可用要求",
  "Mixed portfolio — one path won't cover everything": "組合需求多元，單一路線無法覆蓋全部",
  "Use ModelPort when sensitive data, private delivery or model cost becomes important": "當敏感資料、私有交付或模型成本變得重要時使用 ModelPort",
  "Book a 4–6 week deployment assessment": "預約 4 至 6 週部署評估",
  "Define the workload split, then pilot the ModelPort side": "先定義工作負載分流，再試點 ModelPort 部分",
  "Cloud-native": "雲原生",
  "Local delivery": "本地交付",
  "Best-of-both": "雙路並行",
  "Result": "結果",
  "Generated · just now": "剛剛生成",
  "Recommended route": "建議路線",
  "ModelPort relevance": "ModelPort 相關度",
  "Why": "原因",
  "Next step": "下一步",
  "Suggested package": "建議方案",
  "Example partners": "示例合作夥伴",
  "Commercial model": "商務模式",
  "Discounted bulk capacity + platform fee": "折扣批量容量 + 平台費",
  "Deployment": "部署",
  "Hong Kong private endpoint": "香港私有端點",
  "Compliance pack": "合規包",
  "DPA, audit logs, data-flow, no-training where available": "DPA、審計日誌、資料流與可用的不訓練資料選項",
  "Pilot estimate": "試點預估",
  "Pilot fee": "試點費用",
  "Suggested architecture": "建議架構",
  "General chatbot → Azure Foundry": "一般聊天機械人 → Azure Foundry",
  "Sensitive knowledge base → ModelPort Local Delivery": "敏感知識庫 → ModelPort 本地交付",
  "China / Asia model workload → ModelPort": "中國及亞洲模型工作負載 → ModelPort",
  "Reporting and cost control → ModelPort dashboard": "報告與成本控制 → ModelPort 儀表板",
  "When ModelPort becomes relevant": "何時適合使用 ModelPort",
  "You need private endpoint or HK residency": "你需要私有端點或香港資料駐留",
  "You hit Azure's China / Asia model gap": "你遇到 Azure 在中國及亞洲模型覆蓋上的缺口",
  "Retail API pricing becomes the cost bottleneck": "零售 API 價格成為成本瓶頸",
  "You need an overseas-ready enterprise model version": "你需要海外可用的企業模型版本",
  "Book a quick consult": "預約快速諮詢",
  "Request paid pilot": "申請付費試點",
  "View deliverable models": "查看可交付模型",
  "Score breakdown": "評分拆解",
  "Hybrid Setup": "混合部署",
  "recommended": "建議",
  "Top signals": "主要信號",
  "No strong signals — balanced profile.": "沒有強烈信號，屬於平衡型配置。",
  "Your answers": "你的答案",
  "Edit answers": "編輯答案",
  "Public data — public cloud is fine": "公開資料可使用公有雲",
  "Confidential data calls for private delivery": "機密資料需要私有交付",
  "Regulated workload requires private endpoint + DPA": "受監管工作負載需要私有端點與 DPA",
  "Azure-for-some policy is a textbook hybrid setup": "部分使用 Azure 的政策很適合混合部署",
  "Azure blocked — non-Azure path required": "Azure 受限，需要非 Azure 路線",
  "Hong Kong residency requirement": "香港資料駐留要求",
  "Private cloud requirement": "私有雲要求",
  "Telco / DC infrastructure required": "需要電訊或數據中心基礎設施",
  "Cost is the primary lever — bulk capacity wins": "成本是主要因素，批量容量更有優勢",
  "Overseas-ready enterprise version only via ModelPort partners": "海外可用企業版本需透過 ModelPort 合作夥伴取得",
  "High-sensitivity domain — sensitive document handling": "高敏感領域，需要處理敏感文件",
};

function fitText(language, text) {
  return language === "zh-Hant" ? (FIT_TEXT[text] || text) : text;
}

// Recommendation engine — scores Azure / ModelPort / Hybrid
function recommend(answers) {
  let azure = 0, modelport = 0, hybrid = 0;
  const r = [];

  // Sensitivity
  if (answers.sensitivity === "Public") { azure += 2; r.push(["Public data — public cloud is fine", "azure"]); }
  if (answers.sensitivity === "Internal") { azure += 1; hybrid += 1; }
  if (answers.sensitivity === "Confidential") { modelport += 2; hybrid += 1; r.push(["Confidential data calls for private delivery", "modelport"]); }
  if (answers.sensitivity === "Regulated") { modelport += 3; r.push(["Regulated workload requires private endpoint + DPA", "modelport"]); }

  // Azure policy
  if (answers.azure === "Already use Azure") { azure += 2; hybrid += 1; }
  if (answers.azure === "Azure only for non-sensitive workloads") { hybrid += 3; r.push(["Azure-for-some policy is a textbook hybrid setup", "hybrid"]); }
  if (answers.azure === "Prefer non-Azure infrastructure") { modelport += 2; }
  if (answers.azure === "Azure blocked for this workload") { modelport += 3; r.push(["Azure blocked — non-Azure path required", "modelport"]); }

  // Deployment
  if (answers.deployment === "Public cloud is fine") { azure += 2; }
  if (answers.deployment === "Must stay in Hong Kong") { modelport += 3; r.push(["Hong Kong residency requirement", "modelport"]); }
  if (answers.deployment === "Must stay in private cloud") { modelport += 3; r.push(["Private cloud requirement", "modelport"]); }
  if (answers.deployment === "Must use telco / data-centre infrastructure") { modelport += 3; r.push(["Telco / DC infrastructure required", "modelport"]); }
  if (answers.deployment === "Hybrid setup preferred") { hybrid += 3; }

  // Goal
  if (answers.goal === "Lower model cost") { modelport += 2; r.push(["Cost is the primary lever — bulk capacity wins", "modelport"]); }
  if (answers.goal === "Overseas-ready model version") { modelport += 3; r.push(["Overseas-ready enterprise version only via ModelPort partners", "modelport"]); }
  if (answers.goal === "Local deployment") { modelport += 3; }
  if (answers.goal === "Compliance and auditability") { modelport += 2; hybrid += 1; }
  if (answers.goal === "Vendor diversification") { hybrid += 2; modelport += 1; }
  if (answers.goal === "Best accuracy") { azure += 1; hybrid += 1; }

  // Commercial
  if (answers.commercial === "Pay-as-you-go") { azure += 1; }
  if (answers.commercial === "Discounted bulk capacity") { modelport += 2; }
  if (answers.commercial === "Dedicated capacity") { modelport += 2; }
  if (answers.commercial === "Private deployment") { modelport += 3; }

  // Workload hints
  if (answers.workload === "Contract review" || answers.workload === "Financial research assistant") {
    modelport += 1; r.push(["High-sensitivity domain — sensitive document handling", "modelport"]);
  }
  if (answers.workload === "Customer service chatbot" || answers.workload === "Ecommerce support") {
    azure += 1;
  }

  const scores = { azure, modelport, hybrid };

  // Determine recommendation; require ModelPort signal to beat Azure by ≥2 to swing
  let route = "hybrid";
  if (azure >= modelport + 2 && azure >= hybrid + 1) route = "azure";
  else if (modelport >= azure + 1 && modelport >= hybrid) route = "modelport";
  else if (hybrid >= azure && hybrid >= modelport - 1) route = "hybrid";
  else if (modelport >= azure) route = "modelport";
  else route = "azure";

  return { route, scores, reasons: r };
}

function FitCheckForm({ answers, setAnswers, onSubmit, language }) {
  const t = (text) => fitText(language, text);
  const filledCount = FIT_FIELDS.filter(f => answers[f.id]).length;
  const total = FIT_FIELDS.length;
  const canSubmit = filledCount === total;

  return (
    <div data-screen-label="03 Fit Check">
      <section style={{ paddingTop: 64, paddingBottom: 32 }}>
        <div className="wrap">
          <div className="row between center" style={{ marginBottom: 24 }}>
            <span className="eyebrow">{t("Free Fit Check · 2 minutes")}</span>
            <span className="mono-sm">{filledCount}/{total} {t("answered")}</span>
          </div>
          <h1 className="display" style={{ fontSize: 64, margin: 0, lineHeight: 1.05, maxWidth: 1000 }}>
            {t("Find the right AI model route")}<br/>{t("for your workload.")}
          </h1>
          <p style={{ color: "var(--ink-2)", fontSize: 17, marginTop: 20, maxWidth: 700 }}>
            {t("Answer six questions to see whether Azure Foundry, ModelPort Local Delivery or a Hybrid Setup is the strongest starting point — and why.")}
          </p>
        </div>
      </section>

      <section className="rule">
        <div className="wrap" style={{ paddingTop: 48, paddingBottom: 64 }}>
          <div className="col gap-32">
            {FIT_FIELDS.map((f, i) => (
              <div key={f.id} className="grid fit-field-row" style={{ gridTemplateColumns: "180px 1fr", gap: 32, paddingTop: 28, borderTop: i === 0 ? "none" : "1px solid var(--rule)" }}>
                <div className="col gap-8">
                  <div className="mono-sm">Q{String(i + 1).padStart(2, "0")}</div>
                  <div style={{ fontSize: 17, fontWeight: 600 }}>{t(f.label)}</div>
                  {answers[f.id] && <span className="tag tag-dot tag-ok" style={{ width: "fit-content" }}>{t("Answered")}</span>}
                </div>
                <div className="choices">
                  {f.options.map(o => (
                    <button
                      key={o}
                      type="button"
                      className={"choice" + (answers[f.id] === o ? " on" : "")}
                      onClick={() => setAnswers(a => ({ ...a, [f.id]: o }))}>
                      {t(o)}
                    </button>
                  ))}
                </div>
              </div>
            ))}
          </div>

          <div className="form-footer" style={{ marginTop: 40 }}>
            <div className="col gap-4">
              <div className="mono-sm">{t("Privacy")}</div>
              <div className="muted" style={{ fontSize: 13 }}>
                {t("Answers stay local in your browser. We don't store them until you submit a pilot request.")}
              </div>
            </div>
            <button
              className={"btn btn-lg btn-arrow" + (canSubmit ? "" : "")}
              disabled={!canSubmit}
              style={{ opacity: canSubmit ? 1 : 0.4, cursor: canSubmit ? "pointer" : "not-allowed" }}
              onClick={() => canSubmit && onSubmit()}>
              {t("See Recommended Route")}
            </button>
          </div>
        </div>
      </section>
    </div>
  );
}

function FitCheckResult({ answers, result, go, restart, language }) {
  const t = (text) => fitText(language, text);
  const { route, scores, reasons } = result;

  const cfg = {
    azure: {
      headline: "Start with Azure Foundry.",
      copy: "This workload looks cloud-native and does not yet require local delivery, discounted bulk capacity or overseas enterprise versions. ModelPort becomes useful when cost pressure, private delivery or China / Asia model coverage matters more.",
      route: "Azure Foundry",
      relevance: "Low",
      reason: "Cloud-native workload",
      next: "Use ModelPort when sensitive data, private delivery or model cost becomes important",
      color: "var(--ink)",
      tag: "Cloud-native",
    },
    modelport: {
      headline: "Start with ModelPort Local Delivery.",
      copy: "This workload shows cost, compliance, overseas-version or private-endpoint signals. A focused ModelPort pilot can validate savings, deployment risk and compliance readiness before a larger rollout.",
      route: "ModelPort Local Delivery",
      relevance: "High",
      reason: "Private / cost / overseas-ready requirements",
      next: "Book a 4–6 week deployment assessment",
      color: "var(--accent)",
      tag: "Local delivery",
    },
    hybrid: {
      headline: "Use a hybrid setup.",
      copy: "Keep general workloads on Azure Foundry and route cost-sensitive, private, local or overseas China / Asia model workloads through ModelPort.",
      route: "Hybrid (Azure + ModelPort)",
      relevance: "Targeted",
      reason: "Mixed portfolio — one path won't cover everything",
      next: "Define the workload split, then pilot the ModelPort side",
      color: "var(--clay)",
      tag: "Best-of-both",
    },
  }[route];

  const max = Math.max(scores.azure, scores.modelport, scores.hybrid, 1);

  return (
    <div data-screen-label="04 Fit Check Result" className="rise">
      <section style={{ paddingTop: 64, paddingBottom: 32 }}>
        <div className="wrap">
          <div className="row between center" style={{ marginBottom: 24 }}>
            <div className="row gap-8 center">
              <span className="eyebrow">{t("Recommendation")}</span>
              <span className="tag tag-dot" style={{ borderColor: cfg.color }}>
                <span style={{ color: cfg.color, fontWeight: 600 }}>{t(cfg.tag)}</span>
              </span>
            </div>
            <button className="btn btn-ghost btn-sm" onClick={restart}>{t("Start over")}</button>
          </div>
          <h1 className="display" style={{ fontSize: 64, margin: 0, lineHeight: 1.04, maxWidth: 1000 }}>
            {t(cfg.headline)}
          </h1>
          <p style={{ color: "var(--ink-2)", fontSize: 17, marginTop: 20, maxWidth: 800, textWrap: "pretty" }}>
            {t(cfg.copy)}
          </p>
        </div>
      </section>

      {/* Top result strip */}
      <section className="rule">
        <div className="wrap" style={{ paddingTop: 32 }}>
          <div className="grid fit-result-grid" style={{ gridTemplateColumns: "1.4fr 1fr", gap: 20 }}>
            {/* Recommendation card */}
            <div className="card" style={{ padding: 32 }}>
              <div className="row between center" style={{ marginBottom: 24 }}>
                <span className="mono-sm">{t("Result")} · {route.toUpperCase()}</span>
                <span className="mono-sm">{t("Generated · just now")}</span>
              </div>
              <div className="grid" style={{ gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 24 }}>
                <Detail k={t("Recommended route")} v={t(cfg.route)} />
                <Detail k={t("ModelPort relevance")} v={t(cfg.relevance)} />
                <Detail k={t("Why")} v={t(cfg.reason)} />
                <Detail k={t("Next step")} v={t(cfg.next)} />
              </div>

              {/* ModelPort specific package */}
              {route === "modelport" && (
                <div className="rule" style={{ paddingTop: 24, marginTop: 4 }}>
                  <div className="mono-sm" style={{ marginBottom: 16 }}>{t("Suggested package")}</div>
                  <div className="grid" style={{ gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                    <Detail k={t("Example partners")} v="Kimi, MiniMax, Qwen, DeepSeek" />
                    <Detail k={t("Commercial model")} v={t("Discounted bulk capacity + platform fee")} />
                    <Detail k={t("Deployment")} v={t("Hong Kong private endpoint")} />
                    <Detail k={t("Compliance pack")} v={t("DPA, audit logs, data-flow, no-training where available")} />
                    <Detail k={t("Pilot estimate")} v="4–6 weeks" />
                    <Detail k={t("Pilot fee")} v="HK$100k–300k" />
                  </div>
                </div>
              )}

              {/* Hybrid architecture */}
              {route === "hybrid" && (
                <div className="rule" style={{ paddingTop: 24, marginTop: 4 }}>
                  <div className="mono-sm" style={{ marginBottom: 16 }}>{t("Suggested architecture")}</div>
                  <ul className="dot-list">
                    <li>{t("General chatbot → Azure Foundry")}</li>
                    <li>{t("Sensitive knowledge base → ModelPort Local Delivery")}</li>
                    <li>{t("China / Asia model workload → ModelPort")}</li>
                    <li>{t("Reporting and cost control → ModelPort dashboard")}</li>
                  </ul>
                </div>
              )}

              {route === "azure" && (
                <div className="rule" style={{ paddingTop: 24, marginTop: 4 }}>
                  <div className="mono-sm" style={{ marginBottom: 16 }}>{t("When ModelPort becomes relevant")}</div>
                  <ul className="dot-list dot">
                    <li>{t("You need private endpoint or HK residency")}</li>
                    <li>{t("You hit Azure's China / Asia model gap")}</li>
                    <li>{t("Retail API pricing becomes the cost bottleneck")}</li>
                    <li>{t("You need an overseas-ready enterprise model version")}</li>
                  </ul>
                </div>
              )}

              <div className="row gap-12" style={{ marginTop: 28 }}>
                <button className="btn btn-arrow" onClick={() => go("pilot")}>
                  {route === "azure" ? t("Book a quick consult") : t("Request paid pilot")}
                </button>
                <button className="btn btn-ghost" onClick={() => go("catalog")}>{t("View deliverable models")}</button>
              </div>
            </div>

            {/* Score breakdown */}
            <div className="card card-muted" style={{ padding: 32 }}>
              <div className="mono-sm" style={{ marginBottom: 20 }}>{t("Score breakdown")}</div>
              <div className="col gap-16">
                <ScoreBar label={t("ModelPort Local Delivery")} recommendedLabel={t("recommended")} value={scores.modelport} max={max} active={route === "modelport"} color="var(--accent)" />
                <ScoreBar label={t("Hybrid Setup")} recommendedLabel={t("recommended")} value={scores.hybrid} max={max} active={route === "hybrid"} color="var(--clay)" />
                <ScoreBar label={t("Azure Foundry")} recommendedLabel={t("recommended")} value={scores.azure} max={max} active={route === "azure"} color="var(--ink)" />
              </div>

              <div className="mono-sm" style={{ marginTop: 28, marginBottom: 12 }}>{t("Top signals")}</div>
              {reasons.length === 0 ? (
                <div className="muted" style={{ fontSize: 13 }}>{t("No strong signals — balanced profile.")}</div>
              ) : (
                <ul className="dot-list dot">
                  {reasons.slice(0, 4).map((r, i) => <li key={i}>{t(r[0])}</li>)}
                </ul>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* Your answers */}
      <section className="rule">
        <div className="wrap section-tight">
          <div className="row between center" style={{ marginBottom: 20 }}>
            <h2 className="display" style={{ fontSize: 28, margin: 0 }}>{t("Your answers")}</h2>
            <button className="btn btn-ghost btn-sm" onClick={restart}>{t("Edit answers")}</button>
          </div>
          <div style={{ border: "1px solid var(--rule)", borderRadius: 12, overflow: "hidden" }}>
            <table className="t">
              <tbody>
                {FIT_FIELDS.map(f => (
                  <tr key={f.id}>
                    <td className="mono-sm" style={{ width: "30%", textTransform: "uppercase" }}>{t(f.label)}</td>
                    <td>{t(answers[f.id])}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>
    </div>
  );
}

function Detail({ k, v }) {
  return (
    <div className="col gap-6" style={{ padding: "12px 0" }}>
      <div className="mono-sm">{k}</div>
      <div style={{ fontSize: 15, color: "var(--ink)" }}>{v}</div>
    </div>
  );
}

function ScoreBar({ label, recommendedLabel, value, max, active, color }) {
  const pct = Math.max(6, Math.round((value / max) * 100));
  return (
    <div className="col gap-6">
      <div className="row between" style={{ fontSize: 13 }}>
        <span style={{ fontWeight: active ? 600 : 400, color: active ? "var(--ink)" : "var(--ink-2)" }}>
          {label} {active && <span className="mono-sm" style={{ marginLeft: 6 }}>· {recommendedLabel}</span>}
        </span>
        <span className="mono">{value}</span>
      </div>
      <div style={{ height: 8, background: "var(--bg-3)", borderRadius: 4, overflow: "hidden" }}>
        <div style={{ width: pct + "%", height: "100%", background: color, opacity: active ? 1 : 0.35, transition: "width .4s" }} />
      </div>
    </div>
  );
}

Object.assign(window, { FitCheckForm, FitCheckResult, recommend, FIT_FIELDS });
