planpost-offer-landing/src/app/(features-landing)/ai-video-generator/page.tsx

'use client'

import React, { useState } from 'react';
import { 
  Check, 
  Clock, 
  Zap, 
  Video, 
  Image, 
  ArrowRight,
  Star,
  Sparkle,
  Rocket,
  Users,
  ShoppingCart,
  Building,
  GraduationCap,
  FileText,
 
  Palette,
  LucideProps
} from 'lucide-react';
import Link from 'next/link';

// TypeScript Interfaces
interface Feature {
  id: string;
  icon: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
  title: string;
  description: string;
  highlights: string[];
  examples?: {
    input?: string;
    output?: string;
  };
  gradient: string;
  popular?: boolean;
}

interface ProblemItem {
  icon: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
  title: string;
  description: string;
  stat: string;
  color: string;
}

interface StatItem {
  number: string;
  label: string;
}

interface Industry {
  icon: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
  name: string;
  description: string;
  useCases: string[];
  results: string;
}

interface FAQ {
  question: string;
  answer: string;
}

const AIVideoGenerator: React.FC = () => {
  const [activeFeature, setActiveFeature] = useState<string>('text-to-video');
  const [hoveredCard, setHoveredCard] = useState<string | null>(null);

  const features: Feature[] = [
    {
      id: 'text-to-video',
      icon: FileText,
      title: 'Text-to-Video Generation',
      description: 'Transform any text description into a complete, professional video. Our AI understands context, emotion, and storytelling to create videos that engage and convert.',
      highlights: [
        'Natural Language Understanding: The AI interprets your text and creates relevant visuals, motion, and pacing',
        'Automatic Scene Generation: Creates multiple scenes with smooth transitions based on your text structure',
        'Voiceover & Music Integration: Adds professional voiceovers and background music that matches your content tone',
        'Style Adaptation: Choose from cinematic, corporate, social media, educational, or custom styles',
        'Multiple Output Options: Generate 3-5 video variations and choose your favorite'
      ],
      examples: {
        input: 'Create a 60-second promotional video for our new coffee shop, showing morning customers enjoying artisanal coffee in a cozy atmosphere with warm lighting',
        output: 'Professional 60-second video with multiple scenes: coffee brewing, customers chatting, close-ups of coffee art, and text overlays about the coffee shop experience'
      },
      gradient: 'from-purple-500 to-pink-500',
      popular: true
    },
    {
      id: 'image-to-video',
      icon: Image,
      title: 'Image-to-Video Transformation',
      description: 'Bring your images to life with AI-powered animation and motion. Transform static photos into engaging video content that captures attention.',
      highlights: [
        'Smart Image Analysis: AI detects subjects, backgrounds, and focal points to create natural motion',
        'Multiple Animation Styles: Choose from ken burns effects, parallax scrolling, object animation, or custom motions',
        'Batch Processing: Transform multiple images into a cohesive video story automatically',
        'Background Enhancement: AI can replace or enhance backgrounds while keeping subjects sharp',
        'Slide Show to Video: Convert image collections into professional video presentations'
      ],
      examples: {
        input: 'Real estate property photos: living room, kitchen, bedroom, backyard',
        output: 'Smooth 45-second property tour video with panning effects, transitions between rooms, and text overlays highlighting features'
      },
      gradient: 'from-blue-500 to-cyan-500'
    }
  ];

  const problemItems: ProblemItem[] = [
    {
      icon: Zap,
      title: 'Prohibitively Expensive',
      description: 'Professional video production costs $1,000-$5,000 per minute. Most businesses can\'t afford consistent video content at these rates, missing out on video\'s 80% higher conversion rates.',
      stat: '$1,000-$5,000 per minute',
      color: 'red'
    },
    {
      icon: Clock,
      title: 'Time-Consuming Production',
      description: 'From scripting to filming to editing, creating one video can take 10-40 hours. The average marketer spends 15+ hours weekly trying to create basic video content.',
      stat: '10-40 hours per video',
      color: 'orange'
    },
    {
      icon: Video,
      title: 'Technical Skills Required',
      description: 'Learning complex editing software like Premiere Pro or After Effects takes months. Most businesses lack the in-house expertise to create professional-quality videos.',
      stat: 'Months of learning required',
      color: 'purple'
    },
    {
      icon: Palette,
      title: 'Inconsistent Quality',
      description: 'Amateur videos damage brand perception, while inconsistent quality across platforms confuses audiences and weakens your brand authority.',
      stat: 'Brand perception at risk',
      color: 'blue'
    }
  ];

  const stats: StatItem[] = [
    { number: '87%', label: 'of marketers say video is their most effective content' },
    { number: '$2,500', label: 'average cost per professional video' },
    { number: '12+', label: 'hours spent per video without AI' }
  ];

  const industries: Industry[] = [
    {
      icon: Users,
      name: 'Social Media & Marketing',
      description: 'Create engaging content for all social platforms with platform-optimized videos that drive engagement and conversions.',
      useCases: [
        'Instagram Reels & Stories',
        'TikTok viral content',
        'Facebook ads and posts',
        'YouTube shorts and content'
      ],
      results: 'Results: 300% engagement increase, 5x more content'
    },
    {
      icon: ShoppingCart,
      name: 'E-commerce & Retail',
      description: 'Generate product videos, demos, and promotional content that showcases products and drives sales.',
      useCases: [
        'Product demonstration videos',
        'Customer testimonial videos',
        'Promotional campaign videos',
        'Social commerce content'
      ],
      results: 'Results: 85% higher conversion, 3.2x ROAS'
    },
    {
      icon: Building,
      name: 'Corporate & Training',
      description: 'Create professional training materials, internal communications, and corporate presentations efficiently.',
      useCases: [
        'Employee training videos',
        'Internal communication',
        'Corporate announcements',
        'Process documentation'
      ],
      results: 'Results: 70% time savings, consistent quality'
    },
    {
      icon: GraduationCap,
      name: 'Education & Courses',
      description: 'Develop engaging educational content, course materials, and tutorial videos that improve learning outcomes.',
      useCases: [
        'Online course content',
        'Educational explainers',
        'Student engagement videos',
        'Tutorial and how-to content'
      ],
      results: 'Results: 45% better retention, scalable content'
    }
  ];

  const faqs: FAQ[] = [
    {
      question: 'How long does it take to generate a video?',
      answer: 'Most videos are generated in 1-3 minutes, depending on length and complexity. Our AI processes your request and creates multiple scenes, adds motion graphics, applies transitions, and integrates sound automatically. You\'ll have a complete, professional video ready in under 5 minutes.'
    },
    {
      question: 'What video quality can I expect?',
      answer: 'We deliver broadcast-quality videos up to 4K resolution. All videos include professional color grading, smooth transitions, and cinematic pacing. The quality rivals agency-produced videos but at a fraction of the cost and time. Higher-tier plans include 4K and HDR quality options.'
    },
    {
      question: 'Can I customize the AI-generated videos?',
      answer: 'Yes! All videos are fully customizable. You can edit text, swap images, adjust timing, change music, and modify colors. Our intuitive editor makes it easy to make quick changes without any technical skills. You can also regenerate specific scenes or the entire video with different styles.'
    },
    {
      question: 'Do you provide commercial rights for the videos?',
      answer: 'Yes, all videos generated with PlanPost AI include full commercial rights. You can use them for marketing, advertising, social media, websites, and any other business purposes. We also provide royalty-free music and stock footage where applicable.'
    },
    {
      question: 'How does the text-to-video AI understand my content?',
      answer: 'Our AI uses advanced natural language processing to understand context, emotion, and storytelling elements in your text. It analyzes your description to determine appropriate visuals, pacing, music, and style. The more detailed your description, the better the AI can match your vision.'
    },
    {
      question: 'What video formats and lengths are supported?',
      answer: 'We support all major video formats (MP4, MOV, AVI) and lengths from 15 seconds to 10 minutes. The AI automatically optimizes video length based on your target platform and content type. You can also specify exact duration preferences in your video description.'
    },
    {
      question: 'Can I use my own brand elements in the videos?',
      answer: 'Absolutely. You can upload your logo, brand colors, fonts, and other brand assets. The AI will incorporate these elements consistently across all generated videos. Enterprise plans include custom brand style training for complete brand consistency.'
    }
  ];

  const getColorClass = (color: string): string => {
    switch (color) {
      case 'red': return 'red';
      case 'orange': return 'orange';
      case 'purple': return 'purple';
      case 'blue': return 'blue';
      default: return 'purple';
    }
  };

  return (
    <div className="min-h-screen" style={{ background: 'linear-gradient(135deg, #c8bcf3a8 0%, #e5c5fdd0 100%)' }}>
      
      {/* Hero Section */}
      <section className="relative overflow-hidden">
        <div className="absolute inset-0">
          <div className="absolute top-10 left-10 w-72 h-72 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse"></div>
          <div className="absolute top-40 right-10 w-96 h-96 bg-pink-300 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse delay-75"></div>
        </div>

        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
          <div className="text-center">
            <div className="inline-flex items-center space-x-2 bg-white/80 text-[#6a47ed] px-6 py-3 rounded-full text-sm font-semibold mb-8 backdrop-blur-sm border border-white/40 shadow-lg">
              <Sparkle className="w-4 h-4" />
              <span>AI Video Generator</span>
            </div>
            
            <h1 className="text-5xl md:text-7xl font-bold text-black mb-6 leading-tight">
              AI Video Generator:
              <span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
                Create Professional Videos from Text & Images
              </span>
            </h1>
            
            <p className="text-xl md:text-2xl text-black/80 mb-8 max-w-4xl mx-auto leading-relaxed">
              Transform text and images into engaging, professional-quality videos in minutes. 
              Save 80% on video production costs and create video content 10x faster with AI.
            </p>

            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
              <Link href={"https://dashboard.planpostai.com/video-generation"}><button className="group relative bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] text-white px-10 py-5 rounded-2xl font-semibold text-lg hover:shadow-2xl transition-all duration-300 shadow-xl hover:scale-105 flex items-center space-x-3 overflow-hidden">
                <div className="absolute inset-0 bg-white/20 transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div>
                <Rocket className="w-6 h-6 relative z-10" />
                <span className="relative z-10">Start Your Free Trial</span>
                <ArrowRight className="w-5 h-5 relative z-10 group-hover:translate-x-1 transition-transform" />
              </button></Link>
              
              
            </div>

            <div className="flex items-center justify-center space-x-4 text-black/80 mb-8">
              <div className="flex items-center space-x-1">
                {[...Array(5)].map((_, i) => (
                  <Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
                ))}
              </div>
              <span className="font-medium">4.9/5 from 3,500+ video creators</span>
            </div>
          </div>
        </div>
      </section>

      {/* Problem Section */}
      <section className="py-20 bg-white/30 backdrop-blur-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold text-black mb-6">
              The Video Creation Struggle is
              <span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
                Real and Expensive
              </span>
            </h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
            {problemItems.map((item: ProblemItem, index: number) => (
              <div 
                key={index}
                className="group bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-lg hover:shadow-2xl transition-all duration-300 hover:scale-105"
              >
                <div className={`w-14 h-14 bg-${getColorClass(item.color)}-100 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`}>
                  <item.icon className={`w-7 h-7 text-${getColorClass(item.color)}-600`} />
                </div>
                <h3 className="text-xl font-bold text-black mb-4">{item.title}</h3>
                <p className="text-black/80 mb-4 leading-relaxed">{item.description}</p>
                <div className="bg-black/5 rounded-xl p-3 border border-black/10">
                  <p className="text-sm font-semibold text-black/70">{item.stat}</p>
                </div>
              </div>
            ))}
          </div>

          {/* Stats */}
          <div className="grid md:grid-cols-3 gap-8 text-center mb-12">
            {stats.map((stat: StatItem, index: number) => (
              <div key={index} className="bg-white/80 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-purple-100">
                <div className="text-3xl font-bold text-purple-600 mb-2">{stat.number}</div>
                <div className="text-gray-600 text-sm">{stat.label}</div>
              </div>
            ))}
          </div>

          <div className="text-center">
            <div className="bg-gradient-to-r from-[#6a47ed]/10 to-[#ff4ca5]/10 rounded-3xl p-8 border border-[#6a47ed]/20 max-w-2xl mx-auto backdrop-blur-sm">
              <h3 className="text-2xl md:text-3xl font-bold text-black mb-4">
                What if you could create studio-quality videos in minutes, without any technical skills?
              </h3>
            </div>
          </div>
        </div>
      </section>

      {/* AI Solution Section */}
      <section className="py-20" style={{ background: 'linear-gradient(135deg, #f9f1ff 0%, #e8ddff 100%)' }}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold text-black mb-6">
              Professional Video Creation
              <span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
                Made Simple with AI
              </span>
            </h2>
            <p className="text-xl text-black/80 max-w-3xl mx-auto">
              PlanPost AI transforms how businesses create video content. From simple text descriptions or existing images, 
              generate professional videos that engage audiences and drive results.
            </p>
          </div>

          <div className="grid lg:grid-cols-3 gap-8 mb-12">
            <div className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-lg">
              <div className="w-12 h-12 bg-[#6a47ed]/10 rounded-2xl flex items-center justify-center mb-4">
                <Rocket className="w-6 h-6 text-[#6a47ed]" />
              </div>
              <h3 className="text-xl font-bold text-black mb-4">Instant Video Generation</h3>
              <p className="text-black/80">
                Create complete videos from text prompts in under 2 minutes. No filming, no editing, no technical skills required.
              </p>
            </div>

            <div className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-lg">
              <div className="w-12 h-12 bg-[#ff4ca5]/10 rounded-2xl flex items-center justify-center mb-4">
                <Palette className="w-6 h-6 text-[#ff4ca5]" />
              </div>
              <h3 className="text-xl font-bold text-black mb-4">Studio-Quality Results</h3>
              <p className="text-black/80">
                Professional motion graphics, smooth transitions, and perfect pacing that rivals agency-produced videos.
              </p>
            </div>

            <div className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-lg">
              <div className="w-12 h-12 bg-[#6a47ed]/10 rounded-2xl flex items-center justify-center mb-4">
                <Video className="w-6 h-6 text-[#6a47ed]" />
              </div>
              <h3 className="text-xl font-bold text-black mb-4">Platform-Optimized</h3>
              <p className="text-black/80">
                Automatically format videos for Instagram, TikTok, YouTube, Facebook, and more with perfect dimensions and length.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-20 bg-white/30 backdrop-blur-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold text-black mb-6">
              Everything You Need to Create
              <span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
                Professional Videos with AI
              </span>
            </h2>
          </div>

          {/* Feature Navigation */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-12">
            {features.map((feature: Feature) => (
              <button
                key={feature.id}
                onClick={() => setActiveFeature(feature.id)}
                onMouseEnter={() => setHoveredCard(feature.id)}
                onMouseLeave={() => setHoveredCard(null)}
                className={`p-6 rounded-2xl text-left transition-all duration-300 backdrop-blur-sm border-2 ${
                  activeFeature === feature.id
                    ? 'bg-white shadow-xl border-[#6a47ed] transform scale-105'
                    : hoveredCard === feature.id
                    ? 'bg-white/80 shadow-lg border-white/40 transform scale-102'
                    : 'bg-white/50 border-white/20'
                }`}
              >
                <div className="flex items-start justify-between mb-4">
                  <div className={`w-12 h-12 rounded-xl flex items-center justify-center bg-gradient-to-r ${feature.gradient}`}>
                    <feature.icon className="w-6 h-6 text-white" />
                  </div>
                  {feature.popular && (
                    <span className="bg-[#ff4ca5] text-white text-xs px-2 py-1 rounded-full">Most Popular</span>
                  )}
                </div>
                <h3 className="font-bold text-black mb-2 text-left">{feature.title}</h3>
                <p className="text-black/70 text-sm text-left leading-relaxed">
                  {feature.description.split('.').slice(0, 2).join('.')}.
                </p>
              </button>
            ))}
          </div>

          {/* Active Feature Detail */}
          {features.map((feature: Feature) => (
            <div
              key={feature.id}
              className={`bg-white/80 backdrop-blur-sm rounded-3xl shadow-2xl border border-white/20 p-8 transition-all duration-500 ${
                activeFeature === feature.id ? 'block animate-fadeIn' : 'hidden'
              }`}
            >
              <div className="grid grid-cols-1 xl:grid-cols-2 gap-12">
                <div>
                  <div className="flex items-center space-x-4 mb-6">
                    <div className={`w-14 h-14 rounded-2xl flex items-center justify-center bg-gradient-to-r ${feature.gradient}`}>
                      <feature.icon className="w-7 h-7 text-white" />
                    </div>
                    <div>
                      <h3 className="text-3xl font-bold text-black">{feature.title}</h3>
                      <p className="text-black/70">{feature.description}</p>
                    </div>
                  </div>
                  
                  <div className="space-y-4">
                    {feature.highlights.map((highlight: string, index: number) => (
                      <div key={index} className="flex items-start space-x-4 p-4 bg-white/50 rounded-xl border border-white/30">
                        <div className="w-6 h-6 bg-[#6a47ed]/10 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
                          <Check className="w-4 h-4 text-[#6a47ed]" />
                        </div>
                        <span className="text-black/80 leading-relaxed">{highlight}</span>
                      </div>
                    ))}
                  </div>
                </div>

                <div className="space-y-6">
                  {feature.examples && (
                    <div className="bg-gradient-to-br from-[#6a47ed]/5 to-[#ff4ca5]/5 rounded-2xl p-6 border border-[#6a47ed]/10">
                      <h4 className="font-bold text-black mb-4 text-lg">
                        {feature.id === 'text-to-video' ? 'Text-to-Video Example' : 'Real Estate Example'}
                      </h4>
                      <div className="space-y-4">
                        <div>
                          <div className="flex items-center space-x-2 mb-2">
                            <div className="w-3 h-3 bg-[#6a47ed] rounded-full"></div>
                            <p className="text-sm font-semibold text-black/70">Input</p>
                          </div>
                          <div className="bg-white/60 rounded-xl p-4 border border-white/30">
                            <p className="text-black/80 font-medium">{feature.examples.input}</p>
                          </div>
                        </div>
                        <div>
                          <div className="flex items-center space-x-2 mb-2">
                            <div className="w-3 h-3 bg-[#ff4ca5] rounded-full"></div>
                            <p className="text-sm font-semibold text-black/70">AI Output</p>
                          </div>
                          <div className="bg-white/60 rounded-xl p-4 border border-white/30">
                            <p className="text-black/80 font-medium">{feature.examples.output}</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  )}

                  <div className="bg-gradient-to-br from-[#6a47ed]/5 to-[#ff4ca5]/5 rounded-2xl p-6 border border-[#6a47ed]/10">
                    <h4 className="font-bold text-black mb-4 text-lg">Video Specifications</h4>
                    <div className="grid grid-cols-2 gap-4">
                      <div className="text-center">
                        <div className="text-2xl font-bold text-[#6a47ed]">4K</div>
                        <div className="text-sm text-black/70">Maximum Resolution</div>
                      </div>
                      <div className="text-center">
                        <div className="text-2xl font-bold text-[#6a47ed]">1-3 min</div>
                        <div className="text-sm text-black/70">Generation Time</div>
                      </div>
                      <div className="text-center">
                        <div className="text-2xl font-bold text-[#6a47ed]">15s-10m</div>
                        <div className="text-sm text-black/70">Video Length</div>
                      </div>
                      <div className="text-center">
                        <div className="text-2xl font-bold text-[#6a47ed]">5</div>
                        <div className="text-sm text-black/70">Style Options</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Industries Section */}
      <section className="py-20" style={{ background: 'linear-gradient(135deg, #f9f1ff 0%, #e8ddff 100%)' }}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold text-black mb-6">
              Trusted by Businesses
              <span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
                Across Industries
              </span>
            </h2>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {industries.map((industry: Industry, index: number) => (
              <div key={index} className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-lg hover:shadow-2xl transition-all duration-300">
                <div className="w-14 h-14 bg-purple-100 rounded-2xl flex items-center justify-center mb-6">
                  <industry.icon className="w-7 h-7 text-purple-600" />
                </div>
                <h3 className="text-2xl font-bold text-black mb-4">{industry.name}</h3>
                <p className="text-black/80 mb-6 leading-relaxed">{industry.description}</p>
                
                <div className="space-y-2 mb-6">
                  {industry.useCases.map((useCase: string, idx: number) => (
                    <div key={idx} className="flex items-center gap-2 text-sm text-black/70">
                      <Check className="w-4 h-4 text-green-500" />
                      {useCase}
                    </div>
                  ))}
                </div>

                <div className="bg-purple-50 p-4 rounded-2xl border border-purple-200">
                  <p className="text-purple-700 text-sm font-semibold">{industry.results}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Setup Process */}
      <section className="py-20 bg-white/30 backdrop-blur-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold text-black mb-6">
              From Idea to Published Video
              <span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
                in Under 5 Minutes
              </span>
            </h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
            {[
              {
                step: 1,
                title: 'Describe Your Video',
                description: 'Enter your text prompt or upload images. Specify style, duration, and platform preferences.',
                content: '[Text input interface with style options]'
              },
              {
                step: 2,
                title: 'AI Generates Your Video',
                description: 'Our AI creates multiple video versions with professional editing, motion graphics, and sound.',
                content: '[AI generation progress indicator]'
              },
              {
                step: 3,
                title: 'Customize & Publish',
                description: 'Review, make quick edits if needed, and publish directly to your platforms or download.',
                content: '[Video editor with publishing options]'
              }
            ].map((item, index) => (
              <div key={index} className="text-center">
                <div className="w-20 h-20 bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] rounded-2xl flex items-center justify-center mx-auto mb-4 text-white font-bold text-xl">
                  {item.step}
                </div>
                <h3 className="text-xl font-bold text-black mb-4">{item.title}</h3>
                <p className="text-black/80 mb-4 leading-relaxed">{item.description}</p>
                <div className="bg-white/60 rounded-xl h-32 flex items-center justify-center border border-white/30">
                  <span className="text-black/50 text-sm">{item.content}</span>
                </div>
              </div>
            ))}
          </div>

          <div className="text-center mt-12">
            <button className="bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] text-white px-12 py-5 rounded-2xl font-semibold text-lg hover:shadow-2xl transition-all duration-300 shadow-xl hover:scale-105">
              Start Your Free Trial →
            </button>
            <p className="text-black/70 text-sm mt-4">
              No credit card required • Create your first video in 2 minutes • No video skills needed
            </p>
          </div>
        </div>
      </section>

      {/* FAQ Section */}
      <section className="py-20" style={{ background: 'linear-gradient(135deg, #f9f1ff 0%, #e8ddff 100%)' }}>
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold text-black mb-6">
              Frequently Asked
              <span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
                Questions
              </span>
            </h2>
          </div>

          <div className="space-y-6">
            {faqs.map((faq: FAQ, index: number) => (
              <div key={index} className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-lg">
                <h3 className="text-lg font-bold text-black mb-3">{faq.question}</h3>
                <p className="text-black/80 leading-relaxed">{faq.answer}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="py-20 bg-gradient-to-br from-[#6a47ed] to-[#ff4ca5] relative overflow-hidden">
        <div className="absolute inset-0 opacity-10">
          <div className="absolute top-0 left-0 w-32 h-32 bg-white rounded-full"></div>
          <div className="absolute top-0 right-0 w-48 h-48 bg-white rounded-full"></div>
        </div>

        <div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
            Start Creating Professional Videos
            <span className="block">in Minutes, Not Days</span>
          </h2>
          
          <p className="text-xl text-white/90 mb-8">
            Join 3,500+ businesses creating stunning video content with AI
          </p>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            {[
              { title: '80% Cost Savings', desc: 'Create videos for a fraction of traditional production costs' },
              { title: '10x Faster Creation', desc: 'Generate professional videos in minutes instead of days' },
              { title: 'No Skills Required', desc: 'Create studio-quality videos without any technical expertise' }
            ].map((item, index) => (
              <div key={index} className="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20">
                <h3 className="text-lg font-bold text-white mb-2">{item.title}</h3>
                <p className="text-white/80 text-sm">{item.desc}</p>
              </div>
            ))}
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl mx-auto mb-8">
            {[
              'Create videos from text descriptions',
              'Transform images into engaging videos',
              '4K broadcast-quality output',
              'Platform-optimized for all social media',
              'Full commercial rights included'
            ].map((benefit: string, index: number) => (
              <div key={index} className="flex items-center gap-3 text-white">
                <Check className="w-5 h-5 text-green-300" />
                <span>{benefit}</span>
              </div>
            ))}
          </div>

          <button className="bg-white text-[#6a47ed] px-12 py-5 rounded-2xl font-semibold text-lg hover:bg-slate-100 transition-all duration-300 shadow-2xl hover:shadow-3xl hover:scale-105 mb-4">
            Start Your 14-Day Free Trial →
          </button>
          
          <p className="text-white/80 text-sm">
            No credit card required • Create your first video today • 30-day money-back guarantee
          </p>
        </div>
      </section>
    </div>
  );
};

export default AIVideoGenerator;