// Save as: C:/Users/kmsge/Documents/sunmoonbay-scanner/ai-video-generator/src/App.jsx

import React, { useMemo, useState } from "react";
import { motion } from "framer-motion";
import { 
  Video, Sparkles, ShieldCheck, Wand2, Upload, Download, Clock, 
  CreditCard, Settings, Play, Image as ImageIcon, AlertTriangle, 
  Home, ArrowLeft, Menu, X, Zap, Star, Globe 
} from "lucide-react";

// Professional Banner Component
const ProfessionalBanner = ({ currentPage }) => {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  return (
    <div className="sticky top-0 z-50">
      {/* Top Banner */}
      <div className="bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600 text-white">
        <div className="mx-auto max-w-7xl px-4 py-2 text-center text-sm">
          <span className="inline-flex items-center gap-2">
            <Zap className="h-4 w-4" />
            🎬 Now featuring AI Video Generation! Create stunning videos from text prompts.
            <a href="/" className="underline underline-offset-2 hover:text-white/80">Back to Scanner →</a>
          </span>
        </div>
      </div>

      {/* Main Navigation Bar */}
      <nav className="border-b border-white/10 bg-slate-950/95 backdrop-blur-xl">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="flex h-16 items-center justify-between">
            {/* Logo and Brand */}
            <div className="flex items-center gap-3">
              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-purple-500 to-pink-500 shadow-lg">
                <Video className="h-5 w-5 text-white" />
              </div>
              <div>
                <p className="text-lg font-bold tracking-tight">VisionForge AI</p>
                <p className="text-xs text-slate-400">Professional Video Generation</p>
              </div>
            </div>

            {/* Desktop Navigation */}
            <div className="hidden md:flex md:items-center md:gap-6">
              <a href="/" className="flex items-center gap-2 text-sm text-slate-300 transition hover:text-white">
                <Home className="h-4 w-4" />
                Scanner Home
              </a>
              <a href="/ai-image-generator" className="flex items-center gap-2 text-sm text-slate-300 transition hover:text-white">
                <ImageIcon className="h-4 w-4" />
                AI Image Gen
              </a>
              <a href="#generator" className="flex items-center gap-2 text-sm text-white">
                <Video className="h-4 w-4" />
                Video Gen
              </a>
              <a href="#pricing" className="text-sm text-slate-300 transition hover:text-white">Pricing</a>
              <a href="#history" className="text-sm text-slate-300 transition hover:text-white">History</a>
              <Button className="rounded-xl bg-gradient-to-r from-purple-500 to-pink-500 text-white hover:from-purple-600 hover:to-pink-600">
                <Star className="mr-2 h-4 w-4" />
                Get Started
              </Button>
            </div>

            {/* Mobile menu button */}
            <button 
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
              className="rounded-lg p-2 text-white hover:bg-white/10 md:hidden"
            >
              {isMobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
            </button>
          </div>

          {/* Mobile Navigation */}
          {isMobileMenuOpen && (
            <div className="border-t border-white/10 py-4 md:hidden">
              <div className="flex flex-col gap-3">
                <a href="/" className="flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-slate-300 hover:bg-white/10">
                  <Home className="h-4 w-4" /> Scanner Home
                </a>
                <a href="/ai-image-generator" className="flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-slate-300 hover:bg-white/10">
                  <ImageIcon className="h-4 w-4" /> AI Image Generator
                </a>
                <a href="#generator" className="flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-white hover:bg-white/10">
                  <Video className="h-4 w-4" /> AI Video Generator
                </a>
              </div>
            </div>
          )}
        </div>
      </nav>
    </div>
  );
};

// Breadcrumb Navigation
const BreadcrumbNav = ({ currentPage }) => {
  return (
    <div className="mx-auto max-w-7xl px-5 py-4">
      <div className="flex items-center gap-2 text-sm text-slate-400">
        <a href="/" className="hover:text-white">Home</a>
        <span>/</span>
        <a href="/ai-video-generator" className="hover:text-white">AI Video Generator</a>
        <span>/</span>
        <span className="text-white">{currentPage}</span>
      </div>
    </div>
  );
};

const styles = ["Cinematic", "Anime", "Realistic", "3D Animation", "Commercial", "Music Video"];
const ratios = ["16:9", "9:16", "1:1"];
const durations = ["5s", "10s", "15s", "30s"];

const blockedTerms = ["minor sexual", "child nude", "deepfake celebrity", "kill real person", "credit card scam", "terror attack guide"];

function isPromptAllowed(prompt) {
  const lower = prompt.toLowerCase();
  return !blockedTerms.some((term) => lower.includes(term));
}

export default function AIVideoGeneratorApp() {
  const [prompt, setPrompt] = useState("");
  const [style, setStyle] = useState("Cinematic");
  const [ratio, setRatio] = useState("16:9");
  const [duration, setDuration] = useState("10s");
  const [imageName, setImageName] = useState("");
  const [isGenerating, setIsGenerating] = useState(false);
  const [error, setError] = useState("");
  const [jobs, setJobs] = useState([
    {
      id: 1,
      title: "Neon city fly-through",
      prompt: "A futuristic neon city at night, rain reflections, cinematic drone shot",
      style: "Cinematic",
      ratio: "16:9",
      duration: "10s",
      status: "Ready",
    },
  ]);

  const credits = useMemo(() => 42 - jobs.length * 2, [jobs.length]);

  function handleGenerate() {
    setError("");

    if (!prompt.trim()) {
      setError("Please enter a video prompt first.");
      return;
    }

    if (!isPromptAllowed(prompt)) {
      setError("This prompt is blocked because it may involve unsafe, illegal, or harmful content.");
      return;
    }

    setIsGenerating(true);

    setTimeout(() => {
      const newJob = {
        id: Date.now(),
        title: prompt.slice(0, 42) + (prompt.length > 42 ? "..." : ""),
        prompt,
        style,
        ratio,
        duration,
        status: "Ready",
      };
      setJobs([newJob, ...jobs]);
      setPrompt("");
      setImageName("");
      setIsGenerating(false);
    }, 1200);
  }

  return (
    <div className="min-h-screen bg-slate-950 text-white">
      <ProfessionalBanner currentPage="Video Generation" />
      <BreadcrumbNav currentPage="Create Video" />

      <main>
        <section className="mx-auto grid max-w-7xl gap-8 px-5 py-16 lg:grid-cols-[1.05fr_0.95fr] lg:py-24">
          <motion.div initial={{ opacity: 0, y: 18 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
            <div className="mb-5 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm text-slate-300">
              <Sparkles className="h-4 w-4" /> AI videos for ads, reels, stories, and product demos
            </div>
            <h1 className="text-5xl font-black leading-tight tracking-tight md:text-7xl">
              Create videos from text in minutes.
            </h1>
            <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-300">
              Turn prompts or images into polished videos with style presets, aspect ratios, generation credits, and safety checks built in.
            </p>
            <div className="mt-8 flex flex-col gap-3 sm:flex-row">
              <a href="#generator">
                <Button className="h-12 rounded-2xl bg-gradient-to-r from-purple-500 to-pink-500 px-6 text-base text-white hover:from-purple-600 hover:to-pink-600">
                  <Wand2 className="mr-2 h-5 w-5" /> Start generating
                </Button>
              </a>
              <Button variant="outline" className="h-12 rounded-2xl border-white/20 bg-white/5 px-6 text-base text-white hover:bg-white/10">
                <Play className="mr-2 h-5 w-5" /> Watch demo
              </Button>
            </div>
          </motion.div>

          <motion.div initial={{ opacity: 0, scale: 0.96 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.55 }}>
            <Card className="overflow-hidden rounded-[2rem] border-white/10 bg-white/5 shadow-2xl">
              <CardContent className="p-4">
                <div className="aspect-video rounded-[1.5rem] bg-gradient-to-br from-slate-800 via-slate-900 to-black p-5">
                  <div className="flex h-full flex-col justify-between rounded-2xl border border-white/10 bg-black/25 p-5">
                    <div className="flex items-center justify-between">
                      <span className="rounded-full bg-white/10 px-3 py-1 text-xs text-slate-300">Preview render</span>
                      <span className="flex items-center gap-2 text-xs text-slate-400"><Clock className="h-4 w-4" /> 00:10</span>
                    </div>
                    <div>
                      <div className="mb-4 h-24 rounded-2xl bg-white/10" />
                      <p className="text-sm text-slate-300">A cinematic product shot with floating particles and smooth camera motion.</p>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </motion.div>
        </section>

        <section id="generator" className="mx-auto grid max-w-7xl gap-6 px-5 py-8 lg:grid-cols-[1fr_380px]">
          <Card className="rounded-[2rem] border-white/10 bg-white/5 text-white">
            <CardContent className="p-6 md:p-8">
              <div className="mb-6 flex items-center justify-between gap-4">
                <div>
                  <h2 className="text-2xl font-bold">AI Video Generator</h2>
                  <p className="mt-1 text-sm text-slate-400">Describe your video. Choose settings. Generate.</p>
                </div>
                <div className="rounded-2xl bg-gradient-to-r from-purple-500 to-pink-500 px-4 py-2 text-sm font-semibold text-white">
                  {credits} credits
                </div>
              </div>

              <label className="text-sm font-medium text-slate-300">Prompt</label>
              <textarea
                value={prompt}
                onChange={(e) => setPrompt(e.target.value)}
                placeholder="Example: A luxury perfume bottle on black marble, golden light, slow rotating camera, cinematic style"
                className="mt-2 min-h-36 w-full rounded-3xl border border-white/10 bg-slate-900/80 p-4 text-white outline-none ring-0 placeholder:text-slate-500 focus:border-white/30"
              />

              <div className="mt-5 grid gap-4 md:grid-cols-3">
                <div>
                  <label className="text-sm font-medium text-slate-300">Style</label>
                  <select value={style} onChange={(e) => setStyle(e.target.value)} className="mt-2 w-full rounded-2xl border border-white/10 bg-slate-900 p-3 text-white outline-none">
                    {styles.map((item) => <option key={item}>{item}</option>)}
                  </select>
                </div>
                <div>
                  <label className="text-sm font-medium text-slate-300">Aspect ratio</label>
                  <select value={ratio} onChange={(e) => setRatio(e.target.value)} className="mt-2 w-full rounded-2xl border border-white/10 bg-slate-900 p-3 text-white outline-none">
                    {ratios.map((item) => <option key={item}>{item}</option>)}
                  </select>
                </div>
                <div>
                  <label className="text-sm font-medium text-slate-300">Duration</label>
                  <select value={duration} onChange={(e) => setDuration(e.target.value)} className="mt-2 w-full rounded-2xl border border-white/10 bg-slate-900 p-3 text-white outline-none">
                    {durations.map((item) => <option key={item}>{item}</option>)}
                  </select>
                </div>
              </div>

              <div className="mt-5 rounded-3xl border border-dashed border-white/15 bg-slate-900/50 p-5">
                <div className="flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
                  <div className="flex items-center gap-3">
                    <div className="rounded-2xl bg-white/10 p-3"><Upload className="h-5 w-5" /></div>
                    <div>
                      <p className="font-semibold">Optional image-to-video</p>
                      <p className="text-sm text-slate-400">Upload a product, character, or scene reference.</p>
                    </div>
                  </div>
                  <label className="cursor-pointer rounded-2xl bg-white/10 px-4 py-3 text-sm hover:bg-white/15">
                    Choose image
                    <input type="file" accept="image/*" className="hidden" onChange={(e) => setImageName(e.target.files?.[0]?.name || "")} />
                  </label>
                </div>
                {imageName && <p className="mt-3 text-sm text-slate-300"><ImageIcon className="mr-2 inline h-4 w-4" />{imageName}</p>}
              </div>

              {error && (
                <div className="mt-5 flex items-start gap-3 rounded-2xl border border-red-400/30 bg-red-500/10 p-4 text-sm text-red-100">
                  <AlertTriangle className="mt-0.5 h-5 w-5 shrink-0" />
                  <span>{error}</span>
                </div>
              )}

              <Button onClick={handleGenerate} disabled={isGenerating} className="mt-6 h-13 w-full rounded-2xl bg-gradient-to-r from-purple-500 to-pink-500 text-base font-bold text-white hover:from-purple-600 hover:to-pink-600">
                {isGenerating ? "Generating preview..." : "Generate Video"}
              </Button>
            </CardContent>
          </Card>

          <aside className="space-y-6">
            <Card className="rounded-[2rem] border-white/10 bg-white/5 text-white">
              <CardContent className="p-6">
                <div className="mb-4 flex items-center gap-3">
                  <ShieldCheck className="h-6 w-6 text-green-400" />
                  <h3 className="text-xl font-bold">Safety enabled</h3>
                </div>
                <p className="text-sm leading-6 text-slate-400">
                  Blocks illegal content, sexual content involving minors, harmful impersonation, scams, and direct violence against real people.
                </p>
              </CardContent>
            </Card>

            <Card className="rounded-[2rem] border-white/10 bg-white/5 text-white">
              <CardContent className="p-6">
                <div className="mb-4 flex items-center gap-3">
                  <Globe className="h-6 w-6 text-blue-400" />
                  <h3 className="text-xl font-bold">Multi-Platform</h3>
                </div>
                <p className="text-sm leading-6 text-slate-400">
                  Compatible with Runway, Luma, Replicate, Fal.ai, Kling, and major AI video APIs.
                </p>
              </CardContent>
            </Card>

            <Card className="rounded-[2rem] border-white/10 bg-white/5 text-white">
              <CardContent className="p-6">
                <div className="mb-4 flex items-center gap-3">
                  <Settings className="h-6 w-6" />
                  <h3 className="text-xl font-bold">Backend ready</h3>
                </div>
                <p className="text-sm leading-6 text-slate-400">
                  Connect this UI to your preferred video generation API in minutes.
                </p>
              </CardContent>
            </Card>
          </aside>
        </section>

        <section id="history" className="mx-auto max-w-7xl px-5 py-12">
          <div className="mb-6 flex items-center justify-between">
            <div>
              <h2 className="text-2xl font-bold">Generation History</h2>
              <p className="text-sm text-slate-400">Your generated videos appear here.</p>
            </div>
          </div>
          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            {jobs.map((job) => (
              <Card key={job.id} className="rounded-[2rem] border-white/10 bg-white/5 text-white">
                <CardContent className="p-4">
                  <div className="aspect-video rounded-3xl bg-slate-900 p-4">
                    <div className="flex h-full items-center justify-center rounded-2xl border border-white/10 bg-black/30">
                      <Play className="h-10 w-10 text-white/70" />
                    </div>
                  </div>
                  <div className="mt-4">
                    <p className="font-semibold">{job.title}</p>
                    <p className="mt-1 line-clamp-2 text-sm text-slate-400">{job.prompt}</p>
                    <div className="mt-3 flex flex-wrap gap-2 text-xs text-slate-300">
                      <span className="rounded-full bg-white/10 px-3 py-1">{job.style}</span>
                      <span className="rounded-full bg-white/10 px-3 py-1">{job.ratio}</span>
                      <span className="rounded-full bg-white/10 px-3 py-1">{job.duration}</span>
                    </div>
                    <Button variant="outline" className="mt-4 w-full rounded-2xl border-white/20 bg-white/5 text-white hover:bg-white/10">
                      <Download className="mr-2 h-4 w-4" /> Download
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </section>

        <section id="pricing" className="mx-auto max-w-7xl px-5 py-16">
          <div className="mb-8 text-center">
            <h2 className="text-3xl font-black">Simple Pricing</h2>
            <p className="mt-2 text-slate-400">Start free. Upgrade when your videos start doing pushups.</p>
          </div>
          <div className="grid gap-5 md:grid-cols-3">
            {[
              ["Starter", "$0", "20 credits/month", "Basic features"],
              ["Creator", "$19", "300 credits/month", "Pro features + API"],
              ["Studio", "$79", "1,500 credits/month", "Enterprise + Priority"],
            ].map(([name, price, feature, description]) => (
              <Card key={name} className="rounded-[2rem] border-white/10 bg-white/5 text-white transition hover:scale-105">
                <CardContent className="p-6">
                  <h3 className="text-xl font-bold">{name}</h3>
                  <p className="mt-4 text-4xl font-black">{price}</p>
                  <p className="mt-2 text-sm text-slate-400">{feature}</p>
                  <p className="mt-2 text-xs text-slate-500">{description}</p>
                  <Button className="mt-6 w-full rounded-2xl bg-gradient-to-r from-purple-500 to-pink-500 text-white hover:from-purple-600 hover:to-pink-600">
                    <CreditCard className="mr-2 h-4 w-4" /> Choose plan
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </section>
      </main>

      <footer className="border-t border-white/10 bg-slate-950 px-5 py-8">
        <div className="mx-auto max-w-7xl">
          <div className="grid gap-8 md:grid-cols-4">
            <div>
              <div className="flex items-center gap-2">
                <Video className="h-5 w-5" />
                <p className="font-bold">VisionForge AI</p>
              </div>
              <p className="mt-2 text-sm text-slate-500">Professional AI video generation for creators and businesses.</p>
            </div>
            <div>
              <p className="font-semibold">Product</p>
              <ul className="mt-2 space-y-1 text-sm text-slate-500">
                <li><a href="#generator" className="hover:text-white">Generator</a></li>
                <li><a href="#pricing" className="hover:text-white">Pricing</a></li>
                <li><a href="#history" className="hover:text-white">History</a></li>
              </ul>
            </div>
            <div>
              <p className="font-semibold">Resources</p>
              <ul className="mt-2 space-y-1 text-sm text-slate-500">
                <li><a href="/" className="hover:text-white">Scanner Home</a></li>
                <li><a href="/ai-image-generator" className="hover:text-white">AI Image Gen</a></li>
                <li><a href="#" className="hover:text-white">Documentation</a></li>
              </ul>
            </div>
            <div>
              <p className="font-semibold">Legal</p>
              <ul className="mt-2 space-y-1 text-sm text-slate-500">
                <li><a href="#" className="hover:text-white">Privacy</a></li>
                <li><a href="#" className="hover:text-white">Terms</a></li>
                <li><a href="#" className="hover:text-white">Safety</a></li>
              </ul>
            </div>
          </div>
          <div className="mt-8 border-t border-white/10 pt-8 text-center text-sm text-slate-500">
            © 2026 VisionForge AI. Built for safe AI video generation. All rights reserved.
          </div>
        </div>
      </footer>
    </div>
  );
}

// Note: Make sure you have the Button and Card components imported from your UI library
// If not, here are simple implementations:

const Button = ({ children, className, variant, onClick, disabled, ...props }) => {
  const baseStyles = "inline-flex items-center justify-center font-medium transition-colors focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed";
  const variants = {
    default: "bg-white text-slate-950 hover:bg-slate-200",
    outline: "border border-white/20 bg-white/5 text-white hover:bg-white/10",
  };
  
  return (
    <button
      className={`${baseStyles} ${variants[variant] || variants.default} ${className}`}
      onClick={onClick}
      disabled={disabled}
      {...props}
    >
      {children}
    </button>
  );
};

const Card = ({ children, className }) => (
  <div className={`bg-white/5 border border-white/10 ${className}`}>
    {children}
  </div>
);

const CardContent = ({ children, className }) => (
  <div className={className}>{children}</div>
);