const { useState, useEffect } = React;

const NAV_DATASETS = [
  { label: "LMCA", href: "lmca.html",        name: "Reward Model",    desc: "Rating model critiques of conceptual arguments against expert judgement." },
  { label: "ConCoRD", href: "consistency.html", name: "ConCoRD",     desc: "Whether a model's positions stay stable across reframings of a question." },
  { label: "DTBench", href: "dtbench.html", name: "Decision Theory", desc: "Original decision-theoretic scenarios scored on reasoning structure." }
];

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "bodyFont": "sourceSerif",
  "headerStyle": "minimal",
  "tealShade": "balanced",
  "bgShade": "warm",
  "heroSize": 48,
  "ledeSize": 20,
  "heroGap": 4,
  "barColor": "byOrg",
  "barHeight": 24,
  "paleSubBars": true,
  "thickSubBars": true,
  "ciStyle": "caps",
  "rowLines": true,
  "headerHeight": 60,
  "density": 90,
  "uiText": "large",
  "brandSide": "left",
  "brandOrder": "crcFirst",
  "brandText": "none",
  "dsNavStyle": "dropdown",
  "dsLabel": "above",
  "dsSubAlign": "center",
  "dsEyebrow": true,
  "arxivStyle": "underline",
  "pageRules": false,
  "symMargins": true,
  "snugMargins": false,
  "linkPos": "top",
  "lbFocus": false,
  "lbMargins": "wide",
  "lbWideTable": false,
  "lbDdShadow": true,
  "lbFilterLine": false,
  "navFit": "roomy",
  "dsNavBg": false,
  "dsMenu": "flat",
  "brandMatch": "logo",
  "hideLbEyebrow": true
}/*EDITMODE-END*/;

const ORG_COLORS = {
  "OpenAI":          "#74aa9c",        // OpenAI's own ChatGPT logomark green
  "Anthropic":       "#cc785c",        // muted Claude orange
  "Google DeepMind": "#6b87b8",        // muted slate blue
  "Mistral":         "#e0a92e",        // muted yellow
  "xAI":             "#1a1a1a",        // black
  "Meta":            "#3b5bb5",        // brighter indigo blue
  "Alibaba":         "#8b5cb8",        // muted purple
  "DeepSeek":        "#5a4fcf",        // indigo
  "Xiaomi":          "#f26419"         // bright orange (Xiaomi)
};

// Vivid org palette — same hues, a little more saturated than the muted set (toned down)
const ORG_COLORS_VIVID = {
  "OpenAI":          "#10a37f",        // OpenAI's signature accent green
  "Anthropic":       "#d4734f",        // warm Claude orange
  "Google DeepMind": "#5a8ad6",        // muted sky blue
  "Mistral":         "#dba232",        // soft amber
  "xAI":             "#2c2c30",        // soft black
  "Meta":            "#4361bc",        // muted royal blue
  "Alibaba":         "#9162c4",        // soft purple
  "DeepSeek":        "#615ccb",        // muted indigo
  "Xiaomi":          "#e87f3e"         // soft orange
};

// On pure white the palest fills (OpenAI's light teal, Mistral's amber) lose presence
// against the near-white bar track, so on the white background they get slightly deeper,
// crisper counterparts. Warm/light backgrounds keep the original muted palette.
const ORG_COLORS_WHITE       = { "OpenAI": "#5f9a8b", "Mistral": "#cf9c24" };
const ORG_COLORS_VIVID_WHITE = { "OpenAI": "#0f9576", "Mistral": "#cf9522" };
function orgColorsForBg(barColor, bgShade) {
  const base = barColor === "byOrgVivid" ? ORG_COLORS_VIVID : ORG_COLORS;
  if (bgShade !== "white") return base;
  return { ...base, ...(barColor === "byOrgVivid" ? ORG_COLORS_VIVID_WHITE : ORG_COLORS_WHITE) };
}

const TEAL_SHADES = {
  medium:      "#4a6e6e",  // current — balanced, low saturation
  balancedLt:  "#5a8885",  // lighter & slightly more saturated
  balancedMid: "#498581",  // between balancedLt and balanced
  balanced:    "#367370"   // deeper balance
};
// Cooler, slightly cleaner teals for the white background — the warm/khaki teal
// looks dusty on pure white, so each shade gets a bluer counterpart.
const TEAL_SHADES_COOL = {
  medium:      "#356f76",
  balancedLt:  "#4a8b90",
  balancedMid: "#3a878d",
  balanced:    "#297479"
};
function tealForBg(shade, bgShade) {
  if (bgShade === "white") return TEAL_SHADES_COOL[shade] || TEAL_SHADES_COOL.medium;
  return TEAL_SHADES[shade] || TEAL_SHADES.medium;
}

// Each background shade carries a full ramp so the whole palette retunes together.
// Warm/Light keep the warm-biased inks; White switches to a cooler, neutral ramp so
// it reads crisp instead of dingy (warm grays look muddy on pure white).
const WARM_RAMP = {
  ink: "#1c1a17", ink2: "#3a3730", ink3: "#6b665c", inkDim: "#9a948a",
  rule: "#d9d2c4", ruleStrong: "#b8b0a0"
};
const COOL_RAMP = {
  ink: "#17191c", ink2: "#383c42", ink3: "#5e646c", inkDim: "#969ba2",
  rule: "#e4e5e7", ruleStrong: "#c5c8cd"
};
const BG_SHADES = {
  warm:    { bg: "#f5f1ea", bg2: "#efeadf", ...WARM_RAMP },  // original
  soft:    { bg: "#f7f4ee", bg2: "#f1ece1", ...WARM_RAMP },  // between warm and light (default)
  light:   { bg: "#f9f6f1", bg2: "#f2ede3", ...WARM_RAMP },  // lighter
  white:   { bg: "#ffffff", bg2: "#f4f5f6", ...COOL_RAMP }   // white + neutral ramp
};

// Body faces (paragraphs, lede, table text)
const BODY_FONTS = {
  sourceSerif: { label: "Source Serif", family: '"Source Serif 4", Georgia, serif' },
  plexSerif:   { label: "Plex Serif",   family: '"IBM Plex Serif", Georgia, serif' },
  inter:       { label: "Inter",        family: '"Inter", "Helvetica Neue", sans-serif' }
};

const DISPLAY_GARAMOND = {
  family: '"EB Garamond", Georgia, serif',
  weight: 500,
  tracking: "-0.01em"
};

function App() {
  const [tweaks, setTweaks] = useTweaks(TWEAK_DEFAULTS);

  const teal = tealForBg(tweaks.tealShade, tweaks.bgShade);
  const body = BODY_FONTS[tweaks.bodyFont] || BODY_FONTS.sourceSerif;
  const bg = BG_SHADES[tweaks.bgShade] || BG_SHADES.warm;

  useEffect(() => {
    const root = document.documentElement;
    const REDWOOD_GREEN_BY_BG = { warm: "#2a6750", light: "#2a6750", white: "#206a55" };
    const REDWOOD_GREEN = REDWOOD_GREEN_BY_BG[tweaks.bgShade] || REDWOOD_GREEN_BY_BG.warm;
    // Logo green: original deep green on warm/light; on white, nudged toward the cooler
    // white highlight but kept darker and close to the original.
    const REDWOOD_LOGO_BY_BG = { warm: "#1d4b38", light: "#1d4b38", white: "#19513f" };
    const redwoodLogo = REDWOOD_LOGO_BY_BG[tweaks.bgShade] || REDWOOD_LOGO_BY_BG.warm;
    const isGreen = tweaks.brandMatch === "highlight";
    const highlight = isGreen ? REDWOOD_GREEN : teal;
    root.style.setProperty("--teal", highlight);
    root.style.setProperty("--redwood-ink", isGreen ? redwoodLogo : highlight);
    root.style.setProperty("--bg", bg.bg);
    root.style.setProperty("--bg-2", bg.bg2);
    root.style.setProperty("--ink", bg.ink);
    root.style.setProperty("--ink-2", bg.ink2);
    root.style.setProperty("--ink-3", bg.ink3);
    root.style.setProperty("--ink-dim", bg.inkDim);
    root.style.setProperty("--rule", bg.rule);
    root.style.setProperty("--rule-strong", bg.ruleStrong);
    root.style.setProperty("--font-display", DISPLAY_GARAMOND.family);
    root.style.setProperty("--font-body", body.family);
    root.style.setProperty("--display-weight", DISPLAY_GARAMOND.weight);
    root.style.setProperty("--display-tracking", DISPLAY_GARAMOND.tracking);
    root.style.setProperty("--hero-size", (tweaks.heroSize || 48) + "px");
    root.style.setProperty("--hero-lede-size", (tweaks.ledeSize || 20) + "px");
    root.style.setProperty("--hero-gap", (tweaks.heroGap ?? 4) + "px");
    root.style.setProperty("--bar-height", (tweaks.barHeight ?? 16) + "px");
    if (tweaks.rowLines === false) root.style.setProperty("--row-rule", "transparent");
    else root.style.removeProperty("--row-rule");
    root.style.setProperty("--header-h", (tweaks.headerHeight ?? 68) + "px");
    root.style.setProperty("--subbar-opacity", tweaks.paleSubBars === false ? "1" : "0.4");
    root.style.setProperty("--subbar-trim", tweaks.thickSubBars ? "0px" : "6px");
    root.style.setProperty("--subbar-num-size", tweaks.thickSubBars ? "18px" : "15px");
    root.style.zoom = String((tweaks.density ?? 92) / 100);
    try { localStorage.setItem("crc:density", String(tweaks.density ?? 90)); } catch (e) {}
    root.style.setProperty("--brand-flow", tweaks.brandSide === "right" ? "row-reverse" : "row");
    root.style.setProperty("--brand-order", tweaks.brandOrder === "redwoodFirst" ? "row-reverse" : "row");
    try { localStorage.setItem("crc:dsEyebrow", tweaks.dsEyebrow === false ? "off" : "on"); } catch (e) {}
    try { localStorage.setItem("crc:arxivStyle", tweaks.arxivStyle || "underline"); } catch (e) {}
    try { localStorage.setItem("crc:pageRules", tweaks.pageRules === true ? "on" : "off"); } catch (e) {}
    try { localStorage.setItem("crc:contentAlign", tweaks.symMargins === false ? "wide" : "center"); } catch (e) {}
    try { localStorage.setItem("crc:contentSnug", tweaks.snugMargins ? "on" : "off"); } catch (e) {}
    try { localStorage.setItem("crc:linkPos", tweaks.linkPos || "top"); } catch (e) {}
    try { localStorage.setItem("crc:bgShade", tweaks.bgShade || "warm"); } catch (e) {}
    try { localStorage.setItem("crc:teal", tweaks.tealShade || "medium"); } catch (e) {}
    try { localStorage.setItem("crc:brandText", tweaks.brandText || "none"); } catch (e) {}
    try { localStorage.setItem("crc:dsNavStyle", tweaks.dsNavStyle || "plain"); } catch (e) {}
    try { localStorage.setItem("crc:dsLabel", tweaks.dsLabel || "above"); } catch (e) {}
    try { localStorage.setItem("crc:dsSubAlign", tweaks.dsSubAlign || "center"); } catch (e) {}
    try { localStorage.setItem("crc:bodyFont", tweaks.bodyFont || "sourceSerif"); } catch (e) {}
    try { localStorage.setItem("crc:headerStyle", tweaks.headerStyle || "minimal"); } catch (e) {}
    try { localStorage.setItem("crc:brandSide", tweaks.brandSide || "left"); } catch (e) {}
    try { localStorage.setItem("crc:brandOrder", tweaks.brandOrder || "crcFirst"); } catch (e) {}
    root.dataset.uiText = tweaks.uiText === "regular" ? "regular" : "large";
    try { localStorage.setItem("crc:uiText", tweaks.uiText === "regular" ? "regular" : "large"); } catch (e) {}
    root.dataset.content = "wide";
    root.dataset.lbFocus = tweaks.lbFocus ? "on" : "off";
    root.dataset.lbMargins = tweaks.lbMargins || "tight";
    root.dataset.lbTable = tweaks.lbWideTable ? "wide" : "aligned";
    root.dataset.lbDdShadow = tweaks.lbDdShadow === false ? "off" : "on";
    root.dataset.lbFilterLine = tweaks.lbFilterLine === false ? "off" : "on";
    root.dataset.dsNav = tweaks.dsNavStyle || "plain";
    root.dataset.navFit = tweaks.navFit || "roomy";
    root.dataset.dsNavBg = tweaks.dsNavBg ? "on" : "off";
    root.dataset.dsMenu = tweaks.dsMenu || "flat";
    root.dataset.lbEyebrow = tweaks.hideLbEyebrow ? "off" : "on";
  }, [teal, body, bg, tweaks.heroSize, tweaks.ledeSize, tweaks.heroGap, tweaks.barHeight, tweaks.rowLines, tweaks.headerHeight, tweaks.density, tweaks.brandSide, tweaks.brandOrder, tweaks.paleSubBars, tweaks.thickSubBars, tweaks.dsEyebrow, tweaks.arxivStyle, tweaks.pageRules, tweaks.symMargins, tweaks.snugMargins, tweaks.linkPos, tweaks.uiText, tweaks.brandText, tweaks.dsNavStyle, tweaks.dsLabel, tweaks.dsSubAlign, tweaks.headerStyle, tweaks.lbFocus, tweaks.brandMatch, tweaks.hideLbEyebrow, tweaks.lbMargins, tweaks.lbWideTable, tweaks.lbDdShadow, tweaks.navFit, tweaks.dsNavBg, tweaks.dsMenu, tweaks.lbFilterLine]);

  return (
    <div className="site" data-header={tweaks.headerStyle} data-ds-label={tweaks.dsLabel || "above"}>
      <Header style={tweaks.headerStyle} brandText={tweaks.brandText} dsNavStyle={tweaks.dsNavStyle || "plain"} dsSubAlign={tweaks.dsSubAlign || "center"} dsLabel={tweaks.dsLabel || "above"} />
      <Hero />
      <window.Leaderboard
        layout="table"
        teal={teal}
        barColor={tweaks.barColor}
        orgColors={orgColorsForBg(tweaks.barColor, tweaks.bgShade)}
        ciStyle={tweaks.ciStyle || "caps"}
      />
      <Datasets />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Leaderboard" />
        <TweakToggle
          label="Leaderboard focus"
          value={tweaks.lbFocus === true}
          onChange={(v) => setTweaks("lbFocus", v)}
        />
        <TweakRadio
          label="Side margins"
          value={tweaks.lbMargins || "tight"}
          onChange={(v) => setTweaks("lbMargins", v)}
          options={[
            { value: "narrowest", label: "Narrowest" },
            { value: "tight",     label: "Standard" },
            { value: "wide",      label: "Wide" }
          ]}
        />
        <TweakToggle
          label="Move to the right"
          value={tweaks.lbWideTable === true}
          onChange={(v) => setTweaks("lbWideTable", v)}
        />
        <TweakToggle
          label="Dropdown shadow"
          value={tweaks.lbDdShadow !== false}
          onChange={(v) => setTweaks("lbDdShadow", v)}
        />
        <TweakToggle
          label="Filter top line"
          value={tweaks.lbFilterLine !== false}
          onChange={(v) => setTweaks("lbFilterLine", v)}
        />
        <TweakToggle
          label="Hide “Leaderboard” label"
          value={tweaks.hideLbEyebrow === true}
          onChange={(v) => setTweaks("hideLbEyebrow", v)}
        />
        <TweakSection label="Density" />
        <TweakSlider
          label="Scale"
          value={tweaks.density ?? 92}
          min={78}
          max={100}
          step={2}
          unit="%"
          onChange={(v) => setTweaks("density", v)}
        />
        <TweakToggle
          label="Larger UI text"
          value={tweaks.uiText === "large"}
          onChange={(v) => setTweaks("uiText", v ? "large" : "regular")}
        />
        <TweakSection label="Body font" />
        <TweakRadio
          label="Paragraphs"
          value={tweaks.bodyFont}
          onChange={(v) => setTweaks("bodyFont", v)}
          options={Object.entries(BODY_FONTS).map(([value, f]) => ({ value, label: f.label }))}
        />
        <TweakSection label="Top bar" />
        <TweakRadio
          label="Navbar height"
          value={tweaks.navFit || "roomy"}
          onChange={(v) => setTweaks("navFit", v)}
          options={[
            { value: "roomy", label: "Roomy" },
            { value: "snug",  label: "Snug" }
          ]}
        />
        <TweakSelect
          label="Dataset links"
          value={tweaks.dsNavStyle || "plain"}
          onChange={(v) => setTweaks("dsNavStyle", v)}
          options={[
            { value: "plain",    label: "Plain" },
            { value: "dropdown", label: "Dropdown" },
            { value: "pill",     label: "Pill" },
            { value: "bracket",  label: "Brackets" },
            { value: "dot",      label: "Dot marker" },
            { value: "tint",     label: "Teal tint" },
            { value: "sublabel", label: "“dataset” sublabel" }
          ]}
        />
        <TweakToggle
          label="Datasets background"
          value={tweaks.dsNavBg === true}
          onChange={(v) => setTweaks("dsNavBg", v)}
        />
        <TweakRadio
          label="Datasets menu"
          value={tweaks.dsMenu || "flat"}
          onChange={(v) => setTweaks("dsMenu", v)}
          options={[
            { value: "card",      label: "Card" },
            { value: "flat",      label: "Flat" },
            { value: "editorial", label: "Editorial" }
          ]}
        />
        {(tweaks.dsNavStyle || "plain") === "sublabel" && (
          <TweakRadio
            label="Sublabel alignment"
            value={tweaks.dsSubAlign || "center"}
            onChange={(v) => setTweaks("dsSubAlign", v)}
            options={[
              { value: "center", label: "Centered" },
              { value: "top",    label: "Label on row" }
            ]}
          />
        )}
        <TweakRadio
          label="Brand side"
          value={tweaks.brandSide || "left"}
          onChange={(v) => setTweaks("brandSide", v)}
          options={[
            { value: "left",  label: "Left" },
            { value: "right", label: "Right" }
          ]}
        />
        <TweakRadio
          label="Brand match"
          value={tweaks.brandMatch || "highlight"}
          onChange={(v) => setTweaks("brandMatch", v)}
          options={[
            { value: "logo",      label: "Logo → teal" },
            { value: "highlight", label: "Highlight → green" }
          ]}
        />
        <TweakToggle
          label="Dataset page label"
          value={tweaks.dsEyebrow !== false}
          onChange={(v) => setTweaks("dsEyebrow", v)}
        />
        <TweakSelect
          label="arXiv link style"
          value={tweaks.arxivStyle || "underline"}
          onChange={(v) => setTweaks("arxivStyle", v)}
          options={[
            { value: "text",      label: "Text" },
            { value: "button",    label: "Button" },
            { value: "underline", label: "Underline" }
          ]}
        />
        <TweakToggle
          label="Symmetric page margins"
          value={tweaks.symMargins !== false}
          onChange={(v) => setTweaks("symMargins", v)}
        />
        {tweaks.symMargins !== false && (
          <TweakToggle
            label="Smaller margins"
            value={tweaks.snugMargins === true}
            onChange={(v) => setTweaks("snugMargins", v)}
          />
        )}
        <TweakRadio
          label="Paper links"
          value={tweaks.linkPos || "top"}
          onChange={(v) => setTweaks("linkPos", v)}
          options={[
            { value: "top",   label: "By label" },
            { value: "below", label: "Below title" },
            { value: "right", label: "Right of title" }
          ]}
        />
        <TweakSlider
          label="Height"
          value={tweaks.headerHeight ?? 68}
          min={44}
          max={88}
          step={2}
          unit="px"
          onChange={(v) => setTweaks("headerHeight", v)}
        />
        <TweakSection label="Teal saturation" />
        <TweakRadio
          label="Shade"
          value={tweaks.tealShade}
          onChange={(v) => setTweaks("tealShade", v)}
          options={[
            { value: "medium",      label: "Medium" },
            { value: "balancedLt",  label: "Balanced Lt" },
            { value: "balancedMid", label: "Balanced Mid" },
            { value: "balanced",    label: "Balanced" }
          ]}
        />
        <TweakSection label="Background" />
        <TweakRadio
          label="Shade"
          value={tweaks.bgShade}
          onChange={(v) => setTweaks("bgShade", v)}
          options={[
            { value: "warm",    label: "Warm" },
            { value: "soft",    label: "Soft" },
            { value: "light",   label: "Light" },
            { value: "white",   label: "White" }
          ]}
        />
        <TweakSection label="Bar color" />
        <TweakRadio
          label="Scheme"
          value={tweaks.barColor}
          onChange={(v) => setTweaks("barColor", v)}
          options={[
            { value: "teal",  label: "Teal" },
            { value: "byOrg", label: "By org" },
            { value: "byOrgVivid", label: "By org (vivid)" }
          ]}
        />
        <TweakSlider
          label="Thickness"
          value={tweaks.barHeight ?? 16}
          min={6}
          max={40}
          step={2}
          unit="px"
          onChange={(v) => setTweaks("barHeight", v)}
        />
        <TweakToggle
          label="Pale expanded bars"
          value={tweaks.paleSubBars !== false}
          onChange={(v) => setTweaks("paleSubBars", v)}
        />
        <TweakSelect
          label="Confidence interval"
          value={tweaks.ciStyle || "caps"}
          onChange={(v) => setTweaks("ciStyle", v)}
          options={[
            { value: "off",     label: "Off" },
            { value: "whisker", label: "Whiskers" },
            { value: "band",    label: "Band" },
            { value: "caps",    label: "Caps" }
          ]}
        />
        <TweakSection label="Hero tagline" />
        <TweakSlider
          label="Size"
          value={tweaks.heroSize || 48}
          min={22}
          max={72}
          step={1}
          unit="px"
          onChange={(v) => setTweaks("heroSize", v)}
        />
        <TweakSlider
          label="Tagline size"
          value={tweaks.ledeSize || 20}
          min={14}
          max={32}
          step={1}
          unit="px"
          onChange={(v) => setTweaks("ledeSize", v)}
        />
        <TweakRadio
          label="Gap below"
          value={String(tweaks.heroGap ?? 4)}
          options={[
            { value: "0",  label: "0" },
            { value: "4",  label: "4" },
            { value: "8",  label: "8" },
            { value: "12", label: "12" },
            { value: "16", label: "16" }
          ]}
          onChange={(v) => setTweaks("heroGap", parseInt(v, 10))}
        />
      </TweaksPanel>
    </div>
  );
}

function Header({ style, brandText, dsNavStyle = "plain", dsSubAlign = "center", dsLabel = "inline" }) {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [ddOpen, setDdOpen] = React.useState(false);
  const ddRef = React.useRef(null);
  React.useEffect(() => {
    document.documentElement.classList.toggle("nav-locked", menuOpen);
    const onResize = () => { if (window.innerWidth > 680) setMenuOpen(false); };
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, [menuOpen]);
  React.useEffect(() => {
    if (!ddOpen) return;
    const onDown = (e) => { if (ddRef.current && !ddRef.current.contains(e.target)) setDdOpen(false); };
    const onKey = (e) => { if (e.key === "Escape") setDdOpen(false); };
    document.addEventListener("mousedown", onDown);
    document.addEventListener("keydown", onKey);
    return () => { document.removeEventListener("mousedown", onDown); document.removeEventListener("keydown", onKey); };
  }, [ddOpen]);
  const brandLabel = brandText === "full" ? "Conceptual reasoning capabilities team" : "CRC";
  const BrandLockup = ({ accent }) => (
    <span className={"brand-lockup" + (brandText === "none" ? " brand-lockup--logo-only" : "")}>
      {brandText !== "none" && (accent ? (
        <a href="index.html" className={"wordmark wordmark--accent" + (brandText === "full" ? " wordmark--full" : "")}>
          <span className="wm-dot" />
          <span>{brandLabel}</span>
        </a>
      ) : (
        <a href="index.html" className={"wordmark" + (brandText === "full" ? " wordmark--full" : "")}>{brandLabel}</a>
      ))}
      {brandText !== "none" && <span className="brand-divider" />}
      <a href="index.html" aria-label="Redwood Research"><span className="redwood-logo" role="img" aria-label="Redwood Research" /></a>
    </span>
  );

  const links = [
    { label: "Leaderboard", href: "#leaderboard" },
    { label: "Methodology", href: "methodology.html" },
    { label: "Argumentation", href: "lmca.html", text: "Reward Model" },
    { label: "ConCoRD", href: "consistency.html", text: "ConCoRD" },
    { label: "Decision theory", href: "dtbench.html", text: "Decision Theory" },
    { label: "About",       href: "about.html" }
  ];

  const NavItems = ({ current = "Leaderboard" }) => {
    const stacked = dsNavStyle === "sublabel";
    const isDropdown = dsNavStyle === "dropdown";
    const DS_DROPDOWN = [
      { name: "Argument evaluation (LMCA)", href: "lmca.html", key: "Argumentation" },
      { name: "Consistency (ConCoRD)", href: "consistency.html", key: "ConCoRD" },
      { name: "Decision theory (DTBench)", href: "dtbench.html", key: "Decision theory" }
    ];
    const dsActive = DS_DROPDOWN.some((d) => d.key === current);
    const dsLinks = NAV_DATASETS.map((d) => (
      <a
        key={d.label}
        href={d.href}
        className={
          "nav-link nav-ds-link" +
          (stacked ? " nav-link--stack" : "") +
          (d.label === current ? " is-active" : "")
        }>
        {dsNavStyle === "dot" && <span className="nav-ds-dot" aria-hidden="true"></span>}
        <span className="nav-ds-label">{d.label}</span>
        {stacked && <span className="nav-link-sub">dataset</span>}
      </a>
    ));
    return (
      <React.Fragment>
        <button
          className="nav-toggle"
          aria-label="Open menu"
          aria-expanded={menuOpen}
          onClick={() => setMenuOpen(true)}>
          <span></span><span></span><span></span>
        </button>
        <div
          className={"nav-backdrop" + (menuOpen ? " is-open" : "")}
          onClick={() => setMenuOpen(false)}
          aria-hidden="true"></div>
      <nav
        className={"nav" + (menuOpen ? " nav--open" : "") + (stacked && dsSubAlign === "top" ? " nav--ds-baseline" : "")}
        onClick={(e) => { if (e.target.closest("a")) setMenuOpen(false); }}>
        <button className="nav-drawer-close" aria-label="Close menu" onClick={() => setMenuOpen(false)}>×</button>
        <a href="#leaderboard" className={"nav-link" + (current === "Leaderboard" ? " is-active" : "")}>Leaderboard</a>
        <a href="methodology.html" className={"nav-link" + (current === "Methodology" ? " is-active" : "")}>Methodology</a>
        <a href="about.html" className={"nav-link" + (current === "About" ? " is-active" : "")}>About</a>
        {isDropdown ? (
          <div className={"nav-dd" + (ddOpen ? " is-open" : "") + (dsActive ? " is-active" : "")} ref={ddRef}>
            <button className="nav-dd-trigger" aria-expanded={ddOpen} aria-haspopup="true"
              onClick={(e) => { e.preventDefault(); setDdOpen((o) => !o); }}>
              Datasets <span className="nav-dd-caret" aria-hidden="true">▾</span>
            </button>
            <div className="nav-dd-menu nav-dd-menu--compact">
              {DS_DROPDOWN.map((d) => (
                <a key={d.href} href={d.href} className={"nav-dd-item" + (d.key === current ? " is-active" : "")}>
                  <span className="nav-dd-name">{d.name}</span>
                </a>
              ))}
            </div>
          </div>
        ) : (
          <React.Fragment>
            {dsLabel === "inline" && <span className="nav-ds-kicker nav-ds-kicker--inline" aria-hidden="true">Datasets</span>}
            {(dsLabel === "above" || dsLabel === "below") ? (
              <span className={"nav-ds-group nav-ds-group--" + dsNavStyle + " nav-ds-group--labelled nav-ds-group--label-" + dsLabel}>
                <span className="nav-ds-kicker nav-ds-kicker--stacked" aria-hidden="true">Datasets</span>
                {dsLinks}
              </span>
            ) : (
              <span className={"nav-ds-group nav-ds-group--" + dsNavStyle}>
                {dsLinks}
              </span>
            )}
          </React.Fragment>
        )}
      </nav>
      </React.Fragment>
    );
  };

  if (style === "tealbar") {
    return (
      <header className="site-header header--tealbar">
        <div className="tealbar">
          <div className="container tealbar-inner mono-small">
            <span>Conceptual Reasoning Index · A research project</span>
            <span className="tealbar-cta">Latest: DTBench v2 released →</span>
          </div>
        </div>
        <div className="container header-inner">
          <BrandLockup />
          <NavItems />
        </div>
      </header>
    );
  }

  if (style === "accent") {
    return (
      <header className="site-header header--accent">
        <div className="container header-inner">
          <BrandLockup accent />
          <NavItems />
        </div>
      </header>
    );
  }

  if (style === "inverted") {
    return (
      <header className="site-header header--inverted">
        <div className="container header-inner">
          <BrandLockup />
          <NavItems />
        </div>
      </header>
    );
  }

  // minimal (default)
  return (
    <header className="site-header">
      <div className="container header-inner">
        <BrandLockup />
        <NavItems />
      </div>
    </header>
  );
}

function Hero() {
  return (
    <section className="hero">
      <div className="container">
        <h1 className="hero-title">
          Conceptual Reasoning Index
        </h1>
        <p className="hero-lede">
          Measuring model performance on hard-to-verify conceptual tasks like reasoning about AI alignment, societal values, and the future.
        </p>
      </div>
    </section>
  );
}

function Datasets() {
  const items = [
    {
      code: "LMCA",
      title: "Judging argument quality.",
      desc: "We ask models to rate the quality of conceptual arguments against given position texts and compare their ratings to expert ratings. This helps us evaluate whether models can serve as good reward models for reasoning.",
      stat: "X items",
      meta: "Released X",
      href: "lmca.html"
    },
    {
      code: "Consistency",
      title: "Having coherent beliefs.",
      desc: "We ask models for the probability of different statements being true. We then check whether these probabilities logically contradict each other. This helps us get a sense of whether a model's bottom-line answers in a given domain can be trusted at all.",
      stat: "X items",
      meta: "Released X",
      href: "consistency.html"
    },
    {
      code: "DTBench",
      title: "Reasoning about near copies.",
      desc: "We measure how models reason about decision-theoretic situations, especially when interacting with (near) copies of themselves.",
      stat: "X items",
      meta: "Released X",
      href: "dtbench.html"
    }
  ];

  return (
    <section className="datasets" data-layout="columns">
      <div className="container">
        <div className="ds-head-row">
          <h2 className="ds-heading">Our datasets.</h2>
        </div>
        <div className="ds-cols">
          {items.map((it) => (
            <a key={it.code} href={it.href} className="ds-col">
              <div className="ds-code mono-small">{it.code}</div>
              <h3 className="ds-title">{it.title}</h3>
              <p className="ds-desc">{it.desc}</p>
              <div className="ds-col-foot">
                <span className="mono-small dim">{it.stat} · {it.meta}</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="site-footer">
      <div className="container footer-inner">
        <div className="footer-copy mono-small dim">© 2026</div>
      </div>
    </footer>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);