"use client";

import { useRef, useEffect } from "react";
import { motion, useAnimation, useInView, Variants } from "framer-motion";
import { Search, UserCheck, Briefcase, Sparkles, ArrowRight } from "lucide-react";

export default function HowItWorks() {
  const controls = useAnimation();
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, amount: 0.2 });

  useEffect(() => {
    if (isInView) {
      controls.start("visible");
    }
  }, [controls, isInView]);

  const fadeUp: Variants = {
    hidden: { opacity: 0, y: 30 },
    visible: { 
      opacity: 1, 
      y: 0,
      transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] }
    }
  };

  const staggerContainer: Variants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.15,
        delayChildren: 0.2
      }
    }
  };

  const steps = [
    {
      number: "01",
      title: "Create Account",
      description: "Sign up in minutes and set up your professional profile.",
      icon: Search
    },
    {
      number: "02",
      title: "Find Opportunities",
      description: "Browse jobs and connect with employers looking for your skills.",
      icon: Briefcase
    },
    {
      number: "03",
      title: "Get Hired",
      description: "Land your dream job and start making Kingdom impact.",
      icon: UserCheck
    }
  ];

  return (
    <section className="relative bg-white py-16 sm:py-20 overflow-hidden">
      <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-12">
        <motion.div
          ref={ref}
          variants={staggerContainer}
          initial="hidden"
          animate={controls}
          className="text-center"
        >
          {/* Badge */}
          <motion.div variants={fadeUp} className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-sky-50 border border-sky-200 mb-4">
            <Sparkles className="w-3.5 h-3.5 text-sky-600" />
            <span className="text-[9px] font-black tracking-wider text-sky-700 uppercase">Simple Process</span>
          </motion.div>

          {/* Heading */}
          <motion.h2 
            variants={fadeUp}
            className="text-2xl sm:text-3xl font-black tracking-tight text-slate-900 mb-2"
          >
            How It{' '}
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-sky-600 to-blue-600">
              Works
            </span>
          </motion.h2>

          {/* Subtitle */}
          <motion.p 
            variants={fadeUp}
            className="text-sm text-slate-600 max-w-md mx-auto mb-10"
          >
            Three simple steps to start your journey
          </motion.p>

          {/* Steps Grid */}
          <div className="grid md:grid-cols-3 gap-6">
            {steps.map((step, index) => {
              const Icon = step.icon;
              return (
                <motion.div
                  key={index}
                  variants={fadeUp}
                  className="relative text-center group"
                >
                  {/* Connector Line (desktop) */}
                  {index < steps.length - 1 && (
                    <div className="hidden md:block absolute top-10 left-[60%] w-[30%] h-[1px] bg-gradient-to-r from-sky-200 to-transparent" />
                  )}
                  
                  {/* Step Number */}
                  <div className="text-5xl font-black text-slate-200 mb-3">
                    {step.number}
                  </div>
                  
                  {/* Icon */}
                  <div className="inline-flex p-3 rounded-xl bg-gradient-to-r from-sky-100 to-blue-100 mb-4 group-hover:scale-110 transition-transform duration-300">
                    <Icon className="w-6 h-6 text-sky-600" />
                  </div>
                  
                  {/* Title */}
                  <h3 className="text-lg font-bold text-slate-900 mb-2">
                    {step.title}
                  </h3>
                  
                  {/* Description */}
                  <p className="text-sm text-slate-600 leading-relaxed">
                    {step.description}
                  </p>
                </motion.div>
              );
            })}
          </div>
        </motion.div>
      </div>
    </section>
  );
}