// Fundo: folha de caderno: papel branco quente com pautas azul-claras fracas, margem vermelha, furos de espiral à esquerda e os 4 filtros
// SVG de "fervura" (`rb-0..3`) que os elementos usam para o traço tremer a cada 2 quadros.
import React from 'react';
import {AbsoluteFill} from 'remotion';
import {COR, useF} from '../base';

export const Fundo: React.FC = () => {
  const f = useF();
  return <AbsoluteFill style={{background: COR.papel}}>
    <svg width="0" height="0" style={{position: 'absolute'}}>
      {[0, 1, 2, 3].map((s) => <filter key={s} id={`rb-${s}`} x="-5%" y="-5%" width="110%" height="110%"><feTurbulence type="fractalNoise" baseFrequency="0.035" numOctaves="2" seed={s * 7 + 2} result="n" /><feDisplacementMap in="SourceGraphic" in2="n" scale="7" /></filter>)}
    </svg>
    <AbsoluteFill style={{backgroundImage: `repeating-linear-gradient(180deg, transparent 0 71px, ${COR.linha} 71px 73px)`, backgroundPosition: `0 ${Math.sin(f / 40) * 3}px`, opacity: 0.8}} />
    <div style={{position: 'absolute', left: 78, top: 0, width: 3, height: '100%', background: COR.vermelho, opacity: 0.35}} />
    {Array.from({length: 7}).map((_, i) => <div key={i} style={{position: 'absolute', left: 18, top: 160 + i * 250, width: 34, height: 34, borderRadius: '50%', background: COR.cinza, opacity: 0.45, boxShadow: 'inset 0 3px 3px rgba(0,0,0,0.3)'}} />)}
  </AbsoluteFill>;
};