// Fundo: branco-osso liso com um mostrador de relógio gigante (60 marcas) que gira devagar atrás, parte dele fora da tela,
// e um ponteiro de segundos vermelho que dá uma volta a cada 2 s. É a identidade do kit: o tempo sempre correndo.
import React from 'react';
import {AbsoluteFill, useCurrentFrame} from 'remotion';
import {COR} from '../base';

export type FundoProps = {
  /** cor do chão */
  cor?: string;
  /** voltas do ponteiro por segundo (padrão 0,5) */
  voltas?: number;
};

export const Fundo: React.FC<FundoProps> = ({cor = COR.osso, voltas = 0.5}) => {
  const f = useCurrentFrame();
  return <AbsoluteFill style={{background: cor}}>
    <svg width={1080} height={1920} style={{position: 'absolute', inset: 0}}>
      <g transform={`translate(540 980) rotate(${f * 0.12})`}>
        {Array.from({length: 60}, (_, i) => <line key={i} x1={0} y1={-840} x2={0} y2={i % 5 === 0 ? -740 : -790} stroke={COR.tinta} strokeOpacity={i % 5 === 0 ? 0.16 : 0.09} strokeWidth={i % 5 === 0 ? 12 : 5} transform={`rotate(${i * 6})`} />)}
      </g>
      <g transform={`translate(540 980) rotate(${(f / 30) * voltas * 360})`}>
        <line x1={0} y1={30} x2={0} y2={-840} stroke={COR.vermelho} strokeOpacity={0.3} strokeWidth={5} />
        <circle r={16} fill={COR.vermelho} fillOpacity={0.3} />
      </g>
    </svg>
  </AbsoluteFill>;
};