reui-blocks/blocks/pricing38.tsx

import { Check, Info, TrendingUp, Users } from "lucide-react";

import { Alert, AlertTitle } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
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")} ریال`;

const starterFeatures = [
  "مدیریت شبکه‌های اجتماعی",
  "تولید محتوا",
  "تحلیل‌های پایه",
  "گزارش‌های ماهانه",
];

const professionalFeatures = [
  "بهینه‌سازی پیشرفته بهینه‌سازی جستجو",
  "مدیریت تبلیغات حساب ابری",
  "تبلیغات شبکه اجتماعی و شبکه تصویری",
  "کمپین‌های ایمیل مارکتینگ",
  "استراتژی محتوا",
  "تحلیل رقبا",
  "بهینه‌سازی نرخ تبدیل",
  "طراحی صفحه فرود",
  "تولید محتوای ویدیویی",
  "همکاری با اینفلوئنسرها",
  "بیش از ۵۰۰ قالب بازاریابی",
  "شامل همه امکانات Starter",
];

const enterpriseFeatures = [
  "مدیریت نامحدود کمپین",
  "مدیر موفقیت مشتری اختصاصی",
  "پشتیبانی اولویت‌دار ۲۴/۷",
  "شامل همه امکانات Professional",
];

interface Pricing38Props {
  className?: string;
}

const Pricing38 = ({ className }: Pricing38Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container px-4">
        <div className="rounded-lg border border-border bg-muted/40 p-1">
          <div className="grid gap-12 rounded-sm border border-border p-4 md:p-6 lg:grid-cols-2">
            <div className="flex flex-col gap-12">
              <div className="flex flex-col gap-4">
                <p className="text-xs font-medium text-muted-foreground uppercase">
                  بسته‌های خدماتی
                </p>
                <h2 className="text-xl font-medium tracking-tight">
                  کسب‌وکار خود را با استراتژی‌های اثبات‌شده رشد دهید.
                </h2>
                <p className="text-muted-foreground">
                  از بسته‌های جامع بازاریابی ما انتخاب کنید که برای رشد
                  کسب‌وکار از استارتاپ تا سطح سازمانی طراحی شده‌اند.
                </p>
                <Alert className="w-fit items-center bg-muted/50 has-[>svg]:gap-x-2 [&>svg]:translate-y-0">
                  <Info />
                  <AlertTitle className="line-clamp-none text-xs">
                    همه بسته‌ها شامل مشاوره رایگان و جلسه استراتژی هستند.
                  </AlertTitle>
                </Alert>
              </div>
              <Separator className="data-[orientation=horizontal]:w-12" />
              <div className="flex flex-col gap-4">
                <p className="text-xs font-medium text-muted-foreground uppercase">
                  راهکارهای سفارشی
                </p>
                <h2 className="text-xl font-medium tracking-tight">
                  به رویکرد اختصاصی نیاز دارید؟
                </h2>
                <p className="text-muted-foreground">
                  <a href="#" className="transition-colors hover:text-primary">
                    تماس با ما
                  </a>{" "}
                  کنید برای راهکارهای بازاریابی سفارشی یا بحث درباره نیازهای
                  کمپین متناسب با اهداف کسب‌وکار شما.
                </p>
              </div>
              <Separator className="data-[orientation=horizontal]:w-12" />
              <div className="flex flex-col gap-4">
                <p className="text-xs font-medium text-muted-foreground uppercase">
                  پشتیبانی
                </p>
                <h2 className="text-xl font-medium tracking-tight">
                  بهینه‌سازی مستمر
                </h2>
                <p className="text-muted-foreground">
                  کمپین‌های شما را برای حداکثر بازگشت سرمایه به‌طور مداوم
                  پایش و بهینه می‌کنیم. نیاز به تغییر دارید؟{" "}
                  <a href="#" className="transition-colors hover:text-primary">
                    تماس با ما
                  </a>
                </p>
              </div>
            </div>
            <div className="space-y-6">
              <RadioGroup defaultValue="starter">
                <label
                  htmlFor="starter"
                  className="group relative flex cursor-pointer flex-col gap-4 rounded-lg border border-border p-8 has-[[data-state=checked]]:border-ring has-[[data-state=checked]]:bg-background"
                >
                  <RadioGroupItem
                    value="starter"
                    id="starter"
                    className="hidden"
                  />
                  <div className="flex items-center justify-between">
                    <div className="flex flex-col">
                      <h3 className="text-lg font-semibold">شروع</h3>
                      <p className="text-sm text-muted-foreground">
                        مناسب کسب‌وکارهای کوچک
                      </p>
                    </div>
                    <span className="text-xl font-bold">
                      {formatPrice(0)}
                      <span className="text-base font-normal text-muted-foreground">
                        در ماه
                      </span>
                    </span>
                  </div>
                  <Separator />
                  <div className="grid gap-3 sm:grid-cols-2">
                    <div className="flex items-start gap-2">
                      <Users className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
                      <p className="text-sm text-primary/80">
                        ۳ پلتفرم شبکه اجتماعی
                      </p>
                    </div>
                    <div className="flex items-start gap-2">
                      <TrendingUp className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
                      <p className="text-sm text-primary/80">
                        پیگیری عملکرد پایه
                      </p>
                    </div>
                  </div>
                  <Separator />
                  <div className="grid gap-3 sm:grid-cols-2">
                    {starterFeatures.map((feature, index) => (
                      <div key={index} className="flex items-start gap-2">
                        <Check className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
                        <p className="text-sm text-primary/80">{feature}</p>
                      </div>
                    ))}
                  </div>
                  <span className="absolute -top-2 -end-2 z-10 flex size-5 items-center justify-center rounded-full bg-primary opacity-0 group-has-[[data-state=checked]]:opacity-100">
                    <Check className="size-3 text-background" />
                  </span>
                  <div className="max-h-0 overflow-hidden transition-all duration-300 ease-out group-has-[[data-state=checked]]:max-h-20">
                    <Button className="mt-4 w-full opacity-0 transition-opacity duration-300 group-has-[[data-state=checked]]:opacity-100">
                      شروع رایگان
                    </Button>
                  </div>
                </label>
                <label
                  htmlFor="pro"
                  className="group relative flex cursor-pointer flex-col gap-4 rounded-lg border border-border p-8 has-[[data-state=checked]]:border-ring has-[[data-state=checked]]:bg-background"
                >
                  <RadioGroupItem value="pro" id="pro" className="hidden" />
                  <div className="flex items-center justify-between">
                    <div className="flex flex-col">
                      <h3 className="text-lg font-semibold">حرفه‌ای</h3>
                      <p className="text-sm text-muted-foreground">
                        راهکار کامل بازاریابی
                      </p>
                    </div>
                    <span className="text-xl font-bold">
                      {formatPrice(200000)}
                      <span className="text-base font-normal text-muted-foreground">
                        در ماه
                      </span>
                    </span>
                  </div>
                  <Separator />
                  <div className="grid gap-3 sm:grid-cols-2">
                    <div className="flex items-start gap-2">
                      <Users className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
                      <p className="text-sm text-primary/80">
                        شامل همه پلتفرم‌های اصلی
                      </p>
                    </div>
                    <div className="flex items-start gap-2">
                      <TrendingUp className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
                      <p className="text-sm text-primary/80">
                        تحلیل‌ها و گزارش‌دهی پیشرفته
                      </p>
                    </div>
                  </div>
                  <Separator />
                  <div className="grid gap-3 sm:grid-cols-2">
                    {professionalFeatures.map((feature, index) => (
                      <div key={index} className="flex items-start gap-2">
                        <Check className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
                        <p className="text-sm text-primary/80">{feature}</p>
                      </div>
                    ))}
                  </div>
                  <span className="absolute -top-2 -end-2 z-10 flex size-5 items-center justify-center rounded-full bg-primary opacity-0 group-has-[[data-state=checked]]:opacity-100">
                    <Check className="size-3 text-background" />
                  </span>
                  <div className="max-h-0 overflow-hidden transition-all duration-300 ease-out group-has-[[data-state=checked]]:max-h-20">
                    <Button className="mt-4 w-full opacity-0 transition-opacity duration-300 group-has-[[data-state=checked]]:opacity-100">
                      شروع رایگان
                    </Button>
                  </div>
                </label>
                <label
                  htmlFor="enterprise"
                  className="group relative flex cursor-pointer flex-col gap-4 rounded-lg border border-border p-8 has-[[data-state=checked]]:border-ring has-[[data-state=checked]]:bg-background"
                >
                  <RadioGroupItem
                    value="enterprise"
                    id="enterprise"
                    className="hidden"
                  />
                  <div className="flex items-center justify-between">
                    <div className="flex flex-col">
                      <h3 className="text-lg font-semibold">سازمانی</h3>
                      <p className="text-sm text-muted-foreground">
                        پتانسیل رشد نامحدود
                      </p>
                    </div>
                    <span className="text-xl font-bold">
                      {formatPrice(990000)}
                      <span className="text-base font-normal text-muted-foreground">
                        در ماه
                      </span>
                    </span>
                  </div>
                  <Separator />
                  <div className="grid gap-3 sm:grid-cols-2">
                    <div className="flex items-start gap-2">
                      <Users className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
                      <p className="text-sm text-primary/80">
                        مدیریت نامحدود پلتفرم
                      </p>
                    </div>
                    <div className="flex items-start gap-2">
                      <TrendingUp className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
                      <p className="text-sm text-primary/80">
                        پایش عملکرد بلادرنگ
                      </p>
                    </div>
                  </div>
                  <Separator />
                  <div className="grid gap-3 sm:grid-cols-2">
                    {enterpriseFeatures.map((feature, index) => (
                      <div key={index} className="flex items-start gap-2">
                        <Check className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
                        <p className="text-sm text-primary/80">{feature}</p>
                      </div>
                    ))}
                  </div>
                  <span className="absolute -top-2 -end-2 z-10 flex size-5 items-center justify-center rounded-full bg-primary opacity-0 group-has-[[data-state=checked]]:opacity-100">
                    <Check className="size-3 text-background" />
                  </span>
                  <div className="max-h-0 overflow-hidden transition-all duration-300 ease-out group-has-[[data-state=checked]]:max-h-20">
                    <Button className="mt-4 w-full opacity-0 transition-opacity duration-300 group-has-[[data-state=checked]]:opacity-100">
                      شروع رایگان
                    </Button>
                  </div>
                </label>
              </RadioGroup>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Pricing38 };