import { Asterisk, CornerDownRight } from "lucide-react";
import React from "react";

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

interface Process1Props {
  className?: string;
}

const Process1 = ({ className }: Process1Props) => {
  const process = [
    {
      step: "۱",
      title: "کشف و تحقیق",
      description:
        "با درک اهداف کسب‌وکار، مخاطب هدف و چالش‌های فعلی شما شروع می‌کنیم. این فاز شامل تحقیق، تحلیل و برنامه‌ریزی استراتژیک برای شناسایی فرصت‌هاست.",
    },
    {
      step: "۲",
      title: "استراتژی و برنامه‌ریزی",
      description:
        "بر اساس یافته‌ها، استراتژی جامعی متناسب با اهداف شما توسعه می‌دهیم. این شامل تعریف رویکرد، زمان‌بندی و نقاط عطف کلیدی برای موفقیت است.",
    },
    {
      step: "۰۳",
      title: "اجرا و توسعه",
      description:
        "استراتژی را از طریق پیاده‌سازی و توسعه دقیق به واقعیت تبدیل می‌کنیم. تیم ما به‌صورت همکاری کار می‌کند تا هر جزئیات با نیازها و استانداردهای شما هم‌خوان باشد.",
    },
    {
      step: "۰۴",
      title: "بهینه‌سازی و بهبود",
      description:
        "عملکرد را به‌طور مستمر پایش و بازخورد جمع‌آوری می‌کنیم تا راه‌حل را پالایش و بهبود دهیم. این فرآیند تکراری موفقیت و رشد بلندمدت را تضمین می‌کند.",
    },
  ];

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="grid grid-cols-1 gap-5 lg:grid-cols-6 lg:gap-20">
          <div className="top-10 col-span-2 h-fit w-fit gap-3 space-y-7 py-8 lg:sticky">
            <div className="relative w-fit text-2xll font-semibold tracking-tight lg:text-2xll">
              <h1 className="w-fit">فرآیند ما</h1>
              <Asterisk className="absolute -top-2 -left-2 size-5 text-orange-500 md:size-10 lg:-left-14" />
            </div>
            <p className="text-start text-base text-foreground/50">
              از کشف نیازهای شما تا تحویل نهایی، هر مرحله با دقت و شفافیت پیش
              می‌رود تا بهترین نتیجه حاصل شود.
            </p>

            <Button
              variant="ghost"
              className="flex items-center justify-start gap-2"
            >
              <CornerDownRight className="text-orange-500 rtl:rotate-180" />
              تماس بگیرید
            </Button>
          </div>
          <ul className="relative col-span-4 w-full lg:ps-22">
            {process.map((step, index) => (
              <li
                key={index}
                className="relative flex flex-col justify-between gap-10 border-t py-8 md:flex-row lg:py-10"
              >
                <Illustration className="absolute top-4 left-0" />

                <div className="flex size-12 items-center justify-center bg-muted px-4 py-1 tracking-tighter">
                  {step.step}
                </div>
                <div>
                  <h3 className="mb-4 text-start text-xl font-semibold tracking-tighter lg:text-3xl">
                    {step.title}
                  </h3>
                  <p className="text-start text-foreground/50">
                    {step.description}
                  </p>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
};

export { Process1 };

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>
  );
};