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

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

  const fadeIn = interpolate(frame, [0, 12], [0, 1], { extrapolateRight: "clamp" });
  const line1 = spring({ fps, frame, config: SPRING_CFG, delay: 5 });
  const line2 = spring({ fps, frame, config: SPRING_CFG, delay: 28 });

  return (
    <AbsoluteFill
      style={{
        background: COLORS.bg,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        padding: "0 80px",
        opacity: fadeIn,
      }}
    >
      <div
        style={{
          fontFamily: FONT,
          fontSize: 72,
          fontWeight: 800,
          color: COLORS.text,
          textAlign: "center",
          lineHeight: 1.15,
          marginBottom: 32,
          opacity: line1,
          transform: `translateY(${(1 - line1) * 60}px)`,
        }}
      >
        Your AI agent is powerful.
      </div>
      <div
        style={{
          fontFamily: FONT,
          fontSize: 50,
          fontWeight: 600,
          color: COLORS.accentLight,
          textAlign: "center",
          lineHeight: 1.35,
          opacity: line2,
          transform: `translateY(${(1 - line2) * 60}px)`,
        }}
      >
        But can it safely touch
        <br />
        your internal tools?
      </div>
    </AbsoluteFill>
  );
};
