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

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

  const fadeIn = interpolate(frame, [0, 12], [0, 1], { extrapolateRight: "clamp" });
  const logoP = spring({ fps, frame, config: SPRING_SOFT, delay: 0 });
  const titleP = spring({ fps, frame, config: SPRING_CFG, delay: 18 });
  const subtitleP = spring({ fps, frame, config: SPRING_CFG, delay: 34 });
  const bodyP = spring({ fps, frame, config: SPRING_CFG, delay: 50 });

  return (
    <AbsoluteFill
      style={{
        background: COLORS.bg,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        padding: "0 80px",
        gap: 24,
        opacity: fadeIn,
      }}
    >
      <div
        style={{
          opacity: logoP,
          transform: `scale(${0.4 + 0.6 * logoP})`,
          filter: `drop-shadow(0 0 40px ${COLORS.accentGlow})`,
        }}
      >
        <Img src={staticFile("squaremcp-logo.svg")} style={{ width: 120, height: 120 }} />
      </div>
      <div
        style={{
          fontFamily: FONT,
          fontSize: 72,
          fontWeight: 800,
          color: COLORS.text,
          opacity: titleP,
          transform: `translateY(${(1 - titleP) * 40}px)`,
        }}
      >
        SquareMCP
      </div>
      <div
        style={{
          fontFamily: FONT,
          fontSize: 34,
          fontWeight: 600,
          color: COLORS.accentLight,
          textAlign: "center",
          lineHeight: 1.35,
          opacity: subtitleP,
          transform: `translateY(${(1 - subtitleP) * 30}px)`,
        }}
      >
        Managed MCP Infrastructure for Internal Tools
      </div>
      <div
        style={{
          fontFamily: FONT,
          fontSize: 26,
          color: COLORS.textSecondary,
          textAlign: "center",
          lineHeight: 1.55,
          marginTop: 4,
          opacity: bodyP,
          transform: `translateY(${(1 - bodyP) * 20}px)`,
        }}
      >
        Connect your internal tools to AI agents safely. In a day.
      </div>
    </AbsoluteFill>
  );
};
