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

export const Scene6CTA = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const fadeIn = interpolate(frame, [0, 15], [0, 1], { extrapolateRight: "clamp" });
  const logoP = spring({ fps, frame, config: SPRING_SOFT, delay: 0 });
  const urlP = spring({ fps, frame, config: { damping: 16, stiffness: 120 }, delay: 22 });
  const subP = spring({ fps, frame, config: { damping: 16, stiffness: 120 }, delay: 38 });

  const glowPulse = (Math.sin((frame / 45) * Math.PI) + 1) / 2;
  const glowSize = 24 + glowPulse * 32;
  const glowAlpha = 0.3 + glowPulse * 0.45;

  return (
    <AbsoluteFill
      style={{
        background: COLORS.bg,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        gap: 28,
        opacity: fadeIn,
      }}
    >
      <div
        style={{
          opacity: logoP,
          transform: `scale(${0.5 + 0.5 * logoP})`,
          filter: `drop-shadow(0 0 ${glowSize}px rgba(14, 99, 246, ${glowAlpha}))`,
        }}
      >
        <Img src={staticFile("squaremcp-logo.svg")} style={{ width: 160, height: 160 }} />
      </div>
      <div
        style={{
          fontFamily: FONT,
          fontSize: 68,
          fontWeight: 800,
          color: COLORS.text,
          letterSpacing: -1,
          opacity: urlP,
          transform: `translateY(${(1 - urlP) * 30}px)`,
        }}
      >
        squaremcp.com
      </div>
      <div
        style={{
          fontFamily: FONT,
          fontSize: 24,
          color: COLORS.textSecondary,
          textAlign: "center",
          maxWidth: 680,
          lineHeight: 1.6,
          opacity: subP,
          transform: `translateY(${(1 - subP) * 20}px)`,
        }}
      >
        Managed MCP infrastructure for teams building with AI.
      </div>
    </AbsoluteFill>
  );
};
