// Overlay: o que se repete em todo plano: granulação de tinta (pontos de ruído com limiar), marcas de registro nos 4 cantos e a tirinha de
// teste de cor (2 quadrados, rosa e azul, e o cruzamento) no canto inferior. Estática: a granulação não treme (mantém o preview leve).
import React from 'react';
import {AbsoluteFill} from 'remotion';
import {COR} from '../base';

const Mira: React.FC<{x: number; y: number}> = ({x, y}) => <svg width="64" height="64" style={{position: 'absolute', left: x - 32, top: y - 32}}><circle cx="32" cy="32" r="16" stroke={COR.azul} strokeWidth="4" fill="none" /><path d="M32 2 V62 M2 32 H62" stroke={COR.azul} strokeWidth="3" /></svg>;
export const Overlay: React.FC = () => {
    return <AbsoluteFill style={{pointerEvents: 'none'}}>
    <svg width="1080" height="1920" style={{position: 'absolute', inset: 0, mixBlendMode: 'multiply', opacity: 0.16}}>
      <filter id="riso-gr"><feTurbulence type="fractalNoise" baseFrequency="0.75" numOctaves="2" seed={3} /><feColorMatrix type="matrix" values="0 0 0 0 0.1  0 0 0 0 0.1  0 0 0 0 0.2  0 0 0 9 -4.9" /></filter>
      <rect width="1080" height="1920" filter="url(#riso-gr)" />
    </svg>
    <Mira x={56} y={56} /><Mira x={1024} y={56} /><Mira x={56} y={1864} /><Mira x={1024} y={1864} />
    <div style={{position: 'absolute', left: 470, top: 1850, width: 40, height: 28, background: COR.rosa, mixBlendMode: 'multiply'}} />
    <div style={{position: 'absolute', left: 494, top: 1850, width: 40, height: 28, background: COR.azul, mixBlendMode: 'multiply'}} />
  </AbsoluteFill>;
};