// Overlay: a moldura de fliperama que se repete em todo plano: borda de pixel com cantos em degrau e linha clara por dentro.
import React from 'react';
import {AbsoluteFill} from 'remotion';
import {COR} from '../base';

export const Overlay: React.FC = () => {
  const L = 1080, A = 1920, e = 28;
  const canto = (x: number, y: number) => <div key={`${x}${y}`} style={{position: 'absolute', left: x, top: y, width: e * 2, height: e * 2, background: COR.noite}} />;
  return <AbsoluteFill style={{pointerEvents: 'none'}}>
    <div style={{position: 'absolute', inset: 0, boxShadow: `inset 0 0 0 ${e}px ${COR.noite}, inset 0 0 0 ${e + 8}px ${COR.creme}`}} />
    {canto(0, 0)}{canto(L - e * 2, 0)}{canto(0, A - e * 2)}{canto(L - e * 2, A - e * 2)}
    <div style={{position: 'absolute', inset: 0, background: 'repeating-linear-gradient(0deg, rgba(29,43,83,0.06) 0 3px, transparent 3px 6px)'}} />
  </AbsoluteFill>;
};