// exam-page.jsx — For Individuals → Test content & structure (exam.html).
// Institutional register (CFA/ETS): plain matrix table, hairline rules, no
// colored pills/tiles. Does NOT redefine the six dimensions (those live on The
// Standard page). No exact percentages — emphasis stated in plain words.
const EI = window.AICONS;
const EC = window.HOME;

// Six dimensions with compact radar labels (name + short), D1→D6 order.
const DIMS = EC.profile.dims;

// Labeled hexagon "map" of the six dimensions (illustrative, unscored).
function HexMap() {
  const cx = 240,cy = 205,R = 124,labelR = 150;
  const ang = (i) => (-90 + i * 60) * Math.PI / 180;
  const pt = (r, i) => [cx + r * Math.cos(ang(i)), cy + r * Math.sin(ang(i))];
  const poly = (r) => DIMS.map((_, i) => pt(r, i).join(",")).join(" ");
  const rings = [34, 67, 100];
  return (
    <svg className="xm-svg" viewBox="0 0 480 410" role="img"
    aria-label={"The six AI competency dimensions measured by every exam: " + DIMS.map((d, i) => "D" + (i + 1) + " " + d.name).join(", ")}>
      {rings.map((r) => <polygon key={r} className="xm-ring" points={poly(R * r / 100)} />)}
      {DIMS.map((_, i) => {const [x, y] = pt(R, i);return <line key={i} className="xm-axis" x1={cx} y1={cy} x2={x} y2={y} />;})}
      <polygon className="xm-area" points={poly(R)} />
      {DIMS.map((_, i) => {const [x, y] = pt(R, i);return <circle key={i} className="xm-dot" cx={x} cy={y} r="4.5" />;})}
      {DIMS.map((d, i) => {
        const [lx, ly] = pt(labelR, i);
        const c = Math.cos(ang(i));
        const anchor = c > 0.3 ? "start" : c < -0.3 ? "end" : "middle";
        return (
          <text key={i} className="xm-label" x={lx} y={ly} textAnchor={anchor}>
            <tspan className="xm-d">D{i + 1}</tspan>
            <tspan className="xm-name" x={lx} dy="15">{d.short}</tspan>
          </text>);

      })}
    </svg>);

}

// Three orthogonal layers of the exam.
const LAYERS = [
{ k: "Level", tag: "Positioning", v: "Who it's for and how deep it goes.", foot: "Foundational · Practitioner · Advanced" },
{ k: "Dimension", tag: "Ability", v: "The six abilities of working with AI that every exam measures, D1–D6.", foot: "Six dimensions · defined in The Standard", href: "standard.html" },
{ k: "Difficulty", tag: "Complexity", v: "How integrative and open-ended a question is.", foot: "Easy · Medium · Hard" }];


const LEVELS = [
{
  name: "Foundational", tag: "Level 1",
  bestFor: "Anyone working alongside AI day to day.",
  primary: "Prompting & iteration; Tool fluency & agility",
  secondary: "Baseline Responsible AI & risk",
  character: "Single-step human-vs-AI judgment.",
  difficulty: "Mostly easy, some medium, minimal hard."
},
{
  name: "Practitioner", tag: "Level 2",
  bestFor: "Professionals who use AI in their core work.",
  primary: "Workflow & task design",
  secondary: "Output evaluation",
  character: "Designing human\u2013AI processes.",
  difficulty: "Mostly medium real-world scenarios, some hard."
},
{
  name: "Advanced", tag: "Level 3",
  bestFor: "Those accountable for AI outcomes across a team.",
  primary: "Responsible AI & risk",
  secondary: "Workflow & task design",
  character: "Governance & tradeoffs.",
  difficulty: "Mostly hard \u2014 integrative & open-ended, little easy."
}];


// Difficulty layer (orthogonal to dimension weights). Proposed mix per level,
// expressed as ranges — being calibrated against pilot data; no final numbers.
const DIFFICULTY = [
{ tag: "Level 1", name: "Foundational", easy: "High", medium: "Medium", hard: "Low" },
{ tag: "Level 2", name: "Practitioner", easy: "Low", medium: "High", hard: "Medium" },
{ tag: "Level 3", name: "Advanced", easy: "Low", medium: "Medium", hard: "High" }];


// Compare matrix: attributes down the side, the three levels across the top.
const COMPARE_ROWS = [
{ k: "Best for", get: (l) => l.bestFor },
{ k: "Primary emphasis", note: "high", get: (l) => l.primary },
{ k: "Secondary emphasis", note: "medium", get: (l) => l.secondary },
{ k: "Question character", get: (l) => l.character },
{ k: "Difficulty character", get: (l) => l.difficulty }];



const NOTS = [
{ t: "\u201CHard\u201D doesn\u2019t mean \u201Cgovernance.\u201D", b: "Any dimension can carry hard questions. A hard prompting item is just a complex scenario — not an ethics question." },
{ t: "Level 3 is not all governance.", b: "Responsible AI is the largest single emphasis at L3, but most of the exam still spans the other five dimensions. \u201CHard\u201D here means more integrative and open-ended, not more obscure. At Level 3, Responsible AI is the capstone — its hardest questions pull the other five abilities together rather than testing rules in isolation." }];





function ExamApp() {
  window.useReveal();
  const OTP = [
  { id: "layers", label: "Three orthogonal layers" },
  { id: "dimensions", label: "The six dimensions" },
  { id: "compare", label: "Compare the three levels" },
  { id: "difficulty", label: "How difficulty is distributed" },
  { id: "not", label: "What it is not" },
  { id: "format", label: "Format & logistics" }];

  return (
    <React.Fragment>
      <Nav />
      <Breadcrumb trail={[["For Individuals", "certifications.html"], ["Test content & structure", null]]} />
      <main className="xp">

        {/* HEADER */}
        <section className="xp-head">
          <div className="wrap">
            <span className="label label-accent">For Individuals · Test content &amp; structure</span>
            <h1>What the exam covers, and how it's built.</h1>
            <p className="xp-lead">The Atlas exam is composed of three independent layers. Together they decide who you're tested as, which abilities are measured, and how demanding each question is.</p>
          </div>
        </section>

        <div className="wrap">
          <div className="ref-layout">
            <div className="ref-body">

              {/* 1 — THREE ORTHOGONAL LAYERS */}
              <section className="ref-sec" id="layers">
                <div className="sec-head reveal">
                  <span className="label label-accent">Overview</span>
                  <h2>Three orthogonal layers.</h2>
                  <p className="sec-intro">Each layer is independent and they don't overlap or substitute for one another.</p>
                </div>
                <div className="xp-layers">
                  {LAYERS.map((l, i) =>
                  <div className="xp-layer reveal" key={l.k} style={{ transitionDelay: i * 70 + "ms" }}>
                      <span className="xp-layer-tag">{l.tag}</span>
                      <h3 className="xp-layer-k">{l.k}</h3>
                      <p className="xp-layer-v">{l.v}</p>
                      {l.href ?
                    <a className="xp-layer-foot xp-layer-link" href={l.href}>{l.foot} <EI.arrow /></a> :
                    <span className="xp-layer-foot">{l.foot}</span>}
                    </div>
                  )}
                </div>
              </section>

              {/* 2 — THE SIX DIMENSIONS (radar + slim legend) */}
              <section className="ref-sec" id="dimensions">
                <div className="sec-head reveal">
                  <span className="label label-accent">The ability layer</span>
                  <h2>The six dimensions.</h2>
                  <p className="sec-intro">Every exam measures the same six abilities of working with AI. </p>
                </div>
                <div className="xm-grid reveal">
                  <div className="xm-figure"><HexMap /></div>
                  <ol className="xm-legend">
                    {DIMS.map((d, i) =>
                    <li className="xm-leg-item" key={d.name}>
                        <span className="xm-leg-n mono">D{i + 1}</span>
                        <span className="xm-leg-text">
                          <span className="xm-leg-name">{d.name}</span>
                          <span className="xm-leg-tag">{d.tag}</span>
                        </span>
                      </li>
                    )}
                  </ol>
                </div>
                <a className="cta-text" href="standard.html">Read the full standard <EI.arrow /></a>
              </section>

              {/* 3 — COMPARE THE THREE LEVELS (CFA-style matrix) */}
              <section className="ref-sec" id="compare">
                <div className="sec-head reveal">
                  <span className="label label-accent">The level layer</span>
                  <h2>Compare the three levels.</h2>
                  <p className="sec-intro">Same six dimensions throughout what shifts between levels is where the emphasis falls and how demanding the questions get.</p>
                </div>

                <div className="xp-table-wrap reveal">
                  <table className="xp-table">
                    <thead>
                      <tr>
                        <th scope="col" className="xpt-corner"></th>
                        {LEVELS.map((lv) =>
                        <th scope="col" key={lv.name}>
                            <span className="xpt-col-tag">{lv.tag}</span>
                            <span className="xpt-col-name">{lv.name}</span>
                          </th>
                        )}
                      </tr>
                    </thead>
                    <tbody>
                      {COMPARE_ROWS.map((row) =>
                      <tr key={row.k}>
                          <th scope="row">{row.k}{row.note && <span className="xpt-rownote"> ({row.note})</span>}</th>
                          {LEVELS.map((lv) => <td key={lv.name}>{row.get(lv)}</td>)}
                        </tr>
                      )}
                    </tbody>
                  </table>
                </div>
                <p className="xp-table-note">Exact dimension weights and difficulty ratios are defined in <a href="standard.html" className="inline-link">The Standard</a> and are being calibrated against pilot data. </p>
              </section>

              {/* 3b — DIFFICULTY MIX (Level × Difficulty proposal) */}
              <section className="ref-sec" id="difficulty">
                <div className="sec-head reveal">
                  <span className="label label-accent">The difficulty layer</span>
                  <h2>How difficulty is distributed.</h2>
                  <p className="sec-intro">Difficulty is a separate layer from what's measured. There would be the easy / medium / hard mix of each level without changing the dimension weights. A harder level tests the same six abilities, but more deeply.</p>
                </div>
                <div className="xp-table-wrap reveal">
                  <table className="xp-table">
                    <thead>
                      <tr>
                        <th scope="col" className="xpt-corner"></th>
                        <th scope="col">Easy</th>
                        <th scope="col">Medium</th>
                        <th scope="col">Hard</th>
                      </tr>
                    </thead>
                    <tbody>
                      {DIFFICULTY.map((d) =>
                      <tr key={d.tag}>
                          <th scope="row">{d.tag}<span className="xpt-rownote"> · {d.name}</span></th>
                          <td>{d.easy}</td>
                          <td>{d.medium}</td>
                          <td>{d.hard}</td>
                        </tr>
                      )}
                    </tbody>
                  </table>
                </div>
                <p className="xp-table-note">Proposed emphasis, being calibrated against pilot data — not final. At Level 3, “hard” means more integrative and open-ended, not more obscure.</p>
              </section>

              {/* 5 — FORMAT & LOGISTICS */}
              <section className="ref-sec" id="format">
                <div className="sec-head reveal">
                  <span className="label label-accent">Format &amp; logistics</span>
                  <h2>How the exam is delivered.</h2>
                </div>
                <p className="reveal" style={{ fontSize: '16px', lineHeight: 1.65, color: 'var(--text)', maxWidth: '62ch' }}>The exam is adaptive and questions adapt to your performance level in real time, taking about 15–30 minutes. It's a focused, examination-only assessment built from real-world, AI-augmented work scenarios, fully proctored, with no coursework to complete.</p>
                <a className="cta-text" href="scoring.html">See how scoring works <EI.arrow /></a>
              </section>

            </div>
          </div>
        </div>

        {/* CLOSING CTA */}
        <section className="closing">
          <div className="wrap">
            <h2 className="reveal">Ready when you are.</h2>
            <p className="reveal">No coursework, no prep packages — sit the exam and earn a verifiable credential.</p>
            <div className="closing-cta reveal">
              <a href="https://app.atlas-ai.academy/register" className="btn btn-primary btn-lg">Get certified <EI.arrow style={{ width: 18, height: 18 }} /></a>
              <a href="scoring.html" className="btn btn-outline btn-lg">See how scoring works</a>
            </div>
            <p className="xp-closing-sub reveal"><a href="index.html#sample" className="inline-link">Try a sample question →</a></p>
          </div>
        </section>
      </main>
      <TeamBanner />
      <Footer />
    </React.Fragment>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<ExamApp />);