import { useState } from "react";
import { PiArrowElbowRightDown} from "react-icons/pi";
import ScrollTrigger from "react-scroll-trigger"

const About = () => {
    const [counterOn, setCounterOn] = useState(false);
    
  return (
    <div className="px-[3vw] mt-[10vw] sm:mt-[5vw]">
        <ScrollTrigger onEnter={() => setCounterOn(true)} onExit={() => setCounterOn(false)}>
            <div className="flex-col text-[3.5vw] sm:text-[1.5vw] leading-none">
                <p>Full service digital agency.</p>
                <div className="flex justify-between">
                    <p>Two engagement models.</p>
                    <p>Paris / San Diego</p>
                </div>
                {counterOn && <div className="line mt-2 relative"></div>}
            </div>
        </ScrollTrigger>
        <div className="flex flex-col justify-between">
            <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 are a digital brand accelerator. Our mission is to tarnsform founders’ visions into remarkable brands. Choose traditional compensation or and equity
                off set through our Venture Model-your vision, your decision.</p>
            </div>
            <div className="mt-[40vw] sm:mt-[20vw] mb-[24vw] sm:mb-[12vw]">
                <div className="flex gap-2 items-center justify-center mb-[5vw] sm:mb-[2vw]">
                    <p className="text-[3.5vw] sm:text-[1vw]">Agency & Venture </p>
                    <span className="py-[0.6vw] sm:py-[0.2vw] px-[1.6vw] sm:px-[0.6vw] bg-[#0E0E0E] text-[2vw] sm:text-[0.6vw] text-white rounded-full mr-[0.4vw]">Models</span>
                    <PiArrowElbowRightDown className="text-[3vw]  sm:text-[1vw]"/>
                </div>
                <a href="" className="flex justify-center text-center text-[12vw] sm:text-[4vw] leading-none tracking-tight">
                    <span className="btn-about mb-[1vw]">Explore our services</span></a>
                <a href="" className="flex justify-center text-center text-[12vw] sm:text-[4vw] leading-none tracking-tight">
                    <span className="btn-about">and engagement models</span></a>
            </div>
        </div>
    </div>
  )
}

export default About