// Fundo: o quarto escuro onde o monitor está. Parede quase preta, o brilho âmbar do vidro vazando
// na parede e na mesa (y 1600+), com a borda da mesa refletindo. O brilho pulsa com a tela (±4%).
import React from 'react';
import {AbsoluteFill, useCurrentFrame} from 'remotion';
import {COR} from '../base';

export type FundoProps = {
  /** força do vazamento de luz (0–1) */
  brilho?: number;
};

export const Fundo: React.FC<FundoProps> = ({brilho = 1}) => {
  const f = useCurrentFrame();
  const k = brilho * (0.96 + 0.04 * Math.sin(f / 3.1) * Math.sin(f / 7.7));
  return <AbsoluteFill style={{background: COR.parede}}>
    <AbsoluteFill style={{background: `radial-gradient(70% 45% at 50% 40%, rgba(255,160,50,${0.16 * k}) 0%, rgba(255,140,40,${0.05 * k}) 50%, rgba(0,0,0,0) 100%)`}} />
    {/* a mesa */}
    <div style={{position: 'absolute', left: 0, right: 0, top: 1590, bottom: 0, background: 'linear-gradient(180deg, #17110B 0%, #0B0806 60%)'}} />
    <div style={{position: 'absolute', left: 0, right: 0, top: 1588, height: 3, background: `rgba(255,178,63,${0.25 * k})`}} />
    <AbsoluteFill style={{background: `radial-gradient(45% 10% at 50% 84%, rgba(255,170,60,${0.14 * k}) 0%, rgba(0,0,0,0) 100%)`}} />
  </AbsoluteFill>;
};