// TituloMinimo: a única tipografia grande do filme. Syncopate 700, CAIXA ALTA, alinhada à esquerda,
// cada linha sobe de dentro de uma máscara enquanto o espaçamento fecha de 0,3 em → 0,04 em.
// Um traço de acento de 56 px abre a primeira linha. Sai com desfoque e queda de 0,9 → 0.
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, FONTE_D, SEGURA, TIPO, caber, entrada, lerp, saida, seg} from '../base';
import {useDuracaoCena} from '../transicoes/Cena';

export type TituloMinimoProps = {
  linhas: string[];
  /** y do topo da primeira linha (área segura: 168–1330) */
  y?: number;
  x?: number;
  tamanho?: number;
  inicio?: number;
  /** quadros entre linhas */
  intervalo?: number;
  /** quadro (relativo) em que sai; −1 = fica até o corte */
  sai?: number;
  /** palavra da última linha pintada com o acento */
  acentoUltima?: boolean;
};

export const TituloMinimo: React.FC<TituloMinimoProps> = ({linhas, y = 1080, x = SEGURA.lado, tamanho = TIPO.titulo.tamanho, inicio = 0, intervalo = 5, sai = -1, acentoUltima = false}) => {
  const f = useCurrentFrame();
  const dur = useDuracaoCena();
  const fim = sai < 0 ? dur + 99 : sai;
  const tOut = entrada(seg(f, fim, fim + 9));
  const tam = Math.min(...linhas.map((l) => caber(l, tamanho, 1080 - x - SEGURA.lado, FONTE_D, 700, TIPO.titulo.tracking)));
  const traco = saida(seg(f, inicio - 4, inicio + 10));
  return <div style={{position: 'absolute', left: x, top: y, opacity: 1 - tOut, filter: tOut > 0 ? `blur(${tOut * 10}px)` : undefined, transform: `translateY(${tOut * 24}px)`}}>
    <div style={{width: 56 * traco, height: 4, background: COR.acento, marginBottom: 22}} />
    {linhas.map((l, i) => {
      const t = saida(seg(f, inicio + i * intervalo, inicio + i * intervalo + 16));
      const ultima = acentoUltima && i === linhas.length - 1;
      return <div key={i} style={{overflow: 'hidden', height: tam * 1.18}}>
        <div style={{
          fontFamily: FONTE_D, fontWeight: 700, fontSize: tam, lineHeight: 1.18, whiteSpace: 'nowrap', textTransform: 'uppercase',
          letterSpacing: `${lerp(0.3, TIPO.titulo.tracking, t)}em`, color: ultima ? COR.acento : COR.texto,
          transform: `translateY(${(1 - t) * 105}%)`,
        }}>{l}</div>
      </div>;
    })}
  </div>;
};