import React from 'react';
import { useCurrentFrame, spring, useVideoConfig, interpolate } from 'remotion';
import { COLORS, FONT, SPRING } from '../styles/theme';
import { MeshBackground } from '../components/MeshBackground';
import { ParticleField } from '../components/ParticleField';
import { AnimatedGlowBorder } from '../components/GlassCard';
import { KineticText } from '../components/KineticText';

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

  // Logo entry
  const logoEntry = spring({ frame: frame - 50, fps, config: SPRING.bouncy });
  const logoGlow = 0.5 + Math.sin(frame * 0.06) * 0.3;

  // CTA button pulse
  const btnPulse = 1 + Math.sin(frame * 0.1) * 0.03;
  const btnEntry = spring({ frame: frame - 70, fps, config: SPRING.smooth });

  // Subtitle
  const subEntry = spring({ frame: frame - 85, fps, config: SPRING.gentle });

  // Final zoom
  const finalZoom = interpolate(frame, [100, 150], [1, 1.03], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  // Fade to black
  const fadeOut = interpolate(frame, [130, 150], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  // Converging particles (move toward center)
  const particles = React.useMemo(() => {
    const pts: { x: number; y: number; phase: number }[] = [];
    for (let i = 0; i < 40; i++) {
      const angle = (i / 40) * Math.PI * 2;
      pts.push({
        x: 960 + Math.cos(angle) * (500 + (i % 3) * 100),
        y: 540 + Math.sin(angle) * (300 + (i % 4) * 80),
        phase: i * 0.3,
      });
    }
    return pts;
  }, []);

  return (
    <div
      style={{
        width: 1920,
        height: 1080,
        fontFamily: FONT,
        position: 'relative',
        overflow: 'hidden',
      }}
    >
      <div style={{ transform: `scale(${finalZoom})`, transformOrigin: 'center center', width: 1920, height: 1080 }}>
        <MeshBackground color1={COLORS.primary} color2={COLORS.secondary} color3={COLORS.accent} intensity={0.25} speed={0.8} />

        {/* Converging particles */}
        {particles.map((p, i) => {
          const convergeProg = interpolate(frame, [0, 80], [0, 0.7], {
            extrapolateLeft: 'clamp',
            extrapolateRight: 'clamp',
          });
          const px = p.x + (960 - p.x) * convergeProg + Math.sin(frame * 0.03 + p.phase) * 10;
          const py = p.y + (540 - p.y) * convergeProg + Math.cos(frame * 0.025 + p.phase) * 8;
          const size = 1.5 + Math.sin(frame * 0.05 + p.phase) * 0.8;
          const op = 0.2 + Math.sin(frame * 0.04 + p.phase) * 0.15;

          return (
            <div
              key={i}
              style={{
                position: 'absolute',
                left: px,
                top: py,
                width: size,
                height: size,
                borderRadius: '50%',
                background: COLORS.white,
                opacity: op,
                boxShadow: `0 0 ${size * 3}px ${COLORS.white}`,
              }}
            />
          );
        })}

        {/* Main CTA text */}
        <div
          style={{
            position: 'absolute',
            top: 280,
            width: '100%',
            textAlign: 'center',
          }}
        >
          <KineticText
            text="Ready for a fully managed AI system?"
            highlightWords={['managed', 'AI', 'system?']}
            highlightColor={COLORS.primary}
            fontSize={52}
            animationType="blur"
            staggerFrames={3}
          />
        </div>

        {/* Logo */}
        <div
          style={{
            position: 'absolute',
            top: 420,
            width: '100%',
            textAlign: 'center',
            transform: `scale(${logoEntry})`,
            opacity: logoEntry,
          }}
        >
          <span style={{ fontSize: 90, fontWeight: 800, letterSpacing: -2 }}>
            <span style={{ color: COLORS.white }}>MCP </span>
            <span
              style={{
                color: COLORS.primary,
                textShadow: `0 0 40px ${COLORS.primary}${Math.round(logoGlow * 255).toString(16).padStart(2, '0')}`,
              }}
            >
              Engage
            </span>
          </span>
          <div style={{ fontSize: 22, color: COLORS.gray, marginTop: 8, opacity: logoEntry }}>
            Managed OpenClaw & AI System Setups
          </div>
        </div>

        {/* CTA Button */}
        <div
          style={{
            position: 'absolute',
            top: 620,
            width: '100%',
            display: 'flex',
            justifyContent: 'center',
            transform: `scale(${btnPulse * btnEntry})`,
            opacity: btnEntry,
          }}
        >
          <AnimatedGlowBorder color1={COLORS.primary} color2={COLORS.secondary} borderRadius={32} speed={2}>
            <div
              style={{
                padding: '18px 56px',
                fontSize: 28,
                fontWeight: 700,
                color: COLORS.white,
                textAlign: 'center',
              }}
            >
              Book a Free Consultation
            </div>
          </AnimatedGlowBorder>
        </div>

        {/* Contact info */}
        <div
          style={{
            position: 'absolute',
            top: 740,
            width: '100%',
            textAlign: 'center',
            fontSize: 20,
            color: COLORS.gray,
            opacity: interpolate(subEntry, [0, 1], [0, 0.8]),
            transform: `translateY(${interpolate(subEntry, [0, 1], [15, 0])}px)`,
          }}
        >
          mcpengage.com
        </div>

        <ParticleField count={20} color={`${COLORS.primary}40`} drift="none" seed={11} />
      </div>

      {/* Fade to black */}
      <div
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: 1920,
          height: 1080,
          background: '#000',
          opacity: fadeOut,
          pointerEvents: 'none',
        }}
      />
    </div>
  );
};
