/*
  DESIGN: "Global Nexus" — Services section with four main industry cards
  Each card has an image, detailed content, and partner information
  Industries: Ceramics, Machinery, Glass, Cement
*/
import { useState } from "react";
import { ChevronDown, ChevronUp, Beaker, Cog, GlassWater, Factory } from "lucide-react";

const CERAMICS_IMG = "/images/ceramics-section.jpg";

const GLASS_IMG = "/images/glass-manufacturing.jpg";

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

// Cement industry uses an Unsplash image
const CEMENT_IMG = "https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=1200&q=80";

interface Service {
  id: string;
  icon: typeof Beaker;
  number: string;
  title: string;
  subtitle: string;
  image: string;
  imageAlt: string;
  description: string;
  products: string[];
  partners: string[];
}

const services: Service[] = [
  {
    id: "ceramics",
    icon: Beaker,
    number: "01",
    title: "Ceramics Industry",
    subtitle: "Raw Materials, Additives & Technical Consulting",
    image: CERAMICS_IMG,
    imageAlt: "Premium ceramic tiles and raw materials including kaolin powder and feldspar",
    description:
      "Backed with more than 20 years of experience in the ceramic industries, Alzar provides ceramic manufacturers with a comprehensive range of products and technical consulting services. We serve as your one-stop shop for all raw material needs, delivering custom-designed solutions for body, glaze, sanitaryware, porcelain, specialty ceramics, and refractory applications across the region.",
    products: [
      "Minerals: Kaolin, Bentonite, Feldspar",
      "Custom-designed Deflocculants for various applications",
      "Binders for MOR, dry and green strength",
      "CMC (Carboxy Methyl Cellulose) for Glaze",
      "Coatings and Glazes for Ceramic & Porcelain Tiles",
      "Additives, Surfactants & Preserving Agents",
      "Binders and Plasticizers for Refractories",
      "Fixing Agents & Screen Printing Additives",
    ],
    partners: ["Auxiliaries & Raw Materials"],
  },
  {
    id: "glass",
    icon: GlassWater,
    number: "02",
    title: "Glass & Aluminum",
    subtitle: "Electronic Controls, Refractories, Silica, Equipment & Aluminum Lubricants",
    image: GLASS_IMG,
    imageAlt: "Modern glass manufacturing facility with molten glass and electronic controls",
    description:
      "We partner with leading companies in the glass and aluminum industries to provide state-of-the-art electronic controls, refractory solutions, high-quality silica products, AZS fused cast refractories, measurement technology, specialized equipment for hollow glass and tableware glass manufacturing, and aluminum extrusion lubricants. Our partners bring over four decades of experience in developing and commissioning electronic control systems for the glass industry worldwide.",
    products: [
      "Electronic Timing Systems",
      "Synchronous Drive Systems",
      "Hot End Reject Systems",
      "Silica Products for Glass Furnaces",
      "AZS Fused Cast Refractories",
      "Refractory & Monolithic Solutions",
      "Measurement Technology (UAS)",
      "Heat Application Systems",
      "Aluminum Extrusion Lubricants",
    ],
    partners: [
      "Futronic GmbH",
      "Zhongfu-Silica",
      "Lingnan-AZS",
      "Refmon Co. Ltd.",
      "UAS Messtechnik GmbH",
      "Hotwork AG",
      "Accuramech",
      "Interglass",
      "Heat Applications India Pvt. Ltd.",
      "WBT S.R.L.",
      "Interlub Group",
    ],
  },
  {
    id: "machinery",
    icon: Cog,
    number: "03",
    title: "Machinery",
    subtitle: "Loaders, Equipment & Construction Solutions",
    image: MACHINERY_IMG,
    imageAlt: "Compact wheel loader operating on a construction site at golden hour",
    description:
      "We represent world-class machinery manufacturers, providing high-quality loaders, feeding technology, and equipment for agriculture, dairy farming, landscape gardening, municipal services, building work, and construction. Our German-engineered loaders are designed for ease of maneuverability in tight areas while delivering bundled power, compact design, and the highest reliability.",
    products: [
      "Yard, Wheel & Telescopic Loaders",
      "Agricultural Business Loaders",
      "Construction Sector Equipment",
      "Compact Machines with Enormous Load Capacity",
      "Municipal Service Equipment",
      "Feeding Technology for Dairy Farms",
    ],
    partners: ["Schaffer Maschinenfabrik GmbH", "BvL Maschinenfabrik GmbH & Co.KG"],
  },
  {
    id: "cement",
    icon: Factory,
    number: "04",
    title: "Cement Industry",
    subtitle: "Magnesia Bricks, Grinding Aids & Refractory Solutions",
    image: CEMENT_IMG,
    imageAlt: "Cement manufacturing plant with industrial kilns and processing equipment",
    description:
      "Alzar FZE provides specialized products and solutions for the cement industry, including high-quality magnesia bricks for kiln lining, advanced grinding aids to optimize cement production efficiency, and comprehensive refractory solutions. Our partners deliver proven products that enhance kiln performance, reduce energy consumption, and improve overall cement quality.",
    products: [
      "Magnesia Bricks for Cement Kilns",
      "Grinding Aids for Cement Production",
      "Refractory Lining Solutions",
      "Kiln Performance Optimization",
      "Energy Efficiency Solutions",
      "Cement Quality Enhancement Products",
    ],
    partners: ["MGC - Magnesia Bricks", "Grinding Aid Solutions"],
  },
];

function ServiceCard({ service, isReversed }: { service: Service; isReversed: boolean }) {
  const [expanded, setExpanded] = useState(false);

  return (
    <article className={`grid lg:grid-cols-2 gap-8 lg:gap-12 items-center ${isReversed ? "lg:[direction:rtl]" : ""}`}>
      {/* Image */}
      <div className={`relative overflow-hidden rounded-lg shadow-xl shadow-navy/10 ${isReversed ? "lg:[direction:ltr]" : ""}`}>
        <img
          src={service.image}
          alt={service.imageAlt}
          className="w-full h-[300px] lg:h-[400px] object-cover hover:scale-105 transition-transform duration-700"
          loading="lazy"
        />
        <div className="absolute top-4 left-4 bg-navy/90 backdrop-blur-sm text-teal font-heading font-bold text-2xl px-4 py-2 rounded-md">
          {service.number}
        </div>
      </div>

      {/* Content */}
      <div className={isReversed ? "lg:[direction:ltr]" : ""}>
        <div className="flex items-center gap-3 mb-4">
          <div className="p-2.5 bg-teal/10 rounded-lg">
            <service.icon className="w-6 h-6 text-teal" />
          </div>
          <div>
            <h3 className="font-heading font-bold text-2xl lg:text-3xl text-navy">{service.title}</h3>
            <p className="text-sm text-teal font-medium">{service.subtitle}</p>
          </div>
        </div>

        <p className="text-slate-dark/80 leading-relaxed mb-6">{service.description}</p>

        {/* Products */}
        <div className="mb-6">
          <h4 className="font-heading font-semibold text-navy mb-3">Products & Solutions</h4>
          <ul className="grid sm:grid-cols-2 gap-2">
            {service.products.map((p, i) => (
              <li key={i} className="flex items-start gap-2 text-sm text-slate-dark/70">
                <span className="w-1.5 h-1.5 bg-teal rounded-full mt-2 shrink-0" />
                {p}
              </li>
            ))}
          </ul>
        </div>

        {/* Partners toggle */}
        <button
          onClick={() => setExpanded(!expanded)}
          className="flex items-center gap-2 text-sm font-semibold text-teal hover:text-teal-dark transition-colors"
        >
          {expanded ? "Hide" : "View"} Our Partners ({service.partners.length})
          {expanded ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
        </button>

        {expanded && (
          <div className="mt-3 flex flex-wrap gap-2">
            {service.partners.map((partner, i) => (
              <span
                key={i}
                className="inline-flex items-center bg-navy/5 text-navy/80 text-sm px-3 py-1.5 rounded-md border border-navy/10"
              >
                {partner}
              </span>
            ))}
          </div>
        )}
      </div>
    </article>
  );
}

export default function ServicesSection() {
  return (
    <section id="services" className="py-20 lg:py-28 bg-white">
      <div className="container">
        {/* Section header */}
        <div className="text-center max-w-2xl mx-auto mb-16">
          <div className="inline-flex items-center gap-2 bg-teal/10 text-teal-dark rounded-full px-4 py-1.5 mb-4">
            <span className="text-sm font-semibold tracking-wide uppercase">Our Fields of Activity</span>
          </div>
          <h2 className="font-heading font-bold text-3xl lg:text-4xl text-navy mb-4">
            Comprehensive Industrial Solutions
          </h2>
          <p className="text-slate-dark/70 leading-relaxed">
            We deliver world-class engineering consulting services across four core industries,
            connecting you with the best solutions providers globally.
          </p>
        </div>

        {/* Service cards */}
        <div className="space-y-20 lg:space-y-28">
          {services.map((service, i) => (
            <ServiceCard key={service.id} service={service} isReversed={i % 2 !== 0} />
          ))}
        </div>
      </div>
    </section>
  );
}
