// HeroAnimation.jsx — Jenny assistant (left) + compressed TeamBridge schedule (right).

const { Stage, useTime, Easing, interpolate, clamp } = window;

function Scene() {
  const t = useTime();
  const TB = window.TB;
  const tl = window.useTimeline();
  React.useEffect(() => { window.__tl = tl; }, [tl]);

  const A = window.A_TIMES;
  const D = window.A_DURATION || 25.0;
  // schedule events sync to the assistant feed
  const cancelP = clamp(interpolate([A.T_ALERT + 0.4, A.T_ALERT + 1.2], [0, 1])(t), 0, 1);
  // background shift chip travels/fills right after the call ends, ~1s before the modal
  const moveP = clamp(interpolate([21.7, 22.6], [0, 1])(t), 0, 1);

  // gentle ken-burns life on the schedule
  const winScale = interpolate([0, D], [1.0, 1.025], Easing.linear)(t);

  // loop seam fade
  const loopFade = t < 0.45 ? 1 - t / 0.45 : t > D - 0.45 ? (t - (D - 0.45)) / 0.45 : 0;

  // focal highlight ring on the schedule (canvas coords)
  const G = window.GRID;
  const cancelGlow = clamp(interpolate([A.T_ALERT + 0.3, A.T_ALERT + 0.9, A.T_ALERT + 2.2], [0, 1, 0])(t), 0, 1);

  return (
    <div style={{ position: 'absolute', inset: 0, background: TB.deskGradient, overflow: 'hidden' }}>
      {/* schedule (right) */}
      <div style={{ position: 'absolute', inset: 0, transform: `scale(${winScale})`, transformOrigin: '50% 50%', willChange: 'transform' }}>
        <window.ScheduleGrid cancelP={cancelP} moveP={moveP} />
      </div>

      {/* assistant panel (left) */}
      <window.AssistantPanel />

      {/* loop seam */}
      <div style={{ position: 'absolute', inset: 0, background: TB.deskGradient, opacity: loopFade, pointerEvents: 'none' }}></div>
    </div>
  );
}

function App() {
  return (
    <Stage width={1920} height={1080} duration={window.A_DURATION || 25.0} background={window.TB.desk} persistKey="tb-hero" controls={false}>
      <Scene />
    </Stage>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);