"use client";
import { Container } from "@/components/container";
import { Card, CardContent } from "@/components/ui/card";
import { Upload, MessageSquare, Wand2, Download } from "lucide-react";

export function HowItWorks() {
  const steps = [
    {
      number: "01",
      icon: Upload,
      title: "Upload Your Video",
      description: "Drag and drop your raw footage. Supports all major video formats up to 500MB.",
    },
    {
      number: "02",
      icon: MessageSquare,
      title: "Describe Your Vision",
      description: "Tell AI what you want: fast cuts, music style, text overlays, and overall vibe.",
    },
    {
      number: "03",
      icon: Wand2,
      title: "AI Does the Magic",
      description: "Our AI analyzes, cuts, syncs music, adds text, and applies transitions automatically.",
    },
    {
      number: "04",
      icon: Download,
      title: "Download & Share",
      description: "Get your viral-ready video in minutes. Export in perfect format for any platform.",
    },
  ];

  return (
    <section id="how-it-works" className="py-20 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">
      <Container>
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-5xl font-bold mb-4">
            How It Works
          </h2>
          <p className="text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto text-lg">
            From raw footage to viral content in 4 simple steps
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-7xl mx-auto">
          {steps.map((step, index) => (
            <div key={index} className="relative">
              {/* Connector line */}
              {index < steps.length - 1 && (
                <div className="hidden lg:block absolute top-20 left-[60%] w-[80%] h-0.5 bg-gradient-to-r from-purple-500 to-blue-500 opacity-30" />
              )}
              
              <Card className="relative border-2 hover:border-purple-500 dark:hover:border-purple-500 transition-all hover:shadow-lg hover:shadow-purple-500/10 h-full">
                <CardContent className="pt-6">
                  {/* Step number */}
                  <div className="text-6xl font-bold text-purple-100 dark:text-purple-900/30 mb-4">
                    {step.number}
                  </div>
                  
                  {/* Icon */}
                  <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center mb-4 shadow-lg shadow-purple-500/30">
                    <step.icon className="w-7 h-7 text-white" />
                  </div>
                  
                  {/* Content */}
                  <h3 className="text-xl font-bold mb-2">{step.title}</h3>
                  <p className="text-neutral-600 dark:text-neutral-400">
                    {step.description}
                  </p>
                </CardContent>
              </Card>
            </div>
          ))}
        </div>

        {/* Time comparison */}
        <div className="mt-16 max-w-3xl mx-auto">
          <Card className="border-2 border-purple-200 dark:border-purple-800 bg-gradient-to-r from-purple-50 to-blue-50 dark:from-purple-950/30 dark:to-blue-950/30">
            <CardContent className="py-8">
              <div className="grid md:grid-cols-2 gap-8 text-center">
                <div>
                  <div className="text-sm text-neutral-600 dark:text-neutral-400 mb-2">Traditional Editing</div>
                  <div className="text-4xl font-bold text-neutral-400 dark:text-neutral-600 line-through">2-4 hours</div>
                </div>
                <div>
                  <div className="text-sm text-purple-600 dark:text-purple-400 mb-2">With AI Video Editor</div>
                  <div className="text-4xl font-bold bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">5 minutes</div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </Container>
    </section>
  );
}