// Atlas page — top control bar (lens / mode / view), full-bleed visualization,
// compact corner legend, marquee strip + editorial frame below.
{
const { LENSES, STATES, scoreFor, lensMetaFor, isLive } = window.PL_DATA;

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

  // Counts driven by REAL data
  const scoredCodes = STATES.map(s => s[0]).filter(c => {
    const m = lensMetaFor && lensMetaFor(c, lens.id);
    return m && m.bill_count > 0;
  });
  const scoredTotal = scoredCodes.length;
  const protective = scoredCodes.filter(c => scoreFor(c, lens.id, mode) >= 55).length;
  const restrictive = scoredCodes.filter(c => scoreFor(c, lens.id, mode) < 45).length;
  const neutral = scoredTotal - protective - restrictive;

  const modeLabels = {
    passed: "Bills that became law",
    pressure: "Bills that were attempted",
    all: "All legislative activity",
  };

  const viewProps = {
    lensId,
    mode,
    onSelect: (code) => { window.__plSelectedState = code; go("state"); },
    showLabels,
  };

  return (
    <div className="pl-page pl-atlas-page" data-screen-label="Atlas">
      {/* CONTROL BAR — replaces floating cards on the map */}
      <div className="pl-control-bar">
        <div className="pl-control-group">
          <span className="pl-control-label">Lens</span>
          <select
            value={lensId}
            onChange={(e) => setLensId(e.target.value)}
            className="pl-lens-select"
            style={{ fontSize: 18, padding: "2px 22px 2px 0" }}
          >
            {LENSES.map(l => <option key={l.id} value={l.id}>{l.label}</option>)}
          </select>
        </div>
        <div className="pl-control-group">
          <span className="pl-control-label">Show</span>
          <div className="pl-view-toggle">
            {[
              ["passed", "Became law"],
              ["pressure", "Attempted"],
              ["all", "All"],
            ].map(([k, lbl]) => (
              <button key={k}
                className={`pl-view-btn ${mode === k ? "active" : ""}`}
                onClick={() => setMode(k)}>{lbl}</button>
            ))}
          </div>
        </div>
        <div className="pl-control-group">
          <span className="pl-control-label">View</span>
          <div className="pl-view-toggle">
            {[
              ["map", "Map"],
              ["treemap", "Population"],
              ["bars", "Ranked"],
            ].map(([k, lbl]) => (
              <button key={k}
                className={`pl-view-btn ${view === k ? "active" : ""}`}
                onClick={() => setView(k)}>{lbl}</button>
            ))}
          </div>
        </div>
        <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 14 }}>
          <span className="mono" style={{ fontSize: 10, color: "var(--ink-3)", letterSpacing: "0.08em" }}>
            <strong style={{ color: "#2a6b66" }}>{protective}</strong> protective ·
            <strong style={{ color: "var(--ink-3)", marginLeft: 6 }}> {neutral}</strong> neutral ·
            <strong style={{ color: "#b85a4a", marginLeft: 6 }}> {restrictive}</strong> restrictive
          </span>
        </div>
      </div>

      {/* STAGE — full-bleed visualization area */}
      <section className="pl-atlas-stage">
        {view === "map" && <window.PL_TileMap {...viewProps} style={mapStyle} />}
        {view === "treemap" && <window.PL_TreemapView {...viewProps} />}
        {view === "bars" && <window.PL_BarChartView {...viewProps} />}

        {/* Compact legend bottom-right (only on map view — bars and treemap have their own) */}
        {view === "map" && (
          <div className="pl-atlas-legend-mini">
            <window.PL_MapLegend mode={mode} />
          </div>
        )}
      </section>

      {/* MARQUEE STRIP */}
      <section className="strip" style={{ borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
        <div className="item"><span className="num">{scoredTotal}</span> states scored</div>
        <div className="item"><span className="num">22</span> policy lenses</div>
        <div className="item"><span className="num">{protective}</span> protective on {lens.short.toLowerCase()}</div>
        <div className="item"><span className="num">{restrictive}</span> restrictive on {lens.short.toLowerCase()}</div>
        <div className="item">Source: <span className="num">LegiScan + Claude</span></div>
        <div className="item">{isLive() ? "Live data" : "Stub data (offline)"}</div>
      </section>

      {/* EDITORIAL FRAME */}
      <section style={{ padding: "48px clamp(24px, 4vw, 64px) 64px", maxWidth: 1100 }}>
        <div className="eyebrow" style={{ marginBottom: 12 }}>What you're looking at</div>
        <p style={{ fontSize: 19, lineHeight: 1.55, color: "var(--ink-2)", maxWidth: 720, margin: 0 }}>
          Each state's color reflects its <strong>{modeLabels[mode].toLowerCase()}</strong> on
          the <strong>{lens.label.toLowerCase()}</strong> lens this session. Rust = legislature
          moved away from access. Teal = legislature moved toward access. Slate = no net change.
          Hatched = no bills scored yet.
        </p>
        <p style={{ fontSize: 14, lineHeight: 1.6, color: "var(--ink-3)", maxWidth: 720, marginTop: 18 }}>
          Switch <strong>view</strong> to <strong>Population</strong> to size states by who lives there
          (so California's lift counts as much more than Wyoming's). Switch to <strong>Ranked</strong>
          to see all states sorted descending — the most-protective state at top, the most-restrictive
          at bottom. These are <strong>legislative-motion</strong> scores, not snapshot-of-current-law
          scores.{" "}
          <a onClick={() => go("methodology")} style={{ color: "var(--accent)", cursor: "pointer", textDecoration: "underline" }}>
            How we score →
          </a>
        </p>
      </section>
    </div>
  );
}

window.PL_Landing = Landing;
}