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, Flame, Shield, Gauge, Factory, FileText, ThermometerSun } from "lucide-react";
import { useLanguage } from "@/contexts/LanguageContext";
import { trackCTAClick } from "@/lib/analytics";

const HERO_IMG = "/images/cement-plant.jpg";

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

  const products = [
    {
      icon: Flame,
      title: isAr ? "طوب المغنيسيا-سبينل" : "Magnesia-Spinel Bricks",
      desc: isAr
        ? "مصممة لمنطقة الاحتراق في أفران الأسمنت الدوارة حيث تتجاوز درجات الحرارة 1,450 درجة مئوية. توفر مقاومة ممتازة للتآكل الكيميائي والحراري. يتم توريدها من MGC."
        : "Designed for the burning zone of rotary cement kilns where temperatures exceed 1,450°C. They provide excellent resistance to chemical and thermal corrosion. Supplied by MGC.",
    },
    {
      icon: Shield,
      title: isAr ? "طوب المغنيسيا-كروم" : "Magnesia-Chrome Bricks",
      desc: isAr
        ? "تُستخدم في مناطق الانتقال في أفران الأسمنت حيث تتطلب مقاومة عالية للتآكل الميكانيكي والكيميائي. مناسبة للمناطق ذات التغيرات الحرارية الكبيرة."
        : "Used in transition zones of cement kilns where high resistance to mechanical and chemical wear is required. Suitable for areas with significant thermal fluctuations.",
    },
    {
      icon: ThermometerSun,
      title: isAr ? "طوب الدولوميت" : "Dolomite Bricks",
      desc: isAr
        ? "تُستخدم في أقسام متخصصة من الفرن حيث تتطلب مقاومة عالية للقلويات. توفر أداءً موثوقاً في البيئات ذات المحتوى العالي من القلويات والكبريتات."
        : "Used in specialized kiln sections where high alkali resistance is required. They provide reliable performance in environments with high alkali and sulfate content.",
    },
    {
      icon: Gauge,
      title: isAr ? "حراريات قابلة للصب" : "Castable Refractories",
      desc: isAr
        ? "حراريات مونوليثية لأعاصير التسخين المسبق والمكلس والمبرد والمعدات المساعدة. تشمل مواد عازلة وأنظمة تثبيت."
        : "Monolithic refractories for preheater cyclones, calciner, cooler, and auxiliary equipment. Includes insulating materials and anchoring systems.",
    },
  ];

  const faqs = isAr
    ? [
        {
          q: "ما هي أنواع الحراريات المتوفرة لأفران الأسمنت؟",
          a: "نوفر طوب المغنيسيا-سبينل والمغنيسيا-كروم والدولوميت لمناطق الفرن المختلفة، بالإضافة إلى حراريات قابلة للصب لأعاصير التسخين المسبق والمكلس. جميع المنتجات من MGC.",
        },
        {
          q: "ما هو العمر الافتراضي النموذجي لبطانة فرن الأسمنت؟",
          a: "يعتمد عمر البطانة على عدة عوامل منها نوع الحراريات وظروف التشغيل وجودة التركيب. عادةً ما تستمر بطانات منطقة الاحتراق من 6 إلى 18 شهراً حسب ظروف التشغيل. نعمل مع فريقك لاختيار المنتجات المناسبة لتعظيم عمر الحملة.",
        },
        {
          q: "هل توفرون خدمات استشارية لتصميم بطانة الفرن؟",
          a: "نعم، نقدم خدمات استشارية تشمل تصميم بطانة الفرن واختيار المواد الحرارية المناسبة والإشراف على التركيب. يعمل مهندسونا مع فريقك لتحسين أداء البطانة وتقليل التوقف غير المخطط.",
        },
      ]
    : [
        {
          q: "What types of refractories are available for cement kilns?",
          a: "We supply magnesia-spinel, magnesia-chrome, and dolomite bricks for different kiln zones, plus castable refractories for preheater cyclones and calciner. All products are sourced from MGC.",
        },
        {
          q: "What is the typical service life of a cement kiln lining?",
          a: "Lining life depends on several factors including refractory type, operating conditions, and installation quality. Burning zone linings typically last 6 to 18 months depending on operating conditions. We work with your team to select the right products to maximize campaign life.",
        },
        {
          q: "Do you provide consulting services for kiln lining design?",
          a: "Yes, we offer consulting services including kiln lining design, refractory material selection, and installation supervision. Our engineers work with your team to optimize lining performance and reduce unplanned downtime.",
        },
      ];

  return (
    <Layout>
      <SEOHead
        title={isAr ? "حراريات أفران الأسمنت في الإمارات | الزار FZE" : "Cement Kiln Refractories UAE | Magnesia Bricks Supplier | Alzar FZE"}
        description={isAr ? "الزار FZE توفر طوب المغنيسيا وحراريات أفران الأسمنت من MGC لمصانع الأسمنت في الإمارات والخليج." : "Alzar FZE supplies MGC magnesia bricks and refractory solutions for cement kilns across UAE and GCC. Burning zone, transition zone, and preheater linings."}
        canonical="https://www.alzarfze.com/cement/kiln-refractories"
        keywords="cement kiln refractories UAE, magnesia bricks cement kiln, magnesite chrome bricks cement kiln, cement rotary kiln refractory supplier, burning zone refractory GCC, kiln lining supplier UAE, refractory supplier Dubai, preheater refractory GCC"
        breadcrumbs={[
          { name: "Home", url: "https://www.alzarfze.com" },
          { name: "Cement", url: "https://www.alzarfze.com/industries/cement" },
          { name: "Kiln Refractories", url: "https://www.alzarfze.com/cement/kiln-refractories" },
        ]}
      />

      <PageHero
        title={isAr ? "حراريات أفران الأسمنت الدوارة" : "Rotary Cement Kiln Refractories"}
        subtitle={isAr ? "طوب مغنيسيا عالي الجودة وحلول حرارية لجميع مناطق فرن الأسمنت" : "High-quality magnesia bricks and refractory solutions for all cement kiln zones"}
        bgImage={HERO_IMG}
        breadcrumbs={[
          { label: isAr ? "الرئيسية" : "Home", href: "/" },
          { label: isAr ? "الأسمنت" : "Cement", href: "/industries/cement" },
          { label: isAr ? "حراريات الأفران" : "Kiln Refractories" },
        ]}
      />

      {/* Intro */}
      <section className="py-16 lg:py-24">
        <div className="container">
          <div className="max-w-3xl">
            <h2 className="font-heading font-bold text-3xl lg:text-4xl text-navy mb-6">
              {isAr ? "حراريات موثوقة لأفران الأسمنت" : "Reliable Refractories for Cement Kilns"}
            </h2>
            <div className="space-y-4 text-slate-dark/80 leading-relaxed">
              <p>
                {isAr
                  ? "البطانة الحرارية هي عنصر حاسم في تشغيل فرن الأسمنت الدوار. تحمي غلاف الفرن الفولاذي من درجات الحرارة التي تتجاوز 1,450 درجة مئوية في منطقة الاحتراق، وتتحمل التآكل الكيميائي من المواد الخام والوقود."
                  : "The refractory lining is a critical component in rotary cement kiln operation. It protects the steel kiln shell from temperatures exceeding 1,450°C in the burning zone and withstands chemical attack from raw materials and fuel."}
              </p>
              <p>
                {isAr
                  ? "تمثل الزار FZE شركة MGC لتوريد طوب المغنيسيا عالي الجودة لأفران الأسمنت في الإمارات ودول مجلس التعاون الخليجي. نقدم مجموعة كاملة من المنتجات الحرارية لجميع مناطق الفرن، مع دعم فني لاختيار المواد وتصميم البطانة."
                  : "Alzar FZE represents MGC for supplying high-quality magnesia bricks for cement kilns in the UAE and GCC countries. We offer a complete range of refractory products for all kiln zones, with technical support for material selection and lining design."}
              </p>
            </div>
            <div className="mt-8 flex flex-wrap gap-3">
              <button
                onClick={() => {
                  trackCTAClick("Request Quote", "kiln-refractories-intro");
                  window.dispatchEvent(new CustomEvent("open-quote-modal", { detail: { industry: "Cement Industry" } }));
                }}
                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/cement" 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 ? "حلول الأسمنت الكاملة" : "Full Cement Solutions"}
                <ArrowRight className="w-4 h-4 group-hover:translate-x-1 rtl:group-hover:-translate-x-1 transition-transform" />
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Products */}
      <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-12">
            {isAr ? "منتجاتنا الحرارية" : "Our Refractory Products"}
          </h2>
          <div className="grid md:grid-cols-2 gap-8">
            {products.map((p, i) => (
              <div key={i} className="bg-white rounded-xl border border-navy/5 shadow-sm p-6 flex gap-4">
                <div className="p-3 bg-teal/10 rounded-lg w-fit h-fit shrink-0">
                  <p.icon className="w-6 h-6 text-teal" />
                </div>
                <div>
                  <h3 className="font-heading font-semibold text-navy mb-2">{p.title}</h3>
                  <p className="text-sm text-slate-dark/70 leading-relaxed">{p.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Kiln Zones Diagram */}
      <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 ? "مناطق فرن الأسمنت الدوار" : "Rotary Cement Kiln Zones"}
          </h2>
          <p className="text-center text-slate-dark/70 mb-12 max-w-2xl mx-auto">
            {isAr
              ? "كل منطقة في الفرن تتطلب نوعاً مختلفاً من الحراريات بناءً على درجة الحرارة والتآكل الكيميائي والإجهاد الميكانيكي"
              : "Each kiln zone requires a different type of refractory based on temperature, chemical attack, and mechanical stress"}
          </p>
          <div className="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto">
            {[
              {
                zone: isAr ? "منطقة الاحتراق" : "Burning Zone",
                temp: isAr ? "1,350–1,450+ °م" : "1,350–1,450+ °C",
                material: isAr ? "طوب المغنيسيا-سبينل" : "Magnesia-Spinel Bricks",
                color: "bg-red-500/10 border-red-500/20",
                textColor: "text-red-700",
              },
              {
                zone: isAr ? "منطقة الانتقال" : "Transition Zone",
                temp: isAr ? "1,100–1,350 °م" : "1,100–1,350 °C",
                material: isAr ? "طوب المغنيسيا-كروم" : "Magnesia-Chrome Bricks",
                color: "bg-orange-500/10 border-orange-500/20",
                textColor: "text-orange-700",
              },
              {
                zone: isAr ? "منطقة التسخين المسبق" : "Preheater Zone",
                temp: isAr ? "800–1,100 °م" : "800–1,100 °C",
                material: isAr ? "حراريات قابلة للصب" : "Castable Refractories",
                color: "bg-yellow-500/10 border-yellow-500/20",
                textColor: "text-yellow-700",
              },
            ].map((z, i) => (
              <div key={i} className={`rounded-xl border p-6 text-center ${z.color}`}>
                <h3 className={`font-heading font-bold text-lg mb-2 ${z.textColor}`}>{z.zone}</h3>
                <p className="text-sm text-slate-dark/70 mb-1" dir="ltr">{z.temp}</p>
                <p className="text-sm font-medium text-navy">{z.material}</p>
              </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 refractories are available for cement kilns?", acceptedAnswer: { "@type": "Answer", text: "Alzar FZE supplies magnesia-spinel, magnesia-chrome, and dolomite bricks for different kiln zones, plus castable refractories for preheater cyclones and calciner, sourced from MGC." } },
                  { "@type": "Question", name: "What is the typical service life of a cement kiln lining?", acceptedAnswer: { "@type": "Answer", text: "Burning zone linings typically last 6 to 18 months depending on operating conditions, refractory type, and installation quality." } },
                  { "@type": "Question", name: "Do you provide consulting services for kiln lining design?", acceptedAnswer: { "@type": "Answer", text: "Yes, Alzar FZE offers kiln lining design, refractory material selection, and installation supervision services for cement plants across UAE and GCC." } },
                ],
              }),
            }}
          />
        </div>
      </section>

      {/* Internal Links */}
      <section className="py-12">
        <div className="container">
          <div className="flex flex-wrap justify-center gap-4">
            <Link href="/industries/cement" className="text-sm text-teal hover:text-teal-dark underline underline-offset-4">{isAr ? "حلول صناعة الأسمنت" : "Cement Industry Solutions"}</Link>
            <Link href="/cement/grinding-aids-uae" className="text-sm text-teal hover:text-teal-dark underline underline-offset-4">{isAr ? "مساعدات الطحن" : "Grinding Aids"}</Link>
            <Link href="/contact" className="text-sm text-teal hover:text-teal-dark underline underline-offset-4">{isAr ? "اتصل بنا" : "Contact Us"}</Link>
            <Link href="/partners" className="text-sm text-teal hover:text-teal-dark underline underline-offset-4">{isAr ? "شركاؤنا" : "Our Partners"}</Link>
          </div>
        </div>
      </section>

      <CTABanner />
    </Layout>
  );
}
