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

export const Background: React.FC = () => {
  const frame = useCurrentFrame();

  const drift = interpolate(frame, [0, 1050], [0, -40], { extrapolateRight: 'clamp' });

  return (
    <AbsoluteFill style={{ pointerEvents: 'none', overflow: 'hidden' }}>
      {/* Subtle grid */}
      <div
        style={{
          position: 'absolute',
          inset: '-10%',
          backgroundImage:
            'linear-gradient(#E2E8F0 1px, transparent 1px), linear-gradient(90deg, #E2E8F0 1px, transparent 1px)',
          backgroundSize: '80px 80px',
          opacity: 0.28,
          transform: `translateY(${drift}px)`,
        }}
      />
      {/* Radial vignette */}
      <div
        style={{
          position: 'absolute',
          inset: 0,
          background:
            'radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, rgba(246,249,255,0.7) 100%)',
        }}
      />
    </AbsoluteFill>
  );
};
