import Image from "next/image";
import PersianNumber from "@plug/PersianNumber";
import React from "react";
import vec1 from "@img/Vector1.png";

const BetweenRoad = () => {
  return (
    <section className="xs:my-10 lg:mt-20">
      <div className="xs:px-3 md:px-10 md:container md:mx-auto mb-10">
        <div>
          <div className="bg-white w-full  xs:h-auto lg:h-[200px] rounded-2xl relative z-10">
            <div className="relative ">
              <div className="absolute ">
                <Image src={vec1} alt="" className=" mx-auto opacity-90" />
              </div>
            </div>

            <div className=" p-5 flex justify-end ">
              <div className="flex flex-col justify-center items-center mt-5 absolute  ">
                <div className="w-5 h-20 rounded-full bg-primary-900" />
              </div>

              <div className="mx-4 text-right ">
                <div className="p-4 mt-2">
                  <p className="mb-0 text-gray-900  font-extralight text-sm ">
                    چرا حامیان عدالت
                  </p>
                  <h2 className="font-extrabold xs:text-3xl lg:text-3xl text-gray-900   mt-2">
                    گروه وکلای حامیان عدالت
                  </h2>
                </div>
              </div>
            </div>
            <div className="grid xs:grid-cold-1 md:grid-cols-4 px-10 py-5 gap-4  ">
              <div className="bg-primary-600 p-5 rounded-2xl">
                {" "}
                <p className="mb-0 text-white font-bold text-lg rtl">
                  <PersianNumber number={1} style="text-xl ml-2" />
                  مشاوره اولیه
                  <small className="bg-secondary-900 w-fit rounded-2xl text-sm font-normal p-1 text-black mr-2 ">
                    <PersianNumber number={5290} style="ml-1" />
                    پرونده
                  </small>
                </p>
              </div>
              <div className="bg-primary-600 p-5 rounded-2xl">
                {" "}
                <p className="mb-0 text-white font-bold text-lg rtl">
                  <PersianNumber number={2} style="text-xl ml-2" />
                  بررسی و برنامه‌ریزی{" "}
                  <small className="bg-secondary-900 w-fit rounded-2xl text-sm font-normal p-1 text-black mr-2 ">
                    <PersianNumber number={1200} style="ml-1" />
                    پرونده
                  </small>
                </p>
              </div>
              <div className="bg-primary-600 p-5 rounded-2xl">
                {" "}
                <p className="mb-0 text-white font-bold text-lg rtl">
                  <PersianNumber number={3} style="text-xl ml-2" />
                  ادامه پروسه حقوقی{" "}
                  <small className="bg-secondary-900 w-fit rounded-2xl text-sm font-normal p-1 text-black mr-2 ">
                    <PersianNumber number={1020} style="ml-1" />
                    پرونده
                  </small>
                </p>
              </div>{" "}
              <div className="bg-primary-600 p-5 rounded-2xl">
                {" "}
                <p className="mb-0 text-white font-bold text-lg rtl">
                  <PersianNumber number={4} style="text-xl ml-2" />
                  پایان پرونده{" "}
                  <small className="bg-secondary-900 w-fit rounded-2xl text-sm font-normal p-1 text-black mr-2 ">
                    <PersianNumber number={800} style="ml-1" />
                    پرونده
                  </small>
                </p>
              </div>{" "}
            </div>
          </div>

          <div className="relative">
            <div className="absolute w-full mt-[-210px]">
              <div className="bg-gray-300 h-[200px] p-10 rounded-2xl rotate-3 opacity-40"></div>
            </div>
          </div>

          <div className="relative">
            <div className="absolute w-full mt-[-210px]">
              <div className="bg-gray-400 xs:h-auto lg:h-[200px] p-10 rounded-2xl rotate-2  opacity-15"></div>
            </div>
          </div>

          <div className="relative">
            <div className="absolute w-full mt-[-210px]">
              <div className="bg-gray-500 xs:h-auto lg:h-[200px] p-10 rounded-2xl rotate-1 opacity-15"></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default BetweenRoad;
