// Fundo: a sala atrás do monitor. Parede quente com uma luz lateral que respira devagar e a mesa embaixo.
// Com `claro`, vira o creme da interface (vídeo sem monitor: a tela ocupa tudo).
import React from 'react';
import {AbsoluteFill, useCurrentFrame} from 'remotion';
import {COR} from '../base';

export type FundoProps = {claro?: boolean};

export const Fundo: React.FC<FundoProps> = ({claro = false}) => {
  const f = useCurrentFrame();
  if (claro) return <AbsoluteFill style={{background: COR.tela}} />;
  const luz = 0.75 + 0.08 * Math.sin(f / 70);
  return <AbsoluteFill style={{background: COR.parede}}>
    <AbsoluteFill style={{background: `radial-gradient(ellipse 70% 55% at ${88 + Math.sin(f / 90) * 3}% 18%, ${COR.parede2} 0%, rgba(0,0,0,0) 70%)`, opacity: luz}} />
    <div style={{position: 'absolute', left: 0, right: 0, top: 1420, bottom: 0, background: `linear-gradient(180deg, ${COR.mesa} 0%, #110C0A 100%)`}} />
    <AbsoluteFill style={{background: 'radial-gradient(ellipse 120% 90% at 50% 45%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.45) 100%)'}} />
  </AbsoluteFill>;
};