"use client";
import { Container } from "@/components/container";
import { motion } from "framer-motion";
import { ArrowRight } from "lucide-react";

export function CareerFlow() {
  const steps = [
    {
      number: "01",
      titleBn: "স্কিল ট্রেনিং",
      titleEn: "Skill Training",
      descriptionBn: "আন্তর্জাতিক মানের প্রশিক্ষণ",
      descriptionEn: "International standard training"
    },
    {
      number: "02",
      titleBn: "চাকরি-ভিত্তিক কাজ",
      titleEn: "Job-Oriented Work",
      descriptionBn: "বাস্তব অভিজ্ঞতা অর্জন",
      descriptionEn: "Gain practical experience"
    },
    {
      number: "03",
      titleBn: "গ্লোবাল ক্যারিয়ার",
      titleEn: "Global Career Placement",
      descriptionBn: "বিদেশে চাকরি নিশ্চিতকরণ",
      descriptionEn: "Secure overseas employment"
    }
  ];

  return (
    <section className="py-20 bg-gradient-to-br from-[#7A1F2B] to-[#5a1620] relative overflow-hidden">
      {/* Background Pattern */}
      <div className="absolute inset-0 opacity-10">
        <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMSI+PHBhdGggZD0iTTM2IDE2YzAtMi4yMSAxLjc5LTQgNC00czQgMS43OSA0IDQtMS43OSA0LTQgNC00LTEuNzktNC00em0wIDI0YzAtMi4yMSAxLjc5LTQgNC00czQgMS43OSA0IDQtMS43OSA0LTQgNC00LTEuNzktNC00ek0xMiAxNmMwLTIuMjEgMS43OS00IDQtNHM0IDEuNzkgNCA0LTEuNzkgNC00IDQtNC0xLjc5LTQtNHptMCAyNGMwLTIuMjEgMS43OS00IDQtNHM0IDEuNzkgNCA0LTEuNzkgNC00IDQtNC0xLjc5LTQtNHoiLz48L2c+PC9nPjwvc3ZnPg==')] "></div>
      </div>
      
      <Container className="relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          className="text-center mb-16"
        >
          <h2 className="text-3xl md:text-5xl font-bold text-white mb-4">
            আপনার ক্যারিয়ার যাত্রা
          </h2>
          <h3 className="text-2xl md:text-3xl font-semibold text-white/90">
            Your Career Journey
          </h3>
        </motion.div>
        
        <div className="max-w-5xl mx-auto">
          <div className="grid md:grid-cols-3 gap-8 md:gap-4">
            {steps.map((step, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: index * 0.2, duration: 0.5 }}
                className="relative"
              >
                <div className="bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl p-8 text-center h-full hover:bg-white/20 transition-all duration-300">
                  <div className="text-6xl font-bold text-white/30 mb-4">
                    {step.number}
                  </div>
                  <h4 className="text-2xl font-bold text-white mb-2">
                    {step.titleBn}
                  </h4>
                  <h5 className="text-lg font-semibold text-white/90 mb-3">
                    {step.titleEn}
                  </h5>
                  <p className="text-white/80 mb-2">{step.descriptionBn}</p>
                  <p className="text-white/70 text-sm">{step.descriptionEn}</p>
                </div>
                
                {/* Arrow between steps */}
                {index < steps.length - 1 && (
                  <div className="hidden md:block absolute top-1/2 -right-6 transform -translate-y-1/2 z-20">
                    <ArrowRight className="w-8 h-8 text-white" />
                  </div>
                )}
              </motion.div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}