// China Reach: the only licensed global SD-WAN into the PRC

function ChinaReach({ ctx, standalone = false }) {
  const { t } = ctx;
  const c = t.china;

  return (
    <section id="china" style={{
      padding: standalone ? "32px 0 96px" : "96px 0",
      borderTop: standalone ? "none" : "1px solid var(--line)",
      background: "transparent",
    }}>
      <div className="wrap">
        {!standalone && <SectionHeader kicker={c.kicker} title={c.title1} subtitle={c.title2} body={c.body} subtitleNoWrap/>}

        {/* Top row: 3 pills explaining the license */}
        <div style={{ marginBottom: 24 }}>
          <div className="kicker" style={{ marginBottom: 14 }}>{c.pillTitle}</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
            {c.pills.map((p, i) => (
              <div key={i} style={{
                border: "1px solid var(--line)", borderRadius: 14, padding: "22px 24px",
                background: "var(--bg)", display: "flex", flexDirection: "column", gap: 10,
              }}>
                <div className="mono" style={{ fontSize: 11, color: "var(--accent)", letterSpacing: 0.08 }}>{`0${i + 1}`}</div>
                <h3 style={{ fontSize: 17, margin: 0, fontWeight: 600 }}>{p[0]}</h3>
                <p style={{ fontSize: 14, color: "var(--ink-2)", margin: 0, lineHeight: 1.55 }}>{p[1]}</p>
              </div>
            ))}
          </div>
        </div>

        {/* Comparison table (style aligned with Differentiators) */}
        {(() => {
          const tbl = c.compareTable;
          const gridCols = "1.4fr 1fr 1fr 1fr 1fr";
          const renderCell = (v, ci) => {
            const emphasized = ci === 1;
            const base = {
              fontFamily: v === true || v === false ? "var(--mono)" : "inherit",
              fontSize: 13,
              color: emphasized ? "var(--ink)" : "var(--ink-2)",
              fontWeight: emphasized ? 500 : 400,
            };
            if (v === true) return <span style={{ ...base, color: emphasized ? "var(--accent)" : "color-mix(in oklab, var(--accent) 55%, var(--ink-3))" }}>✓</span>;
            if (v === false) return <span style={{ ...base, color: "var(--ink-3)", opacity: 0.5 }}>—</span>;
            return <span style={base}>{v}</span>;
          };
          return (
            <div style={{
              marginBottom: 24, border: "1px solid var(--line)", borderRadius: 14,
              background: "var(--bg)", padding: 24,
            }}>
              <div style={{
                display: "grid", gridTemplateColumns: gridCols,
                padding: "10px 14px", background: "var(--bg-2)", borderRadius: 8, marginBottom: 4,
              }}>
                {tbl.cols.map((h, j) => (
                  <div key={j} style={{
                    fontSize: 12, letterSpacing: 0.02, textTransform: "uppercase",
                    textAlign: j === 0 ? "left" : "center",
                    color: j === 1 ? "var(--accent)" : "var(--ink-3)",
                    fontWeight: j === 1 ? 600 : 500,
                  }}>{h}</div>
                ))}
              </div>
              {tbl.rows.map((row, ri) => (
                <div key={ri} style={{
                  display: "grid", gridTemplateColumns: gridCols,
                  padding: "12px 14px", alignItems: "center",
                  borderTop: ri === 0 ? "none" : "1px solid var(--line-2)",
                }}>
                  <div style={{ fontSize: 13, color: "var(--ink)", fontWeight: 500 }}>{row[0]}</div>
                  {row.slice(1).map((val, ci) => (
                    <div key={ci} style={{
                      textAlign: "center",
                      background: ci === 0 ? "color-mix(in oklab, var(--accent) 6%, transparent)" : "transparent",
                      borderRadius: 6, padding: "4px 6px",
                    }}>{renderCell(val, ci + 1)}</div>
                  ))}
                </div>
              ))}
            </div>
          );
        })()}

        {/* bottom punchline */}
        <div style={{
          padding: "22px 28px", borderRadius: 14,
          background: "color-mix(in oklab, var(--accent) 10%, var(--bg))",
          border: "1px solid color-mix(in oklab, var(--accent) 30%, var(--line))",
          display: "flex", alignItems: "center", justifyContent: "center", gap: 18, flexWrap: "wrap",
        }}>
          {c.punchKicker && <div className="kicker" style={{ color: "var(--accent)" }}>{c.punchKicker}</div>}
          <div style={{ fontSize: 16, color: "var(--ink)", textAlign: "center" }}>{c.punchBody}</div>
        </div>
      </div>
    </section>
  );
}
window.ChinaReach = ChinaReach;