// A peça do site entra em 3D: deitada, sobe, BATE (amassa, treme, flash) e o fundo se abre a partir dela.
// el.dados (ou el): imagem (PNG sem fundo, do estudio_site elemento), cores {fundo, texto, acento}, largura, altura.
import React from 'react';
import { Img, staticFile, spring, interpolate, useVideoConfig } from 'remotion';

export default function PecaImpacto3D({ 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 f = Math.round(t * fps);
  const sobe = spring({ frame: f, fps, config: { mass: 1.1, damping: 13, stiffness: 90 } });
  const tBate = 0.9;
  const pos = Math.max(0, t - tBate);
  const amassa = pos > 0 ? Math.exp(-pos * 9) * Math.cos(pos * 38) * 0.07 : 0;
  const treme = pos > 0 ? Math.exp(-pos * 7) * Math.sin(pos * 70) * 14 : 0;
  const flash = pos > 0 ? Math.exp(-pos * 10) : 0;
  const abre = interpolate(pos, [0.05, 0.9], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: (x) => 1 - Math.pow(1 - x, 3) });
  const deitado = interpolate(sobe, [0, 1], [82, 0]);
  const y = interpolate(sobe, [0, 1], [H * 0.18, 0]);
  const lado = Math.min(W, H) * (d.escala || 0.62);
  return (
    <div style={{ position: 'absolute', inset: 0, width: W, height: H, overflow: 'hidden', background: c.fundo || '#0b0b0c', perspective: 1400 }}>
      <div style={{ position: 'absolute', inset: 0, clipPath: `circle(${(abre * 120).toFixed(2)}% at 50% 50%)`,
        background: `radial-gradient(circle at 50% 50%, ${c.acento || '#ff5a1f'}33, transparent 60%), repeating-linear-gradient(0deg, ${c.texto || '#fff'}0d 0 1px, transparent 1px 48px), repeating-linear-gradient(90deg, ${c.texto || '#fff'}0d 0 1px, transparent 1px 48px)` }} />
      <div style={{ position: 'absolute', left: '50%', top: '50%', width: lado * (1 + abre * 0.6), height: lado * 0.12, borderRadius: '50%',
        transform: `translate(-50%, ${lado * 0.42}px)`, background: '#000', opacity: 0.35 * sobe, filter: 'blur(24px)' }} />
      <div style={{ position: 'absolute', left: '50%', top: '50%', width: lado, height: lado,
        transform: `translate(-50%, -50%) translate(${treme.toFixed(1)}px, ${y.toFixed(1)}px) rotateX(${deitado.toFixed(2)}deg) scale(${(1 + amassa).toFixed(4)}, ${(1 - amassa).toFixed(4)})`,
        transformOrigin: '50% 100%', transformStyle: 'preserve-3d' }}>
        {d.imagem ? <Img src={staticFile(d.imagem)} style={{ width: '100%', height: '100%', objectFit: 'contain', filter: `drop-shadow(0 30px 40px rgba(0,0,0,.45))` }} />
          : <div style={{ width: '100%', height: '40%', marginTop: '30%', borderRadius: 28, background: c.texto || '#fff' }} />}
      </div>
      <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(circle at 50% 55%, ${c.acento || '#fff'}, transparent 45%)`, opacity: flash * 0.55, mixBlendMode: 'screen' }} />
    </div>
  );
}