// CapaVHS: capa de locadora (640 × 880) em 3D: faixa azul no topo ("VIDEOCLUBE"), foto lavada no meio (saturate 0,7, sépia 0,25,
// desfoque 0,6 px), faixa vermelha embaixo com o título Bebas e um selo amarelo girado. Entra de 0,6x a 1x com sobra e oscila
// rotateY −14° ± 5° e rotateX 6° (período 60 quadros).
import React from 'react';
import {Img, useCurrentFrame} from 'remotion';
import {COR, FONTE, caber, eb} from '../base';

export type CapaVHSProps = {src: string; titulo: string; topo?: string; selo?: string; y?: number; inicio?: number; foco?: string; fim?: number};

export const CapaVHS: React.FC<CapaVHSProps> = ({src, titulo, topo = 'VIDEOCLUBE', selo, y = 720, inicio = 0, foco = '50% 50%', fim}) => {
  const f = useCurrentFrame();
  const t = f - inicio;
  if (t < 0 || (fim !== undefined && f >= fim)) return null;
  const p = eb(t / 16, 1.7);
  const tt = titulo.toUpperCase();
  const tam = caber(tt, 170, 560, 400, 0.01);
  const W = 640, H = 880;
  return <div style={{position: 'absolute', inset: 0, perspective: 2200}}>
    <div style={{position: 'absolute', left: 540 - W / 2, top: y - H / 2, width: W, height: H, border: `14px solid ${COR.osd}`, boxSizing: 'border-box', background: COR.tinta, transform: `scale(${Math.max(0.001, 0.6 + 0.4 * p)}) rotateY(${-14 + Math.sin(t / 60 * 2 * Math.PI) * 5}deg) rotateX(6deg)`, boxShadow: '0 40px 50px rgba(0,0,0,0.5)'}}>
      <div style={{height: 90, background: COR.azul, fontFamily: FONTE.apoio, fontSize: 52, lineHeight: '90px', textAlign: 'center', color: COR.osd, letterSpacing: '0.1em'}}>{topo}</div>
      <div style={{position: 'relative', height: H - 28 - 90 - 190, overflow: 'hidden'}}>
        <Img src={src} style={{width: '100%', height: '100%', objectFit: 'cover', objectPosition: foco, filter: 'saturate(0.7) contrast(1.15) sepia(0.25) hue-rotate(-8deg) blur(0.6px)', transform: `scale(${1.06 + t * 0.0015})`}} />
      </div>
      <div style={{height: 190, background: COR.rec, fontFamily: FONTE.titulo, fontSize: tam, lineHeight: '190px', textAlign: 'center', color: COR.osd, whiteSpace: 'nowrap'}}>{tt}</div>
      {selo && <div style={{position: 'absolute', right: -50, top: 120, width: 190, height: 190, borderRadius: '50%', background: COR.amarelo, color: COR.tinta, fontFamily: FONTE.titulo, fontSize: 58, lineHeight: '58px', textAlign: 'center', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20, boxSizing: 'border-box', transform: `rotate(14deg) scale(${Math.max(0.001, eb((t - 10) / 10, 2.4))})`, border: `5px solid ${COR.tinta}`}}>{selo.toUpperCase()}</div>}
    </div>
  </div>;
};