reui-blocks/blocks/pricing26.tsx

"use client";

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 DataItem {
  title: string;
  description: string;
  badges: string[];
  features: { text: string; description: string }[];
  timeEstimate: string;
  priceEstimate: string;
  isHighlighted?: boolean;
}

interface Pricing26Props {
  className?: string;
}

const Pricing26 = ({ className }: Pricing26Props) => {
  const DATA: DataItem[] = [
    {
      title: "طرح شروع",
      description:
        "با ابزارها و استراتژی‌های ضروری بازاریابی، حضور دیجیتال خود را برای کسب‌وکارهای کوچک راه‌اندازی کنید.",
      badges: ["سئو", "شبکه‌های اجتماعی"],
      features: [
        { text: "مناسب برای", description: "استارتاپ‌ها، کسب‌وکارهای کوچک" },
        { text: "تخمین زمان", description: "۲ تا ۴ هفته" },
        { text: "تخمین قیمت", description: formatPrice(500000) },
      ],
      timeEstimate: "۲ تا ۴ هفته",
      priceEstimate: formatPrice(500000),
    },
    {
      title: "طرح رشد",
      description:
        "کسب‌وکار خود را با استراتژی‌های پیشرفته بازاریابی، از جمله کمپین‌های PPC و بازاریابی محتوا گسترش دهید.",
      badges: ["سئو", "PPC", "بازاریابی محتوا"],
      features: [
        { text: "مناسب برای", description: "کسب‌وکارهای در حال رشد" },
        { text: "تخمین زمان", description: "۴ تا ۶ هفته" },
        { text: "تخمین قیمت", description: formatPrice(1500000) },
      ],
      timeEstimate: "۴ تا ۶ هفته",
      priceEstimate: formatPrice(1500000),
      isHighlighted: true,
    },
    {
      title: "طرح سازمانی",
      description:
        "راهکارهای جامع بازاریابی برای شرکت‌های بزرگ، شامل تحلیل‌های پیشرفته و کمپین‌های سفارشی.",
      badges: ["سئو", "PPC", "بازاریابی محتوا"],
      features: [
        { text: "مناسب برای", description: "سازمان‌های بزرگ" },
        { text: "تخمین زمان", description: "۶ تا ۸ هفته" },
        { text: "تخمین قیمت", description: formatPrice(5000000) },
      ],
      timeEstimate: "۶ تا ۸ هفته",
      priceEstimate: formatPrice(5000000),
    },
  ];

  return (
    <section className={cn("bg-muted py-32", className)}>
      <div className="container">
        <h1 className="mb-4 text-xl md:text-3xl lg:mb-8 lg:text-xl">
          طرح‌های تعرفه
        </h1>

        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
          {DATA.map((pkg, idx) => (
            <div
              key={idx}
              className={cn(
                "flex flex-1 flex-col rounded-3xl p-6 lg:py-8",
                pkg.isHighlighted ? "bg-amber-200" : "bg-background",
              )}
            >
              {/* Badges */}
              <div className="mb-4 flex flex-wrap gap-2">
                {pkg.badges.map((badgeText, i) => (
                  <Badge
                    key={i}
                    variant="outline"
                    className={cn(
                      "rounded-sm border bg-transparent px-4 py-2 text-foreground",
                      pkg.isHighlighted ? "border-foreground" : "border-secondary",
                    )}
                  >
                    {badgeText}
                  </Badge>
                ))}
              </div>

              {/* Title */}
              <h2 className="mt-24 mb-2 text-base font-medium lg:text-xl">
                {pkg.title}
              </h2>

              {/* Description */}
              <p className="mb-6 text-sm text-muted-foreground">
                {pkg.description}
              </p>

              {/* Features */}
              <div className="mb-6 flex-1">
                {pkg.features.map((feature, i) => (
                  <div
                    key={i}
                    className={cn(
                      "py-4",
                      i === 0 &&
                        "border-t border-dashed border-muted-foreground",
                      i !== pkg.features.length - 1 &&
                        "border-b border-dashed border-muted-foreground",
                    )}
                  >
                    <div className="flex justify-between gap-4">
                      <span className="text-sm font-medium">
                        {feature.text}
                      </span>
                      <span className="text-sm text-end">
                        {feature.description}
                      </span>
                    </div>
                  </div>
                ))}
              </div>

              {/* Button */}
              <Button className="mt-auto w-full py-6">شروع رایگان</Button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Pricing26 };