// Lens Detail — one lens across all 50 states
{
const { LENSES, STATES, scoreFor } = window.PL_DATA;

function LensPage({ go, lensId, setLensId, mapStyle, showLabels }) {
  const lens = LENSES.find(l => l.id === lensId) || LENSES[0];
  const [mode, setMode] = React.useState("passed"); // passed | pressure

  const rows = STATES.map(s => ({
    code: s[0], name: s[1],
    passed: scoreFor(s[0], lens.id, "passed"),
    pressure: scoreFor(s[0], lens.id, "pressure"),
  })).sort((a, b) => b[mode] - a[mode]);

  const top5 = rows.slice(0, 5);
  const bottom5 = rows.slice(-5).reverse();

  return (
    <div className="pl-page" data-screen-label="03 Lens Detail">
      {/* hero band */}
      <section style={{
        padding: "56px 48px 32px",
        borderBottom: "1px solid var(--rule)",
      }}>
        <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.08em",
          textTransform: "uppercase", marginBottom: 14 }}>
          Lens · {lens.group} group · 2025–26 session
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 48, alignItems: "end" }}>
          <h1 className="display" style={{ fontSize: "clamp(72px, 11vw, 168px)", margin: 0 }}>
            {lens.label}<span style={{ color: "var(--accent)" }}>.</span>
          </h1>
          <select value={lens.id} onChange={(e) => setLensId(e.target.value)}
            style={{
              font: "inherit", fontFamily: "var(--mono)",
              fontSize: 12, letterSpacing: "0.08em", textTransform: "uppercase",
              padding: "10px 14px",
              background: "var(--ink)", color: "var(--bg)", border: "1px solid var(--ink)",
              cursor: "pointer",
            }}>
            {LENSES.map(l => <option key={l.id} value={l.id}>SWITCH LENS · {l.label}</option>)}
          </select>
        </div>
        <p style={{ fontSize: 19, color: "var(--ink-2)", marginTop: 24, maxWidth: 760, lineHeight: 1.45 }}>
          Higher score = the state moves toward {lens.direction === "expand" ? "expanding access" : "reducing harm"}.
          Below: 50 states ranked by composite_{mode}, with the rank-jump arrow showing where pressure
          differs from what passed.
        </p>
      </section>

      {/* MAP + key insight */}
      <section style={{
        display: "grid", gridTemplateColumns: "1fr 1.05fr", gap: 0,
        borderBottom: "1px solid var(--rule)",
      }}>
        <div style={{ background: "var(--bg-2)", padding: "40px 48px", borderRight: "1px solid var(--rule)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 24 }}>
            <div className="eyebrow">All 50 · composite_{mode}</div>
            <div style={{ display: "flex", gap: 0 }}>
              {["passed","pressure","all"].map(m => (
                <button key={m} onClick={() => setMode(m)} className="mono"
                  style={{
                    padding: "6px 12px", fontSize: 11, letterSpacing: "0.06em",
                    textTransform: "uppercase",
                    border: "1px solid var(--ink)",
                    background: mode === m ? "var(--ink)" : "transparent",
                    color: mode === m ? "var(--bg)" : "var(--ink)",
                    cursor: "pointer", marginLeft: -1,
                  }}>{m}</button>
              ))}
            </div>
          </div>
          <window.PL_TileMap
            lensId={lens.id} mode={mode}
            onSelect={(c) => { window.__plSelectedState = c; go("state"); }}
            style={mapStyle} showLabels={showLabels}
          />
          <div style={{ marginTop: 20 }}>
            <window.PL_MapLegend mode={mode} />
          </div>
        </div>

        <div style={{ padding: "40px 48px", display: "flex", flexDirection: "column", gap: 32 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 8 }}>The headline</div>
            <h2 className="display" style={{ fontSize: 44, margin: 0, letterSpacing: "-0.02em" }}>
              {top5[0].name} leads. {bottom5[0].name} sits at the floor.
            </h2>
          </div>
          <p style={{ fontSize: 16, color: "var(--ink-2)", lineHeight: 1.5, margin: 0 }}>
            {top5[0].name}'s composite_{mode} score on this lens is <strong>{top5[0][mode].toFixed(1)}</strong>.
            That's <strong>{(top5[0][mode] - bottom5[0][mode]).toFixed(1)} points</strong> above {bottom5[0].name},
            which sits at <strong>{bottom5[0][mode].toFixed(1)}</strong>.
          </p>

          {/* Top / bottom stacks */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
            <RankList title="Top 5 — protective" rows={top5} mode={mode} go={go} positive />
            <RankList title="Bottom 5 — restrictive" rows={bottom5} mode={mode} go={go} />
          </div>
        </div>
      </section>

      {/* FULL STACKED LIST */}
      <section style={{ padding: "56px 48px 64px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 24 }}>
          <h2 className="display" style={{ fontSize: 40, margin: 0 }}>Every state, ranked.</h2>
          <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.06em" }}>
            ↓ = composite_passed bar &nbsp; · &nbsp; ▮ pressure indicator &nbsp; · &nbsp; click row → state
          </div>
        </div>

        <div style={{ borderTop: "2px solid var(--ink)" }}>
          {rows.map((r, i) => {
            const pal = window.PL_COLOR(r[mode]);
            return (
              <button key={r.code} onClick={() => { window.__plSelectedState = r.code; go("state"); }}
                style={{
                  display: "grid",
                  gridTemplateColumns: "44px 220px 1fr 70px 70px",
                  gap: 18, alignItems: "center",
                  padding: "12px 10px",
                  width: "100%",
                  border: "none", borderBottom: "1px solid var(--rule)",
                  background: "transparent", color: "inherit",
                  fontFamily: "inherit", textAlign: "left", cursor: "pointer",
                }}>
                <div className="mono tnum" style={{ fontSize: 14, color: "var(--ink-3)" }}>
                  {String(i+1).padStart(2,"0")}
                </div>
                <div style={{ display: "flex", gap: 12, alignItems: "baseline" }}>
                  <div style={{ width: 14, height: 14, background: pal.color }}></div>
                  <div style={{ fontFamily: "var(--display)", fontSize: 22, fontWeight: 600 }}>{r.name}</div>
                  <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)" }}>{r.code}</div>
                </div>
                <div style={{ position: "relative", height: 12, background: "var(--bg-3)" }}>
                  <div style={{ position: "absolute", left: 0, top: 0, bottom: 0,
                    width: `${r[mode]}%`, background: pal.color }}></div>
                  <div style={{ position: "absolute", left: "50%", top: -2, bottom: -2, width: 1,
                    background: "var(--ink-3)" }}></div>
                </div>
                <div className="mono tnum" style={{ fontSize: 18, fontWeight: 600 }}>
                  {r[mode].toFixed(1)}
                </div>
                <div className="mono tnum" style={{ fontSize: 12, color: "var(--ink-3)" }}>
                  Δ{r.pressure - r.passed > 0 ? "+" : ""}{(r.pressure - r.passed).toFixed(1)}
                </div>
              </button>
            );
          })}
        </div>
      </section>
    </div>
  );
}

function RankList({ title, rows, mode, go, positive }) {
  return (
    <div>
      <div className="eyebrow" style={{ marginBottom: 12 }}>{title}</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 0,
        borderTop: "1px solid var(--rule)" }}>
        {rows.map((r, i) => {
          const pal = window.PL_COLOR(r[mode]);
          return (
            <button key={r.code} onClick={() => { window.__plSelectedState = r.code; go("state"); }}
              style={{
                display: "grid", gridTemplateColumns: "16px 1fr auto", gap: 12,
                alignItems: "center",
                padding: "10px 0",
                border: "none", borderBottom: "1px solid var(--rule)",
                background: "transparent", color: "inherit",
                fontFamily: "inherit", textAlign: "left", cursor: "pointer",
              }}>
              <div style={{ width: 12, height: 12, background: pal.color }}></div>
              <div style={{ fontFamily: "var(--display)", fontSize: 17, fontWeight: 600 }}>
                {r.name}
              </div>
              <div className="mono tnum" style={{ fontSize: 16, fontWeight: 600 }}>
                {r[mode].toFixed(1)}
              </div>
            </button>
          );
        })}
      </div>
    </div>
  );
}

window.PL_LensPage = LensPage;
}