// Camera: o monitor é um objeto físico. A câmera deriva devagar em 3D (giro Y ±2,5°, X ±1,2°) e
// empurra por chaves [[quadro, zoom, deslocY px]] (curva suave). Os empurrões fortes (1,0 → 1,18)
// entram no herói: o vidro enche a tela.
import React from 'react';
import {AbsoluteFill, useCurrentFrame} from 'remotion';
import {e3, lerp, seg} from '../base';

export type CameraProps = {chaves?: [number, number, number][]; children: React.ReactNode};

const valor = (f: number, ks: [number, number, number][], i: 1 | 2) => {
  if (f <= ks[0][0]) return ks[0][i];
  for (let k = 1; k < ks.length; k++) if (f <= ks[k][0]) return lerp(ks[k - 1][i], ks[k][i], e3(seg(f, ks[k - 1][0], ks[k][0])));
  return ks[ks.length - 1][i];
};

export const Camera: React.FC<CameraProps> = ({chaves = [[0, 1, 0]], children}) => {
  const f = useCurrentFrame();
  const z = valor(f, chaves, 1), dy = valor(f, chaves, 2);
  const ry = Math.sin(f / 70) * 2.5, rx = Math.sin(f / 53) * 1.2;
  return <AbsoluteFill style={{perspective: 2400}}>
    <AbsoluteFill style={{transform: `translateY(${dy}px) scale(${z}) rotateY(${ry}deg) rotateX(${rx}deg)`, transformOrigin: '50% 40%'}}>{children}</AbsoluteFill>
  </AbsoluteFill>;
};