import { Shield, Users, Globe, Award, Headphones, TrendingUp } from "lucide-react";
import { useLanguage } from "@/contexts/LanguageContext";

const features = [
  {
    icon: Shield,
    titleEn: "Quality Assurance",
    titleAr: "ضمان الجودة",
    descEn: "Every partner undergoes rigorous evaluation. We represent only manufacturers with international quality certifications including ISO 9001, ISO 14001, and DIN standards.",
    descAr: "يخضع كل شريك لتقييم صارم. نمثل فقط الشركات المصنعة الحاصلة على شهادات الجودة الدولية.",
  },
  {
    icon: Users,
    titleEn: "Expert Engineering Team",
    titleAr: "فريق هندسي خبير",
    descEn: "Our committed, well-educated engineers deliver not just products, but expert technical advice to optimize your manufacturing processes and reduce operational costs.",
    descAr: "يقدم مهندسونا الملتزمون والمتعلمون ليس فقط المنتجات، بل المشورة الفنية لتحسين عمليات التصنيع.",
  },
  {
    icon: Globe,
    titleEn: "Global Supply Chain",
    titleAr: "سلسلة إمداد عالمية",
    descEn: "Partners from Germany, China, India, Hungary, Switzerland, Mexico, and Italy — managed from our strategic hub in Jebel Ali Free Zone with access to global shipping routes.",
    descAr: "شركاء من ألمانيا والصين والهند والمجر وسويسرا والمكسيك وإيطاليا — تدار من مركزنا الاستراتيجي في جبل علي.",
  },
  {
    icon: Award,
    titleEn: "25+ Years Experience",
    titleAr: "أكثر من 25 عاماً من الخبرة",
    descEn: "Since 1997, we have built lasting relationships with manufacturers across the Middle East, Africa, and Asia through consistent delivery of results.",
    descAr: "منذ 1997، بنينا علاقات دائمة مع الشركات المصنعة عبر الشرق الأوسط وأفريقيا وآسيا.",
  },
  {
    icon: Headphones,
    titleEn: "Dedicated Support",
    titleAr: "دعم مخصص",
    descEn: "We consider ourselves part of your business. From initial consultation to after-sales support, our team is with you every step of the way.",
    descAr: "نعتبر أنفسنا جزءاً من عملك. من الاستشارة الأولية إلى دعم ما بعد البيع، فريقنا معك في كل خطوة.",
  },
  {
    icon: TrendingUp,
    titleEn: "Performance Improvement",
    titleAr: "تحسين الأداء",
    descEn: "Our motto 'Improving Performance through Partnership' drives everything we do — from product selection to technical consulting and process optimization.",
    descAr: "شعارنا 'تحسين الأداء من خلال الشراكة' يدفع كل ما نقوم به — من اختيار المنتج إلى الاستشارات الفنية.",
  },
];

export default function WhyChooseUs() {
  const { t, lang } = useLanguage();

  return (
    <section className="py-20 lg:py-28 bg-white relative overflow-hidden">
      <div className="absolute inset-0 opacity-[0.02]" style={{
        backgroundImage: `radial-gradient(circle at 1px 1px, #0B1D3A 1px, transparent 0)`,
        backgroundSize: '40px 40px'
      }} />

      <div className="container relative">
        <div className="text-center max-w-2xl mx-auto mb-16">
          <div className="inline-flex items-center gap-2 bg-teal/10 text-teal-dark rounded-full px-4 py-1.5 mb-4">
            <span className="text-sm font-semibold tracking-wide uppercase">{t("why.tag")}</span>
          </div>
          <h2 className="font-heading font-bold text-3xl lg:text-4xl text-navy mb-4">
            {t("why.title")}
          </h2>
        </div>

        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
          {features.map((f, i) => (
            <article
              key={i}
              className="group p-6 lg:p-8 rounded-xl bg-warm-white border border-navy/5 hover:border-teal/20 hover:shadow-xl hover:shadow-teal/5 transition-all duration-300"
            >
              <div className="p-3 bg-teal/10 rounded-xl w-fit mb-5 group-hover:bg-teal/20 transition-colors">
                <f.icon className="w-6 h-6 text-teal" />
              </div>
              <h3 className="font-heading font-semibold text-lg text-navy mb-2">
                {lang === "ar" ? f.titleAr : f.titleEn}
              </h3>
              <p className="text-sm text-slate-dark/65 leading-relaxed">
                {lang === "ar" ? f.descAr : f.descEn}
              </p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
