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

const reasons = [
  {
    textBn: "Enam Group দ্বারা বিশ্বস্ত",
    textEn: "Trusted by Enam Group"
  },
  {
    textBn: "চাকরি-ভিত্তিক দক্ষতা উন্নয়ন",
    textEn: "Job-oriented skill development"
  },
  {
    textBn: "শক্তিশালী চাকরি সহায়তা",
    textEn: "Strong job assistance support"
  },
  {
    textBn: "স্বচ্ছ ও নৈতিক প্রক্রিয়া",
    textEn: "Transparent & ethical process"
  },
  {
    textBn: "শুরু থেকে শেষ পর্যন্ত গাইডেন্স",
    textEn: "End-to-end guidance"
  }
];

export function WhyChooseUs() {
  return (
    <section className="py-20 bg-neutral-50">
      <Container>
        <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">
            Why Choose Us?
          </h3>
        </motion.div>
        
        <div className="max-w-3xl mx-auto">
          <div className="grid md:grid-cols-2 gap-6">
            {reasons.map((reason, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, x: -20 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ delay: index * 0.1, duration: 0.5 }}
                className="flex items-start gap-4 bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-shadow duration-300"
              >
                <div className="flex-shrink-0">
                  <CheckCircle2 className="w-6 h-6 text-[#7A1F2B]" />
                </div>
                <div>
                  <p className="font-bold text-lg text-neutral-800 mb-1">
                    {reason.textBn}
                  </p>
                  <p className="text-neutral-600">
                    {reason.textEn}
                  </p>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}