// Transição em que três camadas de cor inundam a tela em ondas, e o título aparece por baixo.
// el.dados (ou el): titulo, cores {fundo, texto, acento}, fontes {display}, largura, altura.
import React from 'react';
import { interpolate, useVideoConfig } from 'remotion';

const sai = (x) => 1 - Math.pow(1 - x, 4);

export default function CorInunda({ el, t }) {
  const d = el.dados || el;
  const v = useVideoConfig();
  const W = d.largura || v.width, H = d.altura || v.height;
  const c = d.cores || {};
  const camadas = [c.texto || '#f4efe6', c.fundo || '#111', c.acento || '#ff4d2e'];
  const onda = (k, i) => {
    const pts = [];
    for (let j = 0; j <= 24; j++) { const x = (j / 24) * W; pts.push(`${x.toFixed(1)},${(H * (1 - k) + Math.sin(j * 0.7 + t * 6 + i) * 40 * (1 - k) * k * 4).toFixed(1)}`); }
    return `M0,${H} L${pts.join(' L')} L${W},${H} Z`;
  };
  const titulo = interpolate(t, [0.75, 1.15], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
  const tam = Math.min(W, H) * (d.tamanho || 0.12);
  return (
    <div style={{ position: 'absolute', inset: 0, width: W, height: H, background: c.fundo || '#111', overflow: 'hidden' }}>
      <svg width={W} height={H} style={{ position: 'absolute', inset: 0 }}>
        {camadas.map((cor, i) => <path key={i} d={onda(sai(Math.max(0, Math.min(1, (t - i * 0.16) / 0.7))) * 1.08, i)} fill={cor} />)}
      </svg>
      <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', color: c.fundo || '#111', fontFamily: (d.fontes && d.fontes.display) || 'serif',
        fontSize: tam, fontWeight: 800, textAlign: 'center', padding: W * 0.08, opacity: titulo, transform: `scale(${(1.08 - 0.08 * titulo).toFixed(4)})`, letterSpacing: `${((1 - titulo) * 0.2).toFixed(3)}em` }}>{d.titulo}</div>
    </div>
  );
}