import React from 'react';
import { AbsoluteFill, useCurrentFrame, useVideoConfig } from 'remotion';

const TAU = Math.PI * 2;

/**
 * Helle Bühne: reinweißer Hintergrund mit ganz dezenten, driftenden Akzent-Schimmern.
 * Auf einer weißen Seite wirkt das wie "ohne Hintergrund" — die Vordergrund-Elemente
 * schweben frei. Alle Bewegung periodisch über durationInFrames → nahtloser Loop.
 * bgTop/bgBottom werden für Abwärtskompatibilität akzeptiert, aber nicht mehr genutzt.
 */
export const Stage: React.FC<{
  accent: string;
  accent2: string;
  bgTop?: string;
  bgBottom?: string;
  children?: React.ReactNode;
}> = ({ accent, accent2, children }) => {
  const frame = useCurrentFrame();
  const { durationInFrames } = useVideoConfig();
  const t = (frame / durationInFrames) * TAU;

  const gx = 50 + Math.sin(t) * 16;
  const gy = 40 + Math.cos(t) * 12;
  const gx2 = 50 - Math.sin(t + 1.2) * 18;
  const gy2 = 60 - Math.cos(t + 0.6) * 12;

  return (
    <AbsoluteFill style={{ backgroundColor: '#ffffff', overflow: 'hidden' }}>
      {/* sehr dezente, farbige Schimmer auf Weiß */}
      <AbsoluteFill style={{ background: `radial-gradient(46% 56% at ${gx}% ${gy}%, ${accent}1c, transparent 70%)`, filter: 'blur(32px)' }} />
      <AbsoluteFill style={{ background: `radial-gradient(48% 52% at ${gx2}% ${gy2}%, ${accent2}14, transparent 70%)`, filter: 'blur(44px)' }} />

      {children}

      {/* weiche weiße Kanten, damit es randlos in die Seite übergeht */}
      <AbsoluteFill style={{ background: 'radial-gradient(135% 135% at 50% 50%, transparent 58%, rgba(255,255,255,.65) 100%)' }} />
    </AbsoluteFill>
  );
};