// Scene 2 — SSO handoff into Guardian Mesh.
// Cinematic, Mesh-stylized: giant breathing shield watermark, metallic
// shimmer sweep, vertical sheen, film grain, and a warm AE gradient
// stripe along the bottom edge. Copied from the production
// presentations.guardianmesh.dev/login treatment so the prototype
// inherits the brand's most dramatic surface verbatim.

function GMHandoff({ onDone }) {
  const [phase, setPhase] = React.useState(0);
  const partner = window.GM_PARTNER;

  const steps = [
    { at: 240,  label: `Verifying partner session · ${partner.name}` },
    { at: 740,  label: 'Exchanging federated token · OIDC' },
    { at: 1260, label: 'Loading Guardian Mesh platform session' },
    { at: 1720, label: 'Preparing your customer workspaces' },
    { at: 2060, label: 'Welcome.' },
  ];

  // Debug: ?freeze=1 holds the handoff indefinitely (for screenshots/demos).
  const freeze = new URLSearchParams(window.location.search).get('freeze') === '1';

  React.useEffect(() => {
    const timers = steps.map((s, i) => setTimeout(() => setPhase(i + 1), s.at));
    if (freeze) return () => timers.forEach(clearTimeout);
    const complete = setTimeout(onDone, 2520);
    return () => { timers.forEach(clearTimeout); clearTimeout(complete); };
  }, []);

  return (
    <div className="ho">
      {/* 4 stacked layers for the Mesh shield treatment */}
      <span className="ho-shield" aria-hidden="true"/>
      <span className="ho-shield-sheen" aria-hidden="true"/>
      <span className="ho-shield-shine" aria-hidden="true"/>
      <span className="ho-grain" aria-hidden="true"/>
      <span className="ho-stripe" aria-hidden="true"/>

      <div className="ho-page">
        <div className="ho-card">
          <div className="ho-logo-row">
            <GMI.shield style={{ width: 22, height: 24, color: '#fff' }}/>
            <span>Guardian Mesh</span>
          </div>

          <div className="ho-badge">
            <span className="ho-badge-dot"/>
            <span>SECURE SESSION · OIDC</span>
          </div>

          <h1 className="ho-h1">
            Signing you into <span className="ho-h1-accent">Guardian&nbsp;Mesh</span>.
          </h1>
          <p className="ho-lede">
            Access verified through your Alert Enterprise partner session.
            No new credentials required.
          </p>

          <div className="ho-steps-list">
            {steps.map((s, i) => {
              const state = i < phase ? 'is-done' : i === phase ? 'is-active' : '';
              return (
                <div key={i} className={`ho-step-row ${state}`}>
                  <div className="ho-step-dot">
                    {state === 'is-done' && <GMI.check style={{ width: 10, height: 10, color: '#0a0a0a' }}/>}
                  </div>
                  <span>{s.label}</span>
                </div>
              );
            })}
          </div>

          <div className="ho-foot-text">
            Platform · Confidential<br/>
            One session · three customer workspaces.
          </div>
        </div>
      </div>
    </div>
  );
}

window.GMHandoff = GMHandoff;