import { AbsoluteFill, Img, interpolate, spring, staticFile, useCurrentFrame, useVideoConfig } from "remotion";
import { COLORS, FONT, SPRING_CFG } from "../../styles";

export const TikTokCTA = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const logoIn = spring({ fps, frame, config: SPRING_CFG });
  const glow = interpolate(frame % 60, [0, 30, 60], [0.32, 0.7, 0.32]);

  return (
    <AbsoluteFill style={{ alignItems: "center", justifyContent: "center" }}>
      <div
        style={{
          position: "absolute",
          width: 520,
          height: 520,
          borderRadius: 999,
          background: `radial-gradient(circle, rgba(14,99,246,${glow}) 0%, rgba(14,99,246,0) 68%)`,
          filter: "blur(12px)",
        }}
      />
      <div
        style={{
          opacity: logoIn,
          transform: `scale(${0.9 + logoIn * 0.1}) translateY(${(1 - logoIn) * 50}px)`,
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
        }}
      >
        <Img src={staticFile("squaremcp-logo.svg")} style={{ width: 240, height: 240 }} />
        <div
          style={{
            marginTop: 26,
            fontFamily: FONT,
            fontSize: 82,
            fontWeight: 800,
            color: COLORS.text,
            letterSpacing: -2.2,
          }}
        >
          SquareMCP
        </div>
        <div
          style={{
            marginTop: 12,
            fontFamily: FONT,
            fontSize: 34,
            fontWeight: 600,
            color: COLORS.accentLight,
            letterSpacing: -0.6,
          }}
        >
          squaremcp.com
        </div>
        <div
          style={{
            marginTop: 22,
            fontFamily: FONT,
            fontSize: 24,
            color: COLORS.textSecondary,
          }}
        >
          Early access now open
        </div>
      </div>
    </AbsoluteFill>
  );
};
