// Paradigm Shift — comparison table: legacy systems vs Global Justice Architecture
function ParadigmShift() {
  const rows = [
    ["Rights treated as sentiment, not enforceable obligations", "Rights converted into enforceable duties"],
    ["Fragmented, charity-driven responses", "Coordinated systems of prevention, protection, and repair"],
    ["Short-term relief without durable remedy", "Durable remedies designed around accountability"],
    ["Institutional impunity and opacity", "Transparent institutions subject to audit and consequence"],
    ["Affected people excluded from power, evidence, and remedy", "Affected people recognised as rights-holders, witnesses, and participants in justice"],
  ];
  return (
    <section className="gjf-paradigm">
      <div className="gjf-paradigm-inner">
        <div className="gjf-paradigm-head">
          <div className="gjf-paradigm-icon">
            <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.3">
              <path d="M12 3v18M5 8h14M4 8l3 8h-6zM17 8l3 8h-6z"/>
            </svg>
          </div>
          <h2 className="gjf-paradigm-title">The Paradigm <em style={{ fontStyle: "italic" }}>Shift</em></h2>
          <div className="gjf-paradigm-rule" />
          <p className="gjf-paradigm-lede">
            Moving from symbolic systems to enforceable justice architecture
          </p>
        </div>
        <div className="gjf-paradigm-table">
          <div className="gjf-paradigm-thead">
            <div className="left">Legacy Systems</div>
            <div className="gap" />
            <div className="right">Global Justice Architecture</div>
          </div>
          {rows.map(([legacy, gja], i) => (
            <div className="gjf-paradigm-row" key={i}>
              <div className="gjf-paradigm-cell legacy">
                <svg className="icon" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#9E2F35" strokeWidth="1.5">
                  <circle cx="12" cy="12" r="9"/><path d="M8 8l8 8M16 8l-8 8"/>
                </svg>
                {legacy}
              </div>
              <div className="gjf-paradigm-arrow">→</div>
              <div className="gjf-paradigm-cell gja">
                <svg className="icon" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#C6A45A" strokeWidth="1.5">
                  <circle cx="12" cy="12" r="9"/><path d="M8 12l3 3 5-6"/>
                </svg>
                {gja}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.GJF_ParadigmShift = ParadigmShift;