import { Check } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
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 Pricing14Props {
  className?: string;
}

const Pricing14 = ({ className }: Pricing14Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto max-w-5xl rounded-lg bg-muted p-6 md:p-10">
          <div className="mb-12 flex items-center gap-3">
            <span className="text-xl font-bold">طرح استاندارد</span>
            <Badge
              variant="outline"
              className="border-green-200 bg-green-100 text-green-600"
            >
              ۲۰٪ تخفیف
            </Badge>
          </div>
          <div className="flex flex-col justify-between gap-6 md:flex-row">
            <h2 className="max-w-xl text-3xl font-bold md:text-xl">
              ایده خود را در چند دقیقه با این طرح راه‌اندازی کنید
            </h2>
            <div className="md:text-end">
              <span className="text-3xl font-bold md:text-2xll">
                {formatPrice(1999000)}
              </span>
              <p className="text-muted-foreground">
                قیمت پایه به ازای هر پروژه
              </p>
            </div>
          </div>
          <Separator className="my-8" />
          <div>
            <p className="mb-5 text-muted-foreground">
              پروژه خود را با امکانات زیر راه‌اندازی کنید:
            </p>
            <div className="flex flex-col justify-between gap-10 md:flex-row md:gap-20">
              <ul className="grid gap-x-20 gap-y-4 font-medium md:grid-cols-2">
                <li className="flex items-center gap-2">
                  <Check className="size-4 shrink-0" />
                  پروژه‌های نامحدود
                </li>
                <li className="flex items-center gap-2">
                  <Check className="size-4 shrink-0" />
                  پشتیبانی چت زنده
                </li>
                <li className="flex items-center gap-2">
                  <Check className="size-4 shrink-0" />
                  هم‌زمانی تیم فروش روی یک قیف
                </li>
                <li className="flex items-center gap-2">
                  <Check className="size-4 shrink-0" />
                  دامنه سفارشی
                </li>
                <li className="flex items-center gap-2">
                  <Check className="size-4 shrink-0" />
                  عضو نامحدود فضای کاری
                </li>
                <li className="flex items-center gap-2">
                  <Check className="size-4 shrink-0" />
                  فضای فایل نامحدود
                </li>
              </ul>
              <div className="flex flex-col gap-4">
                <Button size="lg">رزرو دمو</Button>
                <Button variant="outline" size="lg">
                  بیشتر بدانید
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Pricing14 };