import { cn } from "@/lib/utils";

const offices = [
  {
    color: "bg-red-600",
    city: "فرایند هوشمند",
    country: "اتوماسیون",
    address: "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
    postal: "گردش‌کار",
  },
  {
    color: "bg-green-600",
    city: "صرفه‌جویی زمان",
    country: "فرایند هوشمند",
    address: "مسیر متفاوت برای شرایط مختلف تعریف کنید و تصمیم‌گیری را سریع‌تر کنید.",
    postal: "اتوماسیون",
  },
  {
    color: "bg-blue-600",
    city: "گردش‌کار",
    country: "صرفه‌جویی زمان",
    address: "تیم را در لحظه از تغییر وضعیت باخبر کنید تا هیچ موردی رها نشود.",
    postal: "فرایند هوشمند",
  },
  {
    color: "bg-amber-600",
    city: "اتوماسیون",
    country: "گردش‌کار",
    address: "مسیر کار را با کشیدن و رها کردن بسازید و بدون وابستگی به تیم فنی راه بیندازید.",
    postal: "صرفه‌جویی زمان",
  },
];

interface Feature41Props {
  className?: string;
}

const Feature41 = ({ className }: Feature41Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="grid gap-10 md:grid-cols-5 md:gap-0">
          <h2 className="col-span-2 text-start text-xl font-semibold lg:text-2xll">
            فرایندها را استاندارد و سریع کنید
          </h2>
          <div className="col-span-3 grid gap-10 sm:grid-cols-2">
            {offices.map((office) => (
              <div key={office.city}>
                <div
                  className={cn("h-5 w-7 rounded-sm", office.color)}
                  aria-hidden
                />
                <h3 className="my-2 text-xl font-semibold">
                  {office.city}، {office.country}
                </h3>
                <p className="text-muted-foreground">
                  {office.address}
                  <br />
                  کد پستی: {office.postal}
                </p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature41 };