reui-blocks/blocks/pricing22.tsx

"use client";

import { Check } from "lucide-react";
import { useState } from "react";

import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Switch } from "@/components/ui/switch";
import { cn } from "@/lib/utils";

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

const plans = [
  {
    id: "free",
    name: "رایگان",
    monthlyPrice: 0,
    yearlyPrice: 0,
    description: "رایگان برای همه",
    features: [
      "اعضای نامحدود",
      "۲ تیم",
      "۵۰۰ مورد کاری",
      "یکپارچه‌سازی پیام‌رسان تیمی و مخزن کد",
    ],
  },
  {
    id: "startup",
    name: "استارتاپ",
    monthlyPrice: 80000,
    yearlyPrice: 60000,
    features: [
      "همه‌چیز در طرح رایگان، به‌علاوه:",
      "هوش مصنوعی نوافروش",
      "تیم‌های نامحدود",
      "موارد کاری و آپلود فایل نامحدود",
      "بینش‌های نوافروش",
      "نقش‌های مدیریتی",
    ],
  },
  {
    id: "enterprise",
    name: "سازمانی",
    monthlyPrice: 80000,
    yearlyPrice: 60000,
    features: [
      "همه‌چیز در طرح رایگان، به‌علاوه:",
      "هوش مصنوعی نوافروش",
      "Supermainline AGI",
      "ناهار روزانه رایگان",
      "ممیزی‌های تصادفی HIPAA",
    ],
  },
];

interface Pricing22Props {
  className?: string;
}

const Pricing22 = ({ className }: Pricing22Props) => {
  const [isAnnual, setIsAnnual] = useState(false);

  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="space-y-4 text-center">
          <h2 className="text-xl font-semibold tracking-tight md:text-xl lg:text-2xll">
            تعرفه‌ها
          </h2>
          <p className="mx-auto max-w-xl leading-snug font-medium text-balance text-muted-foreground">
            نوافروش را رایگان با کل تیم خود استفاده کنید. با ارتقای طرح،
            موارد کاری نامحدود، کنترل‌های امنیتی پیشرفته و امکانات بیشتر را
            فعال کنید.
          </p>
        </div>

        <div className="mt-8 grid gap-6 text-start md:mt-12 lg:mt-20 lg:grid-cols-3">
          {plans.map((plan) => (
            <Card
              key={plan.id}
              className={`${
                plan.id === "startup"
                  ? "border-4 border-primary lg:h-[110%]"
                  : ""
              }`}
            >
              <CardContent className="flex h-full flex-col justify-between gap-2 p-6">
                <div className="space-y-2">
                  <h3 className="font-semibold text-primary">{plan.name}</h3>
                  <div className="space-y-1">
                    <div className="text-lg font-medium text-muted-foreground">
                      {formatPrice(
                        isAnnual ? plan.yearlyPrice : plan.monthlyPrice,
                      )}{" "}
                      {plan.id !== "free" && (
                        <span className="text-muted-foreground">
                          به ازای هر کاربر در{" "}
                          {isAnnual ? "سال" : "ماه"}
                        </span>
                      )}
                    </div>
                  </div>
                </div>

                {plan.id !== "free" ? (
                  <div className="mt-4 flex items-center gap-2">
                    <Switch
                      checked={isAnnual}
                      onCheckedChange={() => setIsAnnual(!isAnnual)}
                    />
                    <span className="text-sm font-medium">صورتحساب سالانه</span>
                  </div>
                ) : (
                  <span className="text-sm text-muted-foreground">
                    {plan.description}
                  </span>
                )}

                <div className="mt-8 space-y-4">
                  {plan.features.map((feature) => (
                    <div
                      key={feature}
                      className="flex items-center gap-1.5 text-muted-foreground"
                    >
                      <Check className="size-5 shrink-0" />
                      <span className="text-sm">{feature}</span>
                    </div>
                  ))}
                </div>

                <Button
                  className="w-fit"
                  variant={plan.id === "startup" ? "default" : "outline"}
                >
                  شروع رایگان
                </Button>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Pricing22 };