import { Link } from "wouter";
import Layout from "@/components/Layout";
import SEOHead from "@/components/SEOHead";
import PageHero from "@/components/PageHero";
import CTABanner from "@/components/CTABanner";
import { ExternalLink, ArrowRight, Globe } from "lucide-react";
import { useLanguage } from "@/contexts/LanguageContext";

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

interface Partner {
  name: string;
  country: string;
  countryAr: string;
  website: string;
  specialty: string;
  specialtyAr: string;
}

const glassPartners: Partner[] = [
  { name: "Futronic GmbH (Bucher Automation)", country: "Germany", countryAr: "ألمانيا", website: "https://www.bucherautomation.com/en/", specialty: "Electronic Controls & Automation", specialtyAr: "أنظمة التحكم الإلكتروني والأتمتة" },
  { name: "Zhongfu-Silica", country: "China", countryAr: "الصين", website: "", specialty: "Silica Bricks & Refractories", specialtyAr: "طوب السيليكا والحراريات" },
  { name: "Lingnan-AZS (Guangzhou LingNan Refractory)", country: "China", countryAr: "الصين", website: "http://www.lnref.com/", specialty: "AZS Fused Cast Refractories", specialtyAr: "حراريات AZS المصبوبة بالصهر" },
  { name: "Refmon Co. Ltd.", country: "Hungary", countryAr: "المجر", website: "https://www.refmon.hu/", specialty: "Refractory & Monolithic Solutions", specialtyAr: "حلول الحراريات والمونوليثية" },
  { name: "UAS Messtechnik GmbH", country: "Germany", countryAr: "ألمانيا", website: "https://www.uas.de/en/", specialty: "Measurement, Control & Combustion", specialtyAr: "القياس والتحكم والاحتراق" },
  { name: "Hotwork International AG", country: "Switzerland", countryAr: "سويسرا", website: "https://www.hotwork.ag/", specialty: "Furnace Services & Combustion Technology", specialtyAr: "خدمات الأفران وتقنية الاحتراق" },
  { name: "Accuramech Industrial Engineering", country: "India", countryAr: "الهند", website: "https://www.accuramech.com/", specialty: "Precision Spare Parts for Glass", specialtyAr: "قطع غيار دقيقة للزجاج" },
  { name: "Interglass", country: "Mexico", countryAr: "المكسيك", website: "https://interglass.global/", specialty: "Glass-Forming Lubricants", specialtyAr: "مواد تشحيم تشكيل الزجاج" },
  { name: "Heat Applications India", country: "India", countryAr: "الهند", website: "https://www.heatapp.in/", specialty: "Furnace Heat-Up & Combustion", specialtyAr: "تسخين الأفران والاحتراق" },
  { name: "WBT Srl", country: "Italy", countryAr: "إيطاليا", website: "https://www.wbtsrl.com/", specialty: "Conveyor Belts & IS Machine Parts", specialtyAr: "سيور ناقلة وقطع غيار آلات IS" },
  { name: "Interlub S.A. de C.V. (Interlub Group)", country: "Mexico", countryAr: "المكسيك", website: "https://interlub.com/en/", specialty: "Aluminum Extrusion Lubricants", specialtyAr: "مواد تشحيم بثق الألمنيوم" },
];

const machineryPartners: Partner[] = [
  { name: "Schaeffer Maschinenfabrik GmbH", country: "Germany", countryAr: "ألمانيا", website: "https://www.schaeffer.de/en/", specialty: "Compact & Telescopic Wheeled Loaders", specialtyAr: "لوادر مدمجة وتلسكوبية بعجلات" },
  { name: "BvL Maschinenfabrik GmbH & Co. KG", country: "Germany", countryAr: "ألمانيا", website: "https://www.bvl-farmtechnology.com/en/", specialty: "Feeding & Bedding Technology", specialtyAr: "تقنيات التغذية والفراش" },
];

const countriesEn = ["Germany", "China", "India", "Hungary", "Switzerland", "Mexico", "Italy"];
const countriesAr = ["ألمانيا", "الصين", "الهند", "المجر", "سويسرا", "المكسيك", "إيطاليا"];

function PartnerRow({ partner, lang }: { partner: Partner; lang: string }) {
  return (
    <div className="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-6 py-4 border-b border-navy/5 last:border-0">
      <div className="flex-1">
        <div className="flex flex-wrap items-center gap-2">
          <h3 className="font-heading font-semibold text-navy" dir="ltr">{partner.name}</h3>
          <span className="text-xs bg-navy/5 text-navy/60 px-2 py-0.5 rounded-full">{lang === "ar" ? partner.countryAr : partner.country}</span>
        </div>
        <p className="text-sm text-slate-dark/60 mt-0.5">{lang === "ar" ? partner.specialtyAr : partner.specialty}</p>
      </div>
      {partner.website && (
        <a
          href={partner.website}
          target="_blank"
          rel="noopener noreferrer"
          className="inline-flex items-center gap-1.5 text-sm text-teal hover:text-teal-dark font-medium transition-colors shrink-0"
        >
          {lang === "ar" ? "زيارة الموقع" : "Visit Website"} <ExternalLink className="w-3.5 h-3.5" />
        </a>
      )}
    </div>
  );
}

export default function Partners() {
  const { t, lang } = useLanguage();
  const countries = lang === "ar" ? countriesAr : countriesEn;

  return (
    <Layout>
      <SEOHead
        title="Our Principals | Refractories, Loaders & Equipment Partners | Alzar FZE"
        description="Alzar FZE represents 13+ global manufacturers of glass furnace refractories, compact loaders, ceramic materials, cement additives, and aluminum lubricants in UAE and GCC markets."
        canonical="https://www.alzarfze.com/partners"
        keywords="Alzar FZE principals, Schaeffer loaders UAE dealer, Bucher Automation glass furnace, Refmon refractories, AZS refractories supplier, Interlub aluminum lubricants, BvL feeding technology dairy, Lingnan refractories, cement grinding aid manufacturer, ceramic raw materials manufacturer, glass furnace equipment supplier GCC"
        breadcrumbs={[
          { name: "Home", url: "https://www.alzarfze.com" },
          { name: "Partners", url: "https://www.alzarfze.com/partners" },
        ]}
      />

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

      {/* Global Reach */}
      <section className="py-12 bg-navy text-white">
        <div className="container">
          <div className="flex flex-wrap justify-center gap-4 lg:gap-8">
            {countries.map((c) => (
              <div key={c} className="flex items-center gap-2 text-white/70">
                <Globe className="w-4 h-4 text-teal" />
                <span className="text-sm font-medium">{c}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Glass Partners */}
      <section className="py-16 lg:py-24">
        <div className="container">
          <div className="flex items-center justify-between mb-8">
            <div>
              <div className="inline-flex items-center gap-2 bg-teal/10 text-teal rounded-full px-4 py-1.5 mb-3">
                <span className="text-sm font-semibold tracking-wide uppercase">{t("partners.glassTag")}</span>
              </div>
              <h2 className="font-heading font-bold text-2xl lg:text-3xl text-navy">{t("partners.glassTitle")}</h2>
            </div>
            <Link href="/industries/glass" className="hidden sm:inline-flex items-center gap-1.5 text-sm text-teal hover:text-teal-dark font-medium transition-colors">
              {t("partners.viewDetails")} <ArrowRight className="w-3.5 h-3.5" />
            </Link>
          </div>
          <div className="bg-white rounded-xl border border-navy/5 shadow-sm p-6 lg:p-8">
            {glassPartners.map((p, i) => (
              <PartnerRow key={i} partner={p} lang={lang} />
            ))}
          </div>
          <Link href="/industries/glass" className="sm:hidden inline-flex items-center gap-1.5 text-sm text-teal hover:text-teal-dark font-medium transition-colors mt-4">
            {t("partners.viewGlassDetails")} <ArrowRight className="w-3.5 h-3.5" />
          </Link>
        </div>
      </section>

      {/* Machinery Partners */}
      <section className="py-16 lg:py-24 bg-warm-white">
        <div className="container">
          <div className="flex items-center justify-between mb-8">
            <div>
              <div className="inline-flex items-center gap-2 bg-teal/10 text-teal rounded-full px-4 py-1.5 mb-3">
                <span className="text-sm font-semibold tracking-wide uppercase">{t("partners.machineryTag")}</span>
              </div>
              <h2 className="font-heading font-bold text-2xl lg:text-3xl text-navy">{t("partners.machineryTitle")}</h2>
            </div>
            <Link href="/industries/machinery" className="hidden sm:inline-flex items-center gap-1.5 text-sm text-teal hover:text-teal-dark font-medium transition-colors">
              {t("partners.viewDetails")} <ArrowRight className="w-3.5 h-3.5" />
            </Link>
          </div>
          <div className="bg-white rounded-xl border border-navy/5 shadow-sm p-6 lg:p-8">
            {machineryPartners.map((p, i) => (
              <PartnerRow key={i} partner={p} lang={lang} />
            ))}
          </div>
          <Link href="/industries/machinery" className="sm:hidden inline-flex items-center gap-1.5 text-sm text-teal hover:text-teal-dark font-medium transition-colors mt-4">
            {t("partners.viewMachineryDetails")} <ArrowRight className="w-3.5 h-3.5" />
          </Link>
        </div>
      </section>

      {/* Ceramics & Cement Note */}
      <section className="py-16 lg:py-24">
        <div className="container">
          <div className="grid md:grid-cols-2 gap-8">
            <div className="bg-white rounded-xl border border-navy/5 shadow-sm p-6 lg:p-8">
              <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("partners.ceramicsTag")}</span>
              </div>
              <h3 className="font-heading font-bold text-xl text-navy mb-3">{t("partners.ceramicsTitle")}</h3>
              <p className="text-slate-dark/70 leading-relaxed mb-4">
                {t("partners.ceramicsDesc")}
              </p>
              <Link href="/industries/ceramics" className="inline-flex items-center gap-1.5 text-sm text-teal hover:text-teal-dark font-medium transition-colors">
                {t("partners.exploreCeramics")} <ArrowRight className="w-3.5 h-3.5" />
              </Link>
            </div>
            <div className="bg-white rounded-xl border border-navy/5 shadow-sm p-6 lg:p-8">
              <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("partners.cementTag")}</span>
              </div>
              <h3 className="font-heading font-bold text-xl text-navy mb-3">{t("partners.cementTitle")}</h3>
              <p className="text-slate-dark/70 leading-relaxed mb-4">
                {t("partners.cementDesc")}
              </p>
              <Link href="/industries/cement" className="inline-flex items-center gap-1.5 text-sm text-teal hover:text-teal-dark font-medium transition-colors">
                {t("partners.exploreCement")} <ArrowRight className="w-3.5 h-3.5" />
              </Link>
            </div>
          </div>
        </div>
      </section>

      <CTABanner />
    </Layout>
  );
}
