// Fundo: magenta chapado com curvas de nível (anéis tortos, brancos a 9%) que se expandem devagar do canto, como relevo de mapa.
// Fica FORA da Camera; quem se mexe é o que está em cima.
import React from 'react';
import {AbsoluteFill, useCurrentFrame} from 'remotion';
import {COR} from '../base';

export type FundoProps = {
  /** cor do chão */
  cor?: string;
  /** velocidade das curvas (1 = a do preview) */
  velocidade?: number;
};

export const Fundo: React.FC<FundoProps> = ({cor = COR.magenta, velocidade = 1}) => {
  const f = useCurrentFrame() * velocidade;
  return <AbsoluteFill style={{background: `linear-gradient(180deg, ${cor} 0%, ${COR.magentaEscuro} 100%)`}}>
    <svg width={1080} height={1920} style={{position: 'absolute', inset: 0}}>
      {Array.from({length: 14}, (_, i) => {
        const r = 120 + ((i * 90 + f * 1.4) % 1260), a = 0.1 * (1 - r / 1400);
        const w = Math.sin(i * 1.7 + f / 40) * 26;
        return <ellipse key={i} cx={980 + Math.sin(f / 90) * 20} cy={1700} rx={r + w} ry={r * 0.82 - w} transform={`rotate(${-18 + i * 3} 980 1700)`} fill="none" stroke="#fff" strokeOpacity={Math.max(0, a)} strokeWidth={i % 4 === 0 ? 8 : 4} />;
      })}
    </svg>
  </AbsoluteFill>;
};