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 { ArrowRight, Tractor, HardHat, Wheat, Factory, Truck, Zap, Shield, Wrench, FileText } from "lucide-react";
import { useLanguage } from "@/contexts/LanguageContext";
import { trackCTAClick } from "@/lib/analytics";

const HERO_IMG = "/images/machinery-section.jpg";

const SCHAEFFER_IMG = "/images/iycCkdFLHqpIKbtJ.jpg";

export default function CompactLoadersUAE() {
  const { lang } = useLanguage();
  const isAr = lang === "ar";

  const loaderCategories = [
    {
      icon: Tractor,
      title: isAr ? "لوادر مدمجة بعجلات" : "Compact Wheeled Loaders",
      desc: isAr
        ? "مجموعة كاملة من اللوادر المدمجة ذات العجلات بنظام التوجيه المحوري، بأوزان تشغيل تتراوح من 1,250 كجم إلى أكثر من 5,000 كجم. مصممة للعمل في المساحات الضيقة مع الحفاظ على قدرة رفع وتحميل عالية."
        : "Full range of pivot-steer compact wheeled loaders with operating weights from 1,250 kg to over 5,000 kg. Designed for work in confined spaces while maintaining high lifting and loading capacity.",
    },
    {
      icon: Truck,
      title: isAr ? "لوادر تلسكوبية بعجلات" : "Telescopic Wheeled Loaders",
      desc: isAr
        ? "لوادر تلسكوبية توفر وصولاً ممتداً لتطبيقات الرفع العالي. تجمع بين الأبعاد المدمجة والقوة القصوى، مع ارتفاعات رفع تصل إلى 4.95 متر وسعات رفع تصل إلى 3.1 طن."
        : "Telescopic loaders providing extended reach for high-lift applications. Combining compact dimensions with maximum power, with lifting heights up to 4.95 m and lifting capacities up to 3.1 tonnes.",
    },
    {
      icon: Zap,
      title: isAr ? "لوادر ساحة كهربائية" : "Electric Yard Loaders",
      desc: isAr
        ? "لودر الساحة الكهربائي 23e — أول لودر ساحة في العالم ببطارية ليثيوم أيون، قُدم عام 2017. يوفر تشغيلاً بدون انبعاثات وبدون ضوضاء، مثالي للبيئات الداخلية والمناطق الحساسة. محرك كهربائي بقوة 21 كيلوواط مع بطارية 15.65 كيلوواط ساعة."
        : "The 23e electric yard loader — the world's first yard loader with a lithium-ion battery, introduced in 2017. Delivers zero-emission, zero-noise operation ideal for indoor environments and sensitive areas. 21 kW electric motor with 15.65 kWh battery pack.",
    },
  ];

  const applications = [
    { icon: HardHat, label: isAr ? "البناء والتشييد" : "Construction", desc: isAr ? "حفر وتحميل وتسوية في مواقع البناء الضيقة" : "Digging, loading, and grading in tight construction sites" },
    { icon: Wheat, label: isAr ? "الزراعة ومزارع الألبان" : "Agriculture & Dairy", desc: isAr ? "تغذية الحيوانات وتنظيف الحظائر ونقل المواد" : "Animal feeding, barn cleaning, and material handling" },
    { icon: Truck, label: isAr ? "تنسيق الحدائق" : "Landscaping", desc: isAr ? "نقل التربة والحصى والمواد في المساحات الضيقة" : "Moving soil, gravel, and materials in confined spaces" },
    { icon: Factory, label: isAr ? "الخدمات البلدية والصناعية" : "Municipal & Industrial", desc: isAr ? "تنظيف الشوارع ونقل المواد في المرافق الصناعية" : "Street cleaning and material handling in industrial facilities" },
  ];

  const advantages = [
    {
      icon: Shield,
      title: isAr ? "توجيه محوري" : "Pivot Steering",
      desc: isAr
        ? "نظام التوجيه المحوري يوفر أصغر نصف قطر دوران في فئته، مما يسمح بالمناورة في أضيق المساحات."
        : "Pivot steering provides the smallest turning radius in its class, allowing maneuvering in the tightest spaces.",
    },
    {
      icon: Wrench,
      title: isAr ? "ملحقات متنوعة" : "Versatile Attachments",
      desc: isAr
        ? "مجموعة واسعة من الملحقات تشمل الدلاء والشوكات والمقابض والكناسات والمثاقب وأكثر، لتحويل اللودر لأي مهمة."
        : "Wide range of attachments including buckets, forks, grabs, sweepers, augers, and more, transforming the loader for any task.",
    },
    {
      icon: Zap,
      title: isAr ? "كفاءة الوقود" : "Fuel Efficiency",
      desc: isAr
        ? "محركات ديزل حديثة مع أنظمة هيدروليكية محسنة توفر أقصى قوة بأقل استهلاك للوقود."
        : "Modern diesel engines with optimized hydraulic systems deliver maximum power with minimal fuel consumption.",
    },
    {
      icon: Factory,
      title: isAr ? "تصنيع ألماني" : "German Engineering",
      desc: isAr
        ? "مصنعة في إرفيته، ألمانيا منذ عام 1956. أكثر من 480 موظفاً مكرسين لإنتاج لوادر عالية الجودة."
        : "Manufactured in Erwitte, Germany since 1956. Over 480 employees dedicated to producing high-quality loaders.",
    },
  ];

  const faqs = isAr
    ? [
        {
          q: "ما هي أنواع اللوادر المدمجة المتوفرة في الإمارات؟",
          a: "توفر الزار FZE مجموعة كاملة من لوادر شيفر المدمجة ذات العجلات في الإمارات. تشمل المجموعة لوادر مدمجة بأوزان تشغيل من 1,250 كجم إلى أكثر من 5,000 كجم، ولوادر تلسكوبية بارتفاعات رفع تصل إلى 4.95 متر، بالإضافة إلى لودر الساحة الكهربائي 23e.",
        },
        {
          q: "هل توفرون قطع غيار وخدمة ما بعد البيع؟",
          a: "نعم، بصفتنا الوكيل المعتمد لشيفر في الإمارات ودول الخليج، نوفر قطع غيار أصلية ودعماً فنياً كاملاً وخدمة صيانة لجميع موديلات لوادر شيفر.",
        },
        {
          q: "هل يمكن استخدام لوادر شيفر في مواقع البناء؟",
          a: "نعم، لوادر شيفر المدمجة مصممة خصيصاً للعمل في مواقع البناء الضيقة. نظام التوجيه المحوري يوفر أصغر نصف قطر دوران في فئته، مع ملحقات متنوعة للحفر والرفع والتسوية والتنظيف.",
        },
        {
          q: "ما الفرق بين اللوادر المدمجة والتلسكوبية؟",
          a: "اللوادر المدمجة مصممة للعمل في المساحات الضيقة مع قدرة تحميل عالية. اللوادر التلسكوبية توفر ذراعاً تلسكوبياً للوصول الممتد وارتفاعات رفع أعلى تصل إلى 4.95 متر، وهي مثالية لتطبيقات التحميل والتفريغ على ارتفاعات.",
        },
      ]
    : [
        {
          q: "What types of compact loaders are available in the UAE?",
          a: "Alzar FZE supplies the full range of Schaeffer compact wheeled loaders in the UAE. The range includes compact loaders with operating weights from 1,250 kg to over 5,000 kg, telescopic loaders with lifting heights up to 4.95 m, and the 23e electric yard loader.",
        },
        {
          q: "Do you provide spare parts and after-sales service?",
          a: "Yes, as the authorized Schaeffer dealer in the UAE and GCC, we provide genuine spare parts, full technical support, and maintenance service for all Schaeffer loader models.",
        },
        {
          q: "Can Schaeffer loaders be used on construction sites?",
          a: "Yes, Schaeffer compact loaders are specifically designed for work in tight construction sites. The pivot steering system provides the smallest turning radius in its class, with various attachments for digging, lifting, grading, and cleaning.",
        },
        {
          q: "What is the difference between compact and telescopic loaders?",
          a: "Compact loaders are designed for work in confined spaces with high loading capacity. Telescopic loaders feature an extendable boom for extended reach and higher lifting heights up to 4.95 m, ideal for loading and unloading at height.",
        },
      ];

  return (
    <Layout>
      <SEOHead
        title={isAr ? "لوادر مدمجة للبناء في الإمارات | وكيل شيفر المعتمد | الزار FZE" : "Compact Loaders for Construction UAE | Authorized Schaeffer Dealer | Alzar FZE"}
        description={isAr ? "الزار FZE وكيل شيفر المعتمد في الإمارات والخليج. لوادر مدمجة وتلسكوبية للبناء والزراعة وتنسيق الحدائق مع دعم فني وقطع غيار." : "Alzar FZE is the authorized Schaeffer dealer in UAE and GCC. Compact and telescopic wheeled loaders for construction, agriculture, and landscaping."}
        canonical="https://www.alzarfze.com/machinery/compact-loaders-uae"
        keywords="compact loaders UAE, Schaeffer loaders Dubai, wheel loader dealer UAE, telescopic wheel loader UAE, compact wheel loader for sale Dubai, articulated loader supplier UAE, construction loaders UAE, wheeled loaders GCC, loader spare parts UAE, telehandler supplier GCC"
        breadcrumbs={[
          { name: "Home", url: "https://www.alzarfze.com" },
          { name: "Machinery", url: "https://www.alzarfze.com/industries/machinery" },
          { name: "Compact Loaders UAE", url: "https://www.alzarfze.com/machinery/compact-loaders-uae" },
        ]}
      />

      <PageHero
        title={isAr ? "لوادر مدمجة للبناء في الإمارات" : "Compact Loaders for Construction in the UAE"}
        subtitle={isAr ? "وكيل شيفر المعتمد — لوادر مدمجة وتلسكوبية وكهربائية للبناء والزراعة وتنسيق الحدائق" : "Authorized Schaeffer dealer — compact, telescopic, and electric wheeled loaders for construction, agriculture, and landscaping"}
        bgImage={HERO_IMG}
        breadcrumbs={[
          { label: isAr ? "الرئيسية" : "Home", href: "/" },
          { label: isAr ? "الآلات" : "Machinery", href: "/industries/machinery" },
          { label: isAr ? "لوادر مدمجة" : "Compact Loaders" },
        ]}
      />

      {/* Intro + Image */}
      <section className="py-16 lg:py-24">
        <div className="container">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <h2 className="font-heading font-bold text-3xl lg:text-4xl text-navy mb-6">
                {isAr ? "لوادر شيفر المدمجة في الإمارات والخليج" : "Schaeffer Compact Loaders in UAE & GCC"}
              </h2>
              <div className="space-y-4 text-slate-dark/80 leading-relaxed">
                <p>
                  {isAr
                    ? "الزار FZE هي الوكيل المعتمد لشركة شيفر ماشيننفابريك الألمانية في الإمارات ودول مجلس التعاون الخليجي. تأسست شيفر عام 1956 على يد هاينريش شيفر في إرفيته بألمانيا، وهي من الشركات الأوروبية الرائدة في تصنيع اللوادر المدمجة والتلسكوبية ذات العجلات بنظام التوجيه المحوري."
                    : "Alzar FZE is the authorized dealer for Schaeffer Maschinenfabrik of Germany in the UAE and GCC countries. Founded in 1956 by Heinrich Schäffer in Erwitte, Germany, Schaeffer is a leading European manufacturer of pivot-steer compact and telescopic wheeled loaders."}
                </p>
                <p>
                  {isAr
                    ? "مع أكثر من 480 موظفاً، تنتج شيفر مجموعة شاملة من اللوادر المصممة للبناء والزراعة ومزارع الألبان وتنسيق الحدائق والخدمات البلدية والتطبيقات الصناعية. نوفر المجموعة الكاملة مع الدعم الفني وقطع الغيار الأصلية محلياً."
                    : "With over 480 employees, Schaeffer produces a comprehensive range of loaders designed for construction, agriculture, dairy farming, landscaping, municipal services, and industrial applications. We supply the full range with local technical support and genuine spare parts."}
                </p>
              </div>

              <div className="mt-8 flex flex-wrap gap-3">
                <button
                  onClick={() => {
                    trackCTAClick("Request Quote", "compact-loaders-intro");
                    window.dispatchEvent(new CustomEvent("open-quote-modal", { detail: { industry: "Machinery" } }));
                  }}
                  className="inline-flex items-center gap-2 bg-teal hover:bg-teal-dark text-white font-semibold px-6 py-3 rounded-md transition-all group"
                >
                  <FileText className="w-4 h-4" />
                  {isAr ? "طلب عرض أسعار" : "Request a Quote"}
                </button>
                <Link href="/industries/machinery" className="inline-flex items-center gap-2 border border-navy/20 text-navy hover:bg-navy/5 font-semibold px-6 py-3 rounded-md transition-all group">
                  {isAr ? "جميع حلول الآلات" : "All Machinery Solutions"}
                  <ArrowRight className="w-4 h-4 group-hover:translate-x-1 rtl:group-hover:-translate-x-1 transition-transform" />
                </Link>
              </div>
            </div>

            <div className="relative rounded-xl overflow-hidden aspect-[4/3] shadow-lg">
              <img
                src={SCHAEFFER_IMG}
                alt={isAr ? "لودر شيفر مدمج بعجلات في الاستخدام" : "Schaeffer compact wheeled loader in use"}
                className="w-full h-full object-cover"
                loading="lazy"
              />
              <div className="absolute bottom-0 inset-x-0 bg-gradient-to-t from-navy/80 to-transparent p-5">
                <span className="text-white font-heading font-bold" dir="ltr">Schaeffer Maschinenfabrik GmbH</span>
                <p className="text-white/70 text-sm mt-1">{isAr ? "تأسست 1956 — إرفيته، ألمانيا" : "Est. 1956 — Erwitte, Germany"}</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Loader Categories */}
      <section className="py-16 lg:py-24 bg-warm-white">
        <div className="container">
          <h2 className="font-heading font-bold text-3xl text-navy text-center mb-4">
            {isAr ? "مجموعة اللوادر" : "Loader Range"}
          </h2>
          <p className="text-center text-slate-dark/70 mb-12 max-w-2xl mx-auto">
            {isAr
              ? "مجموعة كاملة من اللوادر المدمجة والتلسكوبية والكهربائية لتلبية جميع الاحتياجات"
              : "A complete range of compact, telescopic, and electric loaders to meet every requirement"}
          </p>
          <div className="grid md:grid-cols-3 gap-8">
            {loaderCategories.map((cat, i) => (
              <div key={i} className="bg-white rounded-xl border border-navy/5 shadow-sm p-6">
                <div className="p-3 bg-teal/10 rounded-lg w-fit mb-4">
                  <cat.icon className="w-6 h-6 text-teal" />
                </div>
                <h3 className="font-heading font-semibold text-navy text-lg mb-3">{cat.title}</h3>
                <p className="text-sm text-slate-dark/70 leading-relaxed">{cat.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Applications */}
      <section className="py-16 lg:py-24">
        <div className="container">
          <h2 className="font-heading font-bold text-3xl text-navy text-center mb-4">
            {isAr ? "مجالات الاستخدام" : "Applications"}
          </h2>
          <p className="text-center text-slate-dark/70 mb-12 max-w-2xl mx-auto">
            {isAr
              ? "لوادر شيفر متعددة الاستخدامات تخدم مجموعة واسعة من القطاعات"
              : "Schaeffer loaders are versatile machines serving a wide range of sectors"}
          </p>
          <div className="grid md:grid-cols-2 gap-6">
            {applications.map((app, i) => (
              <div key={i} className="flex gap-4 bg-warm-white rounded-xl border border-navy/5 p-6">
                <div className="p-3 bg-teal/10 rounded-lg w-fit h-fit shrink-0">
                  <app.icon className="w-6 h-6 text-teal" />
                </div>
                <div>
                  <h3 className="font-heading font-semibold text-navy mb-1">{app.label}</h3>
                  <p className="text-sm text-slate-dark/70 leading-relaxed">{app.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Advantages */}
      <section className="py-16 lg:py-24 bg-navy text-white">
        <div className="container">
          <h2 className="font-heading font-bold text-3xl text-white text-center mb-12">
            {isAr ? "لماذا لوادر شيفر؟" : "Why Schaeffer Loaders?"}
          </h2>
          <div className="grid md:grid-cols-2 gap-8">
            {advantages.map((adv, i) => (
              <div key={i} className="flex gap-4">
                <div className="p-3 bg-teal/20 rounded-lg w-fit h-fit shrink-0">
                  <adv.icon className="w-6 h-6 text-teal" />
                </div>
                <div>
                  <h3 className="font-heading font-semibold text-white mb-2">{adv.title}</h3>
                  <p className="text-sm text-white/60 leading-relaxed">{adv.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="py-16 lg:py-24 bg-warm-white">
        <div className="container">
          <div className="max-w-3xl mx-auto">
            <h2 className="font-heading font-bold text-3xl lg:text-4xl text-navy mb-8 text-center">
              {isAr ? "الأسئلة الشائعة" : "Frequently Asked Questions"}
            </h2>
            <div className="space-y-4">
              {faqs.map((faq, i) => (
                <details key={i} className="group bg-white rounded-xl border border-navy/10 overflow-hidden">
                  <summary className="flex items-center justify-between p-5 cursor-pointer font-semibold text-navy hover:bg-navy/5 transition-colors">
                    {faq.q}
                    <ArrowRight className="w-4 h-4 text-teal transition-transform group-open:rotate-90 shrink-0 ltr:ml-4 rtl:mr-4" />
                  </summary>
                  <div className="px-5 pb-5 text-slate-dark/70 leading-relaxed">{faq.a}</div>
                </details>
              ))}
            </div>
          </div>
          <script
            type="application/ld+json"
            dangerouslySetInnerHTML={{
              __html: JSON.stringify({
                "@context": "https://schema.org",
                "@type": "FAQPage",
                mainEntity: [
                  { "@type": "Question", name: "What types of compact loaders are available in the UAE?", acceptedAnswer: { "@type": "Answer", text: "Alzar FZE supplies the full range of Schaeffer compact wheeled loaders in the UAE, including compact loaders (1,250 kg to over 5,000 kg operating weight), telescopic loaders (up to 4.95 m lifting height), and the 23e electric yard loader." } },
                  { "@type": "Question", name: "Do you provide spare parts and after-sales service?", acceptedAnswer: { "@type": "Answer", text: "Yes, as the authorized Schaeffer dealer in the UAE and GCC, we provide genuine spare parts, full technical support, and maintenance service for all Schaeffer loader models." } },
                  { "@type": "Question", name: "Can Schaeffer loaders be used on construction sites?", acceptedAnswer: { "@type": "Answer", text: "Yes, Schaeffer compact loaders are designed for tight construction sites. Pivot steering provides the smallest turning radius in its class, with attachments for digging, lifting, grading, and cleaning." } },
                  { "@type": "Question", name: "What is the difference between compact and telescopic loaders?", acceptedAnswer: { "@type": "Answer", text: "Compact loaders are designed for confined spaces with high loading capacity. Telescopic loaders feature an extendable boom for extended reach and higher lifting heights up to 4.95 m." } },
                ],
              }),
            }}
          />
        </div>
      </section>

      {/* Internal Links */}
      <section className="py-12">
        <div className="container">
          <div className="flex flex-wrap justify-center gap-4">
            <Link href="/industries/machinery" className="text-sm text-teal hover:text-teal-dark underline underline-offset-4">{isAr ? "حلول الآلات" : "Machinery Solutions"}</Link>
            <Link href="/partners" className="text-sm text-teal hover:text-teal-dark underline underline-offset-4">{isAr ? "شركاؤنا" : "Our Partners"}</Link>
            <Link href="/contact" className="text-sm text-teal hover:text-teal-dark underline underline-offset-4">{isAr ? "اتصل بنا" : "Contact Us"}</Link>
            <Link href="/about" className="text-sm text-teal hover:text-teal-dark underline underline-offset-4">{isAr ? "عن الزار" : "About Alzar FZE"}</Link>
          </div>
        </div>
      </section>

      <CTABanner />
    </Layout>
  );
}
