import Image from "next/image";
import Link from "next/link";
import between from "../../../public/images/between.jpg";
import w1 from "@img/w1.jpg";
import w2 from "@img/w2.jpg";
import w3 from "@img/w3.jpg";
import PersianNumber from "plugins/PersianNumber";

const BetweenSexualSection = () => {
  return (
    <section>
      <div className="mt-10  xs:px-5 lg:px-20">
        <div className="grid xs:grid-cols-1 lg:grid-cols-3 rtl ">
          <div className="relative z-10 overflow-hidden  rounded-3xl">
            <div className="w-full">
              <Image
                src={between}
                className="object-cover "
                alt="بهداشت جنسی آقایان و بانوان"
              />
            </div>
          </div>

          <div className="bg-gray-100 relative xs:left-[0px] lg:left-[30px] xs:top-[-35px] lg:top-0 col-span-2 z-0 rounded-3xl  xs:pr-5 lg:pr-[55px] xs:pt-[55px] lg:pt-0 pl-5 xs:pb-4">
            {/* <div className="xs:block lg:flex">
              <h2 className="font-bold xs:text-2xl lg:text-3xl">
                لوازم بهداشتی وسمه
              </h2>

              <p className="px-3 py-1 mb-0 rounded-full w-fit bg-sky-200 xs:mr-0 lg:mr-2 xs:mt-2 lg:mt-0 xs:text-sm lg:text-base ">
                به صرفه زیبا شـــــــــــــو
              </p>
            </div> */}

            <div className="grid xs:grid-cols-1 lg:grid-cols-3 gap-5 mt-5 ">
              <div className="bg-white p-1 rounded-3xl">
                <Link
                  href={
                    "/categories/fac3ee2d-19dd-4229-a412-28a1d09cc948/شامپو-بدن"
                  }
                >
                  <div>
                    <Image src={w1} className=" rounded-3xl" />
                  </div>

                  <div className="text-center p-4">
                    <p className="mb-0 text-base font-bold">
                      شامپو بدن بانوان{" "}
                    </p>

                    <div className="flex justify-center mt-2">
                      <p className="mb-0 bg-primary-500 rounded-3xl px-2 text-sm text-white">
                        تصمین بهترین قیمت
                      </p>
                    </div>
                  </div>
                </Link>
              </div>
              <div className="bg-white p-1 rounded-3xl">
                <Link
                  href={
                    "/categories/f3e79ed0-d608-470d-8656-7a98ff933c1e/نرم-کننده-مو"
                  }
                >
                  <div>
                    <Image src={w2} className=" rounded-3xl" />
                  </div>

                  <div className="text-center p-4">
                    <p className="mb-0 text-base font-bold">نرم کننده مو </p>

                    <div className="flex justify-center mt-2">
                      <p className="mb-0 bg-primary-500 rounded-3xl px-2 text-sm text-white">
                        تصمین بهترین قیمت
                      </p>
                    </div>
                  </div>
                </Link>
              </div>
              <div className="bg-white p-1 rounded-3xl">
                <Link
                  href={
                    "/categories/8bf20569-c3e3-457f-b9ad-140ef449741b/ژل-بهداشتی-بانوان-و-آقایان"
                  }
                >
                  <div>
                    <Image src={w3} className=" rounded-3xl" />
                  </div>

                  <div className="text-center p-3 pb-4">
                    <p className="mb-0 text-base font-bold">
                      ژل بهداشتی بانوان و آقایان{" "}
                    </p>

                    <div className="flex justify-center mt-2">
                      <p className="mb-0 bg-primary-500 rounded-3xl px-2 text-sm text-white">
                        تصمین بهترین قیمت
                      </p>
                    </div>
                  </div>
                </Link>
              </div>
            </div>

            {/* <p className="mt-3 mb-0 text-sm text-gray-500">
              لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
              استفاده از طراحان گرافیک است
            </p> */}
          </div>
        </div>
      </div>
    </section>
  );
};

export default BetweenSexualSection;