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 { GlassCard, AnimatedGlowBorder } from '../components/GlassCard';
import { KineticText, FlipCounter } from '../components/KineticText';

const plans = [
  {
    name: 'Starter',
    price: 2499,
    color: COLORS.accent,
    featured: false,
    features: ['3 MCP Servers', '1 Channel', 'Basic Memory', 'Setup & Training'],
  },
  {
    name: 'Standard',
    price: 7499,
    color: COLORS.primary,
    featured: false,
    features: ['15 MCP Servers', '5 Channels', 'Full Memory', 'Managed Support'],
  },
  {
    name: 'White Glove',
    price: 24999,
    color: COLORS.primary,
    featured: true,
    features: ['30+ MCP Servers', 'All Channels', 'Custom AI Systems', 'Dedicated Team'],
  },
];

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

  return (
    <div
      style={{
        width: 1920,
        height: 1080,
        fontFamily: FONT,
        position: 'relative',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        overflow: 'hidden',
      }}
    >
      <MeshBackground color1={COLORS.primary} color2={COLORS.secondary} intensity={0.12} />

      {/* Title */}
      <div style={{ marginTop: 50, position: 'relative', zIndex: 2 }}>
        <KineticText
          text="MCP Engage — Managed AI Setup Pricing"
          highlightWords={['MCP', 'Engage']}
          highlightColor={COLORS.primary}
          fontSize={44}
          animationType="slideUp"
        />
      </div>

      {/* Cards */}
      <div
        style={{
          display: 'flex',
          gap: 36,
          marginTop: 55,
          alignItems: 'flex-start',
          position: 'relative',
          zIndex: 2,
        }}
      >
        {plans.map((plan, i) => {
          const delay = 20 + i * 12;
          const entry = spring({ frame: frame - delay, fps, config: SPRING.smooth });
          const translateY = interpolate(entry, [0, 1], [80, 0]);

          const cardWidth = plan.featured ? 420 : 370;
          const cardInner = (
            <div style={{ padding: '36px 32px' }}>
              {/* Badge */}
              {plan.featured && (
                <div
                  style={{
                    position: 'absolute',
                    top: -14,
                    right: 20,
                    background: `linear-gradient(135deg, ${COLORS.primary}, ${COLORS.secondary})`,
                    color: COLORS.white,
                    fontSize: 11,
                    fontWeight: 700,
                    padding: '6px 18px',
                    borderRadius: 20,
                    transform: `scale(${spring({ frame: frame - delay - 15, fps, config: SPRING.bouncy })})`,
                    letterSpacing: 1,
                  }}
                >
                  MOST POPULAR
                </div>
              )}

              <div style={{ fontSize: 22, fontWeight: 600, color: COLORS.gray }}>{plan.name}</div>

              <div style={{ marginTop: 12, display: 'flex', alignItems: 'baseline', gap: 4 }}>
                <span style={{ fontSize: 24, fontWeight: 700, color: COLORS.gray }}>$</span>
                <FlipCounter
                  value={plan.price}
                  startDelay={delay + 8}
                  duration={40}
                  fontSize={56}
                  color={COLORS.white}
                />
              </div>
              <div style={{ fontSize: 15, color: COLORS.gray, marginTop: 4 }}>managed setup</div>

              {/* Feature list */}
              <div style={{ marginTop: 28 }}>
                {plan.features.map((feat, fi) => {
                  const featOp = interpolate(
                    frame,
                    [delay + 30 + fi * 6, delay + 38 + fi * 6],
                    [0, 1],
                    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' },
                  );
                  const featY = interpolate(
                    frame,
                    [delay + 30 + fi * 6, delay + 38 + fi * 6],
                    [10, 0],
                    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' },
                  );

                  return (
                    <div
                      key={fi}
                      style={{
                        fontSize: 16,
                        color: COLORS.white,
                        marginBottom: 14,
                        opacity: featOp,
                        transform: `translateY(${featY}px)`,
                        display: 'flex',
                        alignItems: 'center',
                        gap: 10,
                      }}
                    >
                      <span style={{ color: plan.color, fontSize: 14 }}>✓</span>
                      {feat}
                    </div>
                  );
                })}
              </div>
            </div>
          );

          return (
            <div
              key={i}
              style={{
                width: cardWidth,
                transform: `translateY(${translateY}px) ${plan.featured ? 'scale(1.04)' : ''}`,
                opacity: entry,
                position: 'relative',
              }}
            >
              {plan.featured ? (
                <AnimatedGlowBorder color1={COLORS.primary} color2={COLORS.secondary} borderRadius={20} speed={1.2}>
                  {cardInner}
                </AnimatedGlowBorder>
              ) : (
                <GlassCard delay={0} padding={0} animateFrom="none" borderColor={`${plan.color}25`}>
                  {cardInner}
                </GlassCard>
              )}
            </div>
          );
        })}
      </div>

      <ParticleField count={25} color={`${COLORS.primary}50`} drift="up" seed={33} />
    </div>
  );
};
