/**
 * CTAScene Component
 *
 * Call-to-action with pulsing button animation.
 * Duration: ~5s
 */

import React from 'react';
import { interpolate, useCurrentFrame, useVideoConfig } from 'remotion';
import { darkPalette } from '../lib/colors';
import type { CTAScene as CTASceneType } from '../types/video-script';

type CTASceneProps = {
  scene: CTASceneType;
};

export const CTAScene: React.FC<CTASceneProps> = ({ scene }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Button fade in
  const buttonOpacity = interpolate(frame, [0, 15], [0, 1], {
    extrapolateRight: 'clamp',
  });

  // Pulse animation (continuous)
  const pulseScale =
    scene.animation === 'pulse'
      ? 1 + Math.sin((frame / fps) * Math.PI * 2) * 0.03
      : 1;

  // Glow animation
  const glowOpacity =
    scene.animation === 'glow'
      ? 0.4 + Math.sin((frame / fps) * Math.PI * 2) * 0.2
      : 0;

  // Subtext appears after button
  const subtextOpacity = interpolate(frame, [20, 35], [0, 1], {
    extrapolateRight: 'clamp',
  });

  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        backgroundColor: darkPalette.background,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        padding: 60,
      }}
    >
      {/* CTA Button */}
      <div
        style={{
          position: 'relative',
          opacity: buttonOpacity,
        }}
      >
        {/* Glow effect (behind button) */}
        {scene.animation === 'glow' && (
          <div
            style={{
              position: 'absolute',
              inset: -20,
              backgroundColor: darkPalette.primary,
              borderRadius: 32,
              opacity: glowOpacity,
              filter: 'blur(30px)',
            }}
          />
        )}

        {/* Button */}
        <button
          style={{
            position: 'relative',
            backgroundColor: darkPalette.primary,
            color: 'white',
            fontSize: 36,
            fontWeight: 600,
            padding: '32px 80px',
            borderRadius: 20,
            border: 'none',
            transform: `scale(${pulseScale})`,
            boxShadow: '0 8px 40px rgba(59, 130, 246, 0.5)',
          }}
        >
          {scene.buttonText}
        </button>
      </div>

      {/* Subtext */}
      <p
        style={{
          marginTop: 32,
          color: darkPalette.textMuted,
          fontSize: 28,
          opacity: subtextOpacity,
        }}
      >
        {scene.subtext}
      </p>
    </div>
  );
};
