import React from "react";
import { AbsoluteFill, Img, staticFile, spring, interpolate, useCurrentFrame, useVideoConfig } from "remotion";
import { THEME } from "../theme";
import { KineticText } from "../components/KineticText";

export const CTAScene: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Background pulse
  const pulse = spring({
    frame: frame - 5,
    fps,
    config: { damping: 20, mass: 1, stiffness: 60 },
  });
  const bg = interpolate(pulse, [0, 1], [0, 8]);

  // App icon entrance
  const iconEntrance = spring({
    frame: frame - 25,
    fps,
    config: THEME.spring,
  });
  const iconScale = interpolate(iconEntrance, [0, 1], [0, 1]);
  const iconOpacity = interpolate(iconEntrance, [0, 1], [0, 1]);

  return (
    <AbsoluteFill
      style={{
        background: `radial-gradient(ellipse at 50% 40%, hsl(0, 72%, ${45 + bg}%) 0%, ${THEME.colors.cta} 70%)`,
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        padding: "60px 50px",
        gap: 50,
      }}
    >
      {/* Headline */}
      <KineticText
        words={["The", "Game's", "Just", "the", "Start."]}
        fontSize={78}
        delay={4}
        staggerFrames={4}
      />

      {/* App name + icon */}
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          gap: 20,
          transform: `scale(${iconScale})`,
          opacity: iconOpacity,
        }}
      >
<Img
          src={staticFile("appIcon.png")}
          style={{
            width: 360,
            height: 360,
            borderRadius: 80,
            boxShadow: "0 10px 40px rgba(0,0,0,0.4)",
          }}
        />
      </div>
    </AbsoluteFill>
  );
};
