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

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

  const logoP = spring({ fps, frame, config: SPRING_SOFT, delay: 0 });
  const nameP = spring({ fps, frame, config: SPRING_CFG, delay: 18 });
  const tagP = spring({ fps, frame, config: SPRING_CFG, delay: 32 });

  const glowPulse = (Math.sin((frame / 45) * Math.PI) + 1) / 2;
  const glowSize = 30 + glowPulse * 40;
  const glowAlpha = 0.35 + glowPulse * 0.3;

  return (
    <AbsoluteFill
      style={{
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        gap: 28,
      }}
    >
      <div
        style={{
          opacity: logoP,
          transform: `scale(${0.4 + 0.6 * logoP})`,
          filter: `drop-shadow(0 0 ${glowSize}px rgba(14, 99, 246, ${glowAlpha}))`,
        }}
      >
        <Img src={staticFile("squaremcp-logo.svg")} style={{ width: 140, height: 140 }} />
      </div>
      <div
        style={{
          fontFamily: FONT,
          fontSize: 80,
          fontWeight: 800,
          color: "#fff",
          letterSpacing: -2,
          opacity: nameP,
          transform: `translateY(${(1 - nameP) * 30}px)`,
        }}
      >
        SquareMCP
      </div>
      <div
        style={{
          fontFamily: FONT,
          fontSize: 30,
          color: COLORS.accentLight,
          textAlign: "center",
          opacity: tagP,
          transform: `translateY(${(1 - tagP) * 20}px)`,
        }}
      >
        Managed MCP Infrastructure for Internal Tools
      </div>
    </AbsoluteFill>
  );
};
