import { AbsoluteFill, interpolate, Sequence, useCurrentFrame, useVideoConfig } from "remotion";
import { COLORS } from "./styles";
import { HeroNetwork } from "./scenes/HeroNetwork";
import { HeroMCPLayer } from "./scenes/HeroMCPLayer";
import { HeroLogoReveal } from "./scenes/HeroLogoReveal";

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

  // MCP overlay: fade in 8–10s, hold until 16s, fade out 16–18s
  const mcpOpacity = interpolate(
    frame,
    [8 * fps, 10 * fps, 16 * fps, 18 * fps],
    [0, 1, 1, 0],
    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
  );

  // Logo overlay: fade in 18–20s, hold until 26s, fade out 26–29s
  const logoOpacity = interpolate(
    frame,
    [18 * fps, 20 * fps, 26 * fps, 29 * fps],
    [0, 1, 1, 0],
    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
  );

  return (
    <AbsoluteFill style={{ background: COLORS.bg }}>
      {/* Network runs on the global frame — periods 90 and 180 divide evenly into 900, so the loop is seamless */}
      <HeroNetwork />

      {/* MCP layer: Sequence resets frame to 0 at global frame 240 so springs start fresh */}
      <AbsoluteFill style={{ opacity: mcpOpacity }}>
        <Sequence from={8 * fps} durationInFrames={10 * fps}>
          <HeroMCPLayer />
        </Sequence>
      </AbsoluteFill>

      {/* Logo reveal: Sequence resets frame to 0 at global frame 540 */}
      <AbsoluteFill style={{ opacity: logoOpacity }}>
        <Sequence from={18 * fps} durationInFrames={11 * fps}>
          <HeroLogoReveal />
        </Sequence>
      </AbsoluteFill>
    </AbsoluteFill>
  );
};
