"use client";
import { Container } from "@/components/container";
import { motion } from "framer-motion";
import { Shield, Target, Award } from "lucide-react";

export function About() {
  return (
    <section id="about" className="py-20 bg-gradient-to-b from-white to-neutral-50">
      <Container>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          className="max-w-4xl mx-auto"
        >
          {/* Section Title */}
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-[#7A1F2B] mb-4">
              আমাদের সম্পর্কে
            </h2>
            <h3 className="text-2xl md:text-3xl font-semibold text-neutral-700">
              About Us
            </h3>
          </div>
          
          {/* Bangla Content */}
          <div className="bg-white rounded-2xl shadow-lg p-8 md:p-10 mb-6 border-l-4 border-[#7A1F2B]">
            <p className="text-lg text-neutral-700 leading-relaxed mb-4">
              <span className="font-bold text-[#7A1F2B]">Enam International Consultancy</span>, Enam Group-এর একটি বিশ্বস্ত প্রতিষ্ঠান। আমরা আন্তর্জাতিক মানের skill training, overseas job assistance এবং সম্পূর্ণ visa guidance প্রদান করি।
            </p>
            <p className="text-lg text-neutral-700 leading-relaxed">
              আমাদের লক্ষ্য হলো দক্ষতা তৈরি করে নিরাপদ ও স্বচ্ছ প্রক্রিয়ায় আপনার global career নিশ্চিত করা।
            </p>
          </div>
          
          {/* English Content */}
          <div className="bg-white rounded-2xl shadow-lg p-8 md:p-10 border-l-4 border-[#7A1F2B]">
            <p className="text-lg text-neutral-600 leading-relaxed mb-4">
              <span className="font-bold text-[#7A1F2B]">Enam International Consultancy</span>, a concern of Enam Group, provides international skill training, overseas job placement assistance, and complete visa documentation support.
            </p>
            <p className="text-lg text-neutral-600 leading-relaxed">
              We follow transparent, ethical processes to help clients build successful global careers.
            </p>
          </div>
          
          {/* Key Values */}
          <div className="grid md:grid-cols-3 gap-6 mt-12">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.1 }}
              className="text-center"
            >
              <div className="inline-flex items-center justify-center w-16 h-16 bg-[#7A1F2B]/10 rounded-full mb-4">
                <Shield className="w-8 h-8 text-[#7A1F2B]" />
              </div>
              <h4 className="font-bold text-lg text-neutral-800 mb-2">Trusted</h4>
              <p className="text-neutral-600 text-sm">Backed by Enam Group</p>
            </motion.div>
            
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.2 }}
              className="text-center"
            >
              <div className="inline-flex items-center justify-center w-16 h-16 bg-[#7A1F2B]/10 rounded-full mb-4">
                <Target className="w-8 h-8 text-[#7A1F2B]" />
              </div>
              <h4 className="font-bold text-lg text-neutral-800 mb-2">Transparent</h4>
              <p className="text-neutral-600 text-sm">Ethical & Clear Process</p>
            </motion.div>
            
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.3 }}
              className="text-center"
            >
              <div className="inline-flex items-center justify-center w-16 h-16 bg-[#7A1F2B]/10 rounded-full mb-4">
                <Award className="w-8 h-8 text-[#7A1F2B]" />
              </div>
              <h4 className="font-bold text-lg text-neutral-800 mb-2">Certified</h4>
              <p className="text-neutral-600 text-sm">International Standards</p>
            </motion.div>
          </div>
        </motion.div>
      </Container>
    </section>
  );
}