"use client";

import { AnimatePresence, motion } from "framer-motion";
import React, { useState } from "react";

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

interface Process4Props {
  className?: string;
}

const Process4 = ({ className }: Process4Props) => {
  const process = [
    {
      title: "انتخاب پلن",
      description:
        "پلن متناسب با نیاز و بودجه خود را انتخاب کنید تا مسیر همکاری و زمان‌بندی پروژه از همان ابتدا مشخص شود.",
      image: "/block-media/shadcnblocks/block/guri4/img14.png",
    },
    {
      title: "ثبت درخواست",
      description:
        "جزئیات پروژه را برای ما ارسال کنید تا تیم ما بررسی کند و در کوتاه‌ترین زمان برای هماهنگی با شما تماس بگیرد.",
      image: "/block-media/shadcnblocks/block/guri4/img10.png",
    },
    {
      title: "تحویل پروژه",
      description:
        "پروژه آماده را در موعد توافق‌شده تحویل بگیرید و از کیفیت کار و پشتیبانی پس از تحویل اطمینان حاصل کنید.",
      image: "/block-media/shadcnblocks/block/guri4/img11.png",
    },
  ];

  const [active, setActive] = useState<number | null>(0);

  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="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">
            <h1 className="text-start text-2xll font-semibold tracking-tight lg:text-2xll">
              فرآیند
              <sup className="align-top font-mono text-lg tracking-tight text-foreground/40">
                ۰۰۰۳
              </sup>
            </h1>
            <p className="text-start text-base text-foreground/50">
              سه مرحله ساده از انتخاب تا تحویل  همکاری با ما سریع، شفاف و
              بدون پیچیدگی است.
            </p>
          </div>
          <ul className="relative col-span-4 w-full space-y-10">
            {process.map((step, index) => (
              <li
                onMouseEnter={() => setActive(index)}
                key={index}
                className={cn(
                  "relative flex w-full max-w-xl cursor-pointer flex-col justify-between gap-10 rounded-3xl bg-background p-10 md:flex-row lg:items-center ltr:ml-auto ltr:mr-20 rtl:mr-auto rtl:ml-20",
                  index === active ? "bg-background" : "lg:bg-transparent",
                )}
              >
                <AnimatePresence mode="wait">
                  {index === active && (
                    <motion.img
                      key={step.image}
                      initial={{ opacity: 0, y: -10 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: -10 }}
                      transition={{ duration: 0.3 }}
                      src={step.image}
                      alt={step.title}
                      className="absolute top-0 size-30 -translate-y-1/2 rounded-2xl object-cover ltr:right-0 ltr:translate-x-1/4 lg:size-40 ltr:lg:translate-x-1/2 rtl:left-0 rtl:-translate-x-1/4 rtl:lg:-translate-x-1/2"
                    />
                  )}
                </AnimatePresence>
                <div>
                  <h2 className="mb-4 text-start font-bold tracking-tight lg:text-3xl">
                    مرحله {(index + 1).toLocaleString("fa-IR")}
                  </h2>
                  <h3 className="mb-4 text-start text-xl font-semibold tracking-tighter lg:text-xl">
                    {step.title}
                  </h3>
                  <p className="line-clamp-2 text-start text-foreground/50">
                    {step.description}
                  </p>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
};

export { Process4 };