// Texto riscado que funciona com quebra de linha: um traço por linha, em sequência, e o texto esmaece.
// el.dados (ou el): titulo (use \n para quebrar, ou passe linhas: []), cores, fontes {display}, largura, altura.
import React from 'react';
import { spring, useVideoConfig } from 'remotion';

export default function RiscoMultilinha({ 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 linhas = d.linhas || String(d.titulo || '').split('\n');
  const tam = Math.min(W, H) * (d.tamanho || 0.11);
  const t0 = d.riscaEm != null ? d.riscaEm : 0.7;
  return (
    <div style={{ position: 'absolute', inset: 0, width: W, height: H, background: c.fundo || '#0d0d0d', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: tam * 0.1 }}>
      {linhas.map((ln, i) => {
        const entra = spring({ frame: Math.round((t - i * 0.08) * fps), fps, config: { damping: 16 } });
        const k = spring({ frame: Math.round((t - t0 - i * 0.14) * fps), fps, config: { damping: 22, stiffness: 160 } });
        return (
          <div key={i} style={{ position: 'relative', fontFamily: (d.fontes && d.fontes.display) || 'serif', fontSize: tam, fontWeight: 700, lineHeight: 1.05,
            color: c.texto || '#fff', opacity: entra * (1 - 0.45 * k), transform: `translateY(${((1 - entra) * 30).toFixed(1)}px)` }}>
            {ln}
            <div style={{ position: 'absolute', left: '-3%', top: '54%', height: Math.max(6, tam * 0.08), width: `${(106 * k).toFixed(2)}%`, borderRadius: 99,
              background: c.acento || '#ff3b30', transform: `rotate(${-2 + i * 1.5}deg)`, transformOrigin: '0 50%' }} />
          </div>
        );
      })}
    </div>
  );
}