// Luz volumétrica: feixes giram devagar atrás do título, a cor do acento pulsa e partículas sobem na luz.
// el.dados (ou el): titulo, cores, fontes {display}, largura, altura.
import React from 'react';
import { spring, random, useVideoConfig } from 'remotion';

export default function RaiosDeLuz({ el, t, fps }) {
  const d = el.dados || el;
  const v = useVideoConfig();
  const W = d.largura || v.width, H = d.altura || v.height;
  const c = d.cores || {};
  const acento = c.acento || '#ffb547';
  const entra = spring({ frame: Math.round(t * fps), fps, config: { damping: 20, stiffness: 70 } });
  const tam = Math.min(W, H) * (d.tamanho || 0.12);
  const giro = t * 6;
  return (
    <div style={{ position: 'absolute', inset: 0, width: W, height: H, background: c.fundo || '#07070a', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', left: '50%', top: '50%', width: Math.max(W, H) * 2, height: Math.max(W, H) * 2, transform: `translate(-50%,-50%) rotate(${giro}deg)`,
        background: `repeating-conic-gradient(from 0deg, ${acento}2e 0deg 6deg, transparent 6deg 22deg)`, opacity: entra * (0.7 + 0.3 * Math.sin(t * 1.7)),
        maskImage: 'radial-gradient(circle, #000 0%, transparent 55%)', WebkitMaskImage: 'radial-gradient(circle, #000 0%, transparent 55%)' }} />
      {Array.from({ length: 28 }).map((_, i) => {
        const x = random('x' + i) * W, vel = 30 + random('v' + i) * 70, r = 2 + random('r' + i) * 4;
        const y = (H + 40 - ((t * vel + random('y' + i) * H) % (H + 80)));
        return <div key={i} style={{ position: 'absolute', left: x, top: y, width: r, height: r, borderRadius: '50%', background: acento, opacity: 0.25 + 0.5 * random('o' + i), filter: 'blur(1px)' }} />;
      })}
      <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', textAlign: 'center', padding: W * 0.08, fontFamily: (d.fontes && d.fontes.display) || 'serif',
        fontSize: tam, fontWeight: 800, color: c.texto || '#fff', textShadow: `0 0 ${tam * 0.4}px ${acento}88`, opacity: entra, transform: `scale(${(0.92 + 0.08 * entra).toFixed(4)})` }}>{d.titulo}</div>
    </div>
  );
}