import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

interface Industry {
  title: string;
  description: string;
  imageSrc: string;
  imageAlt: string;
}

interface Industries2Props {
  badge: string;
  heading: string;
  services: Industry[];
  className?: string;
}

const Industries2 = ({
  className,
  badge = "صنایع",
  heading =
    "تحول صنایع با راه‌حل‌های فناوری نوآورانه که کارایی، رشد و عملیات پایدار را تقویت می‌کنند.",
  services = [
    {
      title: "معدن",
      description:
        "توانمندسازی عملیات معدنی با سامانه‌های اتوماسیون پیشرفته، راه‌حل‌های پایش لحظه‌ای، بسترهای مدیریت ایمنی و فناوری‌های بهینه‌سازی منابع که کارایی را بیشینه و استخراج پایدار را تضمین می‌کنند.",
      imageSrc:
        "/block-media/shadcnblocks/block/placeholder-1.svg",
      imageAlt: "آیکون صنعت معدن",
    },
    {
      title: "مالی",
      description:
        "ارائه راه‌حل‌های فناوری مالی امن و مقیاس‌پذیر، از جمله بسترهای بانکداری دیجیتال، سامانه‌های پردازش پرداخت، ابزارهای مدیریت ریسک و چارچوب‌های انطباق با مقررات برای نوآوری و رقابت مؤثر مؤسسات مالی.",
      imageSrc:
        "/block-media/shadcnblocks/block/placeholder-2.svg",
      imageAlt: "آیکون صنعت مالی",
    },
    {
      title: "انرژی",
      description:
        "تحول عملیات انرژی با فناوری‌های شبکه هوشمند، سامانه‌های مدیریت انرژی تجدیدپذیر، راه‌حل‌های نگهداری پیش‌بینانه و ابزارهای پیش‌بینی تقاضا برای بهینه‌سازی تخصیص منابع و بهبود پایداری.",
      imageSrc:
        "/block-media/shadcnblocks/block/placeholder-3.svg",
      imageAlt: "آیکون صنعت انرژی",
    },
    {
      title: "ساخت‌وساز",
      description:
        "ساده‌سازی پروژه‌های ساخت‌وساز با بسترهای مدیریت پروژه، یکپارچه‌سازی BIM، ابزارهای همکاری لحظه‌ای و سامانه‌های پایش ایمنی که هزینه را کاهش، زمان‌بندی را بهبود و بهره‌وری کارگاه را افزایش می‌دهند.",
      imageSrc:
        "/block-media/shadcnblocks/block/placeholder-4.svg",
      imageAlt: "آیکون صنعت ساخت‌وساز",
    },
  ],
}: Industries2Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        {/* Header Section */}
        <div className="mb-16 text-start">
          {badge && (
            <Badge
              variant="outline"
              className="mb-4 rounded-none border-0 bg-muted p-2 text-primary"
            >
              {badge}
            </Badge>
          )}
          <h2 className="max-w-2xl text-3xl leading-tight font-bold text-balance lg:text-xl">
            {heading}
          </h2>
        </div>

        {/* Services Grid */}
        <div className="space-y-8">
          {services.map((service, index) => (
            <div
              key={index}
              className="border-b border-border pb-8 first:border-t first:pt-8 last:border-b-0"
            >
              <div className="grid grid-cols-1 items-start gap-4 md:grid-cols-12 md:items-center md:gap-8">
                <div className="order-2 text-start md:order-none md:col-span-4">
                  <h3 className="text-lg font-semibold text-foreground md:text-xl">
                    {service.title}
                  </h3>
                </div>
                <div className="order-1 md:order-none md:col-span-2 md:flex md:justify-center">
                  <img
                    src={service.imageSrc}
                    alt={service.imageAlt}
                    className="h-12 w-12 object-contain md:h-16 md:w-16"
                  />
                </div>
                <div className="order-3 text-start md:order-none md:col-span-6">
                  <p className="text-sm leading-relaxed text-muted-foreground">
                    {service.description}
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Industries2 };