"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Button } from "@/components/ui/button";
import { Sparkles, Video, Zap } from "lucide-react";

export function Hero() {
  return (
    <section className="relative py-20 md:py-32 overflow-hidden">
      {/* Background gradient */}
      <div className="absolute inset-0 bg-gradient-to-br from-purple-50 via-white to-blue-50 dark:from-purple-950/20 dark:via-neutral-950 dark:to-blue-950/20" />
      
      {/* Animated background elements */}
      <div className="absolute top-20 left-10 w-72 h-72 bg-purple-300 dark:bg-purple-600 rounded-full mix-blend-multiply dark:mix-blend-soft-light filter blur-xl opacity-20 animate-blob" />
      <div className="absolute top-40 right-10 w-72 h-72 bg-blue-300 dark:bg-blue-600 rounded-full mix-blend-multiply dark:mix-blend-soft-light filter blur-xl opacity-20 animate-blob animation-delay-2000" />
      <div className="absolute -bottom-8 left-1/2 w-72 h-72 bg-pink-300 dark:bg-pink-600 rounded-full mix-blend-multiply dark:mix-blend-soft-light filter blur-xl opacity-20 animate-blob animation-delay-4000" />
      
      <Container className="relative z-10">
        <div className="flex flex-col items-center text-center space-y-8">
          {/* Badge */}
          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-purple-100 dark:bg-purple-900/30 border border-purple-200 dark:border-purple-800">
            <Sparkles className="w-4 h-4 text-purple-600 dark:text-purple-400" />
            <span className="text-sm font-medium text-purple-900 dark:text-purple-300">
              AI-Powered Video Editing
            </span>
          </div>

          {/* Main heading */}
          <Heading className="max-w-4xl">
            Turn Raw Clips Into{" "}
            <span className="bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">
              Viral Reels
            </span>{" "}
            in Minutes
          </Heading>

          {/* Subheading */}
          <Subheading className="max-w-2xl">
            Upload your video, describe your vision, and let AI handle the editing.
            Fast cuts, music sync, text overlays, and professional transitions—all automated.
          </Subheading>

          {/* CTA buttons */}
          <div className="flex flex-col sm:flex-row gap-4 mt-8">
            <Button size="lg" className="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white shadow-lg shadow-purple-500/30">
              <Video className="w-5 h-5 mr-2" />
              Start Editing Free
            </Button>
            <Button size="lg" variant="outline" className="border-2">
              <Zap className="w-5 h-5 mr-2" />
              See Examples
            </Button>
          </div>

          {/* Stats */}
          <div className="flex flex-wrap justify-center gap-8 mt-12 pt-8 border-t border-neutral-200 dark:border-neutral-800">
            <div className="text-center">
              <div className="text-3xl font-bold text-neutral-900 dark:text-white">10M+</div>
              <div className="text-sm text-neutral-600 dark:text-neutral-400">Videos Edited</div>
            </div>
            <div className="text-center">
              <div className="text-3xl font-bold text-neutral-900 dark:text-white">2.5x</div>
              <div className="text-sm text-neutral-600 dark:text-neutral-400">Faster Editing</div>
            </div>
            <div className="text-center">
              <div className="text-3xl font-bold text-neutral-900 dark:text-white">98%</div>
              <div className="text-sm text-neutral-600 dark:text-neutral-400">Satisfaction Rate</div>
            </div>
          </div>
        </div>
      </Container>

      <style jsx>{`
        @keyframes blob {
          0%, 100% { transform: translate(0, 0) scale(1); }
          33% { transform: translate(30px, -50px) scale(1.1); }
          66% { transform: translate(-20px, 20px) scale(0.9); }
        }
        .animate-blob {
          animation: blob 7s infinite;
        }
        .animation-delay-2000 {
          animation-delay: 2s;
        }
        .animation-delay-4000 {
          animation-delay: 4s;
        }
      `}</style>
    </section>
  );
}