reui-blocks/blocks/pricing40.tsx

"use client";

import { useState } from "react";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { cn } from "@/lib/utils";

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

interface Product {
  title: string;
  price: string;
  content: {
    title: string;
    items: string[];
  }[];
}

const products: Product[] = [
  {
    title: "بسته پایه استارتاپ",
    price: `${formatPrice(5000000)} در ماه`,
    content: [
      {
        title: "کارهایی که انجام می‌دهم",
        items: [
          "تعیین اهداف فصلی و ماهانه شامل جریان‌های کاری کلیدی و KPI",
          "ساخت پایه‌های بازاریابی (پرسونا، پیام، سیستم برند)",
          "بازطراحی وب‌سایت و توسعه استراتژی محتوا",
          "استخدام اولین اعضای تیم بازاریابی",
        ],
      },
      {
        title: "آنچه دریافت می‌کنید",
        items: [
          "۱۲ ساعت در هفته برای جلسات Zoom و بازبینی همزمان",
          "پشتیبانی پیام‌رسان تیمی/ایمیل در ساعات کاری",
          "جلسات استراتژی دو هفته‌یکبار",
          "گزارش پیشرفت ماهانه",
        ],
      },
      {
        title: "مناسب برای",
        items: [
          "شرکت‌هایی که پایه‌های بازاریابی می‌سازند",
          "استارتاپ‌های پیش از گسترش تیم",
          "بنیان‌گذارانی که به راهنمایی استراتژیک نیاز دارند",
          "کسب‌وکارهایی در حال انتقال به تیم داخلی",
        ],
      },
    ],
  },
  {
    title: "بسته شتاب‌دهنده رشد",
    price: `${formatPrice(8500000)} در ماه`,
    content: [
      {
        title: "کارهایی که انجام می‌دهم",
        items: [
          "استراتژی و اجرای پیشرفته کمپین",
          "بهینه‌سازی بازاریابی عملکردی",
          "راه‌اندازی اتوماسیون بازاریابی",
          "آموزش تیم و توسعه رهبری",
        ],
      },
      {
        title: "آنچه دریافت می‌کنید",
        items: [
          "۲۰ ساعت در هفته پشتیبانی اختصاصی",
          "بازبینی عملکرد هفتگی",
          "داشبورد تحلیل سفارشی",
          "پشتیبانی اولویت‌دار ۲۴/۷",
        ],
      },
      {
        title: "مناسب برای",
        items: [
          "استارتاپ‌های در حال رشد با تیم موجود",
          "شرکت‌هایی که محصول جدید راه‌اندازی می‌کنند",
          "کسب‌وکارهای ورود به بازارهای جدید",
          "سازمان‌هایی که به رشد سریع نیاز دارند",
        ],
      },
    ],
  },
  {
    title: "بسته راهکار سازمانی",
    price: `${formatPrice(15000000)} در ماه`,
    content: [
      {
        title: "کارهایی که انجام می‌دهم",
        items: [
          "مدیریت کامل بخش بازاریابی",
          "هماهنگی تیم‌های بین‌وظیفه‌ای",
          "استراتژی کمپین جهانی",
          "مشاوره در سطح مدیریت ارشد",
        ],
      },
      {
        title: "آنچه دریافت می‌کنید",
        items: [
          "تیم حساب اختصاصی",
          "توافق‌نامه SLA سفارشی",
          "بازبینی کسب‌وکار فصلی",
          "امنیت در سطح سازمانی",
        ],
      },
      {
        title: "مناسب برای",
        items: [
          "سازمان‌های تثبیت‌شده",
          "شرکت‌های با بیش از ۵۰۰ کارمند",
          "سازمان‌های بین‌المللی",
          "نیازهای پیچیده بازاریابی",
        ],
      },
    ],
  },
  {
    title: "بسته سفارشی",
    price: "تماس با ما",
    content: [
      {
        title: "کارهایی که انجام می‌دهم",
        items: [
          "راهکارهای بازاریابی سفارشی",
          "آموزش تخصصی تیم",
          "چالش‌های منحصربه‌فرد بازاریابی",
          "قیمت‌گذاری و خدمات انعطاف‌پذیر",
        ],
      },
      {
        title: "آنچه دریافت می‌کنید",
        items: [
          "پشتیبانی و خدمات متناسب",
          "قیمت‌گذاری سفارشی",
          "تیم حساب اختصاصی",
          "پشتیبانی نامحدود",
        ],
      },
      {
        title: "مناسب برای",
        items: [
          "شرکت‌های با نیازهای بازاریابی منحصربه‌فرد",
          "سازمان‌های با چالش‌های پیچیده",
          "کسب‌وکارهای با اهداف مشخص",
          "تیم‌هایی که به پشتیبانی تخصصی نیاز دارند",
        ],
      },
    ],
  },
];

interface Pricing40Props {
  className?: string;
}

const Pricing40 = ({ className }: Pricing40Props) => {
  const [openItems, setOpenItems] = useState<string[]>([]);

  return (
    <section className={cn("py-20", className)}>
      <div className="container">
        <h2 className="mb-12 text-3xl font-bold tracking-tight">بسته‌ها</h2>
        <div className="mt-12 space-y-2">
          {products.map((item, index) => (
            <Accordion
              key={index}
              type="multiple"
              value={openItems}
              onValueChange={setOpenItems}
              className="border-b border-muted"
            >
              <AccordionItem value={`item-${index}`} className="border-none">
                <AccordionTrigger className="flex items-center justify-between gap-4 py-6 transition-all duration-300 hover:no-underline [&>svg]:h-6 [&>svg]:w-6 [&>svg]:shrink-0 [&>svg]:transform [&>svg]:transition-transform [&[data-state=open]>svg]:rotate-180">
                  <div className="flex w-full flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                    <h3 className="text-start text-xl font-semibold sm:text-xl">
                      {item.title}
                    </h3>
                    <div className="flex items-center gap-4">
                      <span className="text-lg text-muted-foreground sm:text-xl">
                        {item.price}
                      </span>
                    </div>
                  </div>
                </AccordionTrigger>

                <AccordionContent className="pb-6">
                  <div className="grid gap-8 md:grid-cols-3">
                    {item.content.map((section, sectionIndex) => (
                      <div key={sectionIndex} className="space-y-4">
                        <h4 className="text-xl font-medium text-foreground">
                          {section.title}
                        </h4>
                        <ul className="space-y-3">
                          {section.items.map((bullet, bulletIndex) => (
                            <li
                              key={bulletIndex}
                              className="flex items-start text-muted-foreground"
                            >
                              <span className="me-2">•</span>
                              {bullet}
                            </li>
                          ))}
                        </ul>
                      </div>
                    ))}
                  </div>
                </AccordionContent>
              </AccordionItem>
            </Accordion>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Pricing40 };