import { Link } from "wouter";
import { ArrowRight, FlaskConical, GlassWater, Factory, Cog } from "lucide-react";
import { useLanguage } from "@/contexts/LanguageContext";

const CERAMICS_IMG = "/images/ceramics-production.jpg";
const GLASS_IMG = "/images/glass-furnace.jpg";
const MACHINERY_IMG = "/images/machinery-section.jpg";

const industries = [
  {
    icon: FlaskConical,
    title: { en: "Ceramics", ar: "السيراميك" },
    href: "/industries/ceramics",
    image: CERAMICS_IMG,
    desc: {
      en: "Raw materials, deflocculants, binders, CMC, coatings, superplasticizers, and technical consulting for ceramic, refractory, concrete, and mining applications.",
      ar: "مواد خام، مذيبات، مواد رابطة، CMC، طلاءات، ملدنات فائقة، واستشارات فنية لتطبيقات السيراميك والحراريات والخرسانة والتعدين."
    },
    audience: {
      en: "Tile manufacturers, sanitaryware producers, refractory companies",
      ar: "مصنعي البلاط، منتجي الأدوات الصحية، شركات الحراريات"
    },
  },
  {
    icon: GlassWater,
    title: { en: "Glass & Aluminum", ar: "الزجاج والألمنيوم" },
    href: "/industries/glass",
    image: GLASS_IMG,
    desc: {
      en: "Electronic controls, silica bricks, AZS refractories, combustion technology, furnace services, precision spare parts, and aluminum extrusion lubricants from 11 world-class partners.",
      ar: "أنظمة تحكم إلكترونية، طوب سيليكا، حراريات AZS، تقنيات احتراق، خدمات أفران، قطع غيار دقيقة، ومواد تشحيم بثق الألمنيوم من 11 شريكاً عالمياً."
    },
    audience: {
      en: "Container glass plants, float glass manufacturers, tableware producers, aluminum extruders",
      ar: "مصانع الزجاج، منتجي الزجاج المسطح، مصنعي أدوات المائدة، مصانع بثق الألمنيوم"
    },
  },
  {
    icon: Factory,
    title: { en: "Cement", ar: "الأسمنت" },
    href: "/industries/cement",
    image: "/images/cement-plant.jpg",
    desc: {
      en: "Magnesia bricks for kiln lining, grinding aids for production optimization, and comprehensive refractory solutions for cement plant equipment.",
      ar: "طوب مغنيسيا لبطانة الأفران، مساعدات طحن لتحسين الإنتاج، وحلول حرارية شاملة لمعدات مصانع الأسمنت."
    },
    audience: {
      en: "Cement plant managers, kiln engineers, production teams",
      ar: "مديري مصانع الأسمنت، مهندسي الأفران، فرق الإنتاج"
    },
  },
  {
    icon: Cog,
    title: { en: "Machinery", ar: "الآلات" },
    href: "/industries/machinery",
    image: MACHINERY_IMG,
    desc: {
      en: "Compact loaders, telescopic loaders, and feeding technology for dairy farms and construction from Schaeffer and BvL.",
      ar: "لوادر مدمجة، لوادر تلسكوبية، وتقنيات تغذية لمزارع الألبان والبناء من Schaeffer وBvL."
    },
    audience: {
      en: "Dairy farms, construction companies, landscaping businesses",
      ar: "مزارع الألبان، شركات البناء، شركات تنسيق الحدائق"
    },
  },
];

export default function HomeIndustries() {
  const { t, lang } = useLanguage();

  return (
    <section className="py-16 lg:py-24 bg-warm-white">
      <div className="container">
        <div className="text-center max-w-2xl mx-auto mb-12">
          <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("services.tag")}</span>
          </div>
          <h2 className="font-heading font-bold text-3xl lg:text-4xl text-navy mb-4">
            {t("services.title")}
          </h2>
          <p className="text-slate-dark/70 leading-relaxed">
            {t("services.subtitle")}
          </p>
        </div>

        <div className="grid md:grid-cols-2 gap-6 lg:gap-8">
          {industries.map((ind, i) => (
            <Link key={i} href={ind.href} className="group block">
              <div className="bg-white rounded-xl border border-navy/5 shadow-sm overflow-hidden hover:shadow-lg transition-all duration-300">
                <div className="relative h-48 overflow-hidden">
                  <img
                    src={ind.image}
                    alt={`${ind.title[lang]} industry solutions`}
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-navy/60 to-transparent" />
                  <div className="absolute bottom-4 left-4 rtl:left-auto rtl:right-4 flex items-center gap-2">
                    <div className="p-2 bg-teal/90 rounded-lg">
                      <ind.icon className="w-5 h-5 text-white" />
                    </div>
                    <h3 className="font-heading font-bold text-xl text-white">{ind.title[lang]}</h3>
                  </div>
                </div>
                <div className="p-6">
                  <p className="text-sm text-slate-dark/75 leading-relaxed mb-3">{ind.desc[lang]}</p>
                  <div className="text-xs text-navy/40 mb-4">
                    <span className="font-medium text-navy/60">{lang === "ar" ? "لـ:" : "For:"}</span> {ind.audience[lang]}
                  </div>
                  <span className="inline-flex items-center gap-1.5 text-sm text-teal font-semibold group-hover:gap-2.5 transition-all">
                    {t("services.learnMore")} <ArrowRight className="w-4 h-4 rtl:rotate-180" />
                  </span>
                </div>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}
