import {motion} from "framer-motion"
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import { PiArrowElbowRightDown } from "react-icons/pi";


const Contact = () => {
  const slideAuto = {
    dots: false,
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1
  };

  const slider = {
    initial:{x: 0,},
    animate:{x: "-100%",  transition:{ease: "linear", repeat: Infinity, duration: 50},},
  };
  
  return (
    <div className="w-full">
      <div className="px-14">
        <div className="flex text-[8vw] leading-none">
            <p className="tracking-tighter">Get in touch.</p>
        </div>
        <div className="border-[#555555] border-t-2 mt-2"></div>
      </div>
      
      <div className="-mt-[3vw]">
        <Slider {...slideAuto}>
          <div>
            <motion.div className="flex items-end" variants={slider} initial="initial" animate="animate">
            <div className="">
              <img src="https://images.prismic.io/rejouice/57ac2830-96e7-4174-a104-b384126bf98c_fec955552eb681ff6c273774515e6c2e.jpg?auto=compress%2Cformat&fm=webp&width=2048" alt="" className="px-2 "/>
            </div>
            <div className="">
              <img src="https://images.prismic.io/rejouice/a19d8427-5008-4dce-afa4-5d66118a0463_d7a851a9d8e2eb36cf93ffe4a6fa3701.jpeg?auto=compress%2Cformat&fm=webp&width=2048" alt="" className="px-2 "/>
            </div>
            <div className="relative overflow-hidden">
              <img src="https://images.prismic.io/rejouice/36450525-8a76-4a44-b6d4-59c00ad0b50d_RJ-Home-OuraRing-x2.png?auto=compress%2Cformat&fm=webp&width=2048" alt="" className="px-2 "/>
            </div>
            <div className="relative overflow-hidden">
              <img src="https://images.prismic.io/rejouice/d3289122-3f25-43f3-b140-11a342a484d7_Mask+group+%2838%29.jpg?auto=compress%2Cformat&fm=webp&width=2048" alt="" className="px-2 "/>
            </div>
            <div className="relative overflow-hidden">
              <img src="https://images.prismic.io/rejouice/8059f4af-8ba3-4e5f-a14b-ba5ed760963f_Mask+group+%2839%29.jpg?auto=compress%2Cformat&fm=webp&width=2048" alt="" className="px-2 "/>
            </div>
            </motion.div>
          </div>
          <div>
            <motion.div className="flex items-end" variants={slider} initial="initial" animate="animate">
              <div className="">
                <img src="https://images.prismic.io/rejouice/57ac2830-96e7-4174-a104-b384126bf98c_fec955552eb681ff6c273774515e6c2e.jpg?auto=compress%2Cformat&fm=webp&width=2048" alt="" className="px-2 "/>
              </div>
              <div className="">
                <img src="https://images.prismic.io/rejouice/a19d8427-5008-4dce-afa4-5d66118a0463_d7a851a9d8e2eb36cf93ffe4a6fa3701.jpeg?auto=compress%2Cformat&fm=webp&width=2048" alt="" className="px-2 "/>
              </div>
              <div className="relative overflow-hidden">
                <img src="https://images.prismic.io/rejouice/36450525-8a76-4a44-b6d4-59c00ad0b50d_RJ-Home-OuraRing-x2.png?auto=compress%2Cformat&fm=webp&width=2048" alt="" className="px-2 "/>
              </div>
              <div className="relative overflow-hidden">
                <img src="https://images.prismic.io/rejouice/d3289122-3f25-43f3-b140-11a342a484d7_Mask+group+%2838%29.jpg?auto=compress%2Cformat&fm=webp&width=2048" alt="" className="px-2 "/>
              </div>
              <div className="relative overflow-hidden">
                <img src="https://images.prismic.io/rejouice/8059f4af-8ba3-4e5f-a14b-ba5ed760963f_Mask+group+%2839%29.jpg?auto=compress%2Cformat&fm=webp&width=2048" alt="" className="px-2 "/>
              </div>
            </motion.div>
            </div>
        </Slider>
      </div>

      <div className="flex flex-col justify-center items-center m-[15vw]">
        <p className="flex gap-4 items-center text-[1.1vw] mb-5">We’re uniquely built <PiArrowElbowRightDown/></p>
        <a href="" className="btn-about text-[4vw] leading-none tracking-tight">About us</a>
      </div>
    </div>
  )
}

export default Contact