import {
  AbsoluteFill,
  Img,
  useCurrentFrame,
  useVideoConfig,
  interpolate,
  spring,
} from "remotion";

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

  // Animate elements in
  const headlineY = interpolate(
    spring({ frame, fps, config: { damping: 15 } }),
    [0, 1],
    [40, 0]
  );

  const sublineOpacity = interpolate(frame, [fps * 0.4, fps * 0.8], [0, 1], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  });

  const urlOpacity = interpolate(frame, [fps * 0.8, fps * 1.2], [0, 1], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  });

  return (
    <AbsoluteFill
      style={{
        backgroundColor: "#3B5BDB",
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        gap: 24,
      }}
    >
      {/* Logo */}
      <Img src="/logo.png" style={{ height: 120, marginBottom: 16 }} />

      {/* Headline */}
      <h1
        style={{
          fontFamily: "Inter, sans-serif",
          fontWeight: 700,
          fontSize: 72,
          color: "#FFFFFF",
          margin: 0,
          transform: `translateY(${headlineY}px)`,
        }}
      >
        Try Launchpad 3.0 Free
      </h1>

      {/* Promo code */}
      <div
        style={{
          opacity: sublineOpacity,
          display: "flex",
          alignItems: "center",
          gap: 16,
        }}
      >
        <div
          style={{
            fontFamily: "Inter, sans-serif",
            fontWeight: 600,
            fontSize: 44,
            color: "#FFFFFF",
            backgroundColor: "rgba(255,255,255,0.15)",
            padding: "8px 28px",
            borderRadius: 12,
            letterSpacing: 4,
          }}
        >
          LAUNCH30
        </div>
        <span
          style={{
            fontFamily: "Inter, sans-serif",
            fontWeight: 500,
            fontSize: 36,
            color: "rgba(255,255,255,0.9)",
          }}
        >
          3 months free on Pro
        </span>
      </div>

      {/* URL */}
      <p
        style={{
          fontFamily: "Inter, sans-serif",
          fontWeight: 400,
          fontSize: 28,
          color: "rgba(255,255,255,0.7)",
          margin: 0,
          marginTop: 12,
          opacity: urlOpacity,
        }}
      >
        launchpad.dev
      </p>
    </AbsoluteFill>
  );
};