import { GoDotFill } from "react-icons/go";
import { motion, useAnimation } from "framer-motion"
import {Power4} from "gsap/all"


const FeaturedProjects = () => {
    const featureTop = [useAnimation(), useAnimation()]
    const handleHoverStart = (index) => {
        featureTop[index].start({y: "0"})
    }
    const handleHoverEnd = (index) => {
        featureTop[index].start({y: "100%"})
    }

    const featurebottom = [useAnimation(), useAnimation()]
    const handleHoverTextStart = (index) => {
        featurebottom[index].start({y: "0"})
    }
    const handleHoverTextEnd = (index) => {
        featurebottom[index].start({y: "100%"})
    }


  return (
    <div data-scroll data-scroll-speed="-0.1" className="w-full pt-20 pb-20 bg-[#f1f1f1] rounded-t-3xl">
        <div className="px-16">
            <h1 className="pt-10 text-7xl text-[#212121] tracking-tight">Feature projects</h1>
        </div>

        <div className="border-t-[1px] border-[#b1b1b1] mt-16"></div>

        <div className="px-16">
            <div className="w-full flex gap-5 mt-20">
                <div className="flex-col w-1/2">
                    <p className="flex items-center gap-2 mb-5 uppercase text-xl"><GoDotFill className="text-2xl"/>fyde</p>
                    <motion.div onHoverStart={() => handleHoverStart(0)} onHoverEnd={() => handleHoverEnd(0)} className=" h-[80vh] relative">
                        <h1 className="feature-text overflow-hidden absolute flex z-10 text-[10rem] uppercase font-bold text-[#CDEA68] tracking-tight right-0 translate-x-1/2 -translate-y-1/2 top-1/2">
                            {"fyde".split('').map((item, index) => <motion.span initial={{y: "100%"}} animate={featureTop[0]} transition={{ease: Power4.ease, delay: index*0.05}} key={item} className="inline-block">{item}</motion.span>)}
                        </h1>
                        <div className="w-full h-full rounded-xl overflow-hidden">
                            <img src={"https://ochi.design/wp-content/uploads/2023/10/Fyde_Illustration_Crypto_2-663x551.png"} alt="" className="w-full h-full"/>
                        </div>
                    </motion.div>
                    <div className="flex gap-2 mt-5 items-center text-center">
                        <span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">audit</span>
                        <span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">copywriting</span>
                        <span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">sales desk</span>
                        <span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">slides design</span>
                    </div>
                </div>
                
                <div className="flex-col w-1/2">
                    <p className="flex items-center gap-2 mb-5 uppercase text-xl"><GoDotFill className="text-2xl"/>vise</p>
                    <motion.div onHoverStart={() => handleHoverStart(1)} onHoverEnd={() => handleHoverEnd(1)} className="h-[80vh] relative">
                        <h1 className="feature-text absolute flex overflow-hidden z-10 text-[10rem] uppercase font-bold text-[#CDEA68] tracking-tight right-full translate-x-1/2 -translate-y-1/2 top-1/2">
                            {"vise".split('').map((item, index) => <motion.span initial={{y: "100%"}} animate={featureTop[1]} transition={{ease: Power4.ease, delay: index*0.05}} key={item} className="inline-block">{item}</motion.span>)}
                        </h1>
                        <div className="w-full h-full rounded-xl overflow-hidden">
                            <img src={"https://ochi.design/wp-content/uploads/2022/09/Vise_front2-663x551.jpg"} alt="" className="w-full h-full"/>
                        </div>
                    </motion.div>
                    <div className="flex gap-2 mt-5 items-center text-center">
                        <span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">agency</span>
                        <span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">company presentations</span>
                     </div>   
                </div>
                    
            </div>
        </div>

        <div className="px-16">
            <div className="w-full flex gap-5 mt-20">
                <div className="flex-col w-1/2">
                    <p className="flex items-center gap-2 mb-5 uppercase text-xl"><GoDotFill className="text-2xl"/>trawa</p>
                    <motion.div onHoverStart={() => handleHoverTextStart(0)} onHoverEnd={() => handleHoverTextEnd(0)} className=" h-[80vh] relative">
                        <h1 className="feature-text overflow-hidden absolute flex z-10 text-[10rem] uppercase font-bold text-[#CDEA68] tracking-tight right-0 translate-x-1/2 -translate-y-1/2 top-1/2">
                            {"trawa".split('').map((item, index) => <motion.span initial={{y: "100%"}} animate={featurebottom[0]} transition={{ease: Power4.ease, delay: index*0.05}} key={item} className="inline-block">{item}</motion.span>)}
                        </h1>
                        <div className="w-full h-full rounded-xl overflow-hidden">
                            <img src={"https://ochi.design/wp-content/uploads/2023/08/Frame-3875-663x551.jpg"} alt="" className="w-full h-full"/>
                        </div>
                    </motion.div>
                    <div className="flex gap-2 mt-16 items-center text-center">
                        <span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">brand identity</span>
                        <span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">design research</span>
                        <span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">investor desk</span>
                    </div>
                </div>
                
                <div className="flex-col w-1/2">
                    <p className="flex items-center gap-2 mb-5 uppercase text-xl"><GoDotFill className="text-2xl"/>Premium Blend</p>
                    <motion.div onHoverStart={() => handleHoverTextStart(1)} onHoverEnd={() => handleHoverTextEnd(1)} className="h-[80vh] relative">
                        <h1 className="feature-text absolute flex overflow-hidden z-10 text-[10rem] uppercase font-bold text-[#CDEA68] tracking-tight right-full translate-x-1/2 -translate-y-1/2 top-1/2">
                            {"Premium Blend".split('').map((item, index) => <motion.span initial={{y: "100%"}} animate={featurebottom[1]} transition={{ease: Power4.ease, delay: index*0.01}} key={item} className="inline-block">{item}</motion.span>)}
                        </h1>
                        <div className="w-full h-full rounded-xl overflow-hidden">
                            <img src={"https://ochi.design/wp-content/uploads/2022/12/PB-Front-4-663x551.png"} alt="" className="w-full h-full"/>
                        </div>
                    </motion.div>
                    <div className="flex gap-2 mt-16 items-center text-center">
                        <span className="border border-[#212121] px-4 py-1 text-xl uppercase tracking-tight rounded-full">brand template</span>
                    </div>  
                </div>    
            </div>
        </div>

        
        <div className="flex justify-center items-center text-center px-16 mt-40">
            <button className="btn flex justify-center items-center gap-8">
                <p className="text-[19px] uppercase">view all case studies</p>
                <span className="w-3 h-3 bg-white rounded-full"></span>
            </button>
        </div>

        {/*===== review section =====*/}
        <div className="about-text">
            <div className="px-16">
                <h1 className="pt-10 text-7xl text-[#212121] tracking-tight">Clients’ reviews</h1>
            </div>

            <div className="border-t-[1px] border-[#b1b1b1] mt-16 "></div>

            <div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
                <div className="grid grid-cols-2">
                <p className="">Karman Ventures </p>
                <div className="">
                    <p className="mb-20">Services:</p>
                    <button className="btn-review uppercase mb-3 ">investor desk </button> <br />
                    <button className="btn-review uppercase mb-3">sales desk </button>
                </div>
                </div>
                <div className="flex justify-between">
                <div>
                    <p className="mb-20">William Barnes</p>
                    <img src={"https://ochi.design/wp-content/uploads/2023/02/William-Barnes-1-300x300.png"} alt="" className="w-[130px] rounded-xl"/>
                    <p className="mt-10 w-2/3">They were transparent about the time and the stages of the project. The end product is high quality, 
                    and I feel confident about how they were handholding the client through the process. 
                    I feel like I can introduce them to someone who needs to put a sales deck together from scratch, and they would be able to handhold the client experience 
                    from 0 to 100 very effectively from story to design. 5/5</p>
                </div>
                <p className="text-xl text-gray-400 uppercase">read</p>
                </div>
            </div>

            <div className="border-t-[1px] border-[#b1b1b1] mt-16 "></div>

            <div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
                <div>
                <p>Planetly</p>
                </div>
                <div className="flex justify-between">
                <p>Nina Walloch</p>
                <p className="uppercase">read</p>
                </div>
            </div>
            <div className="border-t-[1px] border-[#b1b1b1] mt-5 "></div>

            <div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
                <div>
                <p>Workiz Easy </p>
                </div>
                <div className="flex justify-between">
                <p>Tomer Levy</p>
                <p className="uppercase">read</p>
                </div>
            </div>
            <div className="border-t-[1px] border-[#b1b1b1] mt-5 "></div>

            <div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
                <div>
                <p>Premium Blend </p>
                </div>
                <div className="flex justify-between">
                <p>Ellen Kim</p>
                <p className="uppercase">read</p>
                </div>
            </div>
            <div className="border-t-[1px] border-[#b1b1b1] mt-5 "></div>

            <div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
                <div>
                <p>Hypercare Systems </p>
                </div>
                <div className="flex justify-between">
                <p>Brendan Goss</p>
                <p className="uppercase">read</p>
                </div>
            </div>
            <div className="border-t-[1px] border-[#b1b1b1] mt-5 "></div>

            <div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
                <div>
                <p>Officevibe </p>
                </div>
                <div className="flex justify-between">
                <p>Raff Labrie</p>
                <p className="uppercase">read</p>
                </div>
            </div>
            <div className="border-t-[1px] border-[#b1b1b1] mt-5 "></div>

            <div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
                <div>
                <p>Orderlion </p>
                </div>
                <div className="flex justify-between">
                <p>Stefan Strohmer</p>
                <p className="uppercase">read</p>
                </div>
            </div>
            <div className="border-t-[1px] border-[#b1b1b1] mt-5 "></div>

            <div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
                <div>
                <p>Black Book </p>
                </div>
                <div className="flex justify-between">
                <p>Jaci Smith</p>
                <p className="uppercase">read</p>
                </div>
            </div>
            <div className="border-t-[1px] border-[#b1b1b1] mt-5 "></div>

            <div className="px-16 mt-5 grid grid-cols-2 gap-3 text-xl">
                <div>
                <p>Trawa Energy </p>
                </div>
                <div className="flex justify-between">
                <p>David Budde</p>
                <p className="uppercase">read</p>
                </div>
            </div>
            <div className="border-t-[1px] border-[#b1b1b1] mt-5 "></div>
        </div>

        {/*===== cardHero section =====*/}
        <div className="grid grid-cols-2 gap-5 px-16 pt-40 pb-40 bg-[#f1f1f1]">
            <div className="w-full h-[55vh] bg-[#004D43] rounded-xl flex justify-center items-center relative">
                <svg width="150" height="80" viewBox="0 0 72 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9.8393 10.2032C4.22951 10.3257 -0.0459221 14.7356 0.000372391 20.2752C0.0412204 25.3548 4.57808 30.3608 10.6862 29.9226C15.5145 29.5768 19.9015 25.4119 19.8525 20.0057C19.8035 14.5995 15.1904 10.0916 9.8393 10.2032ZM9.89649 25.7005C6.87101 25.7005 4.39834 23.1144 4.40924 19.9839C4.39525 19.2507 4.52792 18.522 4.79947 17.8407C5.07102 17.1594 5.47597 16.5392 5.99056 16.0164C6.50515 15.4937 7.11902 15.0789 7.79613 14.7966C8.47324 14.5142 9.19995 14.3698 9.93362 14.372C10.6673 14.3742 11.3931 14.5228 12.0686 14.8092C12.744 15.0956 13.3554 15.514 13.8668 16.0398C14.3783 16.5656 14.7796 17.1882 15.0471 17.8711C15.3146 18.554 15.4429 19.2834 15.4246 20.0166C15.4409 23.1008 12.9111 25.7059 9.88832 25.7005H9.89649Z" fill="#CDEA68"></path>
                    <path d="M62.8086 29.4855H67.1222V10.6372H62.8086V29.4855Z" fill="#CDEA68"></path>
                    <path d="M67.6816 0.172852V6.13439H71.5322C71.6738 6.13439 71.8046 6.13439 72.0006 6.11534V0.172852H67.6816Z" fill="#CDEA68"></path>
                    <path d="M31.5648 25.7016C28.5393 25.7016 26.0667 23.1156 26.0776 19.9851C26.0936 18.5291 26.6764 17.1366 27.7023 16.1029C28.7282 15.0692 30.1166 14.4757 31.573 14.4482C32.4198 14.4541 33.2537 14.6557 34.0095 15.0373C34.7654 15.4188 35.4227 15.97 35.9301 16.6477L40.0667 15.0144C38.2884 12.0853 35.0669 10.1145 31.4995 10.1989C25.8897 10.3214 21.6142 14.7313 21.6605 20.2709C21.7014 25.3505 26.2382 30.3565 32.3464 29.9183C33.9908 29.7803 35.5761 29.2408 36.9631 28.347C38.3501 27.4532 39.4963 26.2326 40.3009 24.7924L36.2542 22.9931C35.7705 23.8086 35.0851 24.486 34.2638 24.9604C33.4426 25.4347 32.5132 25.69 31.5648 25.7016Z" fill="#CDEA68"></path>
                    <path d="M52.4097 10.1387C51.2512 10.1119 50.1066 10.3947 49.0941 10.958C48.0816 11.5212 47.2379 12.3445 46.6501 13.3427V0.172852H42.293V29.4688H46.6501C46.6501 29.1721 46.6501 18.7816 46.6501 18.7816C46.6501 15.6946 47.8619 13.4352 50.8084 13.4352C54.6046 13.4352 54.6209 17.4178 54.6209 19.6962C54.6209 22.9165 54.6209 25.5189 54.6209 28.7393V29.4987H59.0271C59.0271 29.3708 59.0488 29.2728 59.0488 29.1721C59.0488 25.5108 59.0951 21.8522 59.0325 18.1909C58.9916 15.6538 58.5015 10.1387 52.4097 10.1387Z" fill="#CDEA68"></path>
                </svg>
                <button className="absolute left-10 bottom-10 py-1 px-4 border border-[#CDEA68] rounded-full text-[#CDEA68] text-xl">&copy;2019-2022</button>
            </div>
            <div className="grid grid-cols-2 gap-5">
                <div className="w-full h-[55vh] bg-[#212121] rounded-xl flex justify-center items-center relative">
                    <img src={"https://ochi.design/wp-content/uploads/2022/04/logo002.svg"} alt="" />
                    <button className="btn-1 absolute left-10 bottom-10 py-1 px-4 border border-[#f1f1f1] rounded-full text-[#f1f1f1] text-xl uppercase">rating 5.0 0n clutch</button>
                </div>
                <div className="w-full h-[55vh] bg-[#212121] rounded-xl flex justify-center items-center relative">
                    <img src={"https://ochi.design/wp-content/uploads/2022/04/logo003.png"} alt="" className="w-[100px] h-[100px]"/>
                    <button className="btn-1 absolute left-10 bottom-10 py-1 px-4 border border-[#f1f1f1] rounded-full text-[#f1f1f1] text-xl uppercase tracking-tighter">business bootcamp alumni</button>
                </div>
            </div>
        </div>

    </div>
  )
}

export default FeaturedProjects