// EarlyAccess — 5 founding spots, scarcity-driven, no pricing on the page.
// The sign-up CTA navigates to the dedicated /apply page (a Cloudflare-backed
// form). URL params can pre-fill name/email/organization on that page.

function EarlyAccess() {
  const TOTAL = 5;
  const claimed = 0; // No fake social proof — all 5 spots open.

  return (
    <section className="mx-section mx-section-soft" id="early-access">
      <div className="mx-container">
        <SectionHead
          eye="Early access"
          title="Five chambers. Hand-picked. Building memberx with us."
          sub="Before public launch we're inviting five chambers to trial memberx with their team. You'll shape what gets built next — and you'll be first in line for early-adopter pricing when we go live."
        />

        <div className="mx-early" data-reveal="lg">
          <div className="mx-early-body">
            <div className="mx-early-tag">
              <span className="mx-pulse-dot"></span>
              Founding 5 · Trial program
            </div>
            <h3>Exclusive access for five teams. Then we close the door.</h3>
            <p className="mx-early-sub">
              The first five chambers to be selected get the full memberx
              platform — every module, AI Insights included — to roll out
              across their team. We work alongside you, learn what your
              workflow actually needs, and ship against it.
            </p>
            <ul className="mx-early-bonuses">
              <li><Check size={14}/> Full platform access for your whole team</li>
              <li><Check size={14}/> Hands-on migration from your current CRM</li>
              <li><Check size={14}/> Direct line to the founding team</li>
              <li><Check size={14}/> First access to early-adopter pricing at launch</li>
              <li><Check size={14}/> Input on the product roadmap</li>
              <li><Check size={14}/> "Founding partner" badge in-product</li>
            </ul>
            <a className="mx-early-cta" href="/apply?source=early-access">
              Sign up for early access <ArrowRight size={16}/>
            </a>
          </div>

          <aside className="mx-early-aside">
            <div className="mx-early-aside-eye">Applications open</div>
            <div className="mx-early-aside-headline">
              We're selecting<br/>5 chambers.
            </div>
            <div className="mx-early-aside-note">
              Apply in 30 seconds. We'll be in touch within a week to let you
              know if you're one of the five.
            </div>

            <div className="mx-early-spots-label">Spots remaining</div>
            <div
              className="mx-early-spots mx-early-spots-5"
              role="img"
              aria-label={`${TOTAL - claimed} of ${TOTAL} spots remaining`}
            >
              {Array.from({length: TOTAL}).map((_, i) => (
                <div key={i} className={"mx-early-spot" + (i < claimed ? " taken" : "")}></div>
              ))}
            </div>
            <div className="mx-early-spots-text">
              <b>{TOTAL - claimed} of {TOTAL}</b> founding spots open
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

window.EarlyAccess = EarlyAccess;