// Overlay: as duas faixas de zigue-zague (topo e pé) que se repetem em todo plano, rolando para lados opostos, e confete pequeno que cruza.
import React from 'react';
import {AbsoluteFill} from 'remotion';
import {COR, ruido, useF} from '../base';

const Faixa: React.FC<{y: number; dx: number; cor: string; fundo: string}> = ({y, dx, cor, fundo}) => {
  const pts = Array.from({length: 40}).map((_, i) => `${i * 40},${i % 2 ? 56 : 8}`).join(' ');
  return <div style={{position: 'absolute', left: 0, right: 0, top: y, height: 64, background: fundo, overflow: 'hidden'}}>
    <svg width={1700} height={64} style={{position: 'absolute', left: -80 + (dx % 80), top: 0}}><polyline points={pts} fill="none" stroke={cor} strokeWidth={14} strokeLinejoin="miter" /></svg>
  </div>;
};
export const Overlay: React.FC = () => {
  const f = useF();
  return <AbsoluteFill style={{pointerEvents: 'none'}}>
    <Faixa y={0} dx={f * 3} cor={COR.rosa} fundo={COR.preto} />
    <Faixa y={1856} dx={-f * 3} cor={COR.turquesa} fundo={COR.preto} />
    {Array.from({length: 9}).map((_, i) => {
      const x = ((ruido(i + 1) * 1500 + f * (6 + ruido(i) * 8) * (i % 2 ? -1 : 1)) % 1300 + 1300) % 1300 - 110;
      const y = 120 + ruido(i + 20) * 1650;
      return <div key={i} style={{position: 'absolute', left: x, top: y, width: 26, height: 26, background: [COR.rosa, COR.azul, COR.turquesa, COR.roxo][i % 4], border: `4px solid ${COR.preto}`, borderRadius: i % 3 === 0 ? '50%' : 0, transform: `rotate(${f * 6 + i * 40}deg)`}} />;
    })}
  </AbsoluteFill>;
};