mr_decor/components/sections/other/pricing-section.tsx

import { Button } from "@/components/ui/button";
import { Check, FileText, Code, Settings, Users, Clock } from "lucide-react";
import Link from "next/link";

export default function Pricing() {
  return (
    <>
      {/* Hero Section */}
      <section className="pt-32 pb-20 md:pt-40 md:pb-28">
        <div className="mx-auto max-w-4xl px-6">
          <div className="text-center space-y-6">
            <h1 className="text-heading-1 font-bold leading-tight tracking-normal">
              قیمت‌گذاری
            </h1>
            <div className="text-body space-y-4 max-w-3xl mx-auto leading-relaxed">
              <p className="text-muted-foreground">
                هر راه‌حل با توجه به پیچیدگی، شرایط اجرا و نیازمندی‌های خاص شما طراحی می‌شود. به همین دلیل، قیمت‌گذاری ما کاملاً سفارشی و متناسب با شرایط واقعی کسب‌وکار شماست.
              </p>
              <p className="text-body leading-relaxed text-foreground font-medium">
                راه‌حل‌های ما از <span className="text-primary font-bold">۲ میلیون تومان</span> شروع می‌شوند و بر اساس نیازهای دقیق شما محاسبه می‌گردند.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Pricing Factors - بخش اصلی توضیحات */}
      <section className="py-20 md:py-28 border-t border-border/50">
        <div className="mx-auto max-w-6xl px-6">
          <div className="space-y-12">
            <div className="text-center space-y-4 max-w-3xl mx-auto">
              <h2 className="text-heading-2 font-semibold leading-tight tracking-normal">
                راه‌حل‌ها بر اساس چه عواملی قیمت‌گذاری می‌شوند؟
              </h2>
              <p className="text-body leading-relaxed text-muted-foreground">
                ما متعهد هستیم که راه‌حل‌های شما را در <strong className="text-foreground">کمترین زمان ممکن</strong> و با <strong className="text-foreground">بهترین قیمت</strong> ارائه دهیم. 
                قیمت‌گذاری ما بر اساس نیازهای خاص شما انجام می‌شود و عوامل مختلفی در تعیین قیمت نهایی نقش دارند.
              </p>
            </div>

            <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
              <div className="space-y-4 p-8 rounded-2xl border dark:border-transparent bg-card transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                <div className="flex items-center gap-4">
                  <div className="flex size-14 items-center justify-center rounded-xl bg-primary/10 text-primary shrink-0 transition-transform duration-300 group-hover:scale-110">
                    <FileText className="size-7" />
                  </div>
                  <h3 className="text-heading-4 font-semibold leading-tight">نوع سرویس</h3>
                </div>
                <p className="leading-relaxed tracking-normal text-muted-foreground">
                  نوع سرویس شما یکی از مهم‌ترین عوامل در تعیین قیمت است. سرویس‌های یکپارچه‌سازی، 
                  اتوماسیون، ارتباطات چندکاناله و مدیریت داده‌ها هر کدام نیازمندی‌ها و پیچیدگی‌های خاص خود را دارند.
                </p>
              </div>

              <div className="space-y-4 p-8 rounded-2xl border dark:border-transparent bg-card transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                <div className="flex items-center gap-4">
                  <div className="flex size-14 items-center justify-center rounded-xl bg-primary/10 text-primary shrink-0 transition-transform duration-300 group-hover:scale-110">
                    <Code className="size-7" />
                  </div>
                  <h3 className="text-heading-4 font-semibold leading-tight">پیچیدگی راه‌حل</h3>
                </div>
                <p className="leading-relaxed tracking-normal text-muted-foreground">
                  میزان پیچیدگی فنی راه‌حل، تعداد سیستم‌های متصل، حجم داده‌ها و نیاز به سفارشی‌سازی 
                  از عوامل مهم در تعیین قیمت هستند. راه‌حل‌های پیچیده‌تر نیاز به زمان و تخصص بیشتری دارند.
                </p>
              </div>

              <div className="space-y-4 p-8 rounded-2xl border dark:border-transparent bg-card transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                <div className="flex items-center gap-4">
                  <div className="flex size-14 items-center justify-center rounded-xl bg-primary/10 text-primary shrink-0 transition-transform duration-300 group-hover:scale-110">
                    <Settings className="size-7" />
                  </div>
                  <h3 className="text-heading-4 font-semibold leading-tight">اجرا و پیاده‌سازی</h3>
                </div>
                <p className="leading-relaxed tracking-normal text-muted-foreground">
                  مراحل اجرا و پیاده‌سازی شامل طراحی، توسعه، تست و استقرار می‌شود. 
                  میزان زمان و منابع مورد نیاز برای هر مرحله در قیمت نهایی تاثیر دارد.
                </p>
              </div>

              <div className="space-y-4 p-8 rounded-2xl border dark:border-transparent bg-card transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                <div className="flex items-center gap-4">
                  <div className="flex size-14 items-center justify-center rounded-xl bg-primary/10 text-primary shrink-0 transition-transform duration-300 group-hover:scale-110">
                    <Users className="size-7" />
                  </div>
                  <h3 className="text-heading-4 font-semibold leading-tight">تعداد کاربران</h3>
                </div>
                <p className="leading-relaxed tracking-normal text-muted-foreground">
                  تعداد کاربرانی که از سیستم استفاده می‌کنند و حجم ترافیک مورد انتظار 
                  در تعیین قیمت موثر است. سیستم‌های با کاربران بیشتر نیاز به زیرساخت قوی‌تری دارند.
                </p>
              </div>

              <div className="space-y-4 p-8 rounded-2xl border dark:border-transparent bg-card transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                <div className="flex items-center gap-4">
                  <div className="flex size-14 items-center justify-center rounded-xl bg-primary/10 text-primary shrink-0 transition-transform duration-300 group-hover:scale-110">
                    <Clock className="size-7" />
                  </div>
                  <h3 className="text-heading-4 font-semibold leading-tight">بازه زمانی</h3>
                </div>
                <p className="leading-relaxed tracking-normal text-muted-foreground">
                  بازه زمانی استفاده از سرویس (ماهانه، سالانه) و مدت زمان مورد نیاز برای پیاده‌سازی راه‌حل 
                  در قیمت‌گذاری تاثیر دارد. قراردادهای بلندمدت معمولاً شامل تخفیف‌های ویژه می‌شوند.
                </p>
              </div>

              <div className="space-y-4 p-8 rounded-2xl border dark:border-transparent bg-card transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                <div className="flex items-center gap-4">
                  <div className="flex size-14 items-center justify-center rounded-xl bg-primary/10 text-primary shrink-0 transition-transform duration-300 group-hover:scale-110">
                    <Settings className="size-7" />
                  </div>
                  <h3 className="text-heading-4 font-semibold leading-tight">پشتیبانی و نگهداری</h3>
                </div>
                <p className="leading-relaxed tracking-normal text-muted-foreground">
                  نیاز به پشتیبانی فنی، به‌روزرسانی‌ها، نگهداری و مستندات کامل 
                  از عوامل مهم در تعیین قیمت هستند. پشتیبانی ۲۴/۷ و نگهداری مستمر نیاز به منابع بیشتری دارد.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Package Details */}
      <section className="py-20 md:py-28 border-t border-border/50">
        <div className="mx-auto max-w-6xl px-6">
          <div className="bg-card relative rounded-3xl border border-border shadow-lg">
            <div className="grid items-center gap-12 p-12 md:grid-cols-2">
              <div className="pb-12 text-center md:pb-0 md:pe-12">
                <h3 className="text-heading-3 font-semibold leading-tight tracking-normal mb-4">راه‌حل سازمانی</h3>
                <p className="text-body leading-relaxed text-muted-foreground mb-8">
                  برای شرکت شما با هر اندازه‌ای
                </p>
                
                <p className="text-muted-foreground leading-relaxed tracking-normal mb-8">
                  ما راهکارهای سفارشی برای کسب‌وکارهای مختلف ارائه می‌دهیم. 
                  تیم ما آماده است تا بر اساس نیازهای خاص شما، بهترین راه‌حل را طراحی کند.
                </p>
              </div>
              <div className="relative">
                <h4 className="text-heading-4 font-semibold mb-6 leading-tight">ویژگی‌های راه‌حل سازمانی</h4>
                <ul role="list" className="space-y-4">
                  {[
                    "تجمیع پایگاه داده و یکپارچه‌سازی",
                    "احراز هویت و مدیریت هویت پیشرفته",
                    "داشبورد تحلیل و گزارش‌گیری",
                    "ارتباطات چندکاناله (تلگرام، واتساپ و ...)",
                    "اتوماسیون فرآیندها و workflow",
                    "پشتیبانی ۲۴/۷ و مستندات کامل",
                    "ذخیره‌سازی نامحدود",
                    "API و Webhooks نامحدود"
                  ].map((item, index) => (
                    <li key={index} className="flex items-center gap-3 leading-relaxed tracking-normal">
                      <Check className="size-5 text-primary shrink-0" />
                      <span className="text-base">{item}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section - اطلاع از قیمت */}
      <section className="py-20 md:py-28 border-t border-border/50">
        <div className="mx-auto max-w-4xl px-6">
          <div className="text-center space-y-8 p-12 rounded-2xl border border-border bg-card shadow-sm">
            <h2 className="text-heading-2 font-semibold leading-tight tracking-normal">
              برای اطلاع از قیمت با ما تماس بگیرید
            </h2>
            <p className="text-body text-muted-foreground max-w-2xl mx-auto leading-relaxed">
              برای دریافت قیمت دقیق و مشاوره رایگان، با تیم ما در تماس باشید. 
              ما آماده‌ایم تا بر اساس نیازهای شما بهترین پیشنهاد را ارائه دهیم.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button asChild size="lg" variant="primary">
                <Link href="/contact">شروع گفتگو با تیم</Link>
              </Button>
              <Button asChild size="lg" variant="secondary">
                <Link href="/about">درباره ما</Link>
              </Button>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}