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

const HERO_IMG = "/images/glass-furnace.jpg";

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

  const features = [
    {
      icon: ThermometerSun,
      title: isAr ? "مقاومة حرارية عالية" : "High Temperature Resistance",
      desc: isAr
        ? "طوب السيليكا يتحمل درجات حرارة تصل إلى 1,700 درجة مئوية، مما يجعله مناسباً لأقواس أفران الزجاج والمناطق العلوية حيث تكون درجات الحرارة مرتفعة."
        : "Silica bricks withstand temperatures up to 1,700°C, making them suitable for glass furnace crowns and superstructure areas where temperatures are elevated.",
    },
    {
      icon: Gauge,
      title: isAr ? "ثبات حجمي" : "Volume Stability",
      desc: isAr
        ? "طوب السيليكا يتميز بثبات حجمي ممتاز عند درجات الحرارة العالية بعد التمدد الأولي. هذا يجعله مثالياً لأقواس الأفران حيث يكون الثبات البعدي حاسماً."
        : "Silica bricks exhibit excellent volume stability at high temperatures after initial expansion. This makes them ideal for furnace crowns where dimensional stability is critical.",
    },
    {
      icon: Shield,
      title: isAr ? "مقاومة للأبخرة القلوية" : "Alkali Vapor Resistance",
      desc: isAr
        ? "تتوفر فئات مختلفة بمقاومة متفاوتة للأبخرة القلوية، مما يسمح باختيار الفئة المناسبة بناءً على تركيبة الزجاج المنتج وظروف التشغيل."
        : "Different grades are available with varying alkali vapor resistance, allowing selection of the appropriate grade based on the glass composition being produced and operating conditions.",
    },
    {
      icon: Flame,
      title: isAr ? "عمر خدمة طويل" : "Long Service Life",
      desc: isAr
        ? "عند اختيار الفئة الصحيحة وتركيبها بشكل سليم، يوفر طوب السيليكا عمر خدمة طويل في أقواس أفران الزجاج، مما يقلل من تكرار الإصلاحات والتوقف."
        : "When the correct grade is selected and properly installed, silica bricks provide long service life in glass furnace crowns, reducing repair frequency and downtime.",
    },
  ];

  const faqs = isAr
    ? [
        {
          q: "أين يُستخدم طوب السيليكا في أفران الزجاج؟",
          a: "يُستخدم طوب السيليكا بشكل أساسي في أقواس أفران صهر الزجاج (السقف) والمناطق العلوية. كما يُستخدم في أقواس المجددات الحرارية وبعض المناطق الأخرى من البنية الفوقية للفرن.",
        },
        {
          q: "ما هي فئات طوب السيليكا المتوفرة؟",
          a: "نوفر فئات متعددة من طوب السيليكا مصممة لتطبيقات مختلفة في أفران الزجاج. يعتمد اختيار الفئة على نوع الزجاج المنتج ودرجة الحرارة والبيئة الكيميائية. يمكن لفريقنا الفني المساعدة في اختيار الفئة المناسبة.",
        },
        {
          q: "هل توفرون خدمات تصميم وتركيب لأقواس أفران الزجاج؟",
          a: "نعم، نقدم خدمات استشارية تشمل تصميم أقواس الأفران واختيار المواد الحرارية المناسبة. نعمل مع فريقك لضمان الأداء الأمثل وأطول عمر خدمة ممكن.",
        },
      ]
    : [
        {
          q: "Where is silica brick used in glass furnaces?",
          a: "Silica brick is primarily used in glass melting furnace crowns (roofs) and superstructure areas. It is also used in regenerator crowns and other parts of the furnace superstructure.",
        },
        {
          q: "What grades of silica brick are available?",
          a: "We supply multiple grades of silica brick designed for different glass furnace applications. Grade selection depends on the type of glass being produced, temperature, and chemical environment. Our technical team can assist with grade selection.",
        },
        {
          q: "Do you provide design and installation services for glass furnace crowns?",
          a: "Yes, we offer consulting services including furnace crown design and refractory material selection. We work with your team to ensure optimal performance and maximum service life.",
        },
      ];

  return (
    <Layout>
      <SEOHead
        title={isAr ? "طوب السيليكا لأفران الزجاج في الإمارات | الزار FZE" : "Silica Bricks for Glass Furnaces UAE | Crown Refractories | Alzar FZE"}
        description={isAr ? "الزار FZE توفر طوب السيليكا لأقواس أفران صهر الزجاج في الإمارات والخليج. فئات متعددة لمختلف التطبيقات." : "Alzar FZE supplies silica bricks for glass furnace crowns across UAE and GCC. Multiple grades for different applications and glass types."}
        canonical="https://www.alzarfze.com/glass/silica-bricks-uae"
        keywords="silica bricks glass furnace UAE, silica bricks for glass furnace crown, glass furnace crown refractories, silica refractory supplier GCC, glass furnace superstructure refractory, silica brick supplier Dubai, glass furnace refractories GCC"
        breadcrumbs={[
          { name: "Home", url: "https://www.alzarfze.com" },
          { name: "Glass & Aluminum", url: "https://www.alzarfze.com/industries/glass" },
          { name: "Silica Bricks UAE", url: "https://www.alzarfze.com/glass/silica-bricks-uae" },
        ]}
      />

      <PageHero
        title={isAr ? "طوب السيليكا لأقواس أفران الزجاج" : "Silica Bricks for Glass Furnace Crowns"}
        subtitle={isAr ? "حراريات سيليكا عالية الجودة لأقواس أفران صهر الزجاج والبنية الفوقية" : "High-quality silica refractories for glass melting furnace crowns and superstructure"}
        bgImage={HERO_IMG}
        breadcrumbs={[
          { label: isAr ? "الرئيسية" : "Home", href: "/" },
          { label: isAr ? "الزجاج" : "Glass", href: "/industries/glass" },
          { label: isAr ? "طوب السيليكا" : "Silica Bricks" },
        ]}
      />

      {/* 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 ? "طوب السيليكا لصناعة الزجاج" : "Silica Bricks for the Glass Industry"}
            </h2>
            <div className="space-y-4 text-slate-dark/80 leading-relaxed">
              <p>
                {isAr
                  ? "طوب السيليكا هو المادة الحرارية المفضلة لأقواس أفران صهر الزجاج في جميع أنحاء العالم. يتميز بثبات حجمي ممتاز عند درجات الحرارة العالية ومقاومة جيدة للأبخرة القلوية، مما يجعله الخيار الأمثل لهذا التطبيق الحرج."
                  : "Silica brick is the preferred refractory material for glass melting furnace crowns worldwide. It offers excellent volume stability at high temperatures and good resistance to alkali vapors, making it the optimal choice for this critical application."}
              </p>
              <p>
                {isAr
                  ? "توفر الزار FZE طوب السيليكا بفئات متعددة لتلبية متطلبات أنواع مختلفة من أفران الزجاج. نعمل مع مصنعي الزجاج في الإمارات ودول مجلس التعاون الخليجي لاختيار الفئة المناسبة وتقديم الدعم الفني."
                  : "Alzar FZE supplies silica bricks in multiple grades to meet the requirements of different types of glass furnaces. We work with glass manufacturers across the UAE and GCC countries to select the appropriate grade and provide technical support."}
              </p>
            </div>
            <div className="mt-8 flex flex-wrap gap-3">
              <button
                onClick={() => {
                  trackCTAClick("Request Quote", "silica-bricks-intro");
                  window.dispatchEvent(new CustomEvent("open-quote-modal", { detail: { industry: "Glass & Aluminum" } }));
                }}
                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/glass" 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 Glass 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>

      {/* Features */}
      <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 ? "خصائص طوب السيليكا" : "Silica Brick Properties"}
          </h2>
          <div className="grid md:grid-cols-2 gap-8">
            {features.map((f, 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">
                  <f.icon className="w-6 h-6 text-teal" />
                </div>
                <div>
                  <h3 className="font-heading font-semibold text-navy mb-2">{f.title}</h3>
                  <p className="text-sm text-slate-dark/70 leading-relaxed">{f.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="py-16 lg:py-24">
        <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: "Where is silica brick used in glass furnaces?", acceptedAnswer: { "@type": "Answer", text: "Silica brick is primarily used in glass melting furnace crowns (roofs) and superstructure areas, as well as regenerator crowns." } },
              { "@type": "Question", name: "What grades of silica brick are available?", acceptedAnswer: { "@type": "Answer", text: "Multiple grades are available for different applications. Grade selection depends on glass type, temperature, and chemical environment." } },
              { "@type": "Question", name: "Do you provide design services for glass furnace crowns?", acceptedAnswer: { "@type": "Answer", text: "Yes, Alzar FZE offers consulting services including furnace crown design and refractory material selection for glass manufacturers across UAE and GCC." } },
            ]
          }) }} />
        </div>
      </section>

      <section className="py-12">
        <div className="container">
          <div className="flex flex-wrap justify-center gap-4">
            <Link href="/industries/glass" className="text-sm text-teal hover:text-teal-dark underline underline-offset-4">{isAr ? "حلول صناعة الزجاج" : "Glass Industry Solutions"}</Link>
            <Link href="/glass/azs-refractories-uae" className="text-sm text-teal hover:text-teal-dark underline underline-offset-4">{isAr ? "حراريات AZS" : "AZS Refractories"}</Link>
            <Link href="/contact" className="text-sm text-teal hover:text-teal-dark underline underline-offset-4">{isAr ? "اتصل بنا" : "Contact Us"}</Link>
          </div>
        </div>
      </section>

      <CTABanner />
    </Layout>
  );
}
