// recognition-page.jsx — "Who recognizes Atlas" page.
// Structural shell only — no real partner data until agreements land.
const RI = window.AICONS;

/* ── What recognition means ── */
const RECOG_POINTS = [
  { icon: "doc", title: "Published standard",
    text: "Recognition starts with a standard anyone can read. Organizations don't have to take our word for what the credential measures — they can inspect the framework themselves." },
  { icon: "shield", title: "Proctored exam",
    text: "Every credential is earned through a proctored, adaptive exam. Recognition bodies know the credential can't be bought or bypassed." },
  { icon: "search", title: "Public verification",
    text: "Any organization can verify a credential by ID or QR code — instantly, for free, with no account. This makes recognition practical, not just symbolic.",
    link: { label: "Verify a credential", href: "verify.html" } },
];

function RecognitionApp() {
  window.useReveal();

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

      <main className="rc">

        {/* ── hero ── */}
        <section className="rc-hero">
          <div className="wrap">
            <span className="label label-accent">Recognition</span>
            <h1>Who recognizes Atlas credentials</h1>
            <p className="rc-lead">Recognition means an organization accepts, values, or formally endorses the Atlas credential. It is built on three things: a standard anyone can read, an exam that is proctored, and a record anyone can check.</p>
          </div>
        </section>

        {/* ── what recognition means ── */}
        <section className="rc-sec section--soft" id="what">
          <div className="wrap">
            <div className="sec-head reveal">
              <span className="label label-accent">What makes recognition possible</span>
              <h2>Three things that support recognition.</h2>
            </div>
            <div className="rc-points-grid">
              {RECOG_POINTS.map((p, i) => {
                const Icon = RI[p.icon];
                return (
                  <div className="rc-point-card reveal" key={p.title} style={{ transitionDelay: i * 70 + "ms" }}>
                    <div className="rc-point-icon">
                      <Icon style={{ width: 24, height: 24 }} />
                    </div>
                    <h3>{p.title}</h3>
                    <p>{p.text}</p>
                    {p.link && <a href={p.link.href} className="arrowlink">{p.link.label} <RI.arrow /></a>}
                  </div>
                );
              })}
            </div>
          </div>
        </section>

        {/* ── Carnegie Mellon University license ── */}
        <section className="rc-sec" id="cmu">
          <div className="wrap">
            <div className="rc-empty reveal">
              <div className="rc-empty-inner">
                <span className="label label-accent">Provenance</span>
                <h3>Developed under license from Carnegie Mellon University</h3>
                <p>The Atlas assessment technology is developed at and/or provided under license from Carnegie Mellon University — a global leader in artificial intelligence and computer science.</p>
                <p className="rc-empty-note">This product or portions thereof was developed at and/or is manufactured under license from Carnegie Mellon University.</p>
              </div>
            </div>
          </div>
        </section>

        {/* ── recognizing organizations (placeholder) ── */}
        <section className="rc-sec" id="partners">
          <div className="wrap">
            <div className="sec-head reveal">
              <span className="label label-accent">Recognizing organizations</span>
              <h2>Organizations that recognize Atlas.</h2>
              <p className="sec-intro">This section will list organizations that formally accept, endorse, or require the Atlas credential — once partnership agreements are finalized.</p>
            </div>

            {/* search placeholder */}
            <div className="rc-search-wrap reveal">
              <RI.search style={{ width: 20, height: 20 }} />
              <input
                type="search"
                className="rc-search"
                placeholder="Search recognizing organizations…"
                disabled
                aria-label="Search recognizing organizations (coming soon)"
              />
              <span className="rc-search-tag">Coming soon</span>
            </div>

            {/* empty state */}
            <div className="rc-empty reveal">
              <div className="rc-empty-inner">
                <RI.shield style={{ width: 32, height: 32 }} />
                <h3>Recognition partners — coming soon</h3>
                <p>We are in active conversations with organizations across sectors. This page will be populated once partnership agreements are signed and the exact relationship language is approved.</p>
                <p className="rc-empty-note">In the meantime, any organization can already verify Atlas credentials using the public verification tool — no partnership required.</p>
                <a href="verify.html" className="arrowlink">Verify a credential <RI.arrow /></a>
              </div>
            </div>
          </div>
        </section>

        {/* ── for organizations interested in recognizing ── */}
        <section className="rc-sec section--soft" id="become">
          <div className="wrap">
            <div className="rc-become reveal">
              <div>
                <span className="label label-accent">For organizations</span>
                <h2>Interested in recognizing Atlas?</h2>
                <p className="rc-become-text">If your organization wants to formally accept or endorse the Atlas credential — or explore what recognition looks like for your sector — talk to our team.</p>
              </div>
              <a href="contact-sales.html" className="btn btn-primary">Talk to sales <RI.arrow style={{ width: 16, height: 16 }} /></a>
            </div>
          </div>
        </section>

      </main>

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

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