// certifications-page.jsx — "For Individuals" landing page.
// CFA Program / IELTS "Take IELTS" information architecture.
const CI = window.AICONS;
const CC = window.HOME;
const CLEVELS = CC.levels.items;

/* ── data ── */
const STEPS = [
  { n: "01", title: "Register",
    text: "Create an account, choose your level, and book a session." },
  { n: "02", title: "Sit the adaptive exam",
    text: "15–30 minutes, fully proctored. Real-world scenarios that adapt to your performance level in real time." },
  { n: "03", title: "Get a six-dimension profile",
    text: "See where you're strong across all six AI competency dimensions — not just whether you passed." },
  { n: "04", title: "Share a verifiable credential",
    text: "Receive a credential with a unique ID that anyone can verify against the public record." },
];

const CREDIBLE = [
  { icon: "doc",    title: "Published standard",
    text: "Graded against a public competency framework — six dimensions, three levels, revised in the open.",
    href: "standard.html", link: "Read the standard" },
  { icon: "shield", title: "Proctored exam",
    text: "Examination-only and fully proctored. No coursework, no prep packages — just a direct measure of applied ability.",
    href: "exam.html", link: "Test content & structure" },
  { icon: "search", title: "Verifiable credential",
    text: "Every credential resolves to a public record with a unique ID. Anyone — employers, clients, institutions — can check it.",
    href: "verify.html", link: "Verify a credential" },
];

function CertificationsApp() {
  window.useReveal();

  return (
    <React.Fragment>
      <Nav />
      <Breadcrumb trail={[["For Individuals", null]]} />

      <main className="ct">

        {/* ── 1 · HERO ── */}
        <section className="ct-hero">
          <div className="wrap">
            <span className="label label-accent">For Individuals</span>
            <h1>Prove you can work with general intelligence.</h1>
            <p className="ct-lead">An independent, verifiable credential. Sit a proctored exam across six AI competency dimensions, graded against a published standard — and earn a credential anyone can check.</p>
            <div className="ct-hero-cta">
              <a href="https://app.atlas-ai.academy/register" className="btn btn-primary btn-lg">Get certified <CI.arrow style={{ width: 18, height: 18 }} /></a>
              <a href="index.html#sample" className="btn btn-outline btn-lg">Try a sample question</a>
            </div>
          </div>
        </section>

        {/* ── 2 · WHO IT'S FOR — three levels ── */}
        <section className="ct-sec section--soft" id="levels">
          <div className="wrap">
            <div className="sec-head reveal">
              <span className="label label-accent">Who it's for</span>
              <h2>Three levels. One standard.</h2>
              <p className="sec-intro">Choose the level that fits where you are. Every level measures the same six dimensions — what shifts is the emphasis and how demanding the questions get.</p>
            </div>
            <div className="ct-levels">
              {CLEVELS.map((lv, i) => (
                <div className="ct-level-card reveal" key={lv.key} style={{ transitionDelay: i * 80 + "ms" }}>
                  <span className="ct-lv-tag">{lv.label}</span>
                  <h3 className="ct-lv-name">{lv.title}</h3>
                  <p className="ct-lv-for">{lv.bestFor}</p>
                  <p className="ct-lv-focus">{lv.focus}</p>
                  <a href={lv.href} className="arrowlink ct-lv-link">Learn more <CI.arrow /></a>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* ── 3 · WHY IT'S CREDIBLE ── */}
        <section className="ct-sec" id="credible">
          <div className="wrap">
            <div className="sec-head reveal">
              <span className="label label-accent">Why it's credible</span>
              <h2>A credential you can prove.</h2>
              <p className="sec-intro">Three things make a credential worth holding: a standard you can read, an exam you can't game, and a record anyone can check.</p>
            </div>
            <div className="ct-cred-grid">
              {CREDIBLE.map((c, i) => {
                const Icon = CI[c.icon];
                return (
                  <div className="ct-cred-card reveal" key={c.title} style={{ transitionDelay: i * 80 + "ms" }}>
                    <div className="ct-cred-icon">
                      <Icon style={{ width: 24, height: 24 }} />
                    </div>
                    <h3>{c.title}</h3>
                    <p>{c.text}</p>
                    <a href={c.href} className="arrowlink">{c.link} <CI.arrow /></a>
                  </div>
                );
              })}
            </div>
          </div>
        </section>

        {/* ── 4 · HOW IT WORKS — four steps ── */}
        <section className="ct-sec section--soft" id="how">
          <div className="wrap">
            <div className="sec-head reveal">
              <span className="label label-accent">How it works</span>
              <h2>Four steps to a verifiable credential.</h2>
            </div>
            <ol className="ct-steps">
              {STEPS.map((s, i) => (
                <li className="ct-step reveal" key={s.n} style={{ transitionDelay: i * 70 + "ms" }}>
                  <span className="ct-step-n">{s.n}</span>
                  <div>
                    <h3 className="ct-step-title">{s.title}</h3>
                    <p className="ct-step-text">{s.text}</p>
                  </div>
                </li>
              ))}
            </ol>
          </div>
        </section>

        {/* ── 5 · RECOGNITION (neutral) ── */}
        <section className="ct-sec" id="recognition">
          <div className="wrap">
            <div className="ct-recog reveal">
              <div>
                <span className="label label-accent">Recognition</span>
                <h2>Who recognizes Atlas credentials</h2>
                <p className="ct-recog-text">Atlas is building recognition across sectors and institutions. See which organizations accept or recognize the credential and how the standard is governed.</p>
              </div>
              <a href="recognition.html" className="btn btn-outline">View recognition <CI.arrow style={{ width: 16, height: 16 }} /></a>
            </div>
          </div>
        </section>

        {/* ── 6 · 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 <CI.arrow style={{ width: 18, height: 18 }} /></a>
              <a href="index.html#sample" className="btn btn-outline btn-lg">Try a sample question</a>
            </div>
            <a href="exam.html" className="closing-tert reveal">See test content &amp; structure →</a>
          </div>
        </section>

      </main>

      <TeamBanner />
      <Footer />
    </React.Fragment>
  );
}

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