// Estrelas: o túnel de estrelas que cobre os cortes. 36 riscos saem do ponto de fuga (540, 1180) em ângulos fixos; o raio cresce
// com o quadrado do tempo (até 1500 px em 20 quadros) e cada risco alonga junto. Cores: branco, ciano e magenta. É apoio de corte.
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR} from '../base';
import {HORIZONTE} from '../texturas/Fundo';

const N = 36;
export type EstrelasProps = {inicio?: number; duracao?: number};

export const Estrelas: React.FC<EstrelasProps> = ({inicio = 0, duracao = 20}) => {
  const f = useCurrentFrame();
  const t = f - inicio;
  if (t < 0 || t >= duracao) return null;
  const k = t / duracao;
  return <svg width="1080" height="1920" style={{position: 'absolute', inset: 0}}>
    {Array.from({length: N}, (_, i) => {
      const a = (i / N) * Math.PI * 2 + (i % 3) * 0.07;
      const off = ((i * 37) % 10) / 10 * 0.35;
      const r1 = Math.pow(Math.max(0, k - off), 2) * 1500;
      const r0 = Math.pow(Math.max(0, k - off - 0.18), 2) * 1500;
      if (r1 <= 2) return null;
      const cor = [COR.branco, COR.ciano, COR.magenta][i % 3];
      return <line key={i} x1={540 + Math.cos(a) * r0} y1={HORIZONTE + Math.sin(a) * r0} x2={540 + Math.cos(a) * r1} y2={HORIZONTE + Math.sin(a) * r1} stroke={cor} strokeWidth={2 + k * 6} strokeLinecap="round" opacity={Math.min(1, k * 3) * (1 - k * 0.4)} />;
    })}
  </svg>;
};