import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Product1 from "../assets/product1.webp"
import VProduct1 from "../assets/VProduct1.mp4"

const Products = () => {
    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: 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]">What’s in your kit? </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="w-full flex flex-col justify-center items-center text-center hover:bg-[#FBF8F4] hover:rounded-3xl">
                    <div className="relative overflow-hidden z-50">
                        <div className="transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer">
                            <img src={Product1} alt="" className="w-[100vw] h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-1"/>
                        </div>
                        <div className="absolute inset-0 -z-[1] px-1">
                            <div className="bg-[#FBF8F4] rounded-3xl">
                                <button className="w-full h-full flex justify-center items-end py-10 absolute capitalize">
                                    <span className="w-[100%] mx-10 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white">add to cart</span>
                                </button>
                                <video src={VProduct1} loop muted autoPlay className="w-full h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-3 py-3"></video>
                            </div>
                        </div>      
                    </div>
                    <p className="mt-5 uppercase text-sm">skinkind face oil</p>
                    <p className="uppercase text-sm text-[#B9B8B7]">30ML / 1.01FL. OZ</p>
                    <p className="mb-5 uppercase text-sm">$42</p>
                </div>
                <div className="w-full flex flex-col justify-center items-center text-center hover:bg-[#FBF8F4] hover:rounded-3xl">
                    <div className="relative overflow-hidden z-50">
                        <div className="transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer">
                            <img src="https://kitskinkind.com.au/cdn/shop/files/F_A.C.E_Serum_front_SHOP.jpg" alt="" className="w-[100vw] h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-1"/>
                        </div>
                        <div className="absolute inset-0 -z-[1] px-1">
                            <div className="bg-[#FBF8F4] rounded-3xl">
                                <button className="w-full h-full flex justify-center items-end py-10 absolute capitalize">
                                    <span className="w-[100%] mx-10 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white">add to cart</span>
                                </button>
                                <video src="https://cdn.shopify.com/videos/c/vp/70c0e1ac978a4c5ebc458cba53d85d8e/70c0e1ac978a4c5ebc458cba53d85d8e.HD-1080p-7.2Mbps.mp4" loop muted autoPlay className="w-full h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-3 py-3"></video>
                            </div>
                        </div>      
                    </div>
                    <p className="mt-5 uppercase text-sm">(F)A.C.E serum</p>
                    <p className="uppercase text-sm text-[#B9B8B7]">30ML / 1.01FL. OZ</p>
                    <p className="mb-5 uppercase text-sm">$40</p>
                </div>
                <div className="w-full flex flex-col justify-center items-center text-center hover:bg-[#FBF8F4] hover:rounded-3xl">
                    <div className="relative overflow-hidden z-50">
                        <div className="transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer">
                            <img src="https://kitskinkind.com.au/cdn/shop/files/body_Brush_SHOP.jpg" alt="" className="w-[100vw] h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-1"/>
                        </div>
                        <div className="absolute inset-0 -z-[1] px-1">
                            <div className="bg-[#FBF8F4] rounded-3xl">
                                <button className="w-full h-full flex justify-center items-end py-10 absolute capitalize">
                                    <span className="w-[100%] mx-10 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white">add to cart</span>
                                </button>
                                <video src="https://kitskinkind.com.au/cdn/shop/files/body_Brush_2_HOVER.jpg" loop muted autoPlay className="w-full h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-3 py-3"></video>
                            </div>
                        </div>      
                    </div>
                    <p className="mt-5 uppercase text-sm mb-6">all body dry brush</p>
                    <p className="mb-5 uppercase text-sm">$26</p>
                </div>
                <div className="w-full flex flex-col justify-center items-center text-center hover:bg-[#FBF8F4] hover:rounded-3xl">
                    <div className="relative overflow-hidden z-50">
                        <div className="transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer">
                            <img src="https://kitskinkind.com.au/cdn/shop/files/Body_Nutrition_Lotion_Front_SHOP.jpg" alt="" className="w-[100vw] h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-1"/>
                        </div>
                        <div className="absolute inset-0 -z-[1] px-1">
                            <div className="bg-[#FBF8F4] rounded-3xl">
                                <button className="w-full h-full flex justify-center items-end py-10 absolute capitalize">
                                    <span className="w-[100%] mx-10 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white">add to cart</span>
                                </button>
                                <video src="https://cdn.shopify.com/videos/c/vp/b96fb62905ce4e5db802c596ae49f407/b96fb62905ce4e5db802c596ae49f407.HD-1080p-7.2Mbps.mp4" loop muted autoPlay className="w-full h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-3 py-3"></video>
                            </div>
                        </div>      
                    </div>
                    <p className="mt-5 uppercase text-sm">Body Nutrition Lotion</p>
                    <p className="uppercase text-sm text-[#B9B8B7]">145ML / 4.9 FL. OZ</p>
                    <p className="mb-5 uppercase text-sm">$36</p>
                </div>
                <div className="w-full flex flex-col justify-center items-center text-center hover:bg-[#FBF8F4] hover:rounded-3xl">
                    <div className="relative overflow-hidden z-50">
                        <div className="transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer">
                            <img src="https://kitskinkind.com.au/cdn/shop/files/GOOD_NIGHT_BALM_THUMB_6ccbc9aa-4e3a-4c63-ae3a-6cc53861962b.jpg" alt="" className="w-[100vw] h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-1"/>
                        </div>
                        <div className="absolute inset-0 -z-[1] px-1">
                            <div className="bg-[#FBF8F4] rounded-3xl">
                                <button className="w-full h-full flex justify-center items-end py-10 absolute capitalize">
                                    <span className="w-[100%] mx-10 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white">add to cart</span>
                                </button>
                                <video src="https://cdn.shopify.com/videos/c/vp/b5d7a85e63ea43449bfcf0862929b19a/b5d7a85e63ea43449bfcf0862929b19a.HD-1080p-7.2Mbps-22274279.mp4" loop muted autoPlay className="w-full h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-3 py-3"></video>
                            </div>
                        </div>      
                    </div>
                    <p className="mt-5 uppercase text-sm mb-6">Good night balm</p>
                    <p className="mb-5 uppercase text-sm">$48</p>
                </div>
                <div className="w-full flex flex-col justify-center items-center text-center hover:bg-[#FBF8F4] hover:rounded-3xl">
                    <div className="relative overflow-hidden z-50">
                        <div className="transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer">
                            <img src="https://kitskinkind.com.au/cdn/shop/files/Gua_Sha_SHOP.jpg" alt="" className="w-[100vw] h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-1"/>
                        </div>
                        <div className="absolute inset-0 -z-[1] px-1">
                            <div className="bg-[#FBF8F4] rounded-3xl">
                                <button className="w-full h-full flex justify-center items-end py-10 absolute capitalize">
                                    <span className="w-[100%] mx-10 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white">add to cart</span>
                                </button>
                                <video src="https://cdn.shopify.com/videos/c/vp/6b5e74042cda467ebed00ca1db370501/6b5e74042cda467ebed00ca1db370501.HD-1080p-7.2Mbps-25489853.mp4" loop muted autoPlay className="w-full h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-3 py-3"></video>
                            </div>
                        </div>      
                    </div>
                    <p className="mt-5 uppercase text-sm mb-6">gua sha facial tool</p>
                    <p className="mb-5 uppercase text-sm">$35</p>
                </div>
            </Slider>
        </div>
    </div>
  )
}

export default Products