"use client";

import { motion } from "framer-motion";
import { UserPlus, Upload, Shield, Vote, Trophy } from "lucide-react";

const steps = [
  {
    icon: UserPlus,
    step: "01",
    title: "Register",
    description: "Sign up with your SJEC email to participate in the competition.",
  },
  {
    icon: Upload,
    step: "02",
    title: "Submit",
    description: "Upload your artwork with title, description, and category details.",
  },
  {
    icon: Shield,
    step: "03",
    title: "Review",
    description: "Moderators review submissions to ensure guidelines are met.",
  },
  {
    icon: Vote,
    step: "04",
    title: "Public Voting",
    description: "The public votes for their favorite artworks in each category.",
  },
  {
    icon: Trophy,
    step: "05",
    title: "Results",
    description: "Winners are announced and celebrated across all categories.",
  },
];

export default function HowItWorks() {
  return (
    <section className="py-24 bg-black text-white overflow-hidden">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          className="text-center mb-16"
        >
          <span className="inline-block bg-lime-400 text-black px-4 py-1.5 text-xs font-bold tracking-wider rounded-full mb-4">
            HOW IT WORKS
          </span>
          <h2 className="text-4xl sm:text-5xl font-black tracking-tight mb-4">
            Your Journey to
            <span className="text-lime-400"> Victory</span>
          </h2>
          <p className="text-zinc-400 text-lg max-w-2xl mx-auto">
            From registration to winning, here's how ArtSplash works.
          </p>
        </motion.div>

        {/* Steps Timeline */}
        <div className="relative">
          {/* Connection Line */}
          <div className="absolute top-1/2 left-0 right-0 h-0.5 bg-zinc-800 hidden lg:block" />

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-8 lg:gap-4">
            {steps.map((step, index) => (
              <motion.div
                key={step.step}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: index * 0.1 }}
                className="relative"
              >
                {/* Card */}
                <div className="bg-zinc-900 rounded-2xl p-6 h-full border border-zinc-800 hover:border-lime-400/50 transition-colors group">
                  {/* Step Number */}
                  <div className="relative z-10 w-12 h-12 rounded-full bg-lime-400 text-black font-black text-sm flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                    {step.step}
                  </div>

                  {/* Icon */}
                  <step.icon className="w-8 h-8 text-lime-400 mb-4" />

                  {/* Content */}
                  <h3 className="text-xl font-bold mb-2">{step.title}</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    {step.description}
                  </p>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}