// Fundo: céu azul-petróleo com 4 faixas de aurora (verde, turquesa, violeta, rosa) que ondulam e cujo matiz derrapa
// ±40° a cada 400 quadros. As faixas são polígonos com degradê vertical, desfocados (34 px) e misturados em screen.
import React from 'react';
import {AbsoluteFill, useCurrentFrame} from 'remotion';
import {COR} from '../base';

export type FundoProps = {
  /** cores das 4 faixas (padrão: verde, turquesa, violeta, rosa) */
  cores?: string[];
  /** 0..1.5 */
  intensidade?: number;
  velocidade?: number;
};

const FAIXAS = [{y: 520, h: 520, a: 120, k: 0.0042, s: 0.011, op: 0.6}, {y: 640, h: 480, a: 150, k: 0.0035, s: -0.009, op: 0.5}, {y: 420, h: 420, a: 90, k: 0.006, s: 0.014, op: 0.42}, {y: 760, h: 380, a: 110, k: 0.0048, s: -0.012, op: 0.34}];

export const Fundo: React.FC<FundoProps> = ({cores = [COR.verde, COR.turquesa, COR.violeta, COR.rosa], intensidade = 1, velocidade = 1}) => {
  const f = useCurrentFrame() * velocidade;
  return <AbsoluteFill style={{background: `linear-gradient(180deg, ${COR.ceu} 0%, #08162A 55%, ${COR.horizonte} 100%)`}}>
    <svg width={1080} height={1920} viewBox="0 0 1080 1920" style={{position: 'absolute', inset: 0, mixBlendMode: 'screen', filter: `hue-rotate(${Math.sin(f / 64) * 40}deg)`}}>
      <defs>
        <filter id="au-desfoque" x="-20%" y="-20%" width="140%" height="140%"><feGaussianBlur stdDeviation="34" /></filter>
        {cores.map((c, i) => <linearGradient key={i} id={`au-g${i}`} x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor={c} stopOpacity="0" /><stop offset="0.35" stopColor={c} stopOpacity="0.85" /><stop offset="1" stopColor={c} stopOpacity="0" /></linearGradient>)}
      </defs>
      <g filter="url(#au-desfoque)">
        {FAIXAS.map((b, i) => {
          const pts: string[] = [];
          for (let x = -40; x <= 1120; x += 40) pts.push(`${x},${(b.y + Math.sin(x * b.k * 2.2 + f * b.s + i * 2) * b.a + Math.sin(x * b.k * 5 + f * b.s * 1.7) * b.a * 0.3).toFixed(1)}`);
          const baixo = [...pts].reverse().map((p) => {const [x, y] = p.split(',').map(Number); return `${x},${(y + b.h + Math.sin(x * 0.004 + f * b.s) * 60).toFixed(1)}`;});
          return <polygon key={i} points={[...pts, ...baixo].join(' ')} fill={`url(#au-g${i % cores.length})`} opacity={b.op * intensidade} />;
        })}
      </g>
    </svg>
  </AbsoluteFill>;
};