import Layout from "@/components/Layout";
import SEOHead from "@/components/SEOHead";
import PageHero from "@/components/PageHero";
import CTABanner from "@/components/CTABanner";
import { CheckCircle2, Users, Target, Award, Globe, Handshake } from "lucide-react";
import { useLanguage } from "@/contexts/LanguageContext";

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

const HERO_IMG = "/images/hero-industrial.jpg";

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

  const values = [
    { icon: Handshake, title: t("aboutPage.v1.title"), desc: t("aboutPage.v1.desc") },
    { icon: Award, title: t("aboutPage.v2.title"), desc: t("aboutPage.v2.desc") },
    { icon: Target, title: t("aboutPage.v3.title"), desc: t("aboutPage.v3.desc") },
    { icon: Globe, title: t("aboutPage.v4.title"), desc: t("aboutPage.v4.desc") },
    { icon: Users, title: t("aboutPage.v5.title"), desc: t("aboutPage.v5.desc") },
    { icon: CheckCircle2, title: t("aboutPage.v6.title"), desc: t("aboutPage.v6.desc") },
  ];

  return (
    <Layout>
      <SEOHead
        title="About Alzar FZE | Industrial Consulting Company Dubai Since 1997"
        description="Alzar FZE is a Jebel Ali-based engineering consulting firm supplying refractories, loaders, ceramic raw materials, cement additives, and aluminum lubricants to industries across UAE, GCC, and the Middle East."
        canonical="https://www.alzarfze.com/about"
        keywords="engineering consulting company Dubai, industrial consulting UAE, refractories supplier Jebel Ali, loaders dealer Dubai, ceramic raw materials consultant, cement industry consultant GCC, glass furnace solutions Middle East, aluminum extrusion consultant, dairy equipment supplier UAE, Alzar FZE history"
        breadcrumbs={[
          { name: "Home", url: "https://www.alzarfze.com" },
          { name: "About", url: "https://www.alzarfze.com/about" },
        ]}
      />

      <PageHero
        title={t("aboutPage.heroTitle")}
        subtitle={t("aboutPage.heroSubtitle")}
        bgImage={HERO_IMG}
        breadcrumbs={[{ label: t("common.home"), href: "/" }, { label: t("aboutPage.breadcrumbAbout") }]}
      />

      {/* Company Story */}
      <section className="py-16 lg:py-24">
        <div className="container">
          <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
            <div>
              <div className="inline-flex items-center gap-2 bg-teal/10 text-teal rounded-full px-4 py-1.5 mb-4">
                <span className="text-sm font-semibold tracking-wide uppercase">{t("aboutPage.storyTag")}</span>
              </div>
              <h2 className="font-heading font-bold text-3xl lg:text-4xl text-navy leading-tight mb-6">
                {t("aboutPage.storyTitle")}
              </h2>
              <div className="space-y-4 text-slate-dark/80 leading-relaxed">
                <p>{t("aboutPage.storyP1")}</p>
                <p>{t("aboutPage.storyP2")}</p>
                <p>{t("aboutPage.storyP3")}</p>
                <p>{t("aboutPage.storyP4")}</p>
              </div>
            </div>
            <div className="relative">
              <img
                src={ABOUT_IMG}
                alt="Alzar FZE engineering partnership"
                className="rounded-xl shadow-2xl w-full"
              />
              <div className="absolute -bottom-6 -left-6 rtl:-left-auto rtl:-right-6 bg-navy text-white p-6 rounded-xl shadow-xl">
                <div className="font-heading font-bold text-4xl text-teal" dir="ltr">1997</div>
                <div className="text-sm text-white/70 mt-1">{t("aboutPage.established")}<br />{t("about.trust3")}</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Mission & Vision */}
      <section className="py-16 lg:py-24 bg-warm-white">
        <div className="container">
          <div className="grid md:grid-cols-2 gap-8 lg:gap-12">
            <div className="bg-white p-8 lg:p-10 rounded-xl border border-navy/5 shadow-sm">
              <div className="p-3 bg-teal/10 rounded-lg w-fit mb-4">
                <Target className="w-7 h-7 text-teal" />
              </div>
              <h3 className="font-heading font-bold text-2xl text-navy mb-4">{t("aboutPage.missionTitle")}</h3>
              <p className="text-slate-dark/80 leading-relaxed">
                {t("aboutPage.missionDesc")}
              </p>
            </div>
            <div className="bg-white p-8 lg:p-10 rounded-xl border border-navy/5 shadow-sm">
              <div className="p-3 bg-teal/10 rounded-lg w-fit mb-4">
                <Globe className="w-7 h-7 text-teal" />
              </div>
              <h3 className="font-heading font-bold text-2xl text-navy mb-4">{t("aboutPage.visionTitle")}</h3>
              <p className="text-slate-dark/80 leading-relaxed">
                {t("aboutPage.visionDesc")}
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Core Values */}
      <section className="py-16 lg:py-24">
        <div className="container">
          <div className="text-center max-w-2xl mx-auto mb-12">
            <div className="inline-flex items-center gap-2 bg-teal/10 text-teal rounded-full px-4 py-1.5 mb-4">
              <span className="text-sm font-semibold tracking-wide uppercase">{t("aboutPage.valuesTag")}</span>
            </div>
            <h2 className="font-heading font-bold text-3xl lg:text-4xl text-navy mb-4">
              {t("aboutPage.valuesTitle")}
            </h2>
            <p className="text-slate-dark/70 leading-relaxed">
              {t("aboutPage.valuesSubtitle")}
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
            {values.map((v, i) => (
              <div key={i} className="bg-white p-6 lg:p-8 rounded-xl border border-navy/5 shadow-sm hover:shadow-md transition-shadow group">
                <div className="p-3 bg-teal/10 rounded-lg w-fit mb-4 group-hover:bg-teal/20 transition-colors">
                  <v.icon className="w-6 h-6 text-teal" />
                </div>
                <h3 className="font-heading font-semibold text-lg text-navy mb-2">{v.title}</h3>
                <p className="text-sm text-slate-dark/70 leading-relaxed">{v.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Location */}
      <section className="py-16 lg:py-24 bg-navy text-white">
        <div className="container">
          <div className="text-center max-w-2xl mx-auto">
            <h2 className="font-heading font-bold text-3xl lg:text-4xl text-white mb-4">
              {t("aboutPage.locationTitle")}
            </h2>
            <p className="text-white/60 leading-relaxed mb-8">
              {t("aboutPage.locationDesc")}
            </p>
            <div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
              {[
                { value: "LOB #21", label: t("aboutPage.officeBuilding"), ltr: true },
                { value: "JAFZA", label: t("aboutPage.freeZone"), ltr: true },
                { value: "24/7", label: t("aboutPage.portAccess"), ltr: true },
                { value: lang === "ar" ? "دبي" : "Dubai", label: lang === "ar" ? "الإمارات" : "UAE" },
              ].map((item, i) => (
                <div key={i} className="bg-white/5 border border-white/10 rounded-lg p-4">
                  <div className="font-heading font-bold text-xl text-teal" dir={(item as any).ltr ? 'ltr' : undefined}>{item.value}</div>
                  <div className="text-xs text-white/50 mt-1">{item.label}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <CTABanner />
    </Layout>
  );
}
