import { Ticket } from "lucide-react";
import React from "react";

import { cn } from "@/lib/utils";

interface RateCard1Props {
  className?: string;
}

const RateCard1 = ({ className }: RateCard1Props) => {
  const BOOKING_CONDITIONS = [
    "حداقل دوره همکاری  ۲ ماه",
    "برای توضیح بیشتر زمان تماس را هماهنگ کنید",
    "هر زمان بخواهید مکث یا لغو کنید",
  ];

  const process = [
    {
      step: "01",
      title: "بازبینی اول  ۴۲ ساعت",
      description:
        "تحلیل اولیه قیمت‌گذاری و تحقیق بازار ظرف ۴۲ ساعت انجام می‌شود. پیشنهادهای جامع استراتژی قیمت بر اساس رقبا و جایگاه بازار ارائه می‌شود.",
    },
    {
      step: "02",
      title: "پالایش استراتژی  ۷۲ ساعت",
      description:
        "توسعه مدل قیمت‌گذاری با سطوح و پیشنهاد ارزش. همه سناریوها در برابر اهداف کسب‌وکار و حاشیه سود هدف آزمایش و اعتبارسنجی می‌شوند.",
    },
    {
      step: "03",
      title: "برنامه اجرا  ۵ روز",
      description:
        "نقشه راه کامل اجرای قیمت با زمان‌بندی و تخصیص منابع. راهنمای گام‌به‌گام برای اعمال قیمت جدید در همه کانال‌ها و بخش‌های مشتری.",
    },
    {
      step: "04",
      title: "آزمایش و بهینه‌سازی  ۱ هفته",
      description:
        "راه‌اندازی A/B تست و ابزار پایش عملکرد قیمت. شاخص‌های کلیدی رصد و تنظیمات لحظه‌ای برای بیشینه کردن درآمد و رضایت مشتری.",
    },
    {
      step: "05",
      title: "بازبینی نهایی  ۱۰ روز",
      description:
        "ممیزی جامع قیمت با تحلیل عملکرد و پیشنهادهای آینده. مستندات و مواد آموزشی کامل برای مدیریت مستمر قیمت توسط تیم شما.",
    },
  ];

  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="mt-20 flex grid w-full grid-cols-1 flex-col justify-between gap-15 md:gap-10 lg:grid-cols-7">
          <div className="top-1/5 flex h-fit w-full max-w-lg flex-col gap-15 gap-40 lg:sticky lg:col-span-3">
            <div className="relative flex h-fit w-fit justify-between text-2xll font-semibold tracking-tight lg:text-2xll">
              {" "}
              <h1 className="w-fit text-foreground/20">
                قیمت‌گذاری <br />
                ساده
              </h1>
              <Illustration className="absolute top-0 -right-4" />
              <Illustration className="absolute -bottom-2 -left-4 rotate-180" />
            </div>

            <div className="flex w-full flex-col gap-4">
              <h1 className="text-xl font-medium tracking-tighter lg:text-2xll">
                ۳٬۴۹۹ دلار{" "}
                <sup className="align-top text-base font-normal tracking-normal text-foreground/50 lg:text-lg">
                  /ماه
                </sup>{" "}
              </h1>
              <ul className="my-3 space-y-1">
                {BOOKING_CONDITIONS.map((condition, index) => (
                  <li
                    key={index}
                    className="flex items-center gap-4 text-lg tracking-tight text-foreground/50"
                  >
                    <span className="size-2 bg-orange-500" />
                    {condition}
                  </li>
                ))}
              </ul>
            </div>
          </div>

          <ul className="relative col-span-1 w-full lg:col-span-4 lg:pl-22">
            {process.map((step, index) => (
              <li
                key={index}
                className="relative flex flex-col justify-between gap-10 border-b py-8 md:flex-row lg:py-10"
              >
                <div className="flex size-8 items-center justify-center rounded-lg border border-orange-500 tracking-tighter">
                  <Ticket className="storke-1 size-4 text-orange-500" />
                </div>
                <div className="w-fit">
                  <h3 className="mb-4 text-xl font-semibold tracking-tighter lg:text-xl">
                    {step.title}
                  </h3>
                  <p className="line-clamp-2 text-foreground/50">
                    {step.description}
                  </p>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
};

export { RateCard1 };

const Illustration = (props: React.SVGProps<SVGSVGElement>) => {
  return (
    <svg
      width="22"
      height="20"
      viewBox="0 0 22 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <line
        x1="0.607422"
        y1="2.57422"
        x2="21.5762"
        y2="2.57422"
        stroke="#FF0000"
        strokeWidth="4"
      />
      <line
        x1="19.5762"
        y1="19.624"
        x2="19.5762"
        y2="4.57422"
        stroke="#FF0000"
        strokeWidth="4"
      />
    </svg>
  );
};