// Specimen page — type + color disclosure rendered well
{
const { LENSES } = window.PL_DATA;

function Specimen() {
  return (
    <div className="pl-page" data-screen-label="05 Specimen">
      {/* hero */}
      <section style={{
        padding: "56px 48px",
        borderBottom: "1px solid var(--rule)",
      }}>
        <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.08em",
          textTransform: "uppercase", marginBottom: 14 }}>
          Specimen · v1.2.0 · type & color
        </div>
        <h1 className="display" style={{ fontSize: "clamp(80px, 11vw, 168px)", margin: 0 }}>
          The system,<br/>laid out.
        </h1>
      </section>

      {/* Type — display */}
      <section style={{ padding: "56px 48px 32px", borderBottom: "1px solid var(--rule)" }}>
        <div style={{ display: "grid", gridTemplateColumns: "200px 1fr", gap: 32, alignItems: "start" }}>
          <div>
            <div className="eyebrow">Display</div>
            <div className="mono" style={{ fontSize: 13, marginTop: 6 }}>General Sans</div>
            <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 2 }}>
              500 / 600 / 700
            </div>
          </div>
          <div>
            <div className="display" style={{ fontSize: 192, lineHeight: 0.85, letterSpacing: "-0.04em" }}>
              Aa Bb Rr&nbsp;
              <span style={{ color: "var(--accent)" }}>0–9</span>
            </div>
            <div className="display" style={{ fontSize: 56, marginTop: 24, color: "var(--ink-2)" }}>
              "200+ reproductive bills. 18 became law."
            </div>
          </div>
        </div>
      </section>

      {/* Type — body */}
      <section style={{ padding: "32px 48px", borderBottom: "1px solid var(--rule)",
        display: "grid", gridTemplateColumns: "200px 1fr", gap: 32, alignItems: "start" }}>
        <div>
          <div className="eyebrow">Body</div>
          <div className="mono" style={{ fontSize: 13, marginTop: 6 }}>Inter Tight</div>
          <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 2 }}>
            300 / 400 / 500 / 600 / 700
          </div>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <p style={{ fontSize: 32, lineHeight: 1.25, margin: 0, fontWeight: 500 }}>
            Higher composite score = the state is more aligned with the lens's
            editorial direction. That's the rule.
          </p>
          <p style={{ fontSize: 18, lineHeight: 1.5, margin: 0, color: "var(--ink-2)" }}>
            We measure what legislatures are doing right now — what's being
            introduced, what's passing, which direction those bills move policy,
            and at what magnitude. Not a snapshot of effective law.
          </p>
          <p style={{ fontSize: 14, lineHeight: 1.55, margin: 0, color: "var(--ink-3)" }}>
            Smallest reading size, used for caption-tier copy and dense table rows.
            Inter Tight at 14/22 in body weight stays clean down to 12px when needed.
          </p>
        </div>
      </section>

      {/* Type — mono */}
      <section style={{ padding: "32px 48px", borderBottom: "1px solid var(--rule)",
        display: "grid", gridTemplateColumns: "200px 1fr", gap: 32, alignItems: "start" }}>
        <div>
          <div className="eyebrow">Mono</div>
          <div className="mono" style={{ fontSize: 13, marginTop: 6 }}>JetBrains Mono</div>
          <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 2 }}>
            tabular nums, meta labels, evidence quotes
          </div>
        </div>
        <div>
          <div className="mono" style={{ fontSize: 28, fontWeight: 500, lineHeight: 1.2 }}>
            TX-HB1004 · composite_passed = 14.2
          </div>
          <div className="mono tnum" style={{ fontSize: 14, color: "var(--ink-3)", marginTop: 12,
            display: "grid", gridTemplateColumns: "repeat(10, 1fr)", gap: 8 }}>
            {Array.from({length:10}).map((_,i) => (
              <span key={i} style={{ borderBottom: "1px solid var(--rule)", paddingBottom: 4 }}>
                {String((i*9.4).toFixed(1)).padStart(4, " ")}
              </span>
            ))}
          </div>
        </div>
      </section>

      {/* Type scale */}
      <section style={{ padding: "48px 48px", borderBottom: "1px solid var(--rule)" }}>
        <div className="eyebrow" style={{ marginBottom: 18 }}>Display scale · roles</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 0,
          borderTop: "1px solid var(--rule)" }}>
          {[
            ["Hero", "124px / 0.95 / -0.03em", "Atlas →"],
            ["Page", "84px / 0.95 / -0.03em", "Texas"],
            ["Section", "56px / 1.0 / -0.02em", "Where Texas sits."],
            ["Big number", "96px / 0.85 / -0.04em", "200+"],
            ["Card", "26px / 1.1 / -0.01em", "Reproductive"],
            ["Body", "16/24 (Inter Tight)", "We measure motion, not effective law."],
            ["Mono meta", "11px (mono, 0.08em)", "COMPOSITE_PASSED · v1.2.0"],
          ].map(([role, spec, sample]) => (
            <div key={role} style={{ display: "grid", gridTemplateColumns: "120px 220px 1fr", gap: 24,
              alignItems: "baseline", padding: "16px 0", borderBottom: "1px solid var(--rule)" }}>
              <div className="mono" style={{ fontSize: 12, color: "var(--ink-3)", letterSpacing: "0.06em",
                textTransform: "uppercase" }}>{role}</div>
              <div className="mono" style={{ fontSize: 12, color: "var(--ink-3)" }}>{spec}</div>
              <div style={{
                fontFamily: role === "Body" ? "var(--body)" : role === "Mono meta" ? "var(--mono)" : "var(--display)",
                fontSize: role === "Hero" ? 64 : role === "Page" ? 52 : role === "Section" ? 36 :
                  role === "Big number" ? 56 : role === "Card" ? 24 : role === "Body" ? 17 : 12,
                fontWeight: role === "Body" || role === "Mono meta" ? 400 : 600,
                letterSpacing: role === "Mono meta" ? "0.08em" : role === "Body" ? "0" : "-0.02em",
                textTransform: role === "Mono meta" ? "uppercase" : "none",
                lineHeight: 1.05,
              }}>{sample}</div>
            </div>
          ))}
        </div>
      </section>

      {/* COLOR — diverging palette */}
      <section style={{ padding: "56px 48px", borderBottom: "1px solid var(--rule)" }}>
        <div className="eyebrow" style={{ marginBottom: 12 }}>Diverging data palette</div>
        <h2 className="display" style={{ fontSize: 48, margin: "0 0 8px" }}>
          Saturated, decisive.
        </h2>
        <p style={{ fontSize: 15, color: "var(--ink-3)", maxWidth: 640, margin: "0 0 32px" }}>
          Five stops, applied to composite scores 0–100. Restrictive end on the left.
          Used everywhere a score appears: tile maps, ranked lists, spectrum bars.
        </p>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 4 }}>
          {[
            ["#5a2a1f", "rust",       "0–19",  "most restrictive"],
            ["#b85a4a", "terracotta", "20–41", "restrictive"],
            ["#475569", "slate",      "42–57", "neutral"],
            ["#6b9b94", "jade",       "58–77", "protective"],
            ["#2a6b66", "teal",       "78–100","most protective"],
          ].map(([hex, name, range, label]) => (
            <div key={hex} style={{ background: hex, color: "#fff", padding: "32px 22px",
              minHeight: 220, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: "0.08em",
                textTransform: "uppercase", opacity: 0.85 }}>{label}</div>
              <div>
                <div style={{ fontFamily: "var(--display)", fontSize: 32, fontWeight: 600 }}>{name}</div>
                <div className="mono" style={{ fontSize: 12, marginTop: 6 }}>{hex}</div>
                <div className="mono tnum" style={{ fontSize: 12, marginTop: 4, opacity: 0.85 }}>
                  composite {range}
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* COLOR — system */}
      <section style={{ padding: "56px 48px", borderBottom: "1px solid var(--rule)" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 12 }}>Foreground / background</div>
            <h2 className="display" style={{ fontSize: 36, margin: "0 0 24px" }}>Off-white. Confident.</h2>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", gap: 0,
              border: "1px solid var(--rule)" }}>
              {[
                ["#f8f8f5", "bg", "var(--ink)"],
                ["#efefe9", "bg-2", "var(--ink)"],
                ["#e6e5dd", "bg-3", "var(--ink)"],
                ["#0e1116", "ink", "#f8f8f5"],
              ].map(([hex, name, fg]) => (
                <div key={name} style={{ background: hex, color: fg, padding: 18, height: 130,
                  display: "flex", flexDirection: "column", justifyContent: "space-between",
                  borderRight: "1px solid var(--rule)" }}>
                  <div className="mono" style={{ fontSize: 11 }}>{name}</div>
                  <div className="mono" style={{ fontSize: 11 }}>{hex}</div>
                </div>
              ))}
            </div>
          </div>

          <div>
            <div className="eyebrow" style={{ marginBottom: 12 }}>Brand & alarm</div>
            <h2 className="display" style={{ fontSize: 36, margin: "0 0 24px" }}>Used in blocks. Not as text accents.</h2>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0,
              border: "1px solid var(--rule)" }}>
              {[
                ["#c2410c", "accent · electric copper", "#fff"],
                ["#5e1e2c", "alarm · deep wine", "#fff"],
              ].map(([hex, name, fg]) => (
                <div key={hex} style={{ background: hex, color: fg, padding: 18, height: 130,
                  display: "flex", flexDirection: "column", justifyContent: "space-between",
                  borderRight: "1px solid var(--rule)" }}>
                  <div className="mono" style={{ fontSize: 11 }}>{name.split(" · ")[0]}</div>
                  <div>
                    <div style={{ fontFamily: "var(--display)", fontSize: 18, fontWeight: 600 }}>
                      {name.split(" · ")[1]}
                    </div>
                    <div className="mono" style={{ fontSize: 11, marginTop: 2 }}>{hex}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Component samples */}
      <section style={{ padding: "56px 48px" }}>
        <div className="eyebrow" style={{ marginBottom: 12 }}>Component slice</div>
        <h2 className="display" style={{ fontSize: 36, margin: "0 0 32px" }}>
          The pieces, in context.
        </h2>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 32 }}>
          {/* Buttons */}
          <div>
            <div className="eyebrow" style={{ marginBottom: 12 }}>Buttons</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 14, alignItems: "flex-start" }}>
              <button className="btn">Primary action</button>
              <button className="btn btn-accent">Accent action →</button>
              <button className="btn btn-ghost">Ghost action</button>
            </div>
          </div>

          {/* Pills */}
          <div>
            <div className="eyebrow" style={{ marginBottom: 12 }}>Status pills</div>
            <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
              <span className="pill passed">Passed</span>
              <span className="pill engrossed">Engrossed</span>
              <span className="pill introduced">Introduced</span>
              <span className="pill failed">Failed</span>
            </div>
          </div>

          {/* Score chip */}
          <div>
            <div className="eyebrow" style={{ marginBottom: 12 }}>Score chip + spectrum</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                {[14.2, 38.6, 50.1, 66.8, 89.4].map(v => {
                  const c = window.PL_COLOR(v);
                  return (
                    <div key={v} className="mono" style={{
                      padding: "6px 10px", background: c.color, color: c.text, fontSize: 12, fontWeight: 600,
                    }}>{v}</div>
                  );
                })}
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", height: 18 }}>
                {["#5a2a1f","#b85a4a","#475569","#6b9b94","#2a6b66"].map(c => (
                  <div key={c} style={{ background: c }}></div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

window.PL_Specimen = Specimen;
}