import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import imgSlide1 from "../assets/slide-1.webp"
import imgSlide2 from "../assets/slide-2.webp"
import imgSlide3 from "../assets/slide-3.webp"
import imgSlide4 from "../assets/slide-4.webp"
import imgSlide5 from "../assets/slide-5.webp"
import imgSlide6 from "../assets/slide-6.jpg"

const Shop = () => {
    const shopSlide = {
        dots: false,
        arrows: false,
        infinite: false,
        speed: 500,
        slidesToShow: 3.5,
        slidesToScroll: 3.5,
        initialSlide: 0,
        responsive: [
            {
                breakpoint: 1250,
                settings: {
                    slidesToShow: 2.5,
                    slidesToScroll: 2.5,
                    infinite: false,
                    dots: false
                }
            },
            {
                breakpoint: 670,
                settings: {
                    slidesToShow: 1.5,
                    slidesToScroll: 1.5
                }
            },
            {
                breakpoint: 560,
                settings: {
                    slidesToShow: 1.25,
                    slidesToScroll: 1.25
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1.15,
                    slidesToScroll: 1.15
                }
            }
        ]
    };

  return (
    <div className="w-full h-full flex flex-col pt-14 overflow-hidden bg-[#FAF3E8]">
        <div className="flex flex-col md:grid md:grid-cols-2 mb-10 px-5 sm:px-10">
            <div className="w-[100vw] flex-col md:flex md:flex-row justify-between">
              <p className="w-[90vw] sm:w-[80vw] md:w-[65vw] text-[12vw] sm:text-[5vw] md:text-[4.5vw] leading-[12.5vw] sm:leading-[5.5vw] md:leading-[5vw] tracking-tighter text-[#C20019]">Everyone’s kit is different, and we’ve got a kit for everyone. </p>
              <div className="flex flex-col justify-start items-start md:items-end w-[90vw] md:w-[35vw] pr-20 mt-5 md:mt-0">
                <button className="uppercase px-10 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white hover:bg-transparent hover:text-[#C20019] duration-300">shop all</button>
              </div>
            </div>
        </div>
        <div className="pl-5 sm:pl-10 w-full h-screen">
            <Slider {...shopSlide}>
                <div className="relative overflow-hidden">
                    <div className="transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer text-white">
                        <p className="w-full h-[90vh] flex justify-end pt-10 pr-10 absolute text-xl md:text-2xl capitalize">Thank you kit <span className="text-xs"> 01</span></p>
                        <img src={imgSlide1} alt="" className="w-[100vw] h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1"/>
                    </div>
                    <div className="absolute inset-0 -z-[1] px-1">
                        <div className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1 bg-[#C20019]">
                            <p className="w-[100%] h-[100%] flex justify-between items-center px-5 md:px-10 text-white capitalize tracking-tighter">
                                <span className="text-[3.5vw] sm:text-[3vw] md:text-[2vw]">thank you kit</span>
                                <span>01</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div className="relative overflow-hidden">
                    <div className="transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer text-white">
                        <p className="w-full flex justify-end pt-10 pr-10 absolute text-xl md:text-2xl capitalize">Best sellers <span className="text-xs"> 23</span></p>
                        <img src={imgSlide2} alt="" className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1"/>
                    </div>
                    <div className="absolute inset-0 -z-[1] px-1">
                        <div className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1 bg-[#C20019]">
                            <p className="w-[100%] h-[100%] flex justify-between items-center px-10 text-white capitalize tracking-tighter">
                                <span className="text-[3.5vw] sm:text-[3vw] md:text-[2vw]">Best sellers</span>
                                <span>23</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div className="relative overflow-hidden">
                    <div className="transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer text-white">
                        <p className="w-full flex justify-end pt-10 pr-10 absolute text-xl md:text-2xl capitalize">unwind<span className="text-xs"> 05</span></p>
                        <img src={imgSlide3} alt="" className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1"/>
                    </div>
                    <div className="absolute inset-0 -z-[1] px-1">
                        <div className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1 bg-[#C20019]">
                            <p className="w-[100%] h-[100%] flex justify-between items-center px-10 text-white capitalize tracking-tighter">
                                <span className="text-[3.5vw] sm:text-[3vw] md:text-[2vw]">unwind</span>
                                <span>05</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div className="relative overflow-hidden">
                    <div className="transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer text-white">
                        <p className="w-full flex justify-end pt-10 pr-10 absolute text-xl md:text-2xl capitalize">treat<span className="text-xs"> 07</span></p>
                        <img src={imgSlide4} alt="" className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1"/>
                    </div>
                    <div className="absolute inset-0 -z-[1] px-1">
                        <div className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1 bg-[#C20019]">
                            <p className="w-[100%] h-[100%] flex justify-between items-center px-10 text-white capitalize tracking-tighter">
                                <span className="text-[3.5vw] sm:text-[3vw] md:text-[2vw]">treat</span>
                                <span>07</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div className="relative overflow-hidden">
                    <div className="transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer text-white">
                        <p className="w-full flex justify-end pt-10 pr-10 absolute text-xl md:text-2xl capitalize">Body <span className="text-xs"> 09</span></p>
                        <img src={imgSlide5} alt="" className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1"/>
                    </div>
                    <div className="absolute inset-0 -z-[1] px-1">
                        <div className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1 bg-[#C20019]">
                            <p className="w-[100%] h-[100%] flex justify-between items-center px-10 text-white capitalize tracking-tighter">
                                <span className="text-[3.5vw] sm:text-[3vw] md:text-[2vw]">Body</span>
                                <span>09</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div className="relative overflow-hidden">
                    <div className="transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer text-white">
                        <p className="w-full flex justify-end pt-10 pr-10 absolute text-xl md:text-2xl capitalize">face <span className="text-xs"> 10</span></p>
                        <img src={imgSlide6} alt="" className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1"/>
                    </div>
                    <div className="absolute inset-0 -z-[1] px-1">
                        <div className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1 bg-[#C20019]">
                            <p className="w-[100%] h-[100%] flex justify-between items-center px-10 text-white capitalize tracking-tighter">
                                <span className="text-[3.5vw] sm:text-[3vw] md:text-[2vw]">face</span>
                                <span>10</span>
                            </p>
                        </div>
                    </div>
                </div>
            </Slider>
        </div>
    </div>
  )
}

export default Shop