import { useState } from "react"
import CountUp from "react-countup"
import ScrollTrigger from "react-scroll-trigger"


const Philosophy = () => {
    const [counterOn, setCounterOn] = useState(false);

  return (
    <div className="w-full">
        <ScrollTrigger onEnter={() => setCounterOn(true)} onExit={() => setCounterOn(false)}>
            <div className="flex-col text-[3.5vw] sm:text-[1.5vw] leading-none px-[3vw]">
                <p>We operate on a simple philosophy:</p>
                <p>Quality over quantity.</p>
                {counterOn && <div className="line mt-2 relative"></div>}                  
            </div>
        </ScrollTrigger>
        <div className="flex flex-col justify-between px-[3vw]">
            <div>
                <p className="mt-[4vw] sm:mt-[1vw] text-[7vw] sm:text-[4vw] leading-[7.5vw] sm:leading-[4.3vw] tracking-tight justify-center indent-[15vw] sm:indent-[8.3vw]" >We collaborate with five clients each year. This allows for intense focus on the trabsformation and 
                launch of you brand by our very best team, which is the only team we have.</p>
            </div>
        </div>
        <div className="flex flex-col justify-center items-center">
            <video src="https://www.rejouice.com/assets/videos/RJ-BALL-BLUE-ORANGE-scaled.webm" autoPlay loop muted className="h-[40vh] md:h-[100vh]"></video>
            <svg className="absolute tl:0 fit transform rotate:-90deg w-[60vw] sm:w-[35vw]" viewBox="0 0 100 100">
                <circle cx="50" cy="50" r="49" stroke="#fff" stroke-width="0.25" fill="none" className="o:0.3 $$2$$ $$3$$ $$4$$ (.in-view):tween:all,2.8s,easeOutSlow dasharray:308 dashoffset:616 (.in-view):dashoffset:492.8"></circle>
                <circle cx="50" cy="50" r="49" stroke="#fff" stroke-width="0.25" fill="none" className="$$5$$ $$6$$ $$7$$ (.in-view):tween:all,2.8s,easeOutSlow dasharray:308 dashoffset:308 (.in-view):dashoffset:184.79999999999998"></circle>
            </svg>
            <svg className="absolute tl:0 fit transform rotate:0 $$8$$ (.in-view):tween:all,2.8s,easeOutSlow (.in-view):rotate:144deg w-[60vw] sm:w-[35vw]" viewBox="0 0 100 100">
                <circle cx="50" cy="1" r="1" fill="#fff"></circle>
            </svg>
            <div className="absolute text-center text-white">
                <ScrollTrigger onEnter={() => setCounterOn(true)} onExit={() => setCounterOn(false)}>
                    <p className="text-[6vw] sm:text-[3.75vw]" >
                        {counterOn && <CountUp start={0} end={3} duration={3} delay={0}/>} 
                        seats</p> 
                </ScrollTrigger>
                <p className="text-[5vw] sm:text-[1.5vw]">available for 2024</p>
            </div>
            {/*gradient option*/}
            {/*<div className="gradient-bg px-10 w-[50vw] h-[50vw] rounded-full ">
                <div className="gradients-container">
                    <div className="gradient1"></div>
                    <div className="gradient2"></div>
                    <div className="gradient3"></div>
                    <div className="gradient4"></div>
                    <div className="gradient5"></div>
                </div>
            </div>
            <div className="absolute text-center">
                <h1 className="text-[4vw] leading-none text-white mt-20">3 seats</h1>
                <p className="text-[1.4vw] text-white">available for 2024</p>
            </div>*/}
        </div>
    </div>
  )
}

export default Philosophy