reui-blocks/blocks/pricing24.tsx

"use client";

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

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader } 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,
    annualPrice: 0,
    features: [
      "اعضای نامحدود",
      "۲ تیم",
      "۵۰۰ مورد کاری",
      "یکپارچه‌سازی پیام‌رسان تیمی و مخزن کد",
    ],
    cta: "شروع رایگان",
  },
  {
    id: "startup",
    name: "استارتاپ",
    monthlyPrice: 80000,
    annualPrice: 600000,
    monthlyPerUnit: "به ازای هر کاربر در ماه",
    annualPerUnit: "به ازای هر کاربر در سال",
    features: [
      "همه‌چیز در طرح رایگان، به‌علاوه:",
      "هوش مصنوعی نوافروش",
      "تیم‌های نامحدود",
      "موارد کاری و آپلود فایل نامحدود",
      "بینش‌های نوافروش",
      "نقش‌های مدیریتی",
    ],
    cta: "۷ روز آزمایش رایگان",
    popular: true,
  },
  {
    id: "enterprise",
    name: "سازمانی",
    monthlyPrice: 150000,
    annualPrice: 120000,
    monthlyPerUnit: "به ازای هر کاربر در ماه",
    annualPerUnit: "به ازای هر کاربر در سال",
    features: [
      "همه‌چیز در طرح رایگان، به‌علاوه:",
      "هوش مصنوعی نوافروش",
      "تیم‌های نامحدود",
      "موارد کاری و آپلود فایل نامحدود",
      "بینش‌های نوافروش",
      "نقش‌های مدیریتی",
    ],
    cta: "شروع رایگان",
  },
];

interface Pricing24Props {
  className?: string;
}

const Pricing24 = ({ className }: Pricing24Props) => {
  const [isAnnual, setIsAnnual] = useState(true);

  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto max-w-3xl space-y-4 text-center">
          <h2 className="text-center text-3xl font-semibold tracking-tight sm:text-xl md:text-2xll lg:text-2xll">
            تعرفه‌ها
          </h2>
          <p className="text-lg text-balance text-muted-foreground">
            نوافروش را رایگان با کل تیم خود استفاده کنید. با ارتقای طرح،
            موارد کاری نامحدود، کنترل‌های امنیتی پیشرفته و امکانات بیشتر را
            فعال کنید.
          </p>
          <div className="inline-flex items-center gap-3">
            <span
              dir="rtl"
              className="inline-flex shrink-0 items-center"
            >
              <Switch
                checked={isAnnual}
                onCheckedChange={setIsAnnual}
                aria-label="تغییر صورتحساب سالانه"
              />
            </span>
            <span
              className={cn(
                "text-sm font-medium transition-colors",
                isAnnual ? "text-foreground" : "text-muted-foreground",
              )}
            >
              صورتحساب سالانه
            </span>
          </div>
        </div>

        <div className="mt-8 grid gap-8 sm:grid-cols-2 md:mt-12 lg:mt-20 lg:grid-cols-3">
          {plans.map((plan) => (
            <div
              key={plan.id}
              className={cn(plan.popular && "scale-[1.075] rounded-3xl")}
            >
              <Card
                className={cn(
                  "h-full border-none bg-zinc-100 dark:bg-zinc-900",
                  plan.popular && "relative ring-2 ring-black",
                )}
              >
                <CardHeader>
                  <h3 className="text-xl font-semibold">{plan.name}</h3>
                  <div className="mt-2">
                    <p className="text-lg font-medium text-muted-foreground">
                      {formatPrice(
                        isAnnual ? plan.annualPrice : plan.monthlyPrice,
                      )}
                      {(plan.monthlyPerUnit || plan.annualPerUnit) &&
                        " " +
                          (isAnnual ? plan.annualPerUnit : plan.monthlyPerUnit)}
                    </p>
                  </div>
                </CardHeader>
                <CardContent className="flex flex-col space-y-6">
                  <Button
                    variant={plan.popular ? "default" : "outline"}
                    size="lg"
                  >
                    {plan.cta}
                  </Button>

                  <div className="space-y-4">
                    {plan.features.map((feature) => (
                      <div key={feature} className="flex items-center gap-3">
                        <Check className="size-4 shrink-0" />
                        <span className="text-sm text-muted-foreground">
                          {feature}
                        </span>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Pricing24 };