aragrp/components/pricing.tsx

import { Button } from "@/components/ui/button";
import { Container } from "@/components/container";
import { Check, FileText, Code, Settings, Users, Clock } from "lucide-react";
import Link from "next/link";
import { layout } from "@/lib/layout";
import { type, typeSpacing } from "@/lib/typography";
import { cn } from "@/lib/utils";

export default function Pricing() {
  return (
    <>
      {/* Hero Section */}
      <section className={cn("section-shell bg-section-canvas", layout.sectionTopWithHeader)}>
        <Container>
          <div className={cn(typeSpacing.heroStack)}>
            <h1 className={cn(type.h1, "text-center")}>
              قیمت‌گذاری
            </h1>
            <div className={cn(typeSpacing.sectionStack, "mx-auto max-w-3xl text-start")}>
              <p className={type["section-intro"]}>
                هر راه‌حل با توجه به پیچیدگی، شرایط اجرا و نیازمندی‌های خاص شما طراحی می‌شود. به همین دلیل، قیمت‌گذاری ما کاملاً سفارشی و متناسب با شرایط واقعی کسب‌وکار شماست.
              </p>
              <p className={cn(type["section-intro"], "text-foreground font-medium")}>
                راه‌حل‌های ما از <span className="text-primary font-bold">۲ میلیون تومان</span> شروع می‌شوند و بر اساس نیازهای دقیق شما محاسبه می‌گردند.
            </p>
            </div>
          </div>
        </Container>
      </section>

      {/* Pricing Factors - بخش اصلی توضیحات */}
      <section className={cn("section-shell bg-section-muted", layout.sectionY)}>
        <Container>
          <div className="space-y-12">
            <div className="mx-auto max-w-3xl space-y-4 text-start">
              <h2 className={cn(type.h2, "text-center")}>
                راه‌حل‌ها بر اساس چه عواملی قیمت‌گذاری می‌شوند؟
              </h2>
              <p className={type["section-intro"]}>
                ما متعهد هستیم که راه‌حل‌های شما را در <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 rounded-2xl border border-border bg-card p-8 transition-[border-color,box-shadow,transform] duration-200 hover:-translate-y-1 hover:border-primary/30 hover:shadow-lg dark:hover:shadow-glow-primary">
                <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={type.h3}>نوع سرویس</h3>
                </div>
                <p className={cn(type.body, "text-muted-foreground")}>
                  نوع سرویس شما یکی از مهم‌ترین عوامل در تعیین قیمت است. سرویس‌های یکپارچه‌سازی، 
                  اتوماسیون، ارتباطات چندکاناله و مدیریت داده‌ها هر کدام نیازمندی‌ها و پیچیدگی‌های خاص خود را دارند.
                </p>
              </div>

              <div className="space-y-4 rounded-2xl border border-border bg-card p-8 transition-[border-color,box-shadow,transform] duration-200 hover:-translate-y-1 hover:border-primary/30 hover:shadow-lg dark:hover:shadow-glow-primary">
                <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={type.h3}>پیچیدگی راه‌حل</h3>
                </div>
                <p className={cn(type.body, "text-muted-foreground")}>
                  میزان پیچیدگی فنی راه‌حل، تعداد سیستم‌های متصل، حجم داده‌ها و نیاز به سفارشی‌سازی 
                  از عوامل مهم در تعیین قیمت هستند. راه‌حل‌های پیچیده‌تر نیاز به زمان و تخصص بیشتری دارند.
                </p>
              </div>

              <div className="space-y-4 rounded-2xl border border-border bg-card p-8 transition-[border-color,box-shadow,transform] duration-200 hover:-translate-y-1 hover:border-primary/30 hover:shadow-lg dark:hover:shadow-glow-primary">
                <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={type.h3}>اجرا و پیاده‌سازی</h3>
                </div>
                <p className={cn(type.body, "text-muted-foreground")}>
                  مراحل اجرا و پیاده‌سازی شامل طراحی، توسعه، تست و استقرار می‌شود. 
                  میزان زمان و منابع مورد نیاز برای هر مرحله در قیمت نهایی تاثیر دارد.
                </p>
              </div>

              <div className="space-y-4 rounded-2xl border border-border bg-card p-8 transition-[border-color,box-shadow,transform] duration-200 hover:-translate-y-1 hover:border-primary/30 hover:shadow-lg dark:hover:shadow-glow-primary">
                <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={type.h3}>تعداد کاربران</h3>
                </div>
                <p className={cn(type.body, "text-muted-foreground")}>
                  تعداد کاربرانی که از سیستم استفاده می‌کنند و حجم ترافیک مورد انتظار 
                  در تعیین قیمت موثر است. سیستم‌های با کاربران بیشتر نیاز به زیرساخت قوی‌تری دارند.
                </p>
              </div>

              <div className="space-y-4 rounded-2xl border border-border bg-card p-8 transition-[border-color,box-shadow,transform] duration-200 hover:-translate-y-1 hover:border-primary/30 hover:shadow-lg dark:hover:shadow-glow-primary">
                <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={type.h3}>بازه زمانی</h3>
                </div>
                <p className={cn(type.body, "text-muted-foreground")}>
                  بازه زمانی استفاده از سرویس (ماهانه، سالانه) و مدت زمان مورد نیاز برای پیاده‌سازی راه‌حل 
                  در قیمت‌گذاری تاثیر دارد. قراردادهای بلندمدت معمولاً شامل تخفیف‌های ویژه می‌شوند.
                </p>
              </div>

              <div className="space-y-4 rounded-2xl border border-border bg-card p-8 transition-[border-color,box-shadow,transform] duration-200 hover:-translate-y-1 hover:border-primary/30 hover:shadow-lg dark:hover:shadow-glow-primary">
                <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={type.h3}>پشتیبانی و نگهداری</h3>
                </div>
                <p className={cn(type.body, "text-muted-foreground")}>
                  نیاز به پشتیبانی فنی، به‌روزرسانی‌ها، نگهداری و مستندات کامل 
                  از عوامل مهم در تعیین قیمت هستند. پشتیبانی ۲۴ ساعته و نگهداری مستمر نیاز به منابع بیشتری دارد.
                </p>
              </div>
            </div>
          </div>
        </Container>
      </section>

      {/* Package Details */}
      <section className={cn("section-shell bg-section-canvas", layout.sectionY)}>
        <Container>
          <div className="relative rounded-3xl border bg-card shadow-2xl shadow-brand-neutral/5 dark:border-border">
            <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={cn(type.h3, "mb-4")}>راه‌حل سازمانی</h3>
                <p className={cn(type["section-intro"], "mb-8")}>
                  برای شرکت شما با هر اندازه‌ای
                </p>
                
                <p className={cn(type.body, "text-muted-foreground mb-8")}>
                  ما راهکارهای سفارشی برای کسب‌وکارهای مختلف ارائه می‌دهیم. 
                  تیم ما آماده است تا بر اساس نیازهای خاص شما، بهترین راه‌حل را طراحی کند.
                </p>
              </div>
              <div className="relative">
                <h4 className={cn(type.h4, "mb-6")}>ویژگی‌های راه‌حل سازمانی</h4>
                <ul role="list" className="space-y-4">
                  {[
                    "تجمیع پایگاه داده و یکپارچه‌سازی",
                    "احراز هویت و مدیریت هویت پیشرفته",
                    "داشبورد تحلیل و گزارش‌گیری",
                    "ارتباطات چندکاناله (تلگرام، واتساپ و ...)",
                    "اتوماسیون فرآیندها و گردش‌کار",
                    "پشتیبانی ۲۴ ساعته و مستندات کامل",
                    "ذخیره‌سازی نامحدود",
                    "رابط برنامه‌نویسی و وب‌هوک نامحدود"
                  ].map((item, index) => (
                    <li key={index} className={cn("flex items-center gap-3", type.body)}>
                      <Check className="size-5 text-primary shrink-0" />
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </Container>
      </section>

      {/* CTA Section - اطلاع از قیمت */}
      <section className={cn("section-shell bg-section-muted", layout.sectionY)}>
        <Container>
          <div className="space-y-8 rounded-2xl border border-border bg-gradient-to-br from-primary/8 via-background to-brand-dark/8 p-12 text-center shadow-sm dark:from-primary/15 dark:via-card dark:to-brand-dark/20 dark:shadow-glow-primary">
            <h2 className={type["cta-title"]}>
              برای اطلاع از قیمت با ما تماس بگیرید
            </h2>
            <p className={cn(type["section-intro"], "max-w-2xl mx-auto")}>
              برای دریافت قیمت دقیق و مشاوره رایگان، با تیم ما در تماس باشید. 
              ما آماده‌ایم تا بر اساس نیازهای شما بهترین پیشنهاد را ارائه دهیم.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button asChild size="lg">
                <Link href="#">شروع گفتگو با تیم</Link>
              </Button>
              <Button asChild size="lg" variant="secondary">
                <Link href="#">درباره ما</Link>
              </Button>
            </div>
          </div>
        </Container>
      </section>
    </>
  );
}