import { X } from "lucide-react";
import React from "react";

import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

const legacyFeatures = [
  "گردش‌کارهای یکسان برای همه تیم‌ها، بدون انعطاف متناسب با نیاز سازمان.",
  "رابط کاربری قدیمی که یادگیری و استفاده از آن زمان‌بر است.",
  "اطلاعات در چندین سامانه پراکنده است و یکپارچه‌سازی آن‌ها دشوار است.",
  "وابستگی زیاد به فرایندهای دستی و گزارش‌گیری زمان‌بر.",
  "مهاجرت‌های کند و پرریسک که تحویل را مختل می‌کنند.",
  "فناوری کهنه با پشتیبانی محدود از ابر و موبایل.",
  "قیمت بالا بدون نتیجه قابل اندازه‌گیری.",
  "هزینه‌های غیرمنتظره برای آموزش، پشتیبانی و یکپارچه‌سازی.",
];

const newFeatures = [
  { emoji: "🧭", text: "طراحی‌شده برای تیم‌های محصول، مهندسی و عملیات مدرن." },
  { emoji: "💡", text: "رابط کاربری ساده، سریع و قابل یادگیری." },
  { emoji: "📊", text: "تمام اطلاعات در یک فضای کاری متمرکز و یکپارچه نگهداری می‌شود." },
  { emoji: "⚡", text: "اتوماسیون هوشمند برای کاهش کارهای تکراری و افزایش بهره‌وری." },
  { emoji: "🧰", text: "مهاجرت‌های هدایت‌شده و کم‌ریسک در بازه چند هفته." },
  { emoji: "☁️", text: "بومی ابری، امن و همیشه به‌روز." },
  { emoji: "📈", text: "افزایش سرعت با بازگشت سرمایه شفاف و قابل اثبات." },
  { emoji: "💬", text: "قیمت‌گذاری ساده و شفاف." },
];

interface Compare10Props {
  className?: string;
}

const Compare10 = ({ className }: Compare10Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("py-32 text-start", className)}
    >
      <div className="container">
        <div className="flex flex-col gap-6 text-center md:gap-12">
          <h2 className="l:text-2xll text-xl font-medium md:text-2xll">
            <span className="text-muted-foreground">چرا سازمان‌ها </span>
            <br /> به راهکارهای مدرن مهاجرت می‌کنند
                                </h2>
          <p className="text-lg">
            ابزارهای قدیمی هزینه نگهداری را افزایش داده و سرعت اجرای پروژه‌ها را کاهش می‌دهند.{" "}
            <br className="hidden md:block" /> راهکارهای مدرن بهره‌وری تیم را افزایش داده و زمان تحویل پروژه را کاهش می‌دهند.
                                </p>
        </div>
        <div className="mt-20 grid gap-12 lg:grid-cols-2 lg:gap-0">
          <div className="rounded-3xl bg-muted p-6 lg:rounded-e-none lg:p-12">
            <h3 className="text-xl font-medium">راهکارهای سنتی</h3>
            <ul className="mt-9 space-y-3">
              {legacyFeatures.map((feature, idx) => (
                <React.Fragment key={idx}>
                  <div className="flex items-center gap-2">
                    <X
                      className="my-1.5 size-4 shrink-0 text-muted-foreground"
                      aria-hidden="true"
                    />
                    <li className="text-sm">{feature}</li>
                  </div>
                  {idx !== legacyFeatures.length - 1 && <Separator />}
                </React.Fragment>
              ))}
            </ul>
          </div>
          <div className="rounded-3xl border border-y p-6 lg:rounded-s-none lg:border-s-0 lg:p-12">
            <h3 className="text-xl font-medium">راهکارهای مدرن</h3>
            <ul className="mt-9 space-y-3">
              {newFeatures.map((feature, idx) => (
                <React.Fragment key={idx}>
                  <li className="flex items-center gap-2 text-sm">
                    <span className="text-lg" aria-hidden="true">
                      {feature.emoji}
                    </span>
                    {feature.text}
                  </li>
                  {idx !== newFeatures.length - 1 && <Separator />}
                </React.Fragment>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Compare10 };