reui-blocks/blocks/pricing11.tsx

"use client";

import { Check, ChevronDown, Info, X } from "lucide-react";
import { Fragment, useState } from "react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";

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

const plans = [
  {
    title: "رایگان",
    price: { monthly: 9, annually: 90000 },
    href: "#",
    recommended: false,
  },
  {
    title: "پایه",
    price: { monthly: 50, annually: 450000 },
    href: "#",
    recommended: false,
  },
  {
    title: "تیم",
    price: { monthly: 100, annually: 900000 },
    href: "#",
    recommended: true,
  },
  {
    title: "سازمانی",
    price: { monthly: 200, annually: 160000 },
    href: "#",
    recommended: false,
  },
];

const featureMatrix = [
  {
    title: "نمای کلی",
    features: [
      {
        title: "امکان همیشه شامل‌شده",
        inclusions: [
          {
            plan: "رایگان",
            content:
              "امکانات پایه برای شروع سریع و بدون هزینه.",
          },
          {
            plan: "پایه",
            content:
              "امکانات بیشتر برای کسب‌وکارهای کوچک.",
          },
          {
            plan: "تیم",
            content: "امکانات تیمی برای همکاری بهتر.",
          },
          {
            plan: "سازمانی",
            content: "امکانات کامل برای سازمان‌های بزرگ.",
          },
        ],
      },
      {
        title: "تعداد محصولات",
        info: "حداکثر تعداد محصول قابل ثبت",
        inclusions: [
          { plan: "رایگان", content: "۱" },
          { plan: "پایه", content: "۱" },
          { plan: "تیم", content: "۳" },
          { plan: "سازمانی", content: "۵" },
        ],
      },
      {
        title: "تعداد تراکنش‌ها",
        info: "سقف تراکنش‌های ماهانه",
        inclusions: [
          { plan: "رایگان", content: "۳۰ در ماه" },
          { plan: "پایه", content: "نامحدود" },
          { plan: "تیم", content: "نامحدود" },
          { plan: "سازمانی", content: "نامحدود" },
        ],
      },
    ],
  },
  {
    title: "سایر امکانات",
    features: [
      {
        title: "امکان پایه",
        inclusions: [
          {
            plan: "رایگان",
            content: <Check className="size-4 lg:size-5" />,
          },
          {
            plan: "پایه",
            content: <Check className="size-4 lg:size-5" />,
          },
          {
            plan: "تیم",
            content: <Check className="size-4 lg:size-5" />,
          },
          {
            plan: "سازمانی",
            content: <Check className="size-4 lg:size-5" />,
          },
        ],
      },
      {
        title: "امکان سازمانی",
        info: "فقط در طرح سازمانی در دسترس است",
        inclusions: [
          {
            plan: "رایگان",
            content: <X className="size-4 text-muted-foreground lg:size-5" />,
          },
          {
            plan: "پایه",
            content: <X className="size-4 text-muted-foreground lg:size-5" />,
          },
          {
            plan: "تیم",
            content: <X className="size-4 text-muted-foreground lg:size-5" />,
          },
          {
            plan: "سازمانی",
            content: <Check className="size-5" />,
          },
        ],
      },
      {
        title: "امکان اختیاری",
        info: "به‌صورت افزونه قابل فعال‌سازی است",
        inclusions: [
          {
            plan: "رایگان",
            content: <X className="size-4 text-muted-foreground lg:size-5" />,
          },
          {
            plan: "پایه",
            content: <X className="size-4 text-muted-foreground lg:size-5" />,
          },
          {
            plan: "تیم",
            content: <Badge>افزونه</Badge>,
          },
          {
            plan: "سازمانی",
            content: <Badge>افزونه</Badge>,
          },
        ],
      },
    ],
  },
];

interface Pricing11Props {
  className?: string;
}

const Pricing11 = ({ className }: Pricing11Props) => {
  const [billing, setBilling] = useState<"monthly" | "annually">("monthly");
  return (
    <section className={cn("py-32", className)}>
      <div className="container mb-8 lg:mb-0">
        <div className="grid grid-cols-2 gap-y-12 md:gap-y-16">
          <div className="col-span-2 flex flex-col lg:col-span-1">
            <h1 className="my-6 text-3xl font-bold text-pretty md:text-xl xl:text-2xll">
              طرح‌های تعرفه
            </h1>
            <p className="text-muted-foreground lg:text-xl">
              طرح مناسب خود را انتخاب کنید و همین امروز شروع رایگان.
            </p>
          </div>
        </div>
        <div className="bg-background lg:sticky lg:top-16">
          <div className="mb-8 pt-8">
            <div className="grid items-end gap-6 border-b border-border pb-8 lg:grid-cols-6">
              <div className="col-span-2">
                <div className="flex h-full flex-col justify-end">
                  <span className="mb-2 text-xs font-medium text-muted-foreground">
                    صورتحساب
                  </span>
                  <Tabs
                    value={billing}
                    onValueChange={setBilling as (value: string) => void}
                  >
                    <TabsList>
                      <TabsTrigger value="monthly">ماهانه</TabsTrigger>
                      <TabsTrigger value="annually">سالانه</TabsTrigger>
                    </TabsList>
                  </Tabs>
                </div>
              </div>
              {plans.map((plan) => (
                <div
                  key={plan.title}
                  className="rounded-lg border border-border p-3 2xl:p-4"
                >
                  <h3 className="mb-1 text-xl font-medium xl:text-xl">
                    {plan.title}
                  </h3>
                  <p className="mb-4 text-sm font-medium text-muted-foreground">
                    {formatPrice(plan.price[billing])}
                    <span className="hidden 2xl:inline"> در ماه</span>
                  </p>
                  <Button
                    variant={plan.recommended ? "default" : "outline"}
                    className="w-full"
                  >
                    <span className="2xl:hidden">ثبت‌نام</span>
                    <span className="hidden 2xl:inline">رایگان شروع رایگان</span>
                  </Button>
                </div>
              ))}
            </div>
          </div>
        </div>
        <div className="space-y-8 lg:space-y-14">
          {featureMatrix.map((category) => (
            <div key={category.title}>
              <h3 className="mb-6 text-lg font-medium lg:mb-3">
                {category.title}
              </h3>
              <div className="space-y-4 lg:space-y-0">
                <TooltipProvider delayDuration={150}>
                  {category.features.map((feature) => (
                    <Fragment key={feature.title}>
                      <dl className="hidden grid-cols-6 gap-6 border-b border-border lg:grid">
                        <dt className="col-span-2 justify-between py-4 pb-4">
                          <Tooltip>
                            <h4 className="group flex min-h-6 items-center gap-x-1 font-medium">
                              {feature.title}{" "}
                              {feature.info && (
                                <TooltipTrigger asChild>
                                  <Info className="ms-2 size-4 cursor-pointer text-muted-foreground group-hover:text-accent-foreground" />
                                </TooltipTrigger>
                              )}
                            </h4>
                            {feature.info && (
                              <TooltipContent>{feature.info}</TooltipContent>
                            )}
                          </Tooltip>
                        </dt>
                        {feature.inclusions.map((inclusion) => (
                          <dd
                            key={inclusion.plan}
                            className="hidden py-4 text-sm text-muted-foreground lg:block"
                          >
                            {inclusion.content}
                          </dd>
                        ))}
                      </dl>
                      <Collapsible
                        className="group lg:hidden"
                        defaultOpen={false}
                      >
                        <dl
                          key={feature.title}
                          className="border-b border-border"
                        >
                          <CollapsibleTrigger className="w-full">
                            <dt className="flex items-center justify-between pb-4">
                              <Tooltip>
                                <TooltipTrigger asChild>
                                  <h4 className="group flex items-center gap-x-1 text-sm font-medium md:text-base">
                                    {feature.title}
                                    {feature.info && (
                                      <Info className="ms-2 size-4 cursor-pointer text-muted-foreground group-hover:text-accent-foreground" />
                                    )}
                                  </h4>
                                </TooltipTrigger>
                                {feature.info && (
                                  <TooltipContent>
                                    {feature.info}
                                  </TooltipContent>
                                )}
                              </Tooltip>

                              <ChevronDown className='size-5 transition-transform group-data-[state="open"]:rotate-180' />
                            </dt>
                          </CollapsibleTrigger>
                          <CollapsibleContent>
                            {feature.inclusions.map((inclusion) => (
                              <dd
                                key={inclusion.plan}
                                className="flex items-center border-b border-border py-3 text-xs text-muted-foreground last:border-b-0 md:py-3.5"
                              >
                                <div className="w-1/2 md:w-1/4">
                                  {inclusion.plan}
                                </div>
                                {inclusion.content}
                              </dd>
                            ))}
                          </CollapsibleContent>
                        </dl>
                      </Collapsible>
                    </Fragment>
                  ))}
                </TooltipProvider>
              </div>
            </div>
          ))}
        </div>
        <p className="mt-4 hidden text-xs text-muted-foreground md:block">
          * توضیحات و شرایط تکمیلی
        </p>
      </div>
    </section>
  );
};

export { Pricing11 };