/* eslint-disable */
// Landing, Pre-test, Post-test, Dashboard screens.

const { useState: scUseState, useEffect: scUseEffect } = React;

/* ==================================================================
   LANDING
================================================================== */
function LandingScreen({ onGo, hero, completion }) {
  const data = window.CARE_CODE_DATA;
  const pretestDone = !!completion?.pretest;
  const [scrolled, setScrolled] = scUseState(false);

  scUseEffect(() => {
    function check() {
      const reached =
        window.innerHeight + window.scrollY >=
        document.documentElement.scrollHeight - 120;
      if (reached) setScrolled(true);
    }
    window.addEventListener("scroll", check, { passive: true });
    check();
    return () => window.removeEventListener("scroll", check);
  }, []);

  // entryState: "scroll" | "pretest" | "ready"
  const entryState = !scrolled ? "scroll" : !pretestDone ? "pretest" : "ready";
  const entry = { state: entryState, scrolled, pretestDone };
  return (
    <div className="landing-screen">
      <Hero variant={hero} onGo={onGo} entry={entry} />

      {/* Why this exists */}
      <section className="container" style={{ paddingTop: 96, paddingBottom: 96 }}>
        <div className="row" style={{ alignItems: "flex-start", gap: 64, flexWrap: "wrap" }}>
          <div style={{ flex: "1 1 320px", maxWidth: 440 }}>
            <span className="eyebrow fade-up">01 — THE PROBLEM</span>
            <h2 className="display display-md fade-up d1" style={{ marginTop: 16 }}>
              Our customers are paying for an experience. <span style={{ color: "var(--accent)" }}>They are trusting us with a memory.</span>
            </h2>
          </div>
          <div style={{ flex: "1 1 320px", maxWidth: 520 }}>
            <p className="lead fade-up d2">
              But too often, we serve them without truly seeing them. We answer questions
              without listening. We do the task without noticing the person. This training is built to change that.
            </p>
            <ul className="problem-list">
              {[
              "Notice things about a customer before they speak.",
              "Hear what a customer is really asking — not just the words.",
              "Anticipate a need before the customer has to ask.",
              "Turn an ordinary interaction into a moment they'll remember.",
              "Genuinely care — even on a long shift, even when you're tired."].
              map((t, i) =>
              <li key={i}>
                  <span className="check-mark mono">·</span>
                  <span>{t}</span>
                </li>
              )}
            </ul>
          </div>
        </div>
      </section>

      {/* Structure */}
      <section className="structure-section">
        <div className="container">
          <div className="spread" style={{ alignItems: "flex-end", flexWrap: "wrap", gap: 32, marginBottom: 48 }}>
            <div>
              <span className="eyebrow">02 — HOW IT WORKS</span>
              <h2 className="display display-md" style={{ marginTop: 16, maxWidth: 580 }}>
                Seven modules. About two hours. Yours, at your own pace.
              </h2>
            </div>
            <div className="row gap-7">
              <MetaStat label="MODULES" value="07" sub="self-paced" />
              <MetaStat label="TIME" value="~2H" sub="split it or sit it" />
              <MetaStat label="TESTS" value="2" sub="pre & post" />
            </div>
          </div>

          <div className="module-strip">
            {data.modules.map((m, i) =>
            <div key={m.id} className="strip-cell">
                <div className="strip-num mono">{m.num}</div>
                <div className="strip-line"></div>
                <div className="strip-title">{m.title}</div>
                <div className="strip-time mono">{m.timeMin}M</div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="cta-section">
        <div className="container">
          <div className="cta-block corner-frame">
            <span className="eyebrow">{pretestDone ? "READY" : "BEGIN"}</span>
            <h2 className="display display-lg" style={{ marginTop: 20 }}>
              {pretestDone ? (
                <>You've taken the pre-test.<br />Let's get into the work.</>
              ) : (
                <>This will not work as a checklist.<br />It will work when you wake up to the person in front of you.</>
              )}
            </h2>
            <div className="row gap-3" style={{ marginTop: 40 }}>
              {pretestDone ? (
                <>
                  <button className="btn btn-primary btn-lg" onClick={() => onGo("dashboard")}>
                    ENTER TRAINING <span className="arr">→</span>
                  </button>
                  <button className="btn btn-ghost btn-lg" onClick={() => onGo("pretest")}>
                    REVIEW PRE-TEST
                  </button>
                </>
              ) : (
                <button className="btn btn-primary btn-lg" onClick={() => onGo("pretest")}>
                  BEGIN PRE-TEST <span className="arr">→</span>
                </button>
              )}
            </div>
            <p className="mute body-sm" style={{ marginTop: 28 }}>
              {pretestDone
                ? "Pre-test saved · Modules unlocked · You can come back and re-read anything"
                : "Approximately 5 minutes · No right answers · You'll see the same 5 questions at the end"}
            </p>
          </div>
        </div>
      </section>

      <footer className="landing-foot">
        <div className="container spread">
          <span className="mono mute" style={{ fontSize: 11, letterSpacing: "0.2em" }}>FRONTLINE TRAINING · INTERNAL</span>
          <span className="mono mute" style={{ fontSize: 11, letterSpacing: "0.2em" }}>v1.0 · {new Date().getFullYear()}</span>
        </div>
      </footer>
    </div>);

}

/* -------------------- HERO variants -------------------- */
function Hero({ variant = "split", onGo, entry }) {
  if (variant === "type-only") return <HeroType onGo={onGo} entry={entry} />;
  if (variant === "full-bleed") return <HeroFullBleed onGo={onGo} entry={entry} />;
  return <HeroSplit onGo={onGo} entry={entry} />;
}

/* Entry button — single source of truth for the gated CTA */
function EntryButton({ entry, onGo, secondary = false }) {
  const { state } = entry;
  if (state === "scroll") {
    return (
      <button
        className="btn btn-primary btn-lg btn-locked"
        disabled
        title="Read what's inside first"
      >
        <span className="lock-glyph">◌</span> SCROLL TO BEGIN <span className="arr-down">↓</span>
      </button>
    );
  }
  if (state === "pretest") {
    return (
      <button className="btn btn-primary btn-lg" onClick={() => onGo("pretest")}>
        BEGIN PRE-TEST <span className="arr">→</span>
      </button>
    );
  }
  return (
    <button className="btn btn-primary btn-lg" onClick={() => onGo("dashboard")}>
      BEGIN TRAINING <span className="arr">→</span>
    </button>
  );
}

function EntrySecondary({ entry, onGo }) {
  const enabled = entry.state === "ready";
  return (
    <button
      className={`btn btn-ghost btn-lg ${!enabled ? "btn-locked" : ""}`}
      onClick={() => enabled && onGo("dashboard")}
      disabled={!enabled}
    >
      VIEW CURRICULUM
    </button>
  );
}

function EntryHint({ entry }) {
  if (entry.state === "scroll")
    return (
      <span className="entry-hint mono">
        <span className="entry-hint-pulse">↓</span> Read what's inside · then take the pre-test
      </span>
    );
  if (entry.state === "pretest")
    return (
      <span className="entry-hint mono">
        Five honest questions · ~5 minutes
      </span>
    );
  return (
    <span className="entry-hint mono entry-hint-ready">
      ✓ Pre-test complete · Modules unlocked
    </span>
  );
}

function HeroSplit({ onGo, entry }) {
  return (
    <section className="hero hero-split">
      <div className="hero-grid">
        <div className="hero-text">
          <span className="eyebrow fade-up">FRONTLINE TRAINING · 2026</span>
          <h1 className="display display-xl fade-up d1" style={{ marginTop: 24, marginBottom: 32 }}>
            THE<br />CARE<br />
            <span style={{ color: "var(--accent)" }}>CODE.</span>
          </h1>
          <p className="lead fade-up d2" style={{ maxWidth: 460, marginBottom: 40 }}>
            A two-hour, seven-module training for every colleague who comes face-to-face with a customer.
            About waking up to the person in front of you.
          </p>
          <div className="hero-cta fade-up d3">
            <div className="row gap-3">
              <EntryButton entry={entry} onGo={onGo} />
              <EntrySecondary entry={entry} onGo={onGo} />
            </div>
            <EntryHint entry={entry} />
          </div>
          <div className="hero-mindsets fade-up d4">
            <span className="eyebrow eyebrow-dim">ALIGNED WITH</span>
            <div className="mindset-row">
              <span>Lead with Generosity</span>
              <span className="sep">·</span>
              <span>Create Moments that Matter</span>
              <span className="sep">·</span>
              <span>Work as One Team</span>
            </div>
          </div>
        </div>
        <div className="hero-art fade-up d2">
          <ImgSlot
            label="hero · single on-site portrait, eye contact"
            src="assets/hero-portrait.jpg"
            aspect="3 / 4"
            objectPosition="center top"
            style={{ height: "100%" }} />
          
          <div className="hero-art-meta">
            <span className="eyebrow eyebrow-dim">CHAPTER 01</span>
            <span className="display display-sm" style={{ fontSize: 28 }}>Why we exist.</span>
          </div>
        </div>
      </div>
      <Ticker />
    </section>);

}

function HeroType({ onGo, entry }) {
  return (
    <section className="hero hero-type">
      <div className="container" style={{ paddingTop: 80, paddingBottom: 80 }}>
        <span className="eyebrow fade-up">FRONTLINE TRAINING</span>
        <h1 className="display fade-up d1" style={{ fontSize: "clamp(80px, 18vw, 260px)", lineHeight: 0.82, marginTop: 24, letterSpacing: "-0.04em" }}>
          THE<br />
          <span style={{ color: "var(--accent)" }}>CARE</span><br />
          CODE.
        </h1>
        <div className="hero-cta fade-up d3" style={{ marginTop: 64 }}>
          <div className="row gap-3">
            <EntryButton entry={entry} onGo={onGo} />
            <EntrySecondary entry={entry} onGo={onGo} />
          </div>
          <EntryHint entry={entry} />
        </div>
      </div>
      <Ticker />
    </section>);

}

function HeroFullBleed({ onGo, entry }) {
  return (
    <section className="hero hero-full">
      <ImgSlot
        label="full-bleed · cinematic customer-facing crowd, golden hour"
        src="assets/hero-fullbleed.jpg"
        aspect="auto"
        className="hero-full-img" />

      <div className="hero-full-overlay">
        <div className="container">
          <span className="eyebrow fade-up">FRONTLINE TRAINING</span>
          <h1 className="display display-xl fade-up d1" style={{ marginTop: 24, marginBottom: 32 }}>
            THE CARE
            <br />
            <span style={{ color: "var(--accent)" }}>CODE.</span>
          </h1>
          <p className="lead fade-up d2" style={{ maxWidth: 540, marginBottom: 40 }}>
            Anticipating customer needs. Seven modules, two hours, one promise:
            be the colleague customers remember.
          </p>
          <div className="hero-cta fade-up d3">
            <div className="row gap-3">
              <EntryButton entry={entry} onGo={onGo} />
              <EntrySecondary entry={entry} onGo={onGo} />
            </div>
            <EntryHint entry={entry} />
          </div>
        </div>
      </div>
      <Ticker />
    </section>);

}

function Ticker() {
  const phrases = [
  "WE ARE NOT JUST HERE TO COMPLETE TRANSACTIONS.",
  "WE ARE IN THE MEMORY BUSINESS.",
  "SERVING IS THE MINIMUM.",
  "CARING IS THE STANDARD.",
  "SCAN · THINK · ACT.",
  "EVERY CUSTOMER IS TRUSTING US WITH A MOMENT OF THEIR LIFE."];

  const run = [...phrases, ...phrases];
  return (
    <div className="ticker">
      <div className="ticker-track">
        {run.map((p, i) => (
          <React.Fragment key={i}>
            <span className="ticker-phrase">{p}</span>
            <span className="ticker-diamond">◇</span>
          </React.Fragment>
        ))}
      </div>
    </div>);

}

/* ==================================================================
   PRE-TEST / POST-TEST
================================================================== */
function TestScreen({ kind, onGo, completion, setCompletion }) {
  const data = window.CARE_CODE_DATA;
  const isPost = kind === "posttest";
  const def = data.pretest; // same questions
  const [step, setStep] = scUseState(0);
  const [answers, setAnswers] = scUseState(() => completion[kind] || {});

  const q = def.questions[step];
  const total = def.questions.length;
  const allAnswered = def.questions.every((qq) => {
    const a = answers[qq.id];
    if (qq.kind === "text") return typeof a === "string" && a.trim().length > 0;
    return a != null && a !== "";
  });

  function setA(id, val) {
    setAnswers((p) => ({ ...p, [id]: val }));
  }

  function submit() {
    setCompletion((p) => ({ ...p, [kind]: answers }));
    if (isPost) onGo("comparison");else
    onGo("dashboard");
  }

  return (
    <div className="test-screen">
      <div className="container" style={{ paddingTop: 56, paddingBottom: 96 }}>
        <div className="test-head">
          <span className="eyebrow">{isPost ? "POST-TEST · AFTER THE CODE" : "PRE-TEST · BEFORE YOU BEGIN"}</span>
          <h1 className="display display-lg" style={{ marginTop: 16 }}>
            {isPost ? "Now compare your thinking." : "Where do you stand right now?"}
          </h1>
          <p className="lead dim" style={{ marginTop: 16, maxWidth: 620 }}>
            {isPost ?
            "Same five questions. Answer them again — you'll see the difference next." :
            "Five questions. Be honest. There are no right answers yet."}
          </p>
        </div>

        <div className="test-progress">
          <div className="progress-dots">
            {def.questions.map((qq, i) =>
            <div
              key={i}
              className={`dot ${i === step ? "active" : ""} ${answers[qq.id] != null && answers[qq.id] !== "" ? "done" : ""}`}>
            </div>
            )}
          </div>
          <span className="mono mute" style={{ fontSize: 11, letterSpacing: "0.18em" }}>
            Q{step + 1} OF {total}
          </span>
        </div>

        <div className="test-card fade-up" key={q.id}>
          <span className="mono num test-num">Q{step + 1}</span>
          <h2 className="display display-md test-prompt">{q.prompt}</h2>

          {q.kind === "mcq" &&
          <div className="mcq-grid">
              {q.options.map((o) =>
            <button
              key={o.id}
              className={`mcq-opt ${answers[q.id] === o.id ? "picked" : ""}`}
              onClick={() => setA(q.id, o.id)}>
              
                  <span className="mcq-letter mono">{o.id.toUpperCase()}</span>
                  <span>{o.text}</span>
                </button>
            )}
            </div>
          }

          {q.kind === "text" &&
          <textarea
            className="test-textarea"
            rows={4}
            placeholder={q.placeholder}
            value={answers[q.id] || ""}
            onChange={(e) => setA(q.id, e.target.value)} />

          }

          {q.kind === "scale" &&
          <ScaleInput
            value={answers[q.id]}
            onChange={(v) => setA(q.id, v)}
            labels={q.labels}
            min={q.min}
            max={q.max} />

          }
        </div>

        <div className="test-controls">
          <button className="btn btn-ghost btn-sm" disabled={step === 0} onClick={() => setStep(step - 1)}>← PREVIOUS</button>
          {step < total - 1 ?
          <button className="btn btn-primary" onClick={() => setStep(step + 1)}>
              NEXT QUESTION <span className="arr">→</span>
            </button> :

          <button className="btn btn-primary btn-lg" disabled={!allAnswered} onClick={submit}>
              {isPost ? "SEE HOW MY THINKING CHANGED" : "SAVE & BEGIN MODULE 01"} <span className="arr">→</span>
            </button>
          }
        </div>
      </div>
    </div>);

}

function ScaleInput({ value, onChange, labels, min = 1, max = 10 }) {
  return (
    <div className="scale-input">
      <div className="scale-input-bar">
        {Array.from({ length: max - min + 1 }).map((_, i) => {
          const v = i + min;
          return (
            <button
              key={v}
              className={`scale-btn ${value === v ? "picked" : ""}`}
              onClick={() => onChange(v)}>
              
              <span className="scale-btn-num display display-sm" style={{ fontSize: 22 }}>{v}</span>
            </button>);

        })}
      </div>
      <div className="scale-labels mono">
        <span>{labels.min}</span>
        <span>{labels.max}</span>
      </div>
    </div>);

}

/* ==================================================================
   DASHBOARD
================================================================== */
function DashboardScreen({ onGo, completion, modules, nav, user }) {
  const data = window.CARE_CODE_DATA;
  const completed = completion.modules || {};
  const completedCount = Object.values(completed).filter(Boolean).length;
  const overallPct = Math.round(completedCount / modules.length * 100);
  const minsDone = modules.reduce((acc, m) => acc + (completed[m.id] ? m.timeMin : 0), 0);
  const minsLeft = data.meta.totalMinutes - minsDone;

  // Next unlocked module: the first incomplete one (linear unlocking)
  let firstIncomplete = -1;
  for (let i = 0; i < modules.length; i++) {
    if (!completed[modules[i].id]) {firstIncomplete = i;break;}
  }
  const nextMod = firstIncomplete >= 0 ? modules[firstIncomplete] : null;
  const preDone = !!completion.pretest;
  const postDone = !!completion.posttest;
  const allModulesDone = completedCount === modules.length;

  const nextBanner = !preDone ?
    <NextBanner
      eyebrow="START HERE"
      title="Take the pre-test first."
      sub="Five honest questions. We'll come back to them at the end."
      cta="BEGIN PRE-TEST"
      onClick={() => onGo("pretest")} /> :
    !allModulesDone && nextMod ?
    <NextBanner
      eyebrow={`CONTINUE · MODULE ${nextMod.num}`}
      title={nextMod.title}
      sub={nextMod.subtitle}
      cta={`READ MODULE ${nextMod.num}`}
      onClick={() => onGo("module", nextMod.id)}
      time={`${nextMod.timeMin} min read`} /> :
    !postDone ?
    <NextBanner
      eyebrow="FINAL STEP"
      title="Take the post-test."
      sub="Same five questions. See how your thinking has changed."
      cta="BEGIN POST-TEST"
      onClick={() => onGo("posttest")} /> :
    <NextBanner
      eyebrow="COMPLETE"
      title="You've finished The Care Code."
      sub="Review your comparison and sign your certificate."
      cta="VIEW MY CERTIFICATE"
      onClick={() => onGo("completion")} />;

  return (
    <div className="dashboard-screen">
      <div className="container" style={{ paddingTop: 56, paddingBottom: 96 }}>
        {/* Greeting + progress */}
        <section className="dash-greet">
          <div>
            <span className="eyebrow fade-up">YOUR TRAINING · {new Date().toLocaleDateString("en-GB", { day: "numeric", month: "short" })}</span>
            <h1 className="display display-lg fade-up d1" style={{ marginTop: 16 }}>
              {greeting()}, {user.name.split(" ")[0]}.<br />
              <span className="dim">{allModulesDone ? "Ready for the post-test." : nextMod ? `Up next — ${nextMod.title}.` : "Let's begin."}</span>
            </h1>
          </div>
          <div className="dash-metrics fade-up d2">
            <CircleMetric label="OVERALL" pct={overallPct} value={`${overallPct}%`} />
            <MetaStat label="MODULES DONE" value={`${completedCount}/${modules.length}`} sub={`${minsDone} min completed`} />
            <MetaStat label="TIME LEFT" value={`~${Math.max(0, minsLeft)}m`} sub="self-paced" />
          </div>
        </section>

        {/* Curriculum grid */}
        <section style={{ marginTop: 56 }}>
          <div className="spread" style={{ alignItems: "flex-end", marginBottom: 32 }}>
            <div>
              <span className="eyebrow">CURRICULUM</span>
              <h2 className="display display-md" style={{ marginTop: 12 }}>Seven modules. In order.</h2>
            </div>
            <div className="row gap-3">
              <span className="mono dim" style={{ fontSize: 11, letterSpacing: "0.18em" }}>
                {completedCount} OF {modules.length} COMPLETE
              </span>
            </div>
          </div>

          <div className="module-grid">
            {modules.map((m, i) => {
              const done = !!completed[m.id];
              const locked = !preDone && i > 0; // pretest gate
              const isNext = !done && !locked && i === firstIncomplete;
              return (
                <ModuleCard
                  key={m.id}
                  m={m}
                  idx={i}
                  done={done}
                  locked={locked}
                  isNext={isNext}
                  onOpen={() => onGo("module", m.id)} />);


            })}
          </div>
        </section>

        {/* Bottom: tests row */}
        <section style={{ marginTop: 64 }}>
          <div className="spread" style={{ alignItems: "flex-end", marginBottom: 32 }}>
            <div>
              <span className="eyebrow">ASSESSMENTS</span>
              <h2 className="display display-md" style={{ marginTop: 12 }}>Before & after.</h2>
            </div>
          </div>
          <div className="tests-row">
            <TestCard
              kind="pretest"
              label="PRE-TEST"
              title="Where you stand"
              sub="Take this first. No right answers."
              done={preDone}
              locked={false}
              onOpen={() => onGo("pretest")} />
            
            <TestCard
              kind="posttest"
              label="POST-TEST"
              title="How you've changed"
              sub="Same five questions, two hours later."
              done={postDone}
              locked={!allModulesDone}
              onOpen={() => onGo("posttest")} />
            
            <TestCard
              kind="comparison"
              label="REVIEW"
              title="Before · After"
              sub="See your shift in thinking."
              done={false}
              locked={!preDone || !postDone}
              onOpen={() => onGo("comparison")} />
            
          </div>
        </section>

        {/* Next action banner — at the bottom so staff scroll past the full curriculum first */}
        <section className="dash-next" style={{ marginTop: 64 }}>
          {nextBanner}
        </section>
      </div>
    </div>);

}

function greeting() {
  const h = new Date().getHours();
  if (h < 12) return "Good morning";
  if (h < 18) return "Good afternoon";
  return "Good evening";
}

function CircleMetric({ label, pct, value }) {
  const r = 38;
  const c = 2 * Math.PI * r;
  const dash = pct / 100 * c;
  return (
    <div className="circle-metric">
      <svg width="100" height="100" viewBox="0 0 100 100">
        <circle cx="50" cy="50" r={r} fill="none" stroke="var(--line)" strokeWidth="2" />
        <circle
          cx="50" cy="50" r={r} fill="none"
          stroke="var(--accent)" strokeWidth="2"
          strokeDasharray={`${dash} ${c}`}
          strokeDashoffset={c / 4}
          transform="rotate(-90 50 50)"
          style={{ transition: "stroke-dasharray 0.8s cubic-bezier(.2,.7,.2,1)" }} />
        
        <text x="50" y="55" textAnchor="middle" fontFamily="var(--f-display)" fontWeight="700" fontSize="18" fill="var(--fg)">
          {value}
        </text>
      </svg>
      <span className="eyebrow eyebrow-dim" style={{ marginTop: 4 }}>{label}</span>
    </div>);

}

function NextBanner({ eyebrow, title, sub, cta, onClick, time }) {
  return (
    <div className="next-banner corner-frame">
      <div className="next-banner-body">
        <span className="eyebrow">{eyebrow}</span>
        <h2 className="display display-md" style={{ marginTop: 8 }}>{title}</h2>
        <p className="lead dim" style={{ marginTop: 12, maxWidth: 540 }}>{sub}</p>
      </div>
      <div className="next-banner-cta">
        {time && <span className="mono mute" style={{ fontSize: 11, letterSpacing: "0.18em" }}>{time}</span>}
        <button className="btn btn-primary btn-lg" onClick={onClick}>
          {cta} <span className="arr">→</span>
        </button>
      </div>
    </div>);

}

function ModuleCard({ m, idx, done, locked, isNext, onOpen }) {
  return (
    <button
      className={`module-card ${done ? "done" : ""} ${locked ? "locked" : ""} ${isNext ? "next" : ""}`}
      onClick={() => !locked && onOpen()}
      disabled={locked}>
      
      <div className="module-card-top">
        <span className="mono module-card-num">{m.num}</span>
        <span className={`module-card-status mono ${done ? "done" : locked ? "locked" : isNext ? "next" : ""}`}>
          {done ? "✓ DONE" : locked ? "LOCKED" : isNext ? "UP NEXT" : "READY"}
        </span>
      </div>
      <div className="module-card-cover">
        <ImgSlot label={`module ${m.num} cover`} src={m.cover} aspect="16 / 9" />
        <div className="module-card-hero-word">{m.hero}</div>
      </div>
      <div className="module-card-body">
        <h3 className="display display-sm" style={{ fontSize: 24 }}>{m.title}</h3>
        <p className="body-sm dim" style={{ marginTop: 8 }}>{m.subtitle}</p>
      </div>
      <div className="module-card-foot">
        <span className="mono mute">{m.timeMin} MIN</span>
        <span className="mono">{done ? "REVIEW" : locked ? "—" : "OPEN →"}</span>
      </div>
    </button>);

}

function TestCard({ kind, label, title, sub, done, locked, onOpen }) {
  return (
    <button
      className={`test-card-mini ${done ? "done" : ""} ${locked ? "locked" : ""}`}
      onClick={() => !locked && onOpen()}
      disabled={locked}>
      
      <span className={`eyebrow ${locked ? "eyebrow-dim" : ""}`}>{label} {done ? "· ✓" : locked ? "· LOCKED" : ""}</span>
      <h3 className="display display-sm" style={{ fontSize: 26, marginTop: 8 }}>{title}</h3>
      <p className="body-sm dim" style={{ marginTop: 8 }}>{sub}</p>
      <span className="mono test-card-cta">
        {locked ? "—" : done ? "REVIEW →" : "OPEN →"}
      </span>
    </button>);

}

Object.assign(window, { LandingScreen, TestScreen, DashboardScreen });