// CarimboData: o dia D como carimbo de borracha vermelho que despenca de 3,4× e bate na tela (escala 3,4 → 1 em 7 quadros,
// com tremor e respingo de tinta), duas bordas, "É HOJE" em Big Shoulders 900 e a data em mono. Herói do fim.
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, FONTE, MONO, caber, e5, seg} from '../base';

export type CarimboDataProps = {
  texto: string;
  data: string;
  inicio?: number;
  /** centro vertical, px */
  y: number;
  /** inclinação final, graus */
  rot?: number;
  fim?: number;
};

export const CarimboData: React.FC<CarimboDataProps> = ({texto, data, inicio = 0, y, rot = -7, fim = 1e9}) => {
  const f = useCurrentFrame();
  if (f < inicio - 1 || f > fim + 12) return null;
  const queda = e5(seg(f, inicio, inicio + 7)), bateu = f >= inicio + 7;
  const apos = f - inicio - 7, tremor = bateu ? Math.exp(-apos / 4) * Math.sin(apos * 2.4) : 0;
  const sai = e5(seg(f, fim, fim + 10));
  const tam = caber(texto, 400, 700, 900, -0.01, 'CT Big Shoulders');
  return <div style={{position: 'absolute', inset: 0, opacity: 1 - sai}}>
    <div style={{position: 'absolute', left: 100, top: y - 360, width: 880, height: 720, transform: `translate(${tremor * 14}px, ${tremor * 10}px) scale(${3.4 - 2.4 * queda}) rotate(${rot + (1 - queda) * 14}deg)`, opacity: Math.min(1, queda * 2.2), mixBlendMode: 'multiply'}}>
      <div style={{position: 'absolute', inset: 0, border: `22px solid ${COR.vermelho}`, borderRadius: 40}} />
      <div style={{position: 'absolute', inset: 46, border: `8px solid ${COR.vermelho}`, borderRadius: 14}} />
      <div style={{position: 'absolute', left: 0, width: 880, top: 90, textAlign: 'center', fontFamily: FONTE, fontWeight: 900, fontSize: tam, lineHeight: 1.05, color: COR.vermelho, textTransform: 'uppercase'}}>{texto}</div>
      <div style={{position: 'absolute', left: 0, width: 880, top: 90 + tam * 1.05 + 20, textAlign: 'center', fontFamily: MONO, fontWeight: 700, fontSize: 110, letterSpacing: '0.1em', color: COR.vermelho}}>{data}</div>
    </div>
    {bateu && apos < 14 && Array.from({length: 10}, (_, i) => {
      const a = (i / 10) * Math.PI * 2 + 0.3, d = 520 + (i % 3) * 60, p = e5(seg(apos, 0, 8));
      return <div key={i} style={{position: 'absolute', left: 540 + Math.cos(a) * d * p - 14, top: y + Math.sin(a) * d * 0.8 * p - 14, width: 28 - (i % 3) * 6, height: 28 - (i % 3) * 6, borderRadius: '50%', background: COR.vermelho, opacity: 1 - seg(apos, 6, 14)}} />;
    })}
  </div>;
};