import Image from "next/image";
import PersianNumber from "plugins/PersianNumber";
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import p1 from "../../../public/images/product/1.png";
import p2 from "../../../public/images/product/2.png";
import p3 from "../../../public/images/product/3.png";
import p4 from "../../../public/images/product/4.png";
import khane from "../../../public/images/khane.jpg";

const HomeSection = () => {
  return (
    <section className="xs:mb-0 lg:mb-20">
      <div className=" xs:px-5 lg:px-20 mt-10">
        <div className="grid xs:grid-cols-1 lg:grid-cols-3 rtl ">
          <div className="rounded-3xl overflow-hidden relative z-10">
            <div className="w-full">
              <Image src={khane} className="object-cover" />
            </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-3 xl:pt-10 pl-5 xs:pb-10 lg:pb-0">
            <div className="xs:block lg:flex">
              <h2 className="xs:text-2xl lg:text-xl xl:text-3xl font-bold">
                لوازم بهداشتی منزل وسمه
              </h2>

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

            <Swiper
              spaceBetween={50}
              slidesPerView={6.2}
              onSlideChange={() => console.log("slide change")}
              onSwiper={(swiper) => console.log(swiper)}
              className="rtl relative mt-4"
              breakpoints={{
                320: {
                  slidesPerView: 1.6,
                },
                480: {
                  slidesPerView: 2,
                },
                768: {
                  slidesPerView: 3,
                },
                1024: {
                  slidesPerView: 3.2,
                },
                1440: {
                  slidesPerView: 4,
                },
              }}
            >
              <SwiperSlide>
                <>
                  <div
                    className={` tr03 py-2  overflow-hidden   ${
                      1 == 1 ? "bg-white  rounded-xl" : " opacity-70"
                    }`}
                    // key={index}
                    // onClick={() => handleRoutineShiftPlanWithDay(index)}
                  >
                    <div className="absolute mr-2 ">
                      <div className="w-fit  rounded-full bg-red-900 overflow-hidden px-1 ">
                        <p className="mb-0 text-[10px] text-white  ">
                          <PersianNumber number={35} style="text-sm" />
                          <small className="text-[10px] ml-1">%</small>
                        </p>
                      </div>
                    </div>{" "}
                    <div className="w-full h-fit  ">
                      <Image
                        src={p2}
                        className="xs:w-[100px] lg:w-[130px] mx-auto"
                      />
                    </div>
                  </div>
                </>

                <div className="bg-white rounded-full flex ltr p-1 mt-2">
                  <div className="flex">
                    <div className="w-[35px] h-[35px] bg-gray-100 overflow-hidden rounded-full  ">
                      <div>
                        <svg
                          width="20"
                          height="20"
                          viewBox="0 0 176 176"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                          className="mx-auto mt-[6px]"
                        >
                          <path
                            d="M163 100.475H100.5V162.975C100.5 166.29 99.183 169.47 96.8388 171.814C94.4946 174.158 91.3152 175.475 88 175.475C84.6848 175.475 81.5054 174.158 79.1612 171.814C76.817 169.47 75.5 166.29 75.5 162.975V100.475H13C9.68479 100.475 6.50537 99.1581 4.16117 96.8139C1.81696 94.4697 0.5 91.2903 0.5 87.9751C0.5 84.6599 1.81696 81.4805 4.16117 79.1363C6.50537 76.7921 9.68479 75.4751 13 75.4751H75.5V12.9751C75.5 9.65989 76.817 6.48046 79.1612 4.13626C81.5054 1.79205 84.6848 0.475098 88 0.475098C91.3152 0.475098 94.4946 1.79205 96.8388 4.13626C99.183 6.48046 100.5 9.65989 100.5 12.9751V75.4751H163C166.315 75.4751 169.495 76.7921 171.839 79.1363C174.183 81.4805 175.5 84.6599 175.5 87.9751C175.5 91.2903 174.183 94.4697 171.839 96.8139C169.495 99.1581 166.315 100.475 163 100.475Z"
                            fill="black"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>

                  <div className="w-full  text-right rounded-full pr-2">
                    {2 == 2 ? (
                      <>
                        <p className="mb-0 font-bold text-sm absolute right-3 opacity-30 mt-[-5px] text-red-600">
                          <del>
                            <PersianNumber number={150000} style="text-[9px]" />
                          </del>
                        </p>
                        <div className="flex rtl mt-[8px]">
                          {" "}
                          <p className="mb-0 font-bold">
                            <PersianNumber number={150000} />
                          </p>
                          <small className="mr-1 mt-[3px]">تومان</small>
                        </div>
                      </>
                    ) : (
                      <div className="flex rtl mt-[3px]">
                        {" "}
                        <p className="mb-0 font-bold text-lg">
                          <PersianNumber number={150000} />
                        </p>
                        <small className="mr-1 mt-[6px]">تومان</small>
                      </div>
                    )}
                  </div>
                </div>
              </SwiperSlide>
              <SwiperSlide>
                <>
                  <div
                    className={` tr03 py-2  overflow-hidden   ${
                      1 == 1 ? "bg-white  rounded-xl" : " opacity-70"
                    }`}
                    // key={index}
                    // onClick={() => handleRoutineShiftPlanWithDay(index)}
                  >
                    <div className="absolute mr-2 ">
                      <div className="w-fit  rounded-full bg-red-900 overflow-hidden px-1 ">
                        <p className="mb-0 text-[10px] text-white  ">
                          <PersianNumber number={35} style="text-sm" />
                          <small className="text-[10px] ml-1">%</small>
                        </p>
                      </div>
                    </div>{" "}
                    <div className="w-full h-fit  ">
                      <Image
                        src={p3}
                        className="xs:w-[100px] lg:w-[130px] mx-auto"
                      />
                    </div>
                  </div>
                </>

                <div className="bg-white rounded-full flex ltr p-1 mt-2">
                  <div className="flex">
                    <div className="w-[35px] h-[35px] bg-gray-100 overflow-hidden rounded-full  ">
                      <div>
                        <svg
                          width="20"
                          height="20"
                          viewBox="0 0 176 176"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                          className="mx-auto mt-[6px]"
                        >
                          <path
                            d="M163 100.475H100.5V162.975C100.5 166.29 99.183 169.47 96.8388 171.814C94.4946 174.158 91.3152 175.475 88 175.475C84.6848 175.475 81.5054 174.158 79.1612 171.814C76.817 169.47 75.5 166.29 75.5 162.975V100.475H13C9.68479 100.475 6.50537 99.1581 4.16117 96.8139C1.81696 94.4697 0.5 91.2903 0.5 87.9751C0.5 84.6599 1.81696 81.4805 4.16117 79.1363C6.50537 76.7921 9.68479 75.4751 13 75.4751H75.5V12.9751C75.5 9.65989 76.817 6.48046 79.1612 4.13626C81.5054 1.79205 84.6848 0.475098 88 0.475098C91.3152 0.475098 94.4946 1.79205 96.8388 4.13626C99.183 6.48046 100.5 9.65989 100.5 12.9751V75.4751H163C166.315 75.4751 169.495 76.7921 171.839 79.1363C174.183 81.4805 175.5 84.6599 175.5 87.9751C175.5 91.2903 174.183 94.4697 171.839 96.8139C169.495 99.1581 166.315 100.475 163 100.475Z"
                            fill="black"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>

                  <div className="w-full  text-right rounded-full pr-2">
                    {2 == 2 ? (
                      <>
                        <p className="mb-0 font-bold text-sm absolute right-3 opacity-30 mt-[-5px] text-red-600">
                          <del>
                            <PersianNumber number={150000} style="text-[9px]" />
                          </del>
                        </p>
                        <div className="flex rtl mt-[8px]">
                          {" "}
                          <p className="mb-0 font-bold">
                            <PersianNumber number={150000} />
                          </p>
                          <small className="mr-1 mt-[3px]">تومان</small>
                        </div>
                      </>
                    ) : (
                      <div className="flex rtl mt-[3px]">
                        {" "}
                        <p className="mb-0 font-bold text-lg">
                          <PersianNumber number={150000} />
                        </p>
                        <small className="mr-1 mt-[6px]">تومان</small>
                      </div>
                    )}
                  </div>
                </div>
              </SwiperSlide>
              <SwiperSlide>
                <>
                  <div
                    className={` tr03 py-2  overflow-hidden   ${
                      1 == 1 ? "bg-white  rounded-xl" : " opacity-70"
                    }`}
                    // key={index}
                    // onClick={() => handleRoutineShiftPlanWithDay(index)}
                  >
                    <div className="absolute mr-2 ">
                      <div className="w-fit  rounded-full bg-red-900 overflow-hidden px-1 ">
                        <p className="mb-0 text-[10px] text-white  ">
                          <PersianNumber number={35} style="text-sm" />
                          <small className="text-[10px] ml-1">%</small>
                        </p>
                      </div>
                    </div>{" "}
                    <div className="w-full h-fit  ">
                      <Image
                        src={p1}
                        className="xs:w-[100px] lg:w-[130px] mx-auto"
                      />
                    </div>
                  </div>
                </>

                <div className="bg-white rounded-full flex ltr p-1 mt-2">
                  <div className="flex">
                    <div className="w-[35px] h-[35px] bg-gray-100 overflow-hidden rounded-full  ">
                      <div>
                        <svg
                          width="20"
                          height="20"
                          viewBox="0 0 176 176"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                          className="mx-auto mt-[6px]"
                        >
                          <path
                            d="M163 100.475H100.5V162.975C100.5 166.29 99.183 169.47 96.8388 171.814C94.4946 174.158 91.3152 175.475 88 175.475C84.6848 175.475 81.5054 174.158 79.1612 171.814C76.817 169.47 75.5 166.29 75.5 162.975V100.475H13C9.68479 100.475 6.50537 99.1581 4.16117 96.8139C1.81696 94.4697 0.5 91.2903 0.5 87.9751C0.5 84.6599 1.81696 81.4805 4.16117 79.1363C6.50537 76.7921 9.68479 75.4751 13 75.4751H75.5V12.9751C75.5 9.65989 76.817 6.48046 79.1612 4.13626C81.5054 1.79205 84.6848 0.475098 88 0.475098C91.3152 0.475098 94.4946 1.79205 96.8388 4.13626C99.183 6.48046 100.5 9.65989 100.5 12.9751V75.4751H163C166.315 75.4751 169.495 76.7921 171.839 79.1363C174.183 81.4805 175.5 84.6599 175.5 87.9751C175.5 91.2903 174.183 94.4697 171.839 96.8139C169.495 99.1581 166.315 100.475 163 100.475Z"
                            fill="black"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>

                  <div className="w-full  text-right rounded-full pr-2">
                    {2 == 2 ? (
                      <>
                        <p className="mb-0 font-bold text-sm absolute right-3 opacity-30 mt-[-5px] text-red-600">
                          <del>
                            <PersianNumber number={150000} style="text-[9px]" />
                          </del>
                        </p>
                        <div className="flex rtl mt-[8px]">
                          {" "}
                          <p className="mb-0 font-bold">
                            <PersianNumber number={150000} />
                          </p>
                          <small className="mr-1 mt-[3px]">تومان</small>
                        </div>
                      </>
                    ) : (
                      <div className="flex rtl mt-[3px]">
                        {" "}
                        <p className="mb-0 font-bold text-lg">
                          <PersianNumber number={150000} />
                        </p>
                        <small className="mr-1 mt-[6px]">تومان</small>
                      </div>
                    )}
                  </div>
                </div>
              </SwiperSlide>
            </Swiper>
          </div>
        </div>
      </div>
    </section>
  );
};

export default HomeSection;
