import { interpolate } from 'remotion';
import { C } from '../lib/colors';
import { clampLerp } from '../lib/easings';

// Phase 8 (~51 frames, 1.7s): wordmark "BuildMyMCPServer.com" centered with
// indigo glow that pulses once. Hold full opacity for ~0.8s, then fade
// everything to black over the final 12 frames so the loop is invisible.

const SCENE_LEN = 51;
const FADE_OUT_FRAMES = 12;

export function LogoLockup({ localFrame, fps: _fps }: { localFrame: number; fps: number }) {
  const inProgress = clampLerp(localFrame, 0, 10);
  // Glow pulse: 0 → 1 → 0 over 30 frames.
  const pulse =
    clampLerp(localFrame, 4, 18) - clampLerp(localFrame, 18, 32);

  // Internal fade-out across last 12 frames (parent crossfade also applies,
  // but this guarantees the lockup itself goes dark).
  const fadeOut = 1 - clampLerp(localFrame, SCENE_LEN - FADE_OUT_FRAMES, SCENE_LEN);

  const scale = interpolate(inProgress, [0, 1], [0.96, 1]);

  return (
    <div
      style={{
        position: 'absolute',
        inset: 0,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        opacity: fadeOut,
      }}
    >
      <div
        style={{
          fontFamily: 'ui-monospace, SF Mono, Menlo, monospace',
          fontSize: 84,
          color: C.fg,
          letterSpacing: -0.5,
          textShadow: `0 0 ${20 + pulse * 60}px rgba(99,102,241,${0.4 + pulse * 0.4})`,
          transform: `scale(${scale})`,
          opacity: inProgress,
        }}
      >
        BuildMyMCPServer
        <span style={{ color: C.fgMuted, fontSize: 56, marginLeft: 4 }}>.com</span>
      </div>
    </div>
  );
}
