// Methodology page — values disclosure rendered well
function Methodology({ go }) {
  return (
    <div className="pl-page" data-screen-label="04 Methodology">
      {/* Hero */}
      <section style={{
        padding: "72px 48px 48px",
        borderBottom: "1px solid var(--rule)",
        display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "end",
      }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 14 }}>Methodology · v1 · May 2026</div>
          <h1 className="display" style={{ fontSize: "clamp(80px, 11vw, 168px)", margin: 0 }}>
            Not<br/>neutral.
          </h1>
        </div>
        <div style={{ paddingBottom: 12 }}>
          <p style={{ fontSize: 21, lineHeight: 1.4, color: "var(--ink-2)", margin: 0 }}>
            No serious policy tracker is. We measure what legislatures are doing
            against an explicit framework of human rights, public health, and
            democratic norms — and we say so.
          </p>
        </div>
      </section>

      {/* What this is / is not */}
      <section style={{ padding: "64px 48px", borderBottom: "1px solid var(--rule)",
        display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0,
      }}>
        <div style={{ paddingRight: 48, borderRight: "1px solid var(--rule)" }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>What this is</div>
          <h2 className="display" style={{ fontSize: 36, margin: "0 0 18px" }}>
            A measurement of legislative motion.
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.55, color: "var(--ink-2)", margin: 0 }}>
            What's being introduced, what's passing, which direction those bills
            move policy, and at what magnitude. Not a snapshot of current effective
            law — for that, see the watchdog organizations we cite per lens.
          </p>
        </div>
        <div style={{ paddingLeft: 48 }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>What this is not</div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 14 }}>
            {[
              ["Not neutral.", "We take positions. The values disclosure is below."],
              ["Not predictive.", "We measure what has been introduced and what has passed."],
              ["Not exhaustive.", "Executive orders, agency rules, and court decisions are not measured here."],
              ["Not partisan in design.", "But reflective of partisan reality. See the partisan correlation note."],
            ].map(([k, v]) => (
              <li key={k} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 12 }}>
                <div className="mono" style={{ color: "var(--alarm)", fontWeight: 600 }}>—</div>
                <div style={{ fontSize: 15, lineHeight: 1.45 }}>
                  <strong>{k}</strong> <span style={{ color: "var(--ink-3)" }}>{v}</span>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </section>

      {/* Editorial position — values block (the alarm-color section) */}
      <section style={{
        padding: "72px 48px",
        background: "var(--ink)", color: "var(--bg)",
      }}>
        <div className="eyebrow" style={{ color: "rgba(255,255,255,0.55)", marginBottom: 16 }}>
          Editorial position · explicit values disclosure
        </div>
        <h2 className="display" style={{ fontSize: 56, margin: "0 0 40px", maxWidth: 900 }}>
          Score moves up when the state moves <span style={{ color: "var(--accent)" }}>toward</span> these.
        </h2>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 0 }}>
          {[
            ["Reproductive autonomy", "Access to abortion, contraception, IVF, pregnancy and maternal care, menstrual health."],
            ["Equal civil rights for LGBTQ+ people", "Including trans rights as a non-negotiable sub-component."],
            ["Worker protections", "Collective bargaining, livable wages, workplace safety, paid leave."],
            ["Public-health infrastructure", "Medicaid expansion, drug pricing, mental health parity."],
            ["Environmental protection", "Climate action, pollution reduction, conservation, environmental justice."],
            ["Education access and equity", "Funding, curriculum, accessibility."],
            ["Voting access", "Registration ease, mail/early voting, polling adequacy, freedom from racial gerrymandering."],
            ["Criminal justice reform", "Reduced carceral reach, sentencing fairness, reentry support, police accountability."],
            ["Anti-corruption / transparency", "Campaign finance disclosure, ethics enforcement, public records strength."],
            ["Dispersed economic and political power", "Opposed to wealth concentration, executive overreach, state preemption of local governance."],
          ].map(([k, v], i) => (
            <div key={k} style={{
              padding: "22px 24px",
              borderTop: "1px solid rgba(255,255,255,0.12)",
              borderRight: i % 2 === 0 ? "1px solid rgba(255,255,255,0.12)" : "none",
              display: "grid", gridTemplateColumns: "32px 1fr", gap: 16, alignItems: "baseline",
            }}>
              <div className="mono tnum" style={{ color: "var(--accent)", fontSize: 13 }}>
                {String(i+1).padStart(2,"0")}
              </div>
              <div>
                <div style={{ fontFamily: "var(--display)", fontSize: 22, fontWeight: 600 }}>{k}</div>
                <div style={{ fontSize: 14, color: "rgba(255,255,255,0.7)", marginTop: 4 }}>{v}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Why these values */}
      <section style={{ padding: "72px 48px", borderBottom: "1px solid var(--rule)" }}>
        <div className="eyebrow" style={{ marginBottom: 14 }}>Why these values</div>
        <h2 className="display" style={{ fontSize: 56, margin: "0 0 40px", maxWidth: 980 }}>
          Three converging sources.
        </h2>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
          {[
            ["01", "International human-rights consensus.", "Reproductive autonomy, LGBTQ+ equality, voting access, freedom from arbitrary detention, and labor protections all align with the UDHR (1948), the ICCPR, the WHO frameworks, and the UN Sustainable Development Goals. These are not fringe positions — they're the mainstream global framework."],
            ["02", "Empirical scientific consensus.", "Environmental destruction harms human health (WHO, EPA, IPCC). Healthcare access reduces mortality. Mass incarceration without crime reduction produces social harm. Wealth concentration reduces economic mobility. These have empirical baselines."],
            ["03", "Constitutional values.", "The framers were explicitly concerned with concentration of power (Federalist No. 10), equal protection (14th Amendment), individual liberty (Bill of Rights), and democratic accountability. Authoritarianism, Corruption, Democracy, and Greed lenses trace directly to founding values."],
          ].map(([n, k, v]) => (
            <div key={n}>
              <div className="bignum" style={{ fontSize: 96, color: "var(--accent)" }}>{n}</div>
              <div style={{ fontFamily: "var(--display)", fontSize: 26, fontWeight: 600, margin: "12px 0 10px",
                letterSpacing: "-0.01em" }}>{k}</div>
              <p style={{ fontSize: 15, lineHeight: 1.55, color: "var(--ink-2)", margin: 0 }}>{v}</p>
            </div>
          ))}
        </div>
      </section>

      {/* How scores are calculated */}
      <section style={{ padding: "72px 48px", borderBottom: "1px solid var(--rule)" }}>
        <div className="eyebrow" style={{ marginBottom: 14 }}>How scores are calculated</div>
        <h2 className="display" style={{ fontSize: 56, margin: "0 0 16px" }}>The pipeline.</h2>
        <p style={{ fontSize: 16, color: "var(--ink-3)", margin: "0 0 32px", maxWidth: 720 }}>
          Four steps. Bill text in, signed score out, sigmoid-normalized to 0–100.
        </p>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0,
          border: "1px solid var(--rule)" }}>
          {[
            ["Step 1", "Bill-level scoring", "Bill text → Claude Haiku with structured prompt → direction, magnitude, confidence, evidence quotes, legislative_character, plain-English summary."],
            ["Step 2", "Per-bill contribution", "direction_sign × magnitude × tier × status_weight × character_weight × confidence_weight."],
            ["Step 3", "Three composite modes", "composite_passed (became law) · composite_pressure (introduced) · composite_all (activity weighted)."],
            ["Step 4", "0–100 normalization", "Sigmoid with K=20. 50 = no net activity. >50 protective. <50 restrictive. Raw signed score also exposed."],
          ].map(([n, k, v], i) => (
            <div key={n} style={{
              padding: "24px 22px",
              borderRight: i < 3 ? "1px solid var(--rule)" : "none",
              display: "flex", flexDirection: "column", gap: 14,
              minHeight: 240,
            }}>
              <div className="mono" style={{ fontSize: 11, color: "var(--accent)", letterSpacing: "0.08em",
                textTransform: "uppercase" }}>{n}</div>
              <div style={{ fontFamily: "var(--display)", fontSize: 22, fontWeight: 600 }}>{k}</div>
              <div style={{ fontSize: 14, lineHeight: 1.5, color: "var(--ink-2)" }}>{v}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Weights table */}
      <section style={{ padding: "64px 48px", borderBottom: "1px solid var(--rule)" }}>
        <div className="eyebrow" style={{ marginBottom: 14 }}>Component weights</div>
        <h2 className="display" style={{ fontSize: 40, margin: "0 0 24px" }}>The constants.</h2>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
          {[
            { title: "direction_sign", rows: [["expand", "+1"], ["restrict", "−1"], ["mixed / neutral", "0"]] },
            { title: "magnitude_value", rows: [["high", "3"], ["medium", "2"], ["low", "1"]] },
            { title: "status_weight", rows: [["passed", "1.0"], ["enrolled", "0.9"], ["engrossed", "0.5"], ["introduced", "0.15"], ["vetoed", "0.1"], ["failed", "0"]] },
            { title: "character_weight", rows: [["substantive", "1.0"], ["mixed", "0.7"], ["symbolic_partisan", "0.4"], ["symbolic_ceremonial", "0.15"]] },
            { title: "confidence_weight", rows: [["high", "1.0"], ["medium", "0.7"], ["low", "0.4"]] },
            { title: "tier_weight (Reproductive)", rows: [["T1 direct access", "1.0"], ["T2 maternal", "0.6"], ["T3 menstrual", "0.3"]] },
          ].map(t => (
            <div key={t.title} style={{ border: "1px solid var(--rule)" }}>
              <div className="mono" style={{
                padding: "10px 14px", fontSize: 12, color: "var(--bg)",
                background: "var(--ink)", letterSpacing: "0.06em",
              }}>{t.title}</div>
              {t.rows.map(([k, v], i) => (
                <div key={k} style={{
                  display: "grid", gridTemplateColumns: "1fr auto", padding: "8px 14px",
                  borderTop: i ? "1px solid var(--rule)" : "none",
                  fontFamily: "var(--mono)", fontSize: 13,
                }}>
                  <span style={{ color: "var(--ink-2)" }}>{k}</span>
                  <span className="tnum" style={{ fontWeight: 600 }}>{v}</span>
                </div>
              ))}
            </div>
          ))}
        </div>
      </section>

      {/* Limitations honestly disclosed */}
      <section style={{
        padding: "72px 48px",
        background: "var(--alarm)", color: "#fff",
      }}>
        <div className="eyebrow" style={{ color: "rgba(255,255,255,0.65)", marginBottom: 14 }}>
          Limitations · honestly disclosed
        </div>
        <h2 className="display" style={{ fontSize: 56, margin: "0 0 40px", maxWidth: 900 }}>
          What we get wrong, and where.
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 32 }}>
          {[
            ["Single-session snapshot.", "Initially we measure only the current session per state. Historical trends require pulling prior sessions."],
            ["LLM variance.", "Claude's scoring is consistent ~95% of the time, but identical bill text can produce slightly different magnitude or confidence calls between runs."],
            ["Title-and-text scope.", "We score from bill title, description, and full text. We do not currently scan the amendments tree for rider-style insertions in unrelated bills."],
            ["Watchdog calibration is asymmetric.", "Watchdogs surface the most-prominent bills only. \"Bills we flagged that the watchdog didn't\" usually means the bill is legitimate but less prominent."],
            ["No measurement of executive action.", "Governor signing, vetoes, and state agency rulemaking are partially captured (via bill status) but executive orders are not."],
            ["No measurement of court rulings.", "State supreme court decisions can override or invalidate enacted statutes; we do not currently surface this."],
          ].map(([k, v]) => (
            <div key={k} style={{ display: "grid", gridTemplateColumns: "12px 1fr", gap: 16 }}>
              <div style={{ background: "#fff", height: 12, marginTop: 8 }}></div>
              <div>
                <div style={{ fontFamily: "var(--display)", fontSize: 22, fontWeight: 600 }}>{k}</div>
                <div style={{ fontSize: 15, color: "rgba(255,255,255,0.85)", marginTop: 6, lineHeight: 1.5 }}>{v}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Sources */}
      <section style={{ padding: "72px 48px" }}>
        <div className="eyebrow" style={{ marginBottom: 14 }}>Data sources</div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "start" }}>
          <div>
            <h2 className="display" style={{ fontSize: 40, margin: "0 0 16px" }}>Where it comes from.</h2>
            <p style={{ fontSize: 15, color: "var(--ink-2)", margin: 0, lineHeight: 1.55 }}>
              Bills, sponsors, votes, history, and full text from <strong>LegiScan</strong>
              {" "}(CC BY 4.0, credited on every page). Bill-level scoring against the lens
              rubric runs through <strong>Anthropic Claude Haiku</strong>. Calibration via
              <strong> Perplexity</strong> against watchdog-compiled lists.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
            {[
              ["Reproductive", "Center for Reproductive Rights · Guttmacher Institute"],
              ["LGBTQ", "Movement Advancement Project · Equality Federation · HRC"],
              ["Democracy", "Brennan Center · Princeton Gerrymandering Project · V-Dem"],
              ["Workers", "ITUC Global Rights Index · EPI · Oxfam"],
              ["Healthcare", "Commonwealth Fund · KFF · Families USA"],
              ["Environment", "Ember · Climate Action Tracker · state environmental councils"],
              ["Criminal Justice", "Sentencing Project · Vera Institute · Prison Policy"],
              ["Guns", "Giffords Law Center · Everytown · Brady United"],
            ].map(([k, v]) => (
              <div key={k} style={{ borderLeft: "2px solid var(--accent)", paddingLeft: 14 }}>
                <div style={{ fontFamily: "var(--display)", fontSize: 16, fontWeight: 600 }}>{k}</div>
                <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 4, lineHeight: 1.5 }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

window.PL_Methodology = Methodology;