// Scene — Auth success.
// Quiet pause state between the handoff animation and the customer picker.
// Gives the user a narratable beat: "OK, the SSO token was exchanged.
// Here's who we are. Now let me pick a customer to enter."

function GMAuthSuccess({ onContinue }) {
  const partner = window.GM_PARTNER;

  return (
    <div className="as scene">
      {/* Cinematic Mesh backdrop — same treatment as handoff + picker
          for full continuity across the auth-to-workspace arc. */}
      <span className="as-shield" aria-hidden="true"/>
      <span className="as-shield-sheen" aria-hidden="true"/>
      <span className="as-shield-shine" aria-hidden="true"/>
      <span className="as-grain" aria-hidden="true"/>
      <span className="as-stripe" aria-hidden="true"/>

      <div className="as-card">
        <div className="as-check">
          <svg viewBox="0 0 64 64" width="36" height="36" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M16 32 L28 44 L48 22"/>
          </svg>
        </div>
        <div className="as-eyebrow">Authenticated</div>
        <h1 className="as-title">You're signed into Guardian Mesh.</h1>
        <p className="as-sub">
          Federated session established from your <strong>{partner.name}</strong> partner portal.
          No new credentials were required.
        </p>

        <div className="as-facts">
          <div className="as-fact">
            <div className="as-fact-label">Signed in as</div>
            <div className="as-fact-value">
              <GMAvatar initials={partner.user.initials} size={22}/>
              <span>{partner.user.name}</span>
            </div>
          </div>
          <div className="as-fact">
            <div className="as-fact-label">Role</div>
            <div className="as-fact-value">{partner.user.role}</div>
          </div>
          <div className="as-fact">
            <div className="as-fact-label">Session</div>
            <div className="as-fact-value mono" style={{ fontSize: 12 }}>
              <span className="dot" style={{ background: 'var(--signal-good)' }}/>
              Trusted device · MFA verified
            </div>
          </div>
          <div className="as-fact">
            <div className="as-fact-label">Access</div>
            <div className="as-fact-value">
              <span>{window.GM_CUSTOMERS.length} customer workspaces</span>
            </div>
          </div>
        </div>

        <button className="btn btn--primary as-cta" onClick={onContinue}>
          Continue to Guardian Mesh
          <GMI.arrowRight/>
        </button>
      </div>
    </div>
  );
}

window.GMAuthSuccess = GMAuthSuccess;