"use client";
import { Container } from "@/components/container";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { 
  Scissors, 
  Music, 
  Type, 
  Sparkles, 
  Zap, 
  Palette,
  Brain,
  Clock,
  TrendingUp
} from "lucide-react";

export function Features() {
  const features = [
    {
      icon: Brain,
      title: "AI-Powered Editing",
      description: "Advanced AI analyzes your footage and automatically identifies the best moments, cuts boring parts, and maintains perfect pacing.",
    },
    {
      icon: Scissors,
      title: "Smart Auto-Cut",
      description: "Removes silences, pauses, and filler words. Keeps only the most engaging content that hooks viewers instantly.",
    },
    {
      icon: Music,
      title: "Beat-Synced Music",
      description: "Add trending music that syncs perfectly with your cuts. AI matches transitions to the beat for maximum impact.",
    },
    {
      icon: Type,
      title: "Dynamic Text Overlays",
      description: "Auto-generate captions with bold, animated text. Highlight key words and phrases that grab attention.",
    },
    {
      icon: Sparkles,
      title: "Pro Transitions",
      description: "Smooth zoom effects, whip pans, and motion blur transitions that make your content look professionally edited.",
    },
    {
      icon: Palette,
      title: "Color Grading",
      description: "Apply cinematic color grades and corrections automatically. Make your videos pop with vibrant, consistent colors.",
    },
    {
      icon: Clock,
      title: "10x Faster",
      description: "What takes hours in traditional editing software happens in minutes. Upload, instruct, and download—that's it.",
    },
    {
      icon: TrendingUp,
      title: "Viral Optimization",
      description: "Trained on millions of viral videos. AI knows what works and applies proven patterns to maximize engagement.",
    },
    {
      icon: Zap,
      title: "One-Click Export",
      description: "Export in perfect formats for Instagram Reels, YouTube Shorts, or TikTok. Optimized resolution and aspect ratios.",
    },
  ];

  return (
    <section id="features" className="py-20">
      <Container>
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-5xl font-bold mb-4">
            Everything You Need to Go{" "}
            <span className="bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">
              Viral
            </span>
          </h2>
          <p className="text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto text-lg">
            Professional video editing features powered by AI. No experience needed.
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {features.map((feature, index) => (
            <Card 
              key={index}
              className="border-2 hover:border-purple-500 dark:hover:border-purple-500 transition-all hover:shadow-lg hover:shadow-purple-500/10"
            >
              <CardHeader>
                <div className="w-12 h-12 rounded-lg bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center mb-4">
                  <feature.icon className="w-6 h-6 text-white" />
                </div>
                <CardTitle className="text-xl">{feature.title}</CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription className="text-base">
                  {feature.description}
                </CardDescription>
              </CardContent>
            </Card>
          ))}
        </div>
      </Container>
    </section>
  );
}