/**
 * ElevenLabs-Style Promo Video
 * 
 * A polished 12-second product promo demonstrating the premium SaaS aesthetic:
 * - Dark background with animated glow orbs
 * - Word-by-word text reveals with blur
 * - Gradient accent text
 * - Glass morphism feature cards with stagger
 * - Gradient CTA button
 * 
 * Use this as a reference for AI/SaaS product videos.
 * 
 * Duration: 12 seconds (360 frames at 30fps)
 * Resolution: 1920x1080 (landscape)
 */

import React from "react";
import {
  AbsoluteFill,
  Sequence,
  useCurrentFrame,
  interpolate,
} from "remotion";
import { AnimatedText, StaggeredMotion } from "remotion-bits";

// =============================================================================
// STYLE TOKENS — The ElevenLabs Palette
// =============================================================================

const colors = {
  bg: "#0a0a0a",
  purple: "#7c3aed",
  cyan: "#06b6d4",
  text: "#ffffff",
  textMuted: "rgba(255,255,255,0.6)",
  cardBg: "rgba(255,255,255,0.05)",
  cardBorder: "rgba(255,255,255,0.1)",
  glowPurple: "rgba(124,58,237,0.3)",
  glowCyan: "rgba(6,182,212,0.25)",
};

// =============================================================================
// REUSABLE COMPONENTS
// =============================================================================

/**
 * Animated glow orb — creates ambient depth
 * Use 1-2 per scene, positioned off-center
 */
const GlowOrb: React.FC<{ 
  color?: string; 
  x?: string; 
  y?: string;
  size?: number;
}> = ({
  color = colors.glowPurple,
  x = "50%",
  y = "50%",
  size = 600,
}) => {
  const frame = useCurrentFrame();
  const scale = interpolate(Math.sin(frame * 0.02), [-1, 1], [0.9, 1.1]);

  return (
    <div
      style={{
        position: "absolute",
        width: size,
        height: size,
        left: x,
        top: y,
        transform: `translate(-50%, -50%) scale(${scale})`,
        background: `radial-gradient(circle, ${color} 0%, transparent 70%)`,
        filter: "blur(80px)",
        pointerEvents: "none",
      }}
    />
  );
};

/**
 * Gradient text — for subheadings and accents
 */
const GradientText: React.FC<{
  children: React.ReactNode;
  fontSize?: number;
}> = ({ children, fontSize = 32 }) => (
  <AnimatedText
    transition={{
      y: [30, 0],
      opacity: [0, 1],
      duration: 20,
      easing: "easeOutCubic",
    }}
    style={{
      fontSize,
      fontWeight: 600,
      background: `linear-gradient(90deg, ${colors.purple}, ${colors.cyan})`,
      WebkitBackgroundClip: "text",
      WebkitTextFillColor: "transparent",
    }}
  >
    {children}
  </AnimatedText>
);

/**
 * Glass card — for feature showcases
 */
const GlassCard: React.FC<{
  icon: string;
  title: string;
  description: string;
  width?: number;
}> = ({ icon, title, description, width = 280 }) => (
  <div
    style={{
      width,
      padding: 32,
      background: colors.cardBg,
      borderRadius: 24,
      border: `1px solid ${colors.cardBorder}`,
      backdropFilter: "blur(20px)",
      WebkitBackdropFilter: "blur(20px)",
      textAlign: "center",
    }}
  >
    <div style={{ fontSize: 48, marginBottom: 16 }}>{icon}</div>
    <div
      style={{
        fontSize: 22,
        fontWeight: 700,
        color: colors.text,
        marginBottom: 8,
      }}
    >
      {title}
    </div>
    <div style={{ fontSize: 16, color: colors.textMuted }}>
      {description}
    </div>
  </div>
);

// =============================================================================
// SCENES
// =============================================================================

/**
 * Scene 1: Logo Reveal (0-2s)
 * Simple, confident logo appearance with glow
 */
const LogoScene: React.FC = () => (
  <AbsoluteFill
    style={{
      background: colors.bg,
      justifyContent: "center",
      alignItems: "center",
    }}
  >
    <GlowOrb />
    <AnimatedText
      transition={{
        scale: [0.8, 1],
        opacity: [0, 1],
        blur: [20, 0],
        duration: 30,
        easing: "easeOutCubic",
      }}
      style={{
        fontSize: 80,
        fontWeight: 700,
        color: colors.text,
        letterSpacing: -2,
      }}
    >
      VibeEditing
    </AnimatedText>
  </AbsoluteFill>
);

/**
 * Scene 2: Hero Statement (2-5s)
 * The signature word-by-word reveal with gradient subtext
 */
const HeroScene: React.FC = () => (
  <AbsoluteFill
    style={{
      background: colors.bg,
      justifyContent: "center",
      alignItems: "center",
      flexDirection: "column",
      gap: 24,
    }}
  >
    {/* Dual glow orbs for depth */}
    <GlowOrb color={colors.glowCyan} x="30%" y="40%" />
    <GlowOrb color={colors.glowPurple} x="70%" y="60%" />

    {/* Main headline — word-by-word with blur */}
    <AnimatedText
      transition={{
        y: [60, 0],
        opacity: [0, 1],
        blur: [15, 0],
        split: "word",
        splitStagger: 4,
        duration: 25,
        easing: "easeOutCubic",
      }}
      style={{
        fontSize: 72,
        fontWeight: 800,
        color: colors.text,
        textAlign: "center",
        lineHeight: 1.1,
      }}
    >
      Create Videos with AI
    </AnimatedText>

    {/* Gradient subtext — delayed entrance */}
    <Sequence from={35}>
      <GradientText fontSize={32}>
        Just describe what you want
      </GradientText>
    </Sequence>
  </AbsoluteFill>
);

/**
 * Scene 3: Feature Cards (5-9s)
 * Staggered glass cards showcasing key features
 */
const FeaturesScene: React.FC = () => {
  const features = [
    { icon: "💬", title: "Chat Interface", desc: "Describe your vision" },
    { icon: "🎬", title: "Instant Preview", desc: "See results in seconds" },
    { icon: "✨", title: "Pro Quality", desc: "Export in 4K" },
  ];

  return (
    <AbsoluteFill
      style={{
        background: colors.bg,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <GlowOrb color={colors.glowPurple} x="50%" y="50%" size={700} />

      <StaggeredMotion
        transition={{
          y: [80, 0],
          opacity: [0, 1],
          scale: [0.9, 1],
          stagger: 10,
          duration: 30,
          easing: "easeOutCubic",
        }}
        style={{ display: "flex", gap: 32 }}
      >
        {features.map((f, i) => (
          <GlassCard
            key={i}
            icon={f.icon}
            title={f.title}
            description={f.desc}
          />
        ))}
      </StaggeredMotion>
    </AbsoluteFill>
  );
};

/**
 * Scene 4: Call to Action (9-12s)
 * Final push with gradient button
 */
const CTAScene: React.FC = () => (
  <AbsoluteFill
    style={{
      background: colors.bg,
      justifyContent: "center",
      alignItems: "center",
      flexDirection: "column",
      gap: 32,
    }}
  >
    <GlowOrb />

    {/* CTA headline */}
    <AnimatedText
      transition={{
        y: [40, 0],
        opacity: [0, 1],
        blur: [10, 0],
        split: "word",
        splitStagger: 3,
        duration: 20,
        easing: "easeOutCubic",
      }}
      style={{
        fontSize: 64,
        fontWeight: 800,
        color: colors.text,
        textAlign: "center",
      }}
    >
      Start Creating Now
    </AnimatedText>

    {/* Gradient button — bouncy entrance */}
    <Sequence from={30}>
      <AnimatedText
        transition={{
          scale: [0.9, 1],
          opacity: [0, 1],
          duration: 20,
          easing: "easeOutBack",  // Slight overshoot for button
        }}
        style={{
          fontSize: 24,
          fontWeight: 600,
          color: colors.bg,
          background: `linear-gradient(135deg, ${colors.purple}, ${colors.cyan})`,
          padding: "18px 40px",
          borderRadius: 50,
        }}
      >
        Try Free →
      </AnimatedText>
    </Sequence>
  </AbsoluteFill>
);

// =============================================================================
// MAIN COMPOSITION
// =============================================================================

export default function GeneratedVideo() {
  return (
    <AbsoluteFill style={{ background: colors.bg }}>
      {/* Scene 1: Logo (0-2s) */}
      <Sequence from={0} durationInFrames={60}>
        <LogoScene />
      </Sequence>

      {/* Scene 2: Hero (2-5s) */}
      <Sequence from={60} durationInFrames={90}>
        <HeroScene />
      </Sequence>

      {/* Scene 3: Features (5-9s) */}
      <Sequence from={150} durationInFrames={120}>
        <FeaturesScene />
      </Sequence>

      {/* Scene 4: CTA (9-12s) */}
      <Sequence from={270} durationInFrames={90}>
        <CTAScene />
      </Sequence>
    </AbsoluteFill>
  );
}

// <!-- CONFIG: {"durationInFrames": 360, "fps": 30, "width": 1920, "height": 1080} -->
