/**
 * ElevenLabs-Style Simple Example
 * 
 * A minimal version showing the core patterns:
 * - Dark background with glow
 * - Word-by-word text reveal
 * - Gradient accent text
 * 
 * Great starting point for premium SaaS videos.
 */

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

// Style constants
const COLORS = {
  bg: "#0a0a0a",
  purple: "#7c3aed",
  cyan: "#06b6d4",
};

// Animated background glow
const GlowOrb: React.FC = () => {
  const frame = useCurrentFrame();
  const scale = interpolate(Math.sin(frame * 0.02), [-1, 1], [0.9, 1.1]);

  return (
    <div
      style={{
        position: "absolute",
        width: 600,
        height: 600,
        left: "50%",
        top: "50%",
        transform: `translate(-50%, -50%) scale(${scale})`,
        background: `radial-gradient(circle, rgba(124,58,237,0.3) 0%, transparent 70%)`,
        filter: "blur(80px)",
      }}
    />
  );
};

// Main headline with word-by-word reveal
const Headline: React.FC<{ text: string }> = ({ text }) => (
  <AnimatedText
    transition={{
      y: [60, 0],
      opacity: [0, 1],
      blur: [15, 0],
      split: "word",
      splitStagger: 4,
      duration: 25,
      easing: "easeOutCubic",
    }}
    style={{
      fontSize: 96,
      fontWeight: 800,
      color: "white",
      textAlign: "center",
      lineHeight: 1.1,
    }}
  >
    {text}
  </AnimatedText>
);

// Gradient subtext
const Subtext: React.FC<{ text: string }> = ({ text }) => (
  <AnimatedText
    transition={{
      y: [30, 0],
      opacity: [0, 1],
      duration: 20,
      easing: "easeOutCubic",
    }}
    style={{
      fontSize: 36,
      fontWeight: 600,
      background: `linear-gradient(90deg, ${COLORS.purple}, ${COLORS.cyan})`,
      WebkitBackgroundClip: "text",
      WebkitTextFillColor: "transparent",
    }}
  >
    {text}
  </AnimatedText>
);

export default function ElevenLabsSimple() {
  return (
    <AbsoluteFill
      style={{
        background: COLORS.bg,
        justifyContent: "center",
        alignItems: "center",
        flexDirection: "column",
        gap: 24,
      }}
    >
      <GlowOrb />

      <Headline text="Build Voice AI" />

      <Sequence from={30}>
        <Subtext text="In minutes, not months" />
      </Sequence>
    </AbsoluteFill>
  );
}

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