// Pricing Advantage
function PricingFlow({ t }) {
  return (
    <div style={{ border: "1px solid var(--rule)", borderRadius: 16, padding: 32, background: "var(--bg-2)" }}>
      <div className="mono-sm" style={{ marginBottom: 24 }}>{t({ en: "Capacity flow", "zh-Hant": "容量流向" })}</div>
      <div className="grid pricing-flow-grid" style={{ gridTemplateColumns: "1fr auto 1fr auto 1fr auto 1.4fr", alignItems: "center", gap: 16 }}>
        <FlowNode t={t} label={t({ en: "Partner model companies", "zh-Hant": "合作模型廠商" })} sub={t({ en: "Kimi · MiniMax · Qwen · GLM · DeepSeek", "zh-Hant": "Kimi · MiniMax · Qwen · GLM · DeepSeek" })} />
        <FlowArrow text={t({ en: "Discount", "zh-Hant": "折扣" })} />
        <FlowNode t={t} label={t({ en: "Bulk capacity", "zh-Hant": "批量容量" })} sub={t({ en: "Aggregated demand", "zh-Hant": "彙集企業需求" })} emphasis />
        <FlowArrow text={t({ en: "Channel", "zh-Hant": "渠道" })} />
        <FlowNode t={t} label="ModelPort" sub={t({ en: "Platform + delivery", "zh-Hant": "平台 + 交付" })} emphasis ink />
        <FlowArrow text={t({ en: "Endpoints", "zh-Hant": "交付端點" })} />
        <FlowNode t={t} label={t({ en: "Enterprises · Telcos · DCs · SIs", "zh-Hant": "企業 · 電訊 · 數據中心 · SI" })} sub={t({ en: "Hong Kong + region", "zh-Hant": "香港 + 區域" })} />
      </div>
    </div>
  );
}

function FlowNode({ t, label, sub, emphasis, ink }) {
  return (
    <div className="col gap-6" style={{
      padding: "18px 16px",
      borderRadius: 12,
      border: "1px solid var(--rule)",
      background: ink ? "var(--ink)" : "var(--bg)",
      color: ink ? "var(--bg)" : "var(--ink)",
      minHeight: 88,
      justifyContent: "center",
    }}>
      <div style={{ fontSize: 14, fontWeight: 600 }}>{label}</div>
      <div className="mono-sm" style={{ color: ink ? "color-mix(in oklab, var(--bg) 60%, transparent)" : "var(--ink-3)" }}>{sub}</div>
    </div>
  );
}

function FlowArrow({ text }) {
  return (
    <div className="col center" style={{ gap: 4 }}>
      <div className="mono-sm" style={{ fontSize: 9.5 }}>{text}</div>
      <svg width="36" height="10" viewBox="0 0 36 10" fill="none">
        <path d="M0 5 H32 M28 1 L34 5 L28 9" stroke="var(--ink-3)" strokeWidth="1" fill="none" />
      </svg>
    </div>
  );
}

function PagePricing({ go, language }) {
  const t = (labels) => localizedLabel(labels, language);
  const blocks = [
    {
      label: t({ en: "Retail API Access", "zh-Hant": "零售 API 存取" }),
      points: [
        t({ en: "Standard public pricing", "zh-Hant": "標準公有雲價格" }),
        t({ en: "Limited negotiation", "zh-Hant": "議價空間有限" }),
        t({ en: "Separate provider relationships", "zh-Hant": "與供應商分開合約" }),
      ],
      muted: true,
    },
    {
      label: t({ en: "ModelPort Bulk Capacity", "zh-Hant": "ModelPort 批量容量" }),
      points: [
        t({ en: "Aggregated demand", "zh-Hant": "集中彙總需求" }),
        t({ en: "Better commercial terms", "zh-Hant": "更優商業條件" }),
        t({ en: "Centralised enterprise billing", "zh-Hant": "集中化企業計費" }),
        t({ en: "Usage visibility", "zh-Hant": "使用量可見性" }),
      ],
      emphasis: true,
    },
    {
      label: t({ en: "Dedicated Enterprise Capacity", "zh-Hant": "專用企業容量" }),
      points: [
        t({ en: "Private endpoint", "zh-Hant": "私有端點" }),
        t({ en: "Committed usage", "zh-Hant": "承諾用量" }),
        t({ en: "Custom SLA", "zh-Hant": "客製 SLA" }),
        t({ en: "Deployment support", "zh-Hant": "部署支援" }),
      ],
    },
  ];

  const curve = [
    { vol: t({ en: "1M", "zh-Hant": "1M" }), retail: 100, bulk: 100, dedicated: 100 },
    { vol: t({ en: "10M", "zh-Hant": "10M" }), retail: 100, bulk: 88, dedicated: 92 },
    { vol: t({ en: "50M", "zh-Hant": "50M" }), retail: 100, bulk: 74, dedicated: 80 },
    { vol: t({ en: "100M", "zh-Hant": "100M" }), retail: 100, bulk: 68, dedicated: 72 },
    { vol: t({ en: "500M", "zh-Hant": "500M" }), retail: 100, bulk: 58, dedicated: 62 },
  ];

  return (
    <div data-screen-label="06 Pricing Advantage">
      <section style={{ paddingTop: 64, paddingBottom: 24 }}>
        <div className="wrap">
          <div className="eyebrow" style={{ marginBottom: 12 }}>{t({ en: "Pricing Advantage", "zh-Hant": "定價優勢" })}</div>
          <h1 className="display" style={{ fontSize: 64, margin: 0, lineHeight: 1.04, maxWidth: 900 }}>
            {t({ en: "Lower model costs through", "zh-Hant": "以" })} <em style={{ fontStyle: "italic", color: "var(--accent)" }}>{t({ en: "bulk procurement", "zh-Hant": "批量採購" })}</em>.
          </h1>
          <p style={{ color: "var(--ink-2)", fontSize: 17, marginTop: 20, maxWidth: 760 }}>
            {t({
              en: "ModelPort aggregates enterprise demand and negotiates discounted capacity with",
              zh: "ModelPort 彙集企業需求並與",
              "zh-Hant": "ModelPort 彙集企業需求，與合作模型廠商協商折扣容量，",
            })}
            {t({
              en: "partner model providers, helping customers move beyond standard retail API",
              "zh-Hant": "協助客戶擺脫標準零售 API 價格框架，",
            })}
            {t({
              en: "pricing and gain clearer usage visibility.",
              "zh-Hant": "並更清楚掌握用量與成本。",
            })}
          </p>
        </div>
      </section>

      <section style={{ paddingBottom: 48 }}>
        <div className="wrap">
          <PricingFlow t={t} />
        </div>
      </section>

      <section className="rule">
        <div className="wrap section-tight">
          <div className="row between center" style={{ marginBottom: 24 }}>
            <h2 className="display" style={{ fontSize: 32, margin: 0 }}>{t({ en: "Choose the right commercial path", "zh-Hant": "選擇合適的商業路徑" })}</h2>
            <span className="mono-sm">{t({ en: "illustrative · per workload", "zh-Hant": "示意 · 依工作負載" })}</span>
          </div>
          <div className="grid" style={{ gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
            {blocks.map((b) => (
              <div
                key={b.label}
                className={"card" + (b.emphasis ? " card-ink" : "")}
                style={{ padding: 28, opacity: b.muted ? 0.85 : 1 }}>
                <div className="row between center" style={{ marginBottom: 18 }}>
                  <span className="mono-sm">{b.muted ? t({ en: "Baseline", "zh-Hant": "基礎" }) : b.emphasis ? t({ en: "Recommended", "zh-Hant": "建議採用" }) : t({ en: "Premium", "zh-Hant": "進階" })}</span>
                  <span className="tag tag-dot" style={{
                    background: b.emphasis ? "color-mix(in oklab, var(--bg) 10%, transparent)" : undefined,
                    borderColor: b.emphasis ? "color-mix(in oklab, var(--bg) 20%, transparent)" : undefined,
                    color: b.emphasis ? "var(--bg)" : undefined,
                  }}>{b.label.split(" ")[0]}</span>
                </div>
                <h3 className="display" style={{ fontSize: 28, margin: 0, lineHeight: 1.1 }}>{b.label}</h3>
                <ul className="dot-list" style={{ marginTop: 20 }}>
                  {b.points.map((p) => <li key={p}>{p}</li>)}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Illustrative chart */}
      <section className="rule">
        <div className="wrap section-tight">
          <div className="row between center" style={{ marginBottom: 24 }}>
            <h2 className="display" style={{ fontSize: 32, margin: 0 }}>{t({ en: "Indicative cost index vs volume", "zh-Hant": "示意成本指數與流量關係" })}</h2>
            <span className="mono-sm">{t({ en: "Retail = 100 · per provider, illustrative", "zh-Hant": "零售＝100 · 按供應商示意值" })}</span>
          </div>
          <div className="card" style={{ padding: 32 }}>
            <svg viewBox="0 0 800 300" style={{ width: "100%", height: 280 }}>
              <g stroke="var(--rule)" strokeWidth="1">
                <line x1="60" y1="20" x2="60" y2="260" />
                <line x1="60" y1="260" x2="780" y2="260" />
                {[0, 25, 50, 75, 100].map(v => (
                  <line key={v} x1="60" y1={260 - v * 2.2} x2="780" y2={260 - v * 2.2} stroke="var(--rule-2)" strokeDasharray="2 4" />
                ))}
              </g>
              <g fontFamily="var(--font-mono)" fontSize="10" fill="var(--ink-3)">
                {[0, 25, 50, 75, 100].map(v => (
                  <text key={v} x="52" y={264 - v * 2.2} textAnchor="end">{v}</text>
                ))}
              </g>
              {curve.map((p, i) => {
                const x = 60 + (i * (720 / (curve.length - 1)));
                return (
                  <g key={p.vol}>
                    <text x={x} y="278" fontFamily="var(--font-mono)" fontSize="10" fill="var(--ink-3)" textAnchor="middle">{p.vol}</text>
                  </g>
                );
              })}
              {[ 
                { key: "retail", color: "var(--ink-3)", label: t({ en: "Retail API", "zh-Hant": "零售 API" }), dash: "4 4" },
                { key: "dedicated", color: "var(--clay)", label: t({ en: "Dedicated capacity", "zh-Hant": "專用容量" }), dash: "" },
                { key: "bulk", color: "var(--accent)", label: t({ en: "ModelPort bulk", "zh-Hant": "ModelPort 批量" }), dash: "" },
              ].map((line) => {
                const pts = curve.map((p, i) => {
                  const x = 60 + (i * (720 / (curve.length - 1)));
                  const y = 260 - p[line.key] * 2.2;
                  return `${x},${y}`;
                }).join(" ");
                return (
                  <g key={line.key}>
                    <polyline points={pts} fill="none" stroke={line.color} strokeWidth="2" strokeDasharray={line.dash} />
                    {curve.map((p, i) => {
                      const x = 60 + (i * (720 / (curve.length - 1)));
                      const y = 260 - p[line.key] * 2.2;
                      return <circle key={i} cx={x} cy={y} r="3" fill="var(--bg)" stroke={line.color} strokeWidth="1.5" />;
                    })}
                  </g>
                );
              })}
            </svg>
            <div className="row gap-24" style={{ marginTop: 16, justifyContent: "center" }}>
              <Legend color="var(--ink-3)" label={t({ en: "Retail API", "zh-Hant": "零售 API" })} dashed />
              <Legend color="var(--clay)" label={t({ en: "Dedicated enterprise capacity", "zh-Hant": "專用企業容量" })} />
              <Legend color="var(--accent)" label={t({ en: "ModelPort bulk capacity", "zh-Hant": "ModelPort 批量容量" })} />
            </div>
          </div>
        </div>
      </section>

      {/* Important copy */}
      <section className="rule">
        <div className="wrap section-tight">
          <div className="card" style={{ padding: 40, background: "var(--bg-2)" }}>
            <div className="mono-sm" style={{ marginBottom: 14 }}>{t({ en: "Important", "zh-Hant": "重要" })}</div>
            <p className="display" style={{ fontSize: 30, lineHeight: 1.2, margin: 0, maxWidth: 900 }}>
              {t({
                en: "ModelPort is not simply reselling retail API access. It turns enterprise demand",
                "zh-Hant": "ModelPort 不是單純轉售零售 API 存取。它把企業需求轉化為",
              })}
              <br/>
              {t({
                en: "into negotiated model capacity, giving customers more control over cost, usage and rollout planning.",
                "zh-Hant": "可談判的模型容量，讓客戶在成本、使用量與推廣規劃上更可控。",
              })}
            </p>
            <div className="row gap-12" style={{ marginTop: 28 }}>
              <button className="btn btn-arrow" onClick={() => go("fit")}>{t({ en: "Check my savings route", "zh-Hant": "查看節省路線" })}</button>
              <button className="btn btn-ghost" onClick={() => go("pilot")}>{t({ en: "Book paid pilot", "zh-Hant": "預約付費試點" })}</button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function Legend({ color, label, dashed }) {
  return (
    <div className="row gap-8 center">
      <svg width="22" height="8"><line x1="0" y1="4" x2="22" y2="4" stroke={color} strokeWidth="2" strokeDasharray={dashed ? "3 3" : ""} /></svg>
      <span className="mono-sm">{label}</span>
    </div>
  );
}

Object.assign(window, { PagePricing });