// Camadas 3D empilhadas: placas arredondadas caem uma a uma numa pilha isométrica, com mola, e flutuam.
// el.dados (ou el): camadas [{cor, rotulo}] (ou números de 3 a 6), titulo, cores {fundo, texto, acento}, fontes {display, texto}, largura, altura, atraso (s).
import React from 'react';
import { useVideoConfig } from 'remotion';

const PADRAO = ['#F5B82E', '#3B82F6', '#8B7CF6', '#C4B5FD', '#F4F4F5'];

function mola(s) {
  if (s <= 0) return 0;
  const w = 2 * Math.PI * 1.9, z = 0.55, wd = w * Math.sqrt(1 - z * z);
  return 1 - Math.exp(-z * w * s) * (Math.cos(wd * s) + (z * w / wd) * Math.sin(wd * s));
}

export default function CamadasEmpilhadas({ 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 f = d.fontes || {};
  const u = t - (d.atraso || 0);
  const lista = Array.isArray(d.camadas) && d.camadas.length
    ? d.camadas.slice(0, 6).map((x, i) => (typeof x === 'object' ? x : { cor: PADRAO[i % PADRAO.length] }))
    : PADRAO.slice(0, Number(d.camadas) || 4).map((cor) => ({ cor }));
  const n = lista.length;
  const titulo = d.titulo ? 1 : 0;
  const lado = Math.min(W * 0.56, (H * (titulo ? 0.66 : 0.82)) / 1.25);
  const passo = lado * 0.13;
  const respira = Math.sin(u * 1.6) * 6;
  return (
    <div style={{ position: 'absolute', inset: 0, width: W, height: H, background: c.fundo || 'transparent', overflow: 'visible' }}>
      <div style={{ position: 'absolute', left: '50%', top: titulo ? '58%' : '52%', width: 0, height: 0, perspective: 1600 }}>
        {/* a sombra da pilha, no chão */}
        <div style={{ position: 'absolute', left: -lado * 0.6, top: lado * 0.38, width: lado * 1.2, height: lado * 0.3, borderRadius: '50%',
          background: 'radial-gradient(closest-side, rgba(0,0,0,.55), transparent)', filter: 'blur(8px)', opacity: Math.min(1, u / 0.6) }} />
        <div style={{ position: 'absolute', transformStyle: 'preserve-3d', transform: `rotateX(58deg) rotateZ(-40deg) translateZ(${respira}px)` }}>
          {lista.map((cam, i) => {
            const k = mola(u - 0.12 - i * 0.16);
            const z = i * passo + (1 - k) * lado * 0.9;
            const op = Math.min(1, Math.max(0, (u - 0.12 - i * 0.16) / 0.12));
            const cor = cam.cor || PADRAO[i % PADRAO.length];
            return (
              <div key={i} style={{
                position: 'absolute', left: -lado / 2, top: -lado / 2, width: lado, height: lado, borderRadius: lado * 0.12,
                transform: `translateZ(${z}px)`, opacity: op,
                background: `linear-gradient(135deg, ${cor}, ${cor}cc)`,
                boxShadow: `0 0 0 2px #ffffff30 inset, 0 ${passo * 0.6}px ${passo * 1.4}px rgba(0,0,0,.35)`,
              }}>
                {cam.rotulo ? (
                  <div style={{ position: 'absolute', right: lado * 0.08, bottom: lado * 0.06, color: '#0b0b12', fontFamily: `"${f.texto || 'Inter'}", sans-serif`,
                    fontWeight: 800, fontSize: lado * 0.08, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{cam.rotulo}</div>
                ) : null}
              </div>
            );
          })}
        </div>
      </div>
      {titulo ? (
        <div style={{ position: 'absolute', top: 0, zIndex: 2, width: '100%', textAlign: 'center', color: c.texto || '#fff',
          fontFamily: `"${f.display || 'Instrument Serif'}", serif`, fontStyle: 'italic', fontSize: Math.min(W * 0.09, H * 0.12),
          opacity: Math.min(1, Math.max(0, u / 0.3)), transform: `translateY(${(1 - Math.min(1, Math.max(0, u / 0.3))) * 16}px)` }}>{d.titulo}</div>
      ) : null}
    </div>
  );
}