/* CRT power-on console - the "zoom into the retro monitor, it powers on,
   the crab dances, then the agent boots inside the glass" treatment,
   adapted from Console Lab Option 01 for the main page's §02.
   Depends on console-lab-core.jsx (window exports) + console-lab.css. */
const { clamp: _clamp, lerp: _lerp, span: _span, usePinProgress: _usePin, PixelCrab: _Crab, ScrollConsole: _Console } = window;
const { useRef: _useRef } = React;

const _eio = (t) => (t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2);

function CrtConsole() {
  const ref = _useRef(null);
  const p = _usePin(ref);
  const monScale = _lerp(1, 2.4, _eio(_span(p, 0, 0.30)));
  const monOp = 1 - _span(p, 0.20, 0.30);
  const fillOp = _span(p, 0.20, 0.30);
  const fillScale = _lerp(1.06, 1, _span(p, 0.20, 0.34));
  const screenOn = p > 0.06;
  const offFade = 1 - _span(p, 0.06, 0.16);
  const scanTop = _lerp(-45, 110, _span(p, 0.06, 0.18));
  const scanVis = _span(p, 0.06, 0.11) * (1 - _span(p, 0.15, 0.20));
  const crabFade = 1 - _span(p, 0.22, 0.30);
  const consoleP = _span(p, 0.32, 1.0);
  const capFade = 1 - _span(p, 0.02, 0.12);

  return (
    <div style={{ position: "relative", height: "300vh" }} ref={ref}>
      <div className="cl-crt-stage">
        <div className="cl-crt" style={{ transform: `scale(${monScale.toFixed(3)})`, transformOrigin: "50% 34.5%", opacity: monOp.toFixed(3) }}>
          <img className="cl-crt-photo" src={(window.__resources || {}).crtMonitor || "assets/crt-monitor.png"} alt="" draggable="false" />
          <div className="cl-crt-screen">
            <div className="cl-crt-off" style={{ opacity: offFade.toFixed(3) }} />
            {screenOn && (
              <div className="cl-crt-glass">
                <div className="cl-crt-boot" style={{ opacity: crabFade.toFixed(3) }}>
                  <_Crab size={84} dancing color="#D9785C" />
                </div>
                {scanVis > 0.01 && <div className="cl-crt-scan" style={{ top: scanTop + "%", opacity: scanVis.toFixed(3) }} />}
                <div className="cl-crt-scanlines" />
                <div className="cl-crt-vignette" />
              </div>
            )}
          </div>
        </div>
        {fillOp > 0.01 && (
          <div className="cl-crt-fill" style={{ opacity: fillOp.toFixed(3), transform: `scale(${fillScale.toFixed(3)})` }}>
            <_Console progress={consoleP} height="76vh" agentBar recordCard />
            <div className="cl-crt-scanlines" />
            <div className="cl-crt-vignette" />
          </div>
        )}
        <div className="cl-crt-caption" style={{ opacity: capFade.toFixed(3) }}>Scroll to power on the agent</div>
      </div>
    </div>
  );
}

Object.assign(window, { CrtConsole });