// Particulas: camada de pontos e traços que flutuam o tempo todo (parallax em 3 profundidades). Dá movimento
// de fundo sem competir com o herói. Determinística: a mesma `semente` dá o mesmo desenho em qualquer render.
import React from 'react';
import {AbsoluteFill, useCurrentFrame} from 'remotion';
import {LARGURA, ALTURA} from '../base';

export type ParticulasProps = {quantidade?: number; cor?: string; semente?: number; velocidade?: number; opacidade?: number};

const rnd = (n: number) => { const x = Math.sin(n * 127.1 + 311.7) * 43758.5453; return x - Math.floor(x); };

export const Particulas: React.FC<ParticulasProps> = ({quantidade = 36, cor = '#FFE9D6', semente = 1, velocidade = 1, opacidade = 0.5}) => {
  const f = useCurrentFrame();
  return <AbsoluteFill style={{pointerEvents: 'none'}}>
    {Array.from({length: quantidade}, (_, i) => {
      const prof = 0.4 + rnd(i + semente) * 1.2;
      const x = ((rnd(i * 3 + semente) * LARGURA + f * 0.9 * prof * velocidade) % (LARGURA + 80)) - 40;
      const y = ((rnd(i * 7 + semente) * ALTURA - f * 1.6 * prof * velocidade) % (ALTURA + 80) + (ALTURA + 80)) % (ALTURA + 80) - 40;
      const tam = 3 + prof * 5, pisca = 0.55 + 0.45 * Math.sin(f / (9 + i % 7) + i);
      return <div key={i} style={{position: 'absolute', left: x, top: y, width: tam, height: i % 3 === 0 ? tam * 4 : tam, borderRadius: tam, background: cor, opacity: opacidade * pisca * Math.min(1, prof)}} />;
    })}
  </AbsoluteFill>;
};