"use client";
import { Container } from "@/components/container";
import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { motion } from "framer-motion";
import { GraduationCap, Award, Briefcase, FileText, Shield } from "lucide-react";

const services = [
  {
    icon: GraduationCap,
    title: "Industry-Based Skill Training",
    titleBn: "ইন্ডাস্ট্রি-ভিত্তিক স্কিল ট্রেনিং",
    description: "Practical, job-oriented training aligned with international demand",
    descriptionBn: "আন্তর্জাতিক চাহিদা অনুযায়ী ব্যবহারিক, চাকরি-ভিত্তিক প্রশিক্ষণ"
  },
  {
    icon: Award,
    title: "International Standard Certificate",
    titleBn: "আন্তর্জাতিক মানের সার্টিফিকেট",
    description: "Globally recognized skill certification",
    descriptionBn: "বিশ্বব্যাপী স্বীকৃত দক্ষতা সার্টিফিকেশন"
  },
  {
    icon: Briefcase,
    title: "Overseas Job Assistance",
    titleBn: "বিদেশে চাকরির সহায়তা",
    description: "Support for job placement in international markets",
    descriptionBn: "আন্তর্জাতিক বাজারে চাকরি প্রাপ্তির সহায়তা"
  },
  {
    icon: FileText,
    title: "Visa Process Guidance & Documentation",
    titleBn: "ভিসা প্রক্রিয়া গাইডেন্স ও ডকুমেন্টেশন",
    description: "Complete visa application and documentation support",
    descriptionBn: "সম্পূর্ণ ভিসা আবেদন এবং ডকুমেন্টেশন সহায়তা"
  },
  {
    icon: Shield,
    title: "Transparent & Ethical Process",
    titleBn: "স্বচ্ছ ও নৈতিক প্রক্রিয়া",
    description: "Trusted, honest consultancy service",
    descriptionBn: "বিশ্বস্ত, সৎ পরামর্শ সেবা"
  }
];

export function Services() {
  return (
    <section id="services" className="py-20 bg-white">
      <Container>
        {/* 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"
        >
          <h2 className="text-3xl md:text-5xl font-bold text-[#7A1F2B] mb-4">
            আমাদের সেবাসমূহ
          </h2>
          <h3 className="text-2xl md:text-3xl font-semibold text-neutral-700 mb-4">
            Our Services
          </h3>
          <p className="text-neutral-600 max-w-2xl mx-auto">
            Comprehensive support for your international career journey
          </p>
        </motion.div>
        
        {/* Services Grid */}
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {services.map((service, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: index * 0.1, duration: 0.5 }}
            >
              <Card className="h-full hover:shadow-xl transition-all duration-300 border-2 hover:border-[#7A1F2B]/20 group">
                <CardHeader>
                  <div className="mb-4 inline-flex items-center justify-center w-14 h-14 bg-[#7A1F2B]/10 rounded-lg group-hover:bg-[#7A1F2B] transition-colors duration-300">
                    <service.icon className="w-7 h-7 text-[#7A1F2B] group-hover:text-white transition-colors duration-300" />
                  </div>
                  <CardTitle className="text-xl mb-2 text-[#7A1F2B]">
                    {service.titleBn}
                  </CardTitle>
                  <CardTitle className="text-lg mb-3 text-neutral-700 font-medium">
                    {service.title}
                  </CardTitle>
                  <CardDescription className="text-neutral-600 leading-relaxed">
                    {service.descriptionBn}
                  </CardDescription>
                  <CardDescription className="text-neutral-500 text-sm mt-2">
                    {service.description}
                  </CardDescription>
                </CardHeader>
              </Card>
            </motion.div>
          ))}
        </div>
      </Container>
    </section>
  );
}