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

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


  return (
    <div className="w-full px-[3vw] mb-[30vw] sm:mb-[12vw] mt-[5vw]">
      <ScrollTrigger onEnter={() => setCounterOn(true)} onExit={() => setCounterOn(false)}>
        <div className="flex-col text-[3.5vw] sm:text-[1.5vw] leading-none">
            <p>Strategy & emotion.</p>
            <p>You need both.</p>
            {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]" >Data matters, yet it’s the emotion that drives buying decisions. We don’t 
                believe in ’one size fits all. Instead, we collabolate closely with founders to craft unique brand experiences that deeply resonate with their audiences and boots their KPIs.</p>
            </div>
        </div>
    </div>
  )
}

export default Strategy