'use client';
import { useEffect, useRef } from 'react';
import { animateCardsWave, animateSectionStagger } from '@/animations/common';
import { CustomButton } from "./ThemeButtons";
import Steps from "@/components/ui/steps";
import Link from "next/link";


const HowItWorks = () => {
  const containerRef = useRef<HTMLDivElement | null>(null);
  const cardsContainerRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (containerRef.current) {
      animateSectionStagger(containerRef.current);
    }

    if (cardsContainerRef.current) {
      animateCardsWave(cardsContainerRef.current); // animate only cards
    }
  }, []);

  return (
    <div ref={containerRef} className="flex flex-col bg-[linear-gradient(180deg,#C3D7DE_0%,#DDD4E6_100%)] md:pt-24 pt-12 pb-32 m-auto text-center">
    <p className="font-bold pb-10">How it Works</p>
    <h4 className='md:w-8/12 m-auto font-bold leading-18'>
        Get your account 
        {/* <CustomButton className="text-2xl font-acid capitalize inline-flex mx-3" size={'lg'} variant="darkshadow">Registered</CustomButton> */}
        <CustomButton className="text-2xl font-acid capitalize inline-flex mx-3" size={'lg'} asChild variant="darkshadow">
          <Link href="https://massvo.digitzcloud.com/auth/signup">Registered</Link>
        </CustomButton>
        <br/>in just 3 simple steps.
    </h4>
    <div ref={cardsContainerRef} className="py-16 flex flex-col md:flex-row gap-14 justify-center">
        <Steps 
        src="/signup.png"
        alt="Sign Up"
        title="Sign Up"
        titleColor="#4060A3"
        description="Create your account and verify."
        />
         <Steps 
        src="/complete-your-profile.png"
        alt="Complete Your Profile"
        title="Complete Your Profile"
        titleColor="#F26E2D"
        description="Add details and social links."
        />
         <Steps 
        src="/join-campaign.png"
        alt="Join Campaigns"
        title="Join Campaigns"
        titleColor="#F04A49"
        description="Apply, submit content, and get paid."
        />
    </div>
     {/* <CustomButton className="w-[170px] m-auto" variant="darkshadow">Registered Now</CustomButton> */}
     <CustomButton asChild className="w-[170px] m-auto" variant="darkshadow">
          <Link href="https://massvo.digitzcloud.com/auth/signup">Registered now</Link>
     </CustomButton>
    </div>
  )
}

export default HowItWorks