// Differentiators: 3 comparison blocks (WideWired vs Tailscale vs ZeroTier)

function Differentiators({ ctx }) {
  const { t } = ctx;
  const d = t.diff;

  const renderCell = (v, colIdx) => {
    const emphasized = colIdx === 1; // WideWired column
    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 (
    <section id="advantage" style={{ padding: "96px 0", borderTop: "1px solid var(--line)" }}>
      <div className="wrap">
        <SectionHeader kicker={d.kicker} title={d.title} subtitle={d.subtitle} subtitleNoWrap/>

        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          {d.blocks.map((b, i) => (
            <div key={i} style={{
              border: "1px solid var(--line)", borderRadius: 14, background: "var(--bg)",
              display: "grid", gridTemplateColumns: "1fr 1.1fr",
              overflow: "hidden",
            }}>
              {/* left: intro */}
              <div style={{ padding: 32, display: "flex", flexDirection: "column", gap: 14, borderRight: "1px solid var(--line-2)" }}>
                <div style={{ display: "flex", alignItems: "baseline", gap: 12 }}>
                  <span className="mono" style={{ fontSize: 12, color: "var(--accent)", letterSpacing: 0.08 }}>{b.num}</span>
                  <span className="kicker" style={{ margin: 0 }}>§ {b.kicker}</span>
                </div>
                <h3 style={{ fontSize: 22, margin: 0, fontWeight: 500, lineHeight: 1.25, letterSpacing: -0.01 }}>{b.title}</h3>
                <p style={{ fontSize: 14, color: "var(--ink-2)", margin: 0, lineHeight: 1.6 }}>{b.desc}</p>
              </div>

              {/* right: comparison table */}
              <div style={{ padding: 24, display: "flex", flexDirection: "column" }}>
                <div style={{
                  display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr",
                  padding: "10px 14px", background: "var(--bg-2)", borderRadius: 8,
                  marginBottom: 4,
                }}>
                  {d.cmpHeader.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>
                {b.rows.map((row, ri) => (
                  <div key={ri} style={{
                    display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr",
                    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>
                    {[1, 2, 3].map(ci => (
                      <div key={ci} style={{
                        textAlign: "center",
                        background: ci === 1 ? "color-mix(in oklab, var(--accent) 6%, transparent)" : "transparent",
                        borderRadius: 6, padding: "4px 6px",
                      }}>{renderCell(row[ci], ci)}</div>
                    ))}
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Differentiators = Differentiators;