/*
  DESIGN: "Global Nexus" — About section with asymmetric layout
  Image on left, content on right with trust indicators
*/
import { CheckCircle2, Target, Users, TrendingUp } from "lucide-react";
import { useLanguage } from "@/contexts/LanguageContext";

const PARTNERSHIP_IMG = "/images/partnership-handshake.jpg";

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

  const values = [
    {
      icon: Target,
      title: t("about.value1.title"),
      desc: t("about.value1.desc"),
    },
    {
      icon: Users,
      title: t("about.value2.title"),
      desc: t("about.value2.desc"),
    },
    {
      icon: TrendingUp,
      title: t("about.value3.title"),
      desc: t("about.value3.desc"),
    },
  ];

  const trustBadges = [t("about.trust1"), t("about.trust2"), t("about.trust3")];

  return (
    <section id="about" className="py-20 lg:py-28 bg-warm-white">
      <div className="container">
        <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
          {/* Image side */}
          <div className="relative">
            <div className="relative rounded-lg overflow-hidden shadow-2xl shadow-navy/10">
              <img
                src={PARTNERSHIP_IMG}
                alt="Business partnership in Dubai - Alzar FZE consulting"
                className="w-full h-[400px] lg:h-[520px] object-cover"
                loading="lazy"
              />
            </div>
            {/* Floating badge */}
            <div className="absolute -bottom-6 -right-4 lg:-right-6 bg-navy text-white p-5 rounded-lg shadow-xl">
              <div className="font-heading font-bold text-3xl text-teal">1997</div>
              <div className="text-sm text-white/70">{lang === "ar" ? "تأسست" : "Established"}</div>
            </div>
          </div>

          {/* Content side */}
          <div>
            <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("about.tag")}</span>
            </div>

            <h2 className="font-heading font-bold text-3xl lg:text-4xl text-navy leading-tight mb-6">
              {t("about.title1")}{" "}
              <span className="text-teal">{t("about.title2")}</span>
            </h2>

            <p className="text-slate-dark/80 leading-relaxed mb-4">
              {t("about.desc1")}
            </p>

            <p className="text-slate-dark/80 leading-relaxed mb-8">
              {t("about.desc2")}
            </p>

            {/* Values */}
            <div className="space-y-4">
              {values.map((v, i) => (
                <div key={i} className="flex items-start gap-4 group">
                  <div className="p-2.5 bg-teal/10 rounded-lg shrink-0 group-hover:bg-teal/20 transition-colors">
                    <v.icon className="w-5 h-5 text-teal" />
                  </div>
                  <div>
                    <h3 className="font-heading font-semibold text-navy mb-1">{v.title}</h3>
                    <p className="text-sm text-slate-dark/70">{v.desc}</p>
                  </div>
                </div>
              ))}
            </div>

            {/* Trust indicators */}
            <div className="mt-8 pt-8 border-t border-navy/10 flex flex-wrap gap-6">
              {trustBadges.map((badge, i) => (
                <div key={i} className="flex items-center gap-2 text-sm text-navy/70">
                  <CheckCircle2 className="w-4 h-4 text-teal" />
                  {badge}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
