// Fundo: o cenário fixo. Céu em degradê (noite → roxo → magenta no horizonte, y = 1180), 34 estrelas que piscam e um chão de
// grade em perspectiva (linhas magenta verticais e ciano horizontais) que corre 14 px por quadro em direção à câmera.
import React from 'react';
import {AbsoluteFill, useCurrentFrame} from 'remotion';
import {COR} from '../base';

export const HORIZONTE = 1180;
const ESTRELAS = Array.from({length: 34}, (_, i) => ({x: (i * 397) % 1080, y: ((i * 211) % 980) + 20, d: 3 + (i % 3), f: 20 + (i % 5) * 7}));

export const Fundo: React.FC = () => {
  const f = useCurrentFrame();
  return <AbsoluteFill style={{background: COR.noite}}>
    <div style={{position: 'absolute', left: 0, top: 0, width: 1080, height: HORIZONTE, background: `linear-gradient(180deg, ${COR.noite} 0%, ${COR.roxo} 40%, #7A1E8C 55%, ${COR.magenta} 100%)`}} />
    {ESTRELAS.map((s, i) => <div key={i} style={{position: 'absolute', left: s.x, top: s.y, width: s.d, height: s.d, borderRadius: '50%', background: COR.branco, opacity: 0.35 + 0.35 * Math.sin(f / s.f + i)}} />)}
    <div style={{position: 'absolute', left: 0, top: HORIZONTE, width: 1080, height: 1920 - HORIZONTE, overflow: 'hidden', perspective: 520, perspectiveOrigin: '50% 0%', background: `linear-gradient(180deg, ${COR.magenta}55 0%, ${COR.noite} 22%)`}}>
      <div style={{position: 'absolute', left: -2600, top: -2400, width: 6280, height: 3140, transformOrigin: '50% 100%', transform: 'rotateX(78deg)', backgroundImage: `linear-gradient(${COR.ciano}cc 4px, transparent 4px), linear-gradient(90deg, ${COR.magenta}dd 4px, transparent 4px)`, backgroundSize: '160px 160px', backgroundPosition: `0 ${(f * 14) % 160}px, 0 0`}} />
    </div>
    <div style={{position: 'absolute', left: 0, top: HORIZONTE - 3, width: 1080, height: 6, background: COR.magenta, boxShadow: `0 0 30px ${COR.magenta}`}} />
  </AbsoluteFill>;
};