'use client';
import { useEffect, useRef } from 'react';
import { animateSectionStagger } from '@/animations/common';
import HighlightIcon from '@/components/ui/highlight-icon'

const EmpoweringBrands = () => {
   const containerRef = useRef<HTMLDivElement | null>(null);
  
    useEffect(() => {
      if (containerRef.current) {
        animateSectionStagger(containerRef.current);
      }
  
    }, []);
  return (
    <div ref={containerRef} className="flex flex-col bg-soft-blue md:py-32 py-22 gap-12 m-auto text-center">
    <p className="font-bold">Empowering Brands Through Influence</p>
    <h4 className='md:w-7/12 m-auto text-primary font-bold md:leading-18 leading-21'>
        We connect brands with 
        <HighlightIcon
        src="/influencers.svg"
        alt="Influencers"
        bgColor="#ABCCE6"
        />
        influencers,
        enabling easy,
        <HighlightIcon
        src="/social-media.svg"
        alt="Social Media"
        bgColor="#F0ED86"
        />
        one-time registration and
        impactful marketing
        <HighlightIcon
        src="/dashboard.svg"
        alt="Dashboard"
        bgColor="#95EA9A"
    />
        campaigns.
    </h4>
    </div>
  )
}

export default EmpoweringBrands