// TituloNeon: título Orbitron 900 inclinado −8° em duas camadas: atrás o brilho (magenta, `0 0 16px` e `0 0 44px`) e uma sombra
// ciano a −4 px; na frente o degradê `#FFD23F → #FF2A6D` com contorno branco de 2 px. Entra de −900 px com sobra, scale 1,3 → 1
// e pisca 3 vezes nos 6 primeiros quadros.
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, FONTE, LARGURA_UTIL, SEGURA, caber, eb} from '../base';

export type TituloNeonProps = {linhas: string[]; inicio?: number; intervalo?: number; y?: number; tamanho?: number; fim?: number};

export const TituloNeon: React.FC<TituloNeonProps> = ({linhas, inicio = 0, intervalo = 9, y = 680, tamanho = 200, fim}) => {
  const f = useCurrentFrame();
  if (fim !== undefined && f >= fim) return null;
  const txt = linhas.map((l) => l.toUpperCase());
  const tam = Math.min(...txt.map((l) => caber(l, tamanho, LARGURA_UTIL - 40, 900, 0.02)));
  const alt = tam * 1.2;
  const topo = y - (txt.length * alt) / 2;
  return <div style={{position: 'absolute', inset: 0}}>
    {txt.map((l, i) => {
      const t = f - (inicio + i * intervalo);
      if (t < 0) return null;
      const p = eb(t / 16, 1.7);
      const pisca = t < 6 && [1, 3, 5].includes(t) ? 0.15 : 1;
      const base: React.CSSProperties = {position: 'absolute', left: SEGURA.lado, width: LARGURA_UTIL, top: topo + i * alt, height: alt, lineHeight: `${alt}px`, textAlign: 'center', fontFamily: FONTE.titulo, fontWeight: 900, fontSize: tam, letterSpacing: '0.02em', whiteSpace: 'nowrap'};
      return <div key={i} style={{position: 'absolute', inset: 0, opacity: pisca, transform: `translateX(${(1 - p) * -900}px) scale(${1.3 - 0.3 * Math.min(p, 1.05)}) skewX(-8deg)`, transformOrigin: `50% ${topo + i * alt + alt / 2}px`}}>
        <div style={{...base, color: COR.magenta, textShadow: `0 0 16px ${COR.magenta}, 0 0 44px ${COR.magenta}, -4px 0 0 ${COR.ciano}`}}>{l}</div>
        <div style={{...base, color: 'transparent', backgroundImage: `linear-gradient(180deg, ${COR.sol} 10%, ${COR.rosa} 90%)`, WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextStroke: `2px ${COR.branco}`}}>{l}</div>
      </div>;
    })}
  </div>;
};