// TituloSerif: linhas em Instrument Serif que entram devagar (24 quadros): sobem 40 px, o desfoque 12 px limpa e o
// tracking fecha. A palavra entre asteriscos recebe o degradê verde → turquesa, que se revela da esquerda 8 quadros depois.
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, DEGRADE_TEXTO, FAM_A, FONTE_A, LARGURA_UTIL, caber, c01, e5, lerp, ob, seg, textoLimpo} from '../base';

export type TituloSerifProps = {
  /** "Onde a noite *acende.*" */
  linhas: string[];
  y?: number;
  tamanho?: number;
  inicio?: number;
  /** quadros entre uma linha e a próxima */
  intervalo?: number;
  cor?: string;
  fim?: number;
};

export const TituloSerif: React.FC<TituloSerifProps> = ({linhas, y = 640, tamanho = 230, inicio = 0, intervalo = 12, cor = COR.luz, fim}) => {
  const f = useCurrentFrame();
  const sai = fim === undefined ? 0 : e5(seg(f, fim, fim + 16));
  if (sai >= 1) return null;
  const tam = Math.min(...linhas.map((l) => caber(textoLimpo(l), tamanho, FAM_A, LARGURA_UTIL, 400, -0.01)));
  const passo = tam * 1.02, topo = y - ((linhas.length - 1) * passo) / 2;
  return <div style={{position: 'absolute', inset: 0, opacity: 1 - sai, transform: `translateY(${-sai * 30}px)`}}>
    {linhas.map((l, i) => {
      const em = inicio + i * intervalo, p = ob(seg(f, em, em + 24), 1.15), q = e5(seg(f, em, em + 24));
      const reveal = e5(seg(f, em + 8, em + 24));
      return <div key={i} style={{position: 'absolute', left: 0, width: 1080, top: topo + i * passo - tam * 0.6, height: tam * 1.2, textAlign: 'center', fontFamily: FONTE_A, fontSize: tam, lineHeight: 1.2, letterSpacing: `${lerp(0.04, -0.01, q)}em`, color: cor, whiteSpace: 'nowrap', transform: `translateY(${(1 - p) * 40}px)`, opacity: c01((f - em + 1) / 12), filter: q < 1 ? `blur(${(1 - q) * 12}px)` : undefined}}>
        {l.split('*').map((parte, j) => j % 2 === 1
          ? <span key={j} style={{backgroundImage: DEGRADE_TEXTO, backgroundSize: `${100 / Math.max(0.001, reveal)}% 100%`, backgroundRepeat: 'no-repeat', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: reveal < 0.999 ? cor : 'transparent', WebkitTextFillColor: reveal < 0.02 ? cor : 'transparent'}}>{parte}</span>
          : <span key={j}>{parte}</span>)}
      </div>;
    })}
  </div>;
};