// org-pricing-page.jsx — For Organizations → Pricing (Team & Enterprise).
// Two side-by-side paths: self-serve TEAMS (buy exam seats by card) + ENTERPRISE (talk to sales).
const { useState: pS } = React;
const PI = window.AICONS;

const SEAT_MAX = 50;
const SEAT_MIN = 1;
const SEAT_PRICE = 9.99;

function check(p) {return <PI.check className="pp-check" {...p} />;}

function OrgPricingApp() {
  window.useReveal();
  const [seats, setSeats] = pS(5);
  const clamp = (v) => Math.max(SEAT_MIN, Math.min(SEAT_MAX, v));

  return (
    <React.Fragment>
      <Nav />
      <Breadcrumb trail={[["For Organizations", "employers.html"], ["Pricing — Team & Enterprise", null]]} />
      <RoleBanner />
      <main className="op">
        <section className="op-head">
          <div className="wrap">
            <span className="label label-accent">For Organizations · Pricing</span>
            <h1>Certify your team against one standard.</h1>
            <p className="op-lead">Atlas certifications are sold as one-time <strong>exam seats</strong> — each seat is one proctored attempt and one verifiable credential. Small teams can buy seats by card and start today; larger orgs can purchase by invoice through sales.</p>
          </div>
        </section>

        <section className="op-tiers-sec">
          <div className="wrap op-tiers">

            {/* LEFT — TEAMS (self-serve) */}
            <div className="op-tier op-tier-teams reveal">
              <div className="op-tier-top">
                <span className="op-badge op-badge-self">SELF-SERVE</span>
                <h2 className="op-tier-name">Teams</h2>
                <p className="op-tier-for">For teams up to {SEAT_MAX} seats</p>
              </div>

              <div className="op-price">
                <span className="op-price-val">${SEAT_PRICE}</span>
                <span className="op-price-unit">/ seat</span>
              </div>
              <p className="op-price-note">per exam seat · one-time payment</p>

              <div className="op-buy">
                <span className="op-buy-label">Choose seats</span>
                <div className="op-stepper" role="group" aria-label="Number of seats">
                  <button type="button" className="op-step" aria-label="Remove a seat" onClick={() => setSeats((s) => clamp(s - 1))} disabled={seats <= SEAT_MIN}>−</button>
                  <input className="op-step-val mono" type="text" inputMode="numeric" value={seats}
                  onChange={(e) => {const n = parseInt(e.target.value.replace(/\D/g, ""), 10);setSeats(clamp(isNaN(n) ? SEAT_MIN : n));}}
                  aria-label="Seats" />
                  <button type="button" className="op-step" aria-label="Add a seat" onClick={() => setSeats((s) => clamp(s + 1))} disabled={seats >= SEAT_MAX}>+</button>
                </div>
                <div className="op-total">
                  <span className="op-total-k">Estimated total</span>
                  <span className="op-total-v"><span className="mono">${(seats * SEAT_PRICE).toFixed(2)}</span> · {seats} {seats === 1 ? "seat" : "seats"}</span>
                </div>
                <a href={"https://app.atlas-ai.academy/pricing?plan=team&seats=" + seats} className="btn btn-primary btn-lg op-cta">Pay by card <PI.arrow style={{ width: 17, height: 17 }} /></a>
                <span className="op-secure"><PI.lock className="op-lock" /> Instant checkout — no sales call needed</span>
              </div>

              <ul className="op-feat">
                <li>{check()} Buy <strong>{SEAT_MIN}–{SEAT_MAX} exam seats</strong> at ${SEAT_PRICE}/seat</li>
                <li>{check()} Seats activate immediately, start the same day</li>
                <li>{check()} Invite members from your dashboard</li>
                <li>{check()} Each seat will gain one proctored exam and one verifiable credential</li>
                <li>{check()} Track who's certified and verify credentials in one place</li>
              </ul>
            </div>

            {/* RIGHT — ENTERPRISE (talk to sales) */}
            <div className="op-tier op-tier-ent reveal">
              <div className="op-tier-top">
                <span className="op-badge op-badge-ent">Invoiced · contract</span>
                <h2 className="op-tier-name">Enterprise</h2>
                <p className="op-tier-for">For larger volumes, procurement, and security review</p>
              </div>

              <div className="op-price">
                <span className="op-price-val">Custom</span>
              </div>
              <p className="op-price-note">volume seat pricing · invoiced</p>

              <div className="op-buy">
                <a href="contact-sales.html" className="btn btn-outline btn-lg op-cta">Talk to sales <PI.arrow style={{ width: 17, height: 17 }} /></a>
                <span className="op-secure">Typical reply within one business day</span>
              </div>

              <ul className="op-feat">
                <li>{check()} Volume pricing on bulk <strong>exam seats</strong></li>
                <li>{check()} Purchase by invoice or PO</li>
                <li>{check()} SSO and centralized seat administration</li>
                <li>{check()} Dedicated account manager</li>
                <li>{check()} Bulk credential verification &amp; exports</li>
                <li>{check()} Security &amp; compliance review</li>
              </ul>
            </div>
          </div>

          <div className="wrap">
            <p className="op-foot-note">Both paths buy the same thing — one-time exam seats graded against the published standard. No subscriptions, no course content.</p>
          </div>
        </section>
      </main>
      <Footer />
    </React.Fragment>);

}

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