// scoring-page.jsx — For Individuals → How scoring works (scoring.html).
// Owns the RESULT: your six-dimension profile, how it's weighted to your level,
// the certification threshold, and what the result means. The exam's STRUCTURE
// (three layers, adaptive delivery, difficulty mix, what-it-is-not) lives on
// exam.html (Test content & structure) and is only cross-referenced here — do
// not duplicate it. The six dimensions are defined on The Standard. Weights are
// proposed ranges from team brief v2; pass mark is a placeholder.
const SI = window.AICONS;
const SC = window.HOME;
const SP = SC.profile;
const SDIMS = SP.dims;
const SAMPLE = SP.profiles[1];
const SAMPLE_OVERALL = Math.round(SAMPLE.scores.reduce((a, b) => a + b, 0) / SAMPLE.scores.length);

/* Weight matrix data from the brief (Section 3) — ranges, midpoints shown */
const WEIGHTS = [
{ d: "D1", name: "Prompting & iteration", l1: "High", l2: "Medium", l3: "Low", trend: "↓", role: "Entry skill decreases" },
{ d: "D2", name: "Output evaluation", l1: "Medium", l2: "Medium", l3: "Medium", trend: "—", role: "Stable across levels" },
{ d: "D3", name: "Tool fluency & agility", l1: "High", l2: "Low", l3: "Low", trend: "↓", role: "Entry skill decreases" },
{ d: "D4", name: "Workflow & task design", l1: "Low", l2: "High", l3: "High", trend: "↑", role: "Peaks at L2" },
{ d: "D5", name: "Context & judgment", l1: "Low", l2: "Medium", l3: "Medium", trend: "—", role: "Stable across levels" },
{ d: "D6", name: "Responsible AI & risk", l1: "Medium", l2: "Medium", l3: "High", trend: "↑↑", role: "Peaks sharply at L3" }];


/* Design rationale per dimension (from brief Section 4) */
const RATIONALE = [
{ d: "D1", summary: "Writing good instructions is the first thing a new AI user must learn — so L1 weights it highest. By L2 it's assumed, and by L3 it no longer separates experts from practitioners. We cap D1 at every level: this is an AI competence exam, not a prompt-engineering test." },
{ d: "D2", summary: "If you use AI, you need to judge whether its output is trustworthy. This applies equally to beginners and experts, so D2 stays in the mid-high range at every level. L1 catches obvious hallucinations; L2 designs verification strategies; L3 embeds evaluation into quality gates." },
{ d: "D3", summary: "Knowing what tools exist is an entry-level skill. Tools change fast and get commoditized, so memorizing a tool list isn't a high-level differentiator. D3 drops at higher levels — when a hard D3 item appears, it tests selection trade-offs under constraints, not product specs." },
{ d: "D4", summary: "L1 tests only single-step judgment ('should AI handle this step?'). L2 jumps to the peak because it targets the applied practitioner — someone who designs real human-AI workflows. L3 stays high but yields the top spot to D6: experts must design complex workflows AND take responsibility for deploying them." },
{ d: "D5", summary: "Adapting output to a specific audience, industry, or scenario is a cross-cutting judgment skill needed at every level. It's never the highest-weighted dimension, but never absent. L1 spots a mismatch; L2 rewrites for context; L3 navigates multi-stakeholder trade-offs." },
{ d: "D6", summary: "Even beginners need basic risk awareness (what data can go to an AI, common failure modes). L2 adds process-level risk controls. L3 surges to the highest weight because it tests responsible deployment: complex governance, compliance trade-offs, accountability, and organizational rollout. D6 is L3's capstone — a strong L3 governance item pulls D1–D5 together." }];


/* Hexagon radar */
function HexRadar({ dims, scores }) {
  const cx = 200,cy = 188,R = 116,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 dataPoly = dims.map((_, i) => pt(R * (scores[i] / 100), i).join(",")).join(" ");
  const rings = [25, 50, 75, 100];
  return (
    <svg className="hex-svg" viewBox="0 0 400 372" role="img"
    aria-label={"Sample competency profile: " + dims.map((d, i) => d.name + " " + scores[i]).join(", ")}>
      {rings.map((r) => <polygon key={r} className="hex-ring" points={poly(R * r / 100)} />)}
      {dims.map((_, i) => {const [x, y] = pt(R, i);return <line key={i} className="hex-axis" x1={cx} y1={cy} x2={x} y2={y} />;})}
      <g className="hex-data">
        <polygon className="hex-area" points={dataPoly} />
        {dims.map((_, i) => {const [x, y] = pt(R * (scores[i] / 100), i);return <circle key={i} className="hex-dot" cx={x} cy={y} r="4" />;})}
      </g>
      {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="hex-label" x={lx} y={ly} textAnchor={anchor}>
            <tspan className="hl-name">{d.short}</tspan>
            <tspan className="hl-score" x={lx} dy="15">{scores[i]}</tspan>
          </text>);

      })}
    </svg>);

}

function ScoringApp() {
  window.useReveal();
  const [expandedDim, setExpandedDim] = React.useState(null);

  return (
    <React.Fragment>
      <Nav />
      <Breadcrumb trail={[["For Individuals", "certifications.html"], ["How scoring works", null]]} />
      <main className="xp">

        {/* HEADER */}
        <section className="xp-head">
          <div className="wrap">
            <span className="label label-accent">For Individuals · How scoring works</span>
            <h1>Scored by dimension and level, not a single number.</h1>
            <p className="xp-lead">Every exam returns a profile across all six AI competency dimensions, weighted to the level you sit. Your result shows where you're strong, not just whether you passed.</p>
          </div>
        </section>

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

              {/* 1 — YOUR SIX-DIMENSION PROFILE */}
              <section className="ref-sec" id="profile">
                <div className="profile-split">
                  <div className="profile-copy reveal">
                    <span className="label label-accent">Your result</span>
                    <h2>A profile, not a verdict.</h2>
                    <p className="sec-intro">Your result is a score in each of the six dimensions plus an overall only shows the shape of your competence, not just a pass or fail.</p>
                    <ul className="profile-points">
                      <li><SI.check className="pp-check" /> A score from 0–100 in each of the six dimensions</li>
                      <li><SI.check className="pp-check" /> An overall score weighted to the level you sit</li>
                      <li><SI.check className="pp-check" /> The same six dimensions for every candidate</li>
                    </ul>
                    <a className="cta-text" href="standard.html">What each dimension means → The Standard <SI.arrow /></a>
                  </div>
                  <div className="profile-figure reveal">
                    <div className="hex-figure">
                      <HexRadar dims={SDIMS} scores={SAMPLE.scores} />
                      <div className="hex-overall">
                        <span className="ho-num mono">{SAMPLE_OVERALL}</span>
                        <span className="ho-of">/ 100 overall</span>
                      </div>
                    </div>
                    <p className="profile-sample">Sample profile — every exam returns one like this.</p>
                  </div>
                </div>
              </section>

              {/* 2 — MODULE WEIGHT MATRIX (how the overall is weighted to your level) */}
              <section className="ref-sec" id="weights">
                <div className="sec-head reveal">
                  <span className="label label-accent">Module weights</span>
                  <h2>Weighted to the level you sit.</h2>
                  <p className="sec-intro">Every level is scored across all six dimensions but each level weights them toward the abilities that matter most at that stage. These are design constraints, not arbitrary percentages.</p>
                </div>

                <div className="xp-table-wrap reveal">
                  <table className="xp-table">
                    <thead>
                      <tr>
                        <th scope="col" className="xpt-corner"></th>
                        <th scope="col"><span className="xpt-col-tag">Level 1</span><span className="xpt-col-name">Foundational</span></th>
                        <th scope="col"><span className="xpt-col-tag">Level 2</span><span className="xpt-col-name">Practitioner</span></th>
                        <th scope="col"><span className="xpt-col-tag">Level 3</span><span className="xpt-col-name">Advanced</span></th>
                      </tr>
                    </thead>
                    <tbody>
                      {WEIGHTS.map((w) =>
                      <tr key={w.d}>
                          <th scope="row"><span className="mono" style={{ marginRight: 8, color: 'var(--accent-strong)' }}>{w.d}</span>{w.name}</th>
                          <td>{w.l1}</td>
                          <td>{w.l2}</td>
                          <td>{w.l3}</td>
                        </tr>
                      )}
                    </tbody>
                  </table>
                </div>
                <p className="xp-table-note">All percentages are proposed ranges (midpoints shown in trend), being calibrated against pilot data. The at-a-glance level comparison, difficulty mix, and exam structure live on <a href="exam.html" className="inline-link">Test content &amp; structure</a>.</p>

                {/* Key weight patterns */}
                <div className="xp-keyline reveal" style={{ marginTop: 32 }}>Low-level exams lean on entry skills (D1, D3). Mid-level on applied workflow (D4). High-level on governance and responsible deployment (D6). Evaluation (D2) and judgment (D5) run through all three.</div>

                {/* Expandable rationale per dimension */}
                <div className="sc-rationale reveal" style={{ marginTop: 32 }}>
                  <h3 style={{ fontSize: 18, letterSpacing: '-0.01em', marginBottom: 16, color: 'var(--ink)' }}>Why each weight shifts</h3>
                  {RATIONALE.map((r, i) => {
                    const isOpen = expandedDim === i;
                    return (
                      <div key={r.d} className="sc-rat-row" style={{ borderBottom: '1px solid var(--line)' }}>
                        <button type="button" onClick={() => setExpandedDim(isOpen ? null : i)}
                        style={{
                          width: '100%', textAlign: 'left', background: 'none', border: 'none', cursor: 'pointer',
                          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
                          padding: '18px 2px', fontFamily: 'var(--font-head)', fontSize: 16, fontWeight: 700,
                          color: 'var(--ink)', letterSpacing: '-0.01em'
                        }}>
                          <span><span className="mono" style={{ color: 'var(--accent-strong)', marginRight: 12, fontSize: 13 }}>{r.d}</span>{WEIGHTS[i].name}</span>
                          <span style={{ color: 'var(--accent)', fontSize: 18, transition: 'transform .2s', transform: isOpen ? 'rotate(45deg)' : 'none' }}>+</span>
                        </button>
                        {isOpen &&
                        <div style={{ padding: '0 2px 20px 36px', fontSize: 15, color: 'var(--text)', lineHeight: 1.6, maxWidth: '68ch', animation: 'revIn .3s ease both' }}>
                            {r.summary}
                          </div>
                        }
                      </div>);

                  })}
                </div>
              </section>

              {/* 3 — PASSING: THE THRESHOLD */}
              <section className="ref-sec" id="passing">
                <div className="sec-head reveal">
                  <span className="label label-accent">Passing — the threshold</span>
                  <h2>A fixed bar, published in the open.</h2>
                  <p className="sec-intro">Results are reported by dimension and by level. To certify at a level, you meet a fixed threshold — set against the standard, not against other test-takers.</p>
                </div>

                <div className="sc-threshold reveal">
                  <div className="sc-th-main">
                    <span className="sc-th-label">Certification threshold</span>
                    <span className="sc-th-value">pass mark — to be confirmed</span>
                    <span className="sc-th-note">The passing standard is being finalized with the standards board and will be published here.</span>
                  </div>
                  <div className="sc-th-rule"></div>
                  <div className="sc-th-curve">
                    <span className="sc-th-curve-k">Never a curve</span>
                    <p>You're measured against a fixed published standard, not against other test-takers. Your result never depends on who else sat the exam.</p>
                  </div>
                </div>
              </section>


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

        {/* CLOSING CTA */}
        <section className="closing">
          <div className="wrap">
            <h2 className="reveal">Understand exactly where you stand.</h2>
            <p className="reveal">One adaptive exam returns a full six-dimension profile and 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 <SI.arrow style={{ width: 18, height: 18 }} /></a>
              <a href="standard.html" className="btn btn-outline btn-lg">Read the full standard</a>
            </div>
            <p className="xp-closing-sub reveal"><a href="exam.html" className="inline-link">See the test content &amp; structure →</a></p>
          </div>
        </section>
      </main>
      <TeamBanner />
      <Footer />
    </React.Fragment>);

}

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