// Entrada com física: antecipa (recua), cai com peso, amassa no pouso (squash & stretch) e assenta com rebote.
// el.dados (ou el): titulo (ou imagem), cores, fontes {display}, largura, altura, atraso (s).
import React from 'react';
import { Img, staticFile, useVideoConfig } from 'remotion';

export default function MolaComPeso({ 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 u = t - (d.atraso || 0);
  const queda = 0.42;
  let y, sx = 1, sy = 1;
  if (u < 0.12) { y = -H * 0.62 - Math.sin((u / 0.12) * Math.PI) * 18; }
  else if (u < 0.12 + queda) { const k = (u - 0.12) / queda; y = -H * 0.62 * (1 - k * k); sy = 1 + 0.18 * k; sx = 1 - 0.1 * k; }
  else { const p = u - 0.12 - queda; const amort = Math.exp(-p * 6); y = -Math.abs(Math.sin(p * 9)) * 60 * amort; sy = 1 - 0.22 * Math.cos(p * 18) * amort; sx = 1 + 0.16 * Math.cos(p * 18) * amort; }
  const tam = Math.min(W, H) * (d.tamanho || 0.14);
  return (
    <div style={{ position: 'absolute', inset: 0, width: W, height: H, background: c.fundo || '#f4efe6', display: 'grid', placeItems: 'center' }}>
      <div style={{ transform: `translateY(${y.toFixed(1)}px) scale(${sx.toFixed(4)}, ${sy.toFixed(4)})`, transformOrigin: '50% 100%' }}>
        {d.imagem ? <Img src={staticFile(d.imagem)} style={{ width: tam * 4, objectFit: 'contain' }} />
          : <div style={{ fontFamily: (d.fontes && d.fontes.display) || 'serif', fontSize: tam, fontWeight: 900, color: c.texto || '#111' }}>{d.titulo}</div>}
      </div>
      <div style={{ position: 'absolute', top: '50%', width: tam * 2.4, height: tam * 0.18, borderRadius: '50%', background: '#000', marginTop: tam * 0.62,
        opacity: Math.max(0, 0.25 * (1 + y / (H * 0.62))), filter: 'blur(10px)', transform: `scaleX(${(0.4 + 0.6 * (1 + y / (H * 0.62))).toFixed(3)})` }} />
    </div>
  );
}