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

const HERO_IMG = "/images/ceramic-tiles.png";

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

  const materials = [
    {
      icon: Gem,
      title: isAr ? "الزركون (رمل وطحين)" : "Zircon (Sand & Flour)",
      desc: isAr
        ? "رمل وطحين الزركون عالي النقاء من إيناميت أستراليا. يُستخدم كمادة معتمة في الطلاء الزجاجي للسيراميك لإنتاج سطح أبيض ناصع. متوفر بأحجام حبيبات مختلفة حسب التطبيق."
        : "High-purity zircon sand and flour from Enamet Australia. Used as an opacifier in ceramic glazes to produce a bright white surface. Available in various particle sizes depending on application requirements.",
    },
    {
      icon: Layers,
      title: isAr ? "الألومينا (أكسيد الألومنيوم)" : "Alumina (Aluminum Oxide)",
      desc: isAr
        ? "ألومينا بفئات متعددة للاستخدام في صناعة السيراميك والحراريات. تُستخدم كمادة خام أساسية في إنتاج السيراميك التقني والحراريات عالية الأداء."
        : "Alumina in multiple grades for use in ceramics and refractory manufacturing. Used as a primary raw material in the production of technical ceramics and high-performance refractories.",
    },
    {
      icon: Droplets,
      title: isAr ? "الفريت والطلاء الزجاجي" : "Frits & Glazes",
      desc: isAr
        ? "فريت وطلاءات زجاجية من إندوسيرام الإسبانية. تشمل فريت شفاف ومعتم وملون لمختلف تطبيقات بلاط السيراميك والأدوات الصحية."
        : "Frits and glazes from Induscer of Spain. Including transparent, opaque, and colored frits for various ceramic tile and sanitaryware applications.",
    },
    {
      icon: Palette,
      title: isAr ? "أكاسيد التلوين والأصباغ" : "Coloring Oxides & Pigments",
      desc: isAr
        ? "أكاسيد تلوين وأصباغ سيراميكية لإنتاج ألوان متنوعة في بلاط السيراميك والطلاءات الزجاجية. متوفرة بتركيزات ودرجات مختلفة."
        : "Coloring oxides and ceramic pigments for producing diverse colors in ceramic tiles and glazes. Available in various concentrations and grades.",
    },
  ];

  const partners = [
    {
      name: "Enamet Australia",
      nameAr: "إيناميت أستراليا",
      desc: isAr ? "مورد رمل وطحين الزركون عالي النقاء" : "Supplier of high-purity zircon sand and flour",
    },
    {
      name: "Induscer (Spain)",
      nameAr: "إندوسيرام (إسبانيا)",
      desc: isAr ? "منتج فريت وطلاءات زجاجية للسيراميك" : "Producer of frits and ceramic glazes",
    },
  ];

  const faqs = isAr
    ? [
        {
          q: "ما هي المواد الخام الرئيسية للسيراميك التي توفرها الزار؟",
          a: "نوفر الزركون (رمل وطحين) من إيناميت أستراليا، والفريت والطلاءات الزجاجية من إندوسيرام الإسبانية، بالإضافة إلى الألومينا وأكاسيد التلوين والأصباغ السيراميكية.",
        },
        {
          q: "ما هو استخدام الزركون في صناعة السيراميك؟",
          a: "يُستخدم الزركون بشكل أساسي كمادة معتمة في الطلاء الزجاجي للسيراميك. يمنح السطح لوناً أبيض ناصعاً ويحسن الخصائص الميكانيكية والكيميائية للطلاء. كما يُستخدم في إنتاج السيراميك التقني.",
        },
        {
          q: "هل توفرون الدعم الفني لاختيار المواد الخام؟",
          a: "نعم، فريقنا الفني يساعد مصنعي السيراميك في اختيار المواد الخام المناسبة بناءً على متطلبات المنتج النهائي وظروف الإنتاج. نقدم أيضاً عينات للاختبار قبل الطلب.",
        },
      ]
    : [
        {
          q: "What are the main ceramic raw materials supplied by Alzar FZE?",
          a: "We supply zircon (sand and flour) from Enamet Australia, frits and glazes from Induscer of Spain, as well as alumina, coloring oxides, and ceramic pigments.",
        },
        {
          q: "What is zircon used for in ceramics manufacturing?",
          a: "Zircon is primarily used as an opacifier in ceramic glazes. It gives the surface a bright white color and improves the mechanical and chemical properties of the glaze. It is also used in the production of technical ceramics.",
        },
        {
          q: "Do you provide technical support for raw material selection?",
          a: "Yes, our technical team assists ceramic manufacturers in selecting the appropriate raw materials based on end-product requirements and production conditions. We also provide samples for testing before ordering.",
        },
      ];

  return (
    <Layout>
      <SEOHead
        title={isAr ? "مواد خام السيراميك في الإمارات | الزار FZE" : "Ceramic Raw Materials UAE | Zircon, Frits & Glazes Supplier | Alzar FZE"}
        description={isAr ? "الزار FZE توفر مواد خام السيراميك في الإمارات: زركون من إيناميت أستراليا، فريت من إندوسيرام الإسبانية، ألومينا وأصباغ." : "Alzar FZE supplies ceramic raw materials in UAE: zircon from Enamet Australia, frits from Induscer Spain, alumina, and pigments."}
        canonical="https://www.alzarfze.com/ceramics/ceramic-raw-materials-uae"
        keywords="ceramic raw materials UAE, zircon sand supplier Dubai, zircon opacifier supplier GCC, ceramic frit supplier UAE, ceramic glaze supplier Middle East, ceramic frits glazes GCC, ceramic pigment stain supplier, ceramic pigments Middle East, alumina for ceramics UAE"
        breadcrumbs={[
          { name: "Home", url: "https://www.alzarfze.com" },
          { name: "Ceramics", url: "https://www.alzarfze.com/industries/ceramics" },
          { name: "Ceramic Raw Materials UAE", url: "https://www.alzarfze.com/ceramics/ceramic-raw-materials-uae" },
        ]}
      />

      <PageHero
        title={isAr ? "مواد خام السيراميك في الإمارات" : "Ceramic Raw Materials in the UAE"}
        subtitle={isAr ? "زركون، فريت، طلاءات زجاجية، وأصباغ سيراميكية لمصنعي البلاط والأدوات الصحية" : "Zircon, frits, glazes, and ceramic pigments for tile and sanitaryware manufacturers"}
        bgImage={HERO_IMG}
        breadcrumbs={[
          { label: isAr ? "الرئيسية" : "Home", href: "/" },
          { label: isAr ? "السيراميك" : "Ceramics", href: "/industries/ceramics" },
          { label: isAr ? "المواد الخام" : "Raw Materials" },
        ]}
      />

      {/* 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 ? "مواد خام السيراميك لمصنعي الإمارات والخليج" : "Ceramic Raw Materials for UAE & GCC Manufacturers"}
            </h2>
            <div className="space-y-4 text-slate-dark/80 leading-relaxed">
              <p>
                {isAr
                  ? "توفر الزار FZE مجموعة شاملة من المواد الخام لصناعة السيراميك، بما في ذلك الزركون والفريت والطلاءات الزجاجية والأصباغ. نمثل موردين دوليين معتمدين لتزويد مصنعي البلاط والأدوات الصحية في المنطقة بمواد عالية الجودة."
                  : "Alzar FZE provides a comprehensive range of raw materials for the ceramics industry, including zircon, frits, glazes, and pigments. We represent established international suppliers to provide high-quality materials to tile and sanitaryware manufacturers in the region."}
              </p>
              <p>
                {isAr
                  ? "مع خبرة تزيد عن 25 عاماً في خدمة صناعة السيراميك في المنطقة، نفهم متطلبات الإنتاج المحلية ونقدم الدعم الفني اللازم لاختيار المواد المناسبة."
                  : "With over 25 years of experience serving the ceramics industry in the region, we understand local production requirements and provide the technical support needed for appropriate material selection."}
              </p>
            </div>
            <div className="mt-8 flex flex-wrap gap-3">
              <button
                onClick={() => {
                  trackCTAClick("Request Quote", "ceramic-raw-materials-intro");
                  window.dispatchEvent(new CustomEvent("open-quote-modal", { detail: { industry: "Ceramics" } }));
                }}
                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/ceramics" 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 Ceramics 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>

      {/* Materials */}
      <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 ? "المواد الخام المتوفرة" : "Available Raw Materials"}
          </h2>
          <div className="grid md:grid-cols-2 gap-8">
            {materials.map((m, 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">
                  <m.icon className="w-6 h-6 text-teal" />
                </div>
                <div>
                  <h3 className="font-heading font-semibold text-navy mb-2">{m.title}</h3>
                  <p className="text-sm text-slate-dark/70 leading-relaxed">{m.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Partners */}
      <section className="py-16 lg:py-24">
        <div className="container text-center">
          <h2 className="font-heading font-bold text-3xl text-navy mb-8">
            {isAr ? "شركاؤنا في المواد الخام" : "Our Raw Material Partners"}
          </h2>
          <div className="flex flex-wrap justify-center gap-6">
            {partners.map((p, i) => (
              <div key={i} className="bg-white rounded-xl border border-navy/10 shadow-sm p-6 max-w-sm text-center">
                <h3 className="font-heading font-semibold text-navy mb-2" dir="ltr">{p.name}</h3>
                <p className="text-sm text-slate-dark/70">{p.desc}</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 ceramic raw materials does Alzar FZE supply?", acceptedAnswer: { "@type": "Answer", text: "Alzar FZE supplies zircon (sand and flour) from Enamet Australia, frits and glazes from Induscer of Spain, alumina, coloring oxides, and ceramic pigments." } },
              { "@type": "Question", name: "What is zircon used for in ceramics?", acceptedAnswer: { "@type": "Answer", text: "Zircon is primarily used as an opacifier in ceramic glazes to produce a bright white surface and improve mechanical and chemical properties." } },
              { "@type": "Question", name: "Does Alzar FZE provide technical support for material selection?", acceptedAnswer: { "@type": "Answer", text: "Yes, our technical team assists manufacturers in selecting appropriate raw materials based on end-product requirements and production conditions." } },
            ]
          }) }} />
        </div>
      </section>

      <section className="py-12">
        <div className="container">
          <div className="flex flex-wrap justify-center gap-4">
            <Link href="/industries/ceramics" className="text-sm text-teal hover:text-teal-dark underline underline-offset-4">{isAr ? "حلول صناعة السيراميك" : "Ceramics Industry 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>
          </div>
        </div>
      </section>

      <CTABanner />
    </Layout>
  );
}
