reui-blocks/blocks/pricing21.tsx

"use client";

import {
  BadgeCheck,
  BadgeDollarSign,
  Briefcase,
  Building,
  Rocket,
} from "lucide-react";
import { useState } from "react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

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

interface FeatureSection {
  category: string;
  features: {
    name: string;
    basic: string | boolean;
    business: string | boolean;
    enterprise: string | boolean;
  }[];
}

const pricingPlans = [
  {
    icon: Rocket,
    name: "طرح پایه",
    price: {
      monthly: 19,
      yearly: 199,
    },
    features: [
      "ابزارهای پایه مدیریت وظایف",
      "همگام‌سازی تقویم با اتصال ایمیل و تقویم",
      "دسترسی به ۱ داشبورد برای پیگیری وظایف",
      "پیشنهادها و بینش‌های محدود هوش مصنوعی",
      "پشتیبانی ایمیلی در ساعات کاری و دسترسی به انجمن",
    ],
  },
  {
    icon: Briefcase,
    name: "طرح تجاری",
    price: {
      monthly: 29,
      yearly: 299,
    },
    features: [
      "همه‌چیز در طرح رایگان، به‌علاوه:",
      "لیست وظایف نامحدود",
      "همگام‌سازی پیشرفته تقویم",
      "بینش‌های مبتنی بر هوش مصنوعی",
      "دسترسی به داشبوردهای سفارشی",
      "پشتیبانی ایمیل با اولویت",
    ],
  },
  {
    icon: Building,
    name: "طرح سازمانی",
    price: {
      monthly: 49,
      yearly: 499,
    },
    features: [
      "همه‌چیز در طرح حرفه‌ای، به‌علاوه:",
      "مدیر موفقیت مشتری اختصاصی",
      "یکپارچه‌سازی‌های سفارشی",
      "همکاری بلادرنگ",
      "دسترسی مبتنی بر نقش",
      "پشتیبانی اولویت‌دار ۲۴/۷",
    ],
  },
];

const comparisonFeatures: FeatureSection[] = [
  {
    category: "ابزارهای اصلی",
    features: [
      {
        name: "مدیریت وظایف",
        basic: "۱۰",
        business: "۲۵",
        enterprise: "نامحدود",
      },
      {
        name: "همگام‌سازی تقویم",
        basic: true,
        business: true,
        enterprise: true,
      },
      {
        name: "یادآورها",
        basic: true,
        business: true,
        enterprise: true,
      },
      {
        name: "همکاری",
        basic: false,
        business: true,
        enterprise: true,
      },
      {
        name: "اعلان‌ها",
        basic: false,
        business: false,
        enterprise: true,
      },
    ],
  },
  {
    category: "بینش بهره‌وری",
    features: [
      {
        name: "تحلیل‌ها",
        basic: "۱۰",
        business: "۲۵",
        enterprise: "نامحدود",
      },
      {
        name: "گزارش‌ها",
        basic: true,
        business: true,
        enterprise: true,
      },
      {
        name: "ثبت زمان",
        basic: true,
        business: true,
        enterprise: true,
      },
      {
        name: "پیگیری اهداف",
        basic: false,
        business: true,
        enterprise: true,
      },
      {
        name: "روندها",
        basic: false,
        business: false,
        enterprise: true,
      },
    ],
  },
  {
    category: "اتوماسیون پیگیری فروش",
    features: [
      {
        name: "اتوماسیون وظایف",
        basic: "۱۰",
        business: "۲۵",
        enterprise: "نامحدود",
      },
      {
        name: "وظایف تکرارشونده",
        basic: true,
        business: true,
        enterprise: true,
      },
      {
        name: "یکپارچه‌سازی‌ها",
        basic: true,
        business: true,
        enterprise: true,
      },
      {
        name: "دسترسی اتصال هوشمند",
        basic: false,
        business: true,
        enterprise: true,
      },
      {
        name: "قالب‌های گردش کار",
        basic: false,
        business: false,
        enterprise: true,
      },
    ],
  },
];

interface Pricing21Props {
  className?: string;
}

const Pricing21 = ({ className }: Pricing21Props) => {
  const [isMonthly, setIsMonthly] = useState(true);

  return (
    <section className={cn("py-32", className)}>
      <div className="border-y">
        <div className="container flex flex-col gap-6 border-s border-e py-4 lg:py-8">
          <Badge
            variant="outline"
            className="w-fit gap-1 bg-card px-3 text-sm font-normal tracking-tight shadow-sm"
          >
            <BadgeDollarSign className="size-4" />
            <span>پیشنهاد ویژه</span>
          </Badge>
          <h2 className="text-3xl leading-tight tracking-tight md:text-xl lg:text-2xll">
            تعرفه برای همه
          </h2>
          <p className="max-w-[600px] tracking-[-0.32px] text-muted-foreground">
            طرحی را انتخاب کنید که با نیازهای بهره‌وری شما هماهنگ باشد
          </p>
        </div>
      </div>

      <div className="container">
        <section className="py-14 md:py-20 lg:py-24">
          <div className="flex justify-center">
            <div className="inline-flex gap-[2px] rounded-md border p-[2px]">
              <Button
                variant={isMonthly ? "default" : "outline"}
                onClick={() => setIsMonthly(true)}
                className="transition-colors"
              >
                ماهانه
              </Button>
              <Button
                variant={!isMonthly ? "default" : "outline"}
                onClick={() => setIsMonthly(false)}
                className="transition-colors"
              >
                سالانه
              </Button>
            </div>
          </div>
          <div className="mt-12 overflow-x-auto">
            <PlanHeaders isMonthly={isMonthly} />
            <FeatureSections />
          </div>
        </section>
      </div>

      <div className="mt-12 h-8 w-full border-y md:h-12 lg:h-[112px]">
        <div className="container h-full w-full border-s border-e"></div>
      </div>
    </section>
  );
};

const PlanHeaders = ({ isMonthly }: { isMonthly: boolean }) => (
  <div className="grid grid-cols-4">
    <div className="col-span-1 max-lg:hidden max-lg:border"></div>
    <div className="col-span-4 grid gap-4 border-t max-lg:divide-y max-lg:border lg:col-span-3 lg:grid-cols-3 lg:divide-s">
      {pricingPlans.map((plan, index) => (
        <div key={index} className="flex flex-col p-6">
          <div className="space-y-2 pb-6">
            <div className="flex items-center gap-2.5 text-muted-foreground">
              <plan.icon className="size-4" />
              <h3 className="text-xl tracking-[-0.8px]">{plan.name}</h3>
            </div>
            <>
              <div className="flex items-baseline font-medium">
                <span className="text-[3.5rem] leading-[120%] tracking-[-3.92px]">
                  {formatPrice(
                    isMonthly ? plan.price.monthly : plan.price.yearly,
                  )}
                </span>
                <span className="text-muted-foreground-subtle text-xl tracking-[-0.96px]">
                  {isMonthly ? "در ماه" : "در سال"}
                </span>
              </div>
              <p className="text-muted-foreground">
                {isMonthly
                  ? `یا ${formatPrice(plan.price.yearly)} سالانه`
                  : `یا ${formatPrice(plan.price.monthly)} در ماه`}
              </p>
            </>
          </div>
          <Button className="mt-auto">شروع رایگان</Button>
        </div>
      ))}
    </div>
  </div>
);

const FeatureSections = () => (
  <>
    {comparisonFeatures.map((section, sectionIndex) => (
      <div
        key={sectionIndex}
        className={`border-b first:border-t ${sectionIndex === 0 ? "border-t" : ""}`}
      >
        <div className="py-4">
          <h3 className="text-lg tracking-[-0.36px]">{section.category}</h3>
        </div>
        {section.features.map((feature, featureIndex) => (
          <div
            key={featureIndex}
            className="grid border-t tracking-[-0.32px] text-muted-foreground max-lg:grid-rows-[auto_1fr] lg:grid-cols-4"
          >
            <span className="inline-flex items-center py-4">
              {feature.name}
            </span>
            <div className="col-span-3 grid grid-cols-3 divide-s text-center max-lg:border-t">
              {[feature.basic, feature.business, feature.enterprise].map(
                (value, i) => (
                  <div
                    key={i}
                    className="flex items-center justify-center py-4"
                  >
                    {typeof value === "boolean" ? (
                      value ? (
                        <BadgeCheck className="mx-auto size-5 text-muted-foreground" />
                      ) : null
                    ) : (
                      <span className="text-muted-foreground-subtle font-semibold">
                        {value}
                      </span>
                    )}
                  </div>
                ),
              )}
            </div>
          </div>
        ))}
      </div>
    ))}
  </>
);

export { Pricing21 };