// standard-app.jsx (v3) — "The Standard" page composition.
// Aligned with team brief v2. Uses same visual vocabulary as scoring.html and exam.html.
const { useState: sS, useEffect: sE } = React;
const S = window.STD;
const I = window.AICONS;
const DI = window.DIM_ICONS;

/* duotone dimension icon by index */
function DimIcon({ i }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      {DI[i]}
    </svg>
  );
}

/* ---------- 1 · HERO ---------- */
function StdHero() {
  const h = S.hero;
  return (
    <section className="std-hero" id="top">
      <div className="wrap std-hero-grid">
        <div className="reveal in">
          <span className="hero-eyebrow"><span className="he-rule"></span><span className="label label-accent">{h.eyebrow}</span></span>
          <h1>{h.headline}</h1>
          <p className="hero-sub">{h.sub}</p>
          <div className="std-hero-meta">
            {h.meta.map((m, i) => (
              <React.Fragment key={m}>
                {i > 0 && <span className="shm-dot" aria-hidden="true"></span>}
                <span className="shm-item">{m}</span>
              </React.Fragment>
            ))}
          </div>
          <div className="hero-cta">
            <a href={h.primary.href} className="btn btn-primary btn-lg">{h.primary.label} <I.download style={{ width: 18, height: 18 }} /></a>
            <a href={h.secondary.href} className="btn btn-outline btn-lg">{h.secondary.label}</a>
          </div>
        </div>
        <div className="reveal in std-hero-aside">
          <DocCover version={h.version} />
        </div>
      </div>
    </section>
  );
}

function DocCover({ version }) {
  return (
    <div className="doccover-stage">
      <div className="doccover">
        <div className="dc-spine" aria-hidden="true"></div>
        <div className="dc-body">
          <div className="dc-top">
            <span className="dc-issuer"><span className="brand-mark">A</span>Atlas</span>
            <span className="dc-kind">Standard</span>
          </div>
          <div className="dc-title">
            <span className="dc-eyebrow">Atlas Competency Standard</span>
            <span className="dc-name">Six dimensions · three levels</span>
          </div>
          <div className="dc-spec">
            <div className="dc-spec-row"><span>Dimensions</span><span>6</span></div>
            <div className="dc-spec-row"><span>Levels</span><span>1 · 2 · 3</span></div>
            <div className="dc-spec-row"><span>Scoring</span><span>0–100, by dimension</span></div>
          </div>
          <div className="dc-foot">
            <span className="dc-ver">Version <b>{version}</b></span>
            <span className="dc-seal" aria-hidden="true"><I.shield /></span>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- 2 · WHAT IT IS ---------- */
function StdIntro() {
  const c = S.intro;
  return (
    <section className="section section-intro">
      <div className="wrap std-intro-grid">
        <div className="reveal std-intro-head">
          <span className="label label-accent">{c.label}</span>
          <h2>{c.heading}</h2>
        </div>
        <div className="reveal std-intro-body">
          {c.body.map((p, i) => <p key={i} className={i === 0 ? "lead" : ""}>{p}</p>)}
        </div>
      </div>
    </section>
  );
}

/* ---------- 3 · THE SIX DIMENSIONS ---------- */
function StdDimensions() {
  const d = S.dimensions;
  return (
    <section className="section section--soft" id="dimensions">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="label label-accent">{d.label}</span>
          <h2>{d.heading}</h2>
          <p className="sec-intro">{d.intro}</p>
        </div>
        <div className="dimx-grid">
          {d.items.map((it, i) => (
            <div className="dimx-card reveal" key={it.n} style={{ transitionDelay: (i % 3) * 70 + "ms" }}>
              <div className="dimx-top">
                <span className="dimx-ic" aria-hidden="true"><DimIcon i={i} /></span>
                <span className="dimx-n mono">{it.n}</span>
              </div>
              <h3 className="dimx-name">{it.name}</h3>
              <p className="dimx-tag">{it.tag}</p>
              <p className="dimx-desc">{it.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- 4 · MODULE WEIGHT MATRIX ---------- */
function StdWeights() {
  const w = S.weights;
  return (
    <section className="section" id="weights">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="label label-accent">{w.label}</span>
          <h2>{w.heading}</h2>
          <p className="sec-intro">{w.intro}</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>
                <th scope="col" style={{width: 160}}>Trend</th>
              </tr>
            </thead>
            <tbody>
              {w.matrix.map((r) => (
                <tr key={r.d}>
                  <th scope="row"><span className="mono" style={{marginRight: 8, color: 'var(--accent-strong)'}}>{r.d}</span>{r.name}</th>
                  <td>{r.l1}</td>
                  <td>{r.l2}</td>
                  <td>{r.l3}</td>
                  <td><span style={{fontSize: 13, color: 'var(--muted)'}}>{r.trend}</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <p className="xp-table-note">{w.note}</p>
        <div className="xp-keyline reveal" style={{marginTop: 28}}>{w.keyline}</div>
      </div>
    </section>
  );
}

/* ---------- 5 · COMPETENCY FRAMEWORK (level switcher) ---------- */
function StdFramework() {
  const f = S.framework;
  const [lvl, setLvl] = sS(f.defaultLevel);
  const active = f.levels[lvl];
  return (
    <section className="section section--soft" id="framework">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="label label-accent">{f.label}</span>
          <h2>{f.heading}</h2>
          <p className="sec-intro">{f.intro}</p>
        </div>

        <div className="lvl-switch reveal" role="tablist" aria-label="Choose a level">
          {f.levels.map((L, i) => (
            <button key={L.label} role="tab" aria-selected={lvl === i}
              className={"lvl-tab" + (lvl === i ? " active" : "")} onClick={() => setLvl(i)}>
              <span className="lvl-tab-lab mono">{L.label}</span>
              <span className="lvl-tab-name">{L.title}</span>
            </button>
          ))}
        </div>

        <div className="lvl-panel reveal" key={lvl}>
          <div className="lvl-panel-head">
            <div>
              <span className="lph-tier mono">{active.label}</span>
              <h3 className="lph-name">{active.title}</h3>
            </div>
            <p className="lph-for">{active.for}</p>
          </div>
          <ol className="req-list">
            {active.reqs.map((r, di) => (
              <li className="req-row" key={di}>
                <span className="req-dim">
                  <span className="req-ic" aria-hidden="true"><DimIcon i={di} /></span>
                  <span className="req-dim-name">{f.dims[di]}</span>
                </span>
                <p className="req-text">{r.text}</p>
              </li>
            ))}
          </ol>
        </div>
      </div>
    </section>
  );
}

/* ---------- 6 · DIFFICULTY STRUCTURE ---------- */
function StdDifficulty() {
  const d = S.difficulty;
  return (
    <section className="section" id="difficulty">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="label label-accent">{d.label}</span>
          <h2>{d.heading}</h2>
          <p className="sec-intro">{d.intro}</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>
                <th scope="col">Character</th>
              </tr>
            </thead>
            <tbody>
              {d.matrix.map((r) => (
                <tr key={r.level}>
                  <th scope="row">{r.level}<span className="xpt-rownote"> · {r.title}</span></th>
                  <td>{r.easy}</td>
                  <td>{r.medium}</td>
                  <td>{r.hard}</td>
                  <td><span style={{fontSize: 14, color: 'var(--muted)'}}>{r.char}</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <p className="xp-table-note">{d.note}</p>

        {/* Common misreadings */}
        <div style={{marginTop: 40}}>
          <div className="sec-head reveal">
            <span className="label label-accent">Common misreadings</span>
            <h2>Two things difficulty is <em>not</em>.</h2>
          </div>
          <div className="xp-nots">
            {d.misreadings.map((m, i) => (
              <div className="xp-not reveal" key={i}>
                <span className="xp-not-n mono">No.{i + 1}</span>
                <h3>{m.title}</h3>
                <p>{m.text}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- 7 · HOW IT'S SET & REVISED ---------- */
function StdGovernance() {
  const g = S.governance;
  return (
    <section className="section section--soft" id="revision">
      <div className="wrap trust-layout">
        <div className="trust-lead reveal">
          <span className="label label-accent">{g.label}</span>
          <h2>{g.heading}</h2>
          <p className="trust-statement">{g.statement}</p>
        </div>
        <dl className="trust-spec reveal">
          {g.facts.map((f, i) => (
            <div className="spec-row" key={f.k}>
              <dt><span className="spec-n mono">{String(i + 1).padStart(2, "0")}</span>{f.k}</dt>
              <dd>
                {f.v}
                {f.link && <span className="spec-link"><a href={f.link.href} className="arrowlink">{f.link.label} <I.arrow /></a></span>}
              </dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
}

/* ---------- 8 · VERSION HISTORY ---------- */
function StdVersions() {
  const v = S.versions;
  return (
    <section className="section" id="versions">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="label label-accent">{v.label}</span>
          <h2>{v.heading}</h2>
          <p className="sec-intro">{v.intro}</p>
        </div>
        <ol className="ver-list reveal">
          {v.items.map((it) => (
            <li className={"ver-row" + (it.current ? " current" : "")} key={it.v}>
              <div className="ver-tag">
                <span className="ver-num mono">v{it.v}</span>
                {it.current && <span className="ver-now">Current</span>}
              </div>
              <span className="ver-date mono">{it.date}</span>
              <p className="ver-note">{it.note}</p>
            </li>
          ))}
        </ol>
        <div className="ver-actions reveal">
          <a href={v.changelog.href} className="arrowlink">{v.changelog.label} <I.arrow /></a>
        </div>
      </div>
    </section>
  );
}

/* ---------- 9 · USE THE STANDARD ---------- */
function StdUse() {
  const u = S.use;
  return (
    <section className="section section--soft" id="use">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="label label-accent">{u.label}</span>
          <h2>{u.heading}</h2>
        </div>
        <div className="use-grid">
          {u.cards.map((c, i) => {
            const Ic = I[c.icon] || I.doc;
            return (
              <div className={"use-card reveal" + (c.primary ? " primary" : "")} key={c.title} style={{ transitionDelay: i * 70 + "ms" }}>
                <span className="use-ic"><Ic /></span>
                <h3>{c.title}</h3>
                <p>{c.text}</p>
                {c.citation && (
                  <div className="use-cite">
                    <span className="use-cite-lab">Suggested citation</span>
                    <code>{c.citation}</code>
                  </div>
                )}
                {c.cta && (
                  <a href={c.cta.href} className={c.primary ? "btn btn-primary" : "arrowlink"}>
                    {c.primary ? <React.Fragment>{c.cta.label} <I.download style={{ width: 17, height: 17 }} /></React.Fragment> : <React.Fragment>{c.cta.label} <I.arrow /></React.Fragment>}
                  </a>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ---------- 10 · CLOSING CTA ---------- */
function StdClosing() {
  const c = S.closing;
  return (
    <section className="closing">
      <div className="wrap">
        <h2 className="reveal">{c.heading}</h2>
        <p className="reveal">{c.sub}</p>
        <div className="closing-cta reveal">
          <a href={c.primary.href} className="btn btn-primary btn-lg">{c.primary.label} <I.arrow style={{ width: 18, height: 18 }} /></a>
          <a href={c.secondary.href} className="btn btn-outline btn-lg">{c.secondary.label}</a>
        </div>
      </div>
    </section>
  );
}

/* ---------- APP ---------- */
function StdApp() {
  useReveal();
  return (
    <React.Fragment>
      <Nav />
      <Breadcrumb trail={[["The Standard", null]]} />
      <main>
        <StdHero />
        <StdIntro />
        <StdDimensions />
        <StdWeights />
        <StdFramework />
        <StdDifficulty />
        <StdGovernance />
        <StdClosing />
      </main>
      <TeamBanner />
      <Footer />
    </React.Fragment>
  );
}

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