"use client";

import { Check } from "lucide-react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

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

interface Pricing27Props {
  className?: string;
}

const Pricing27 = ({ className }: Pricing27Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <ul className="grid gap-6 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3">
          {/* Main Card */}
          <li className="md:order-1 lg:col-span-1 xl:col-span-2">
            <div className="flex h-full flex-col-reverse rounded-lg border bg-muted md:flex-row">
              <div className="flex flex-col justify-between p-6 md:p-8">
                <div>
                  <div>
                    <p className="text-lg font-semibold">راهکارهای Glide</p>
                    <p className="mt-3 text-muted-foreground">
                      راهکار سفارشی پریمیوم با همکاری یک شریک آژانس برتر،
                      همراه با مدیریت توسعه توسط Glide.
                    </p>
                  </div>
                  <p className="mt-6 text-sm font-semibold text-muted-foreground">
                    شروع از
                  </p>
                  <div className="mt-2 flex items-baseline gap-2">
                    <span className="text-3xl font-semibold">
                      {formatPrice(10000000)}
                    </span>
                    <span className="text-sm text-muted-foreground">
                      به ازای هر پروژه
                    </span>
                  </div>
                  <Button size="lg" className="mt-5 w-fit rounded-3xl">
                    دریافت پیشنهاد رایگان
                  </Button>
                </div>

                <div className="mt-8">
                  <ul className="space-y-2">
                    <li className="flex items-center">
                      <Check className="me-2 size-4 shrink-0 text-primary" />
                      <span className="text-sm text-muted-foreground">
                        همکاری با Glide و شریک آژانس
                      </span>
                    </li>
                    <li className="flex items-center">
                      <Check className="me-2 size-4 shrink-0 text-primary" />
                      <span className="text-sm text-muted-foreground">
                        ورود داده از بیش از ۱۰۰ منبع
                      </span>
                    </li>
                    <li className="flex items-center">
                      <Check className="me-2 size-4 shrink-0 text-primary" />
                      <span className="text-sm text-muted-foreground">
                        پشتیبانی اولویت‌دار Glide
                      </span>
                    </li>
                  </ul>
                  <Button variant="link" className="mt-4 px-0">
                    بیشتر بدانید
                  </Button>
                </div>
              </div>

              <div className="hidden p-6 md:p-8 xl:block xl:w-[800px] 2xl:w-[960px]">
                <div className="h-full rounded-lg">
                  <img
                    src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
                    alt="راهکارهای Glide"
                    className="h-full w-full rounded-lg object-cover"
                  />
                </div>
              </div>
            </div>
          </li>

          {/* Secondary Card */}
          <li className="rounded-lg border bg-card p-6 md:p-8">
            <div className="flex h-full flex-col justify-between">
              <div>
                <p className="text-lg font-semibold">استخدام متخصص</p>
                <p className="mt-3 text-muted-foreground">
                  در فهرست متخصصان، یک کارشناس گواهی‌شده Glide را پیدا کنید که
                  با نیازها و ترجیحات پروژه شما هماهنگ باشد.
                </p>
                <p className="mt-6 text-sm font-semibold text-muted-foreground">
                  شروع از
                </p>
                <div className="mt-2 flex items-baseline gap-2">
                  <span className="text-3xl font-semibold">
                    {formatPrice(2000000)}
                  </span>
                  <span className="text-sm text-muted-foreground">
                    به ازای هر پروژه
                  </span>
                </div>
                <Button
                  size="lg"
                  variant="secondary"
                  className="mt-5 w-fit rounded-3xl"
                >
                  مرور متخصصان
                </Button>
              </div>

              <div className="mt-8">
                <ul className="space-y-2">
                  <li className="flex items-center">
                    <Check className="me-2 size-4 shrink-0 text-primary" />
                    <span className="text-sm text-muted-foreground">
                      استخدام ساعتی یا پروژه‌ای
                    </span>
                  </li>
                  <li className="flex items-center">
                    <Check className="me-2 size-4 shrink-0 text-primary" />
                    <span className="text-sm text-muted-foreground">
                      همکاری با متخصص گواهی‌شده
                    </span>
                  </li>
                  <li className="flex items-center">
                    <Check className="me-2 size-4 shrink-0 text-primary" />
                    <span className="text-sm text-muted-foreground">
                      پشتیبانی Glide
                    </span>
                  </li>
                </ul>
                <Button variant="link" className="mt-4 px-0">
                  بیشتر بدانید
                </Button>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </section>
  );
};

export { Pricing27 };