"use client";

import { motion } from "framer-motion";
import { ArrowDown } from "lucide-react";
import React from "react";

import { useGoogleFont } from "@/hooks/use-google-font";
import { cn } from "@/lib/utils";

const processSteps = [
  {
    id: 1,
    title: "کشف",
    bgColor: "bg-sky-200",
    numberPosition: "right-[40%] lg:right-[30%]",
    number: "۰۰۱",
  },
  {
    id: 2,
    title: "استراتژی",
    bgColor: "bg-sky-300",
    numberPosition: "right-[52%] lg:right-[42%]",
    number: "۰۰۲",
  },
  {
    id: 3,
    title: "طراحی",
    bgColor: "bg-sky-400",
    numberPosition: "right-[62%] lg:right-[58%]",
    number: "۰۰۰۳",
  },
  {
    id: 4,
    title: "توسعه",
    bgColor: "bg-sky-500",
    numberPosition: "right-[75%] lg:right-[72%]",
    number: "۰۰۰۴",
  },
  {
    id: 5,
    title: "راه‌اندازی",
    bgColor: "bg-sky-600",
    numberPosition: "right-[85%] lg:right-[85%]",
    number: "۰۰۰۵",
  },
];

interface Process3Props {
  className?: string;
}

const Process3 = ({ className }: Process3Props) => {
  useGoogleFont("Antonio");
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("bg-background py-32", className)}
      style={
        {
          "--font-mono": "Antonio",
        } as React.CSSProperties
      }
    >
      <div className="container">
        <div className="flex justify-between gap-[10vw]">
          <h2 className="hidden pt-4 font-mono text-xl tracking-tighter lg:block">
            ۰ - ۵
          </h2>
          <div className="w-full max-w-xl px-2">
            <h1 className="text-start text-2xll font-semibold tracking-tighter md:text-8xl">
              فرآیند
            </h1>
            <p className="mt-6 max-w-md text-start text-lg text-foreground/50">
              رویکرد ساختاریافته ما برای تحویل نتایج برجسته در هر پروژه
            </p>
          </div>
          <h2 className="hidden pt-4 font-mono text-xl tracking-tighter md:block">
            ۰۰۲
          </h2>
        </div>
        <ul className="mt-20">
          {processSteps.map((step, index) => (
            <motion.li
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{
                type: "spring",
                stiffness: 100,
                damping: 20,
                delay: index * 0.1,
              }}
              key={step.id}
              className="relative flex h-14 w-full items-center md:h-22"
            >
              <div
                className={cn(
                  "absolute left-1/2 h-14 w-screen -translate-x-1/2 md:h-22",
                  step.bgColor,
                )}
              ></div>
              <div className="relative z-10 flex items-center gap-2">
                <ArrowDown className="md:size-12" />
                <h3 className="text-start text-3xl font-medium tracking-tight md:text-2xll">
                  {step.title}
                </h3>
              </div>
              <span
                className={cn(
                  "font-antonio absolute -bottom-1 text-2xll font-semibold tracking-tighter text-white md:-bottom-3 md:text-8xl",
                  step.numberPosition,
                )}
              >
                {step.number}
              </span>
            </motion.li>
          ))}
        </ul>
      </div>
    </section>
  );
};

export { Process3 };