import { Button } from "@/components/ui/button";
import { Check } from "lucide-react";
import Link from "next/link";

export default function Pricing() {
  return (
    <div className="relative bg-white py-16 md:py-32">
      <div className="mx-auto max-w-5xl px-6">
        <div className="mx-auto max-w-2xl text-center">
          <h1 className="text-balance text-3xl font-semibold md:text-4xl lg:text-5xl leading-relaxed tracking-normal">
            قیمت‌گذاری
          </h1>
          <p className="mt-4 text-lg leading-relaxed tracking-normal text-muted-foreground">
            قیمت‌ها بر اساس نوع سرویس و بازه زمانی تعیین می‌شوند
          </p>
        </div>
        <div className="mt-8 md:mt-20">
          <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-2xl font-semibold leading-relaxed tracking-normal">پکیج سازمانی</h3>
                <p className="mt-2 text-lg leading-relaxed tracking-normal">برای شرکت شما با هر اندازه‌ای</p>
                
                <div className="mt-8 rounded-2xl border bg-muted/30 p-6">
                  <p className="text-muted-foreground text-sm leading-relaxed tracking-normal">
                    قیمت‌گذاری ما بر اساس نیازهای خاص شما انجام می‌شود. عوامل موثر در تعیین قیمت شامل:
                  </p>
                  <ul className="mt-4 space-y-2 text-right text-sm leading-relaxed tracking-normal">
                    <li className="flex items-start gap-2">
                      <span className="mt-1.5 size-1.5 shrink-0 rounded-full bg-primary" />
                      <span className="text-muted-foreground">نوع و تعداد سرویس‌های مورد نیاز</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="mt-1.5 size-1.5 shrink-0 rounded-full bg-primary" />
                      <span className="text-muted-foreground">بازه زمانی استفاده (ماهانه، سالانه)</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="mt-1.5 size-1.5 shrink-0 rounded-full bg-primary" />
                      <span className="text-muted-foreground">حجم داده و ترافیک</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="mt-1.5 size-1.5 shrink-0 rounded-full bg-primary" />
                      <span className="text-muted-foreground">نیاز به پشتیبانی و سفارشی‌سازی</span>
                    </li>
                  </ul>
                </div>

                <div className="flex justify-center mt-8">
                  <Button asChild size="lg">
                    <Link href="#">دریافت پیشنهاد قیمت</Link>
                  </Button>
                </div>

                <p className="text-muted-foreground mt-8 text-sm leading-relaxed tracking-normal">
                  برای دریافت پیشنهاد قیمت دقیق، با ما تماس بگیرید تا بر اساس نیازهای شما بهترین راهکار را پیشنهاد دهیم.
                </p>
              </div>
              <div className="relative">
                <ul role="list" className="space-y-4">
                  {[
                    "تجمیع پایگاه داده و یکپارچه‌سازی",
                    "احراز هویت و مدیریت هویت پیشرفته",
                    "داشبورد تحلیل و گزارش‌گیری",
                    "ارتباطات چندکاناله (تلگرام، واتساپ و ...)",
                    "اتوماسیون فرآیندها و workflow",
                    "پشتیبانی ۲۴/۷ و مستندات کامل",
                    "ذخیره‌سازی نامحدود",
                    "API و Webhooks نامحدود"
                  ].map((item, index) => (
                    <li key={index} className="flex items-center gap-2 leading-relaxed tracking-normal">
                      <Check className="size-4 text-primary shrink-0" />
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
                <p className="text-muted-foreground mt-6 text-sm leading-relaxed tracking-normal">
                  ما راهکارهای سفارشی برای کسب‌وکارهای مختلف ارائه می‌دهیم. 
                  تیم ما آماده است تا بر اساس نیازهای خاص شما، بهترین پکیج را طراحی کند.
                </p>
                <div className="mt-12 flex flex-wrap items-center justify-between 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>
          </div>
        </div>
      </div>
    </div>
  );
}