// Título com uma faixa de luz que atravessa as letras, e um brilho (bloom) que respira depois.
// el.dados (ou el): titulo, cores {fundo, texto, acento}, fontes {display}, largura, altura.
import React from 'react';
import { spring, interpolate, useVideoConfig } from 'remotion';

export default function BrilhoVarredura({ 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 entra = spring({ frame: Math.round(t * fps), fps, config: { damping: 18, stiffness: 120 } });
  const faixa = interpolate(t, [0.35, 1.25], [-40, 140], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
  const respira = 0.5 + 0.5 * Math.sin(t * 2.4);
  const tam = Math.min(W, H) * (d.tamanho || 0.13);
  const base = { fontFamily: (d.fontes && d.fontes.display) || 'serif', fontSize: tam, lineHeight: 1.02, fontWeight: 800, letterSpacing: '-0.02em', textAlign: 'center', maxWidth: W * 0.84 };
  return (
    <div style={{ position: 'absolute', inset: 0, width: W, height: H, background: c.fundo || '#0a0a0a', display: 'grid', placeItems: 'center' }}>
      <div style={{ position: 'relative', transform: `translateY(${((1 - entra) * tam * 0.6).toFixed(1)}px)`, opacity: entra }}>
        <div style={{ ...base, position: 'absolute', inset: 0, color: c.acento || '#ffd166', filter: `blur(${(tam * 0.18).toFixed(0)}px)`, opacity: 0.25 + 0.35 * respira * entra }}>{d.titulo}</div>
        <div style={{ ...base, position: 'relative', color: 'transparent', WebkitBackgroundClip: 'text', backgroundClip: 'text',
          backgroundImage: `linear-gradient(105deg, ${c.texto || '#fff'} ${faixa - 18}%, ${c.acento || '#ffd166'} ${faixa - 4}%, #ffffff ${faixa}%, ${c.acento || '#ffd166'} ${faixa + 4}%, ${c.texto || '#fff'} ${faixa + 18}%)` }}>{d.titulo}</div>
      </div>
    </div>
  );
}