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="bg-white py-20 md:py-28">
        <div className="mx-auto max-w-4xl px-6">
          <div className="text-center space-y-6">
            <h1 className="text-4xl font-bold md:text-5xl lg:text-6xl leading-tight tracking-normal">
              قیمت‌گذاری
            </h1>
            <p className="text-xl leading-relaxed tracking-normal text-muted-foreground max-w-2xl mx-auto">
              قیمت‌ها بر اساس نوع سرویس و بازه زمانی تعیین می‌شوند
            </p>
          </div>
        </div>
      </section>

      {/* Pricing Factors - بخش اصلی توضیحات */}
      <section className="bg-muted/30 py-20 md:py-28">
        <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-3xl font-bold md:text-4xl leading-tight tracking-normal">
                پروژه‌ها بر اساس چه عواملی قیمت‌گذاری می‌شوند؟
              </h2>
              <p className="text-lg leading-relaxed tracking-normal 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 bg-white">
                <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">
                    <FileText className="size-7" />
                  </div>
                  <h3 className="text-xl font-bold 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 bg-white">
                <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">
                    <Code className="size-7" />
                  </div>
                  <h3 className="text-xl font-bold 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 bg-white">
                <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">
                    <Settings className="size-7" />
                  </div>
                  <h3 className="text-xl font-bold 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 bg-white">
                <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">
                    <Users className="size-7" />
                  </div>
                  <h3 className="text-xl font-bold 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 bg-white">
                <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">
                    <Clock className="size-7" />
                  </div>
                  <h3 className="text-xl font-bold 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 bg-white">
                <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">
                    <Settings className="size-7" />
                  </div>
                  <h3 className="text-xl font-bold leading-tight">پشتیبانی و نگهداری</h3>
                </div>
                <p className="leading-relaxed tracking-normal text-muted-foreground">
                  نیاز به پشتیبانی فنی، به‌روزرسانی‌ها، نگهداری و مستندات کامل 
                  از عوامل مهم در تعیین قیمت هستند. پشتیبانی ۲۴/۷ و نگهداری مستمر نیاز به منابع بیشتری دارد.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Package Details */}
      <section className="bg-white py-20 md:py-28">
        <div className="mx-auto max-w-6xl px-6">
          <div className="bg-card relative rounded-3xl border shadow-2xl shadow-zinc-950/5">
            <div className="grid items-center gap-12 divide-y p-12 md:grid-cols-2 md:divide-x md:divide-y-0">
              <div className="pb-12 text-center md:pb-0 md:pe-12">
                <h3 className="text-3xl font-bold leading-tight tracking-normal mb-4">پکیج سازمانی</h3>
                <p className="text-lg leading-relaxed tracking-normal text-muted-foreground mb-8">
                  برای شرکت شما با هر اندازه‌ای
                </p>
                
                <p className="text-muted-foreground leading-relaxed tracking-normal mb-8">
                  ما راهکارهای سفارشی برای کسب‌وکارهای مختلف ارائه می‌دهیم. 
                  تیم ما آماده است تا بر اساس نیازهای خاص شما، بهترین پکیج را طراحی کند.
                </p>

                <div className="mt-8 flex flex-wrap items-center justify-center gap-6">
                  <img
                    className="h-5 w-fit dark:invert"
                    src="https://html.tailus.io/blocks/customers/nvidia.svg"
                    alt="Nvidia Logo"
                    height="20"
                    width="auto"
                  />
                  <img
                    className="h-4 w-fit dark:invert"
                    src="https://html.tailus.io/blocks/customers/column.svg"
                    alt="Column Logo"
                    height="16"
                    width="auto"
                  />
                  <img
                    className="h-4 w-fit dark:invert"
                    src="https://html.tailus.io/blocks/customers/github.svg"
                    alt="GitHub Logo"
                    height="16"
                    width="auto"
                  />
                  <img
                    className="h-5 w-fit dark:invert"
                    src="https://html.tailus.io/blocks/customers/nike.svg"
                    alt="Nike Logo"
                    height="20"
                    width="auto"
                  />
                </div>
              </div>
              <div className="relative">
                <h4 className="text-xl font-bold 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="bg-muted/30 py-20 md:py-28">
        <div className="mx-auto max-w-4xl px-6">
          <div className="text-center space-y-8 p-12 rounded-2xl border bg-gradient-to-br from-primary/5 to-primary/10">
            <h2 className="text-3xl font-bold md:text-4xl leading-tight tracking-normal">
              برای اطلاع از قیمت با ما تماس بگیرید
            </h2>
            <p className="text-lg 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" className="text-base px-8 py-6">
                <Link href="#chat">شروع گفتگو با تیم</Link>
              </Button>
              <Button asChild size="lg" variant="outline" className="text-base px-8 py-6">
                <Link href="/about">درباره ما</Link>
              </Button>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}