import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
import { CLIENT } from "../client";

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

  const logoScale = spring({ frame, fps, config: { damping: 12 } });
  const nameY = interpolate(frame, [8, 22], [20, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
  const nameOpacity = interpolate(frame, [8, 22], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
  const tagY = interpolate(frame, [16, 30], [20, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
  const tagOpacity = interpolate(frame, [16, 30], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });

  return (
    <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", background: CLIENT.brand.dark }}>
      <div style={{
        width: 110, height: 110, background: CLIENT.brand.primary,
        borderRadius: 18, display: "flex", alignItems: "center", justifyContent: "center",
        transform: `scale(${logoScale})`, marginBottom: 24,
      }}>
        <span style={{ fontSize: 42, fontWeight: 700, color: "white", fontFamily: "sans-serif" }}>SW</span>
      </div>
      <div style={{ fontSize: 48, fontWeight: 700, color: "white", fontFamily: "sans-serif", transform: `translateY(${nameY}px)`, opacity: nameOpacity }}>
        {CLIENT.name}
      </div>
      <div style={{ fontSize: 22, color: "rgba(255,255,255,0.55)", fontFamily: "sans-serif", marginTop: 8, transform: `translateY(${tagY}px)`, opacity: tagOpacity }}>
        {CLIENT.tagline}
      </div>
    </div>
  );
};