reui-blocks/blocks/pricing20.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")} ریال`;

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: [
      "همه‌چیز در طرح حرفه‌ای، به‌علاوه:",
      "مدیر موفقیت مشتری اختصاصی",
      "یکپارچه‌سازی‌های سفارشی",
      "همکاری بلادرنگ",
      "دسترسی مبتنی بر نقش",
      "پشتیبانی اولویت‌دار ۲۴/۷",
    ],
  },
];

interface Pricing20Props {
  className?: string;
}

const Pricing20 = ({ className }: Pricing20Props) => {
  const [isMonthly] = 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 mt-10 lg:mt-14">
        <section className="grid border max-lg:divide-y lg:grid-cols-3 lg:divide-s">
          {pricingPlans.map((plan, index) => (
            <div key={index} className="flex flex-col justify-between p-6">
              <div className="space-y-2 border-b 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>

              <div className="pt-6">
                <h4 className="text-muted-foreground-subtle">امکانات شامل‌شده</h4>
                <ul className="mt-4 space-y-4">
                  {plan.features.map((feature, index) => (
                    <li key={index} className="flex items-center gap-4">
                      <BadgeCheck className="size-6 shrink-0 text-muted-foreground" />
                      <span className="tracking-[-0.32px] text-muted-foreground">
                        {feature}
                      </span>
                    </li>
                  ))}
                </ul>
              </div>

              <Button
                variant={index === 1 ? "default" : "secondary"}
                className="mt-12"
              >
                شروع رایگان
              </Button>
            </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>
  );
};

export { Pricing20 };