import { ArrowRight, Check } from "lucide-react";

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

const formatPrice = (value: string | number) =>
  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;

interface Pricing36Props {
  className?: string;
}

const Pricing36 = ({ className }: Pricing36Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto grid max-w-4xl gap-6 md:grid-cols-2">
          <div className="flex flex-col gap-4">
            <div className="flex h-full flex-col rounded-4xl bg-gradient-to-r from-blue-500 to-purple-500 p-px">
              <div className="h-full rounded-[31px] bg-background p-8">
                <div className="flex items-center justify-between">
                  <p className="text-xl font-semibold">طرح شروع</p>
                </div>
                <div className="mt-6 flex flex-col gap-2">
                  <p className="text-2xll font-bold">
                    {formatPrice(190000)}
                    <span className="text-base font-semibold text-muted-foreground">
                      در ماه
                    </span>
                  </p>
                  <p className="text-sm text-muted-foreground">
                    راهکار کامل برای بهره‌وری تیم شما
                  </p>
                </div>
                <Separator className="my-6" />
                <ul className="space-y-6">
                  <li className="flex gap-2">
                    <Check className="mt-1 size-4 shrink-0 text-green-500" />
                    <div>
                      <p className="font-medium">ابزارهای همکاری تیمی</p>
                      <p className="text-sm text-muted-foreground">
                        همکاری یکپارچه با فضاهای کاری مشترک
                      </p>
                    </div>
                  </li>
                  <li className="flex gap-2">
                    <Check className="mt-1 size-4 shrink-0 text-green-500" />
                    <div>
                      <p className="font-medium">پیگیری پیشرفته پروژه</p>
                      <p className="text-sm text-muted-foreground">
                        پایش پیشرفت پروژه با تحلیل‌ها و گزارش‌های دقیق
                      </p>
                    </div>
                  </li>
                  <li className="flex gap-2">
                    <Check className="mt-1 size-4 shrink-0 text-green-500" />
                    <div>
                      <p className="font-medium">مدیریت خودکار وظایف</p>
                      <p className="text-sm text-muted-foreground">
                        ساده‌سازی گردش کار با اتوماسیون هوشمند وظایف
                      </p>
                    </div>
                  </li>
                  <li className="flex gap-2">
                    <Check className="mt-1 size-4 shrink-0 text-green-500" />
                    <div>
                      <p className="font-medium">پشتیبانی اولویت‌دار</p>
                      <p className="text-sm text-muted-foreground">
                        دریافت کمک تخصصی از کانال‌های اولویت‌دار با پاسخ‌گویی
                        سریع
                      </p>
                    </div>
                  </li>
                </ul>
              </div>
              <a
                href="#"
                className="group flex items-center justify-center gap-1.5 py-3 text-center font-medium text-background"
              >
                خرید اشتراک
                <ArrowRight className="size-5 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
              </a>
            </div>
          </div>
          <div className="flex flex-col gap-4">
            <div className="flex h-full flex-col rounded-4xl bg-primary p-px">
              <div className="h-full rounded-[31px] bg-background p-8">
                <p className="text-xl font-semibold">طرح سازمانی</p>
                <div className="mt-6 flex flex-col gap-2">
                  <p className="text-2xll font-bold">
                    {formatPrice(490000)}
                    <span className="text-base font-semibold text-muted-foreground">
                      در ماه
                    </span>
                  </p>
                  <p className="text-sm text-muted-foreground">
                    راهکار کامل برای گردش کار سازمانی شما
                  </p>
                </div>
                <Separator className="my-6" />
                <ul className="space-y-6">
                  <li className="flex gap-2">
                    <Check className="mt-1 size-4 shrink-0 text-green-500" />
                    <div>
                      <p className="font-medium">اعضای تیم نامحدود</p>
                      <p className="text-sm text-muted-foreground">
                        رشد بدون محدودیت با دسترسی و ابزار همکاری نامحدود
                      </p>
                    </div>
                  </li>
                  <li className="flex gap-2">
                    <Check className="mt-1 size-4 shrink-0 text-green-500" />
                    <div>
                      <p className="font-medium">داشبورد داشبورد تبدیل و پیش‌بینی</p>
                      <p className="text-sm text-muted-foreground">
                        بینش عمیق با ابزارهای گزارش‌دهی جامع
                      </p>
                    </div>
                  </li>
                  <li className="flex gap-2">
                    <Check className="mt-1 size-4 shrink-0 text-green-500" />
                    <div>
                      <p className="font-medium">اتوماسیون پیگیری فروش سفارشی</p>
                      <p className="text-sm text-muted-foreground">
                        ساخت گردش‌کارهای متناسب برای بهینه‌سازی کارایی تیم
                      </p>
                    </div>
                  </li>
                  <li className="flex gap-2">
                    <Check className="mt-1 size-4 shrink-0 text-green-500" />
                    <div>
                      <p className="font-medium">مدیر موفقیت اختصاصی</p>
                      <p className="text-sm text-muted-foreground">
                        راهنمایی شخصی‌سازی‌شده از متخصصان اختصاصی
                      </p>
                    </div>
                  </li>
                </ul>
              </div>
              <a
                href="#"
                className="group flex items-center justify-center gap-1.5 py-3 text-center font-medium text-background"
              >
                تماس با ما
                <ArrowRight className="size-5 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Pricing36 };