'use client';

import Image from 'next/image';

export default function FinanceOpsAvatarTestimonial() {
  return (
    <div className='bg-bg-white-0 w-full py-10 lg:py-24'>
      <div className='mx-auto w-full max-w-7xl px-6 md:px-7'>
        <div className='flex flex-col items-start gap-8 lg:items-center lg:gap-14'>
          <div className='flex items-center gap-5 lg:gap-6'>
            <div className='border-stroke-soft-200 flex items-center rounded-full border-2 p-2 mix-blend-luminosity lg:p-3'>
              <Image
                src='https://alignui.com/images/blocks/testimonials-person-7.jpg'
                alt='Wei Chen'
                width={56}
                height={56}
                className='size-12 rounded-full object-cover lg:size-14'
              />
            </div>

            <div className='relative flex size-[68px] shrink-0 items-center justify-center rounded-full lg:size-[84px]'>
              <div
                className='absolute inset-0 animate-spin rounded-full'
                style={{
                  animationDuration: '4s',
                  background:
                    'conic-gradient(from 0deg, transparent, var(--color-primary-base))',
                }}
              />
              <div className='bg-bg-white-0 absolute inset-0.5 rounded-full' />
              <Image
                src='https://alignui.com/images/blocks/testimonials-person-4.jpg'
                alt='Matthew Johnson'
                width={56}
                height={56}
                className='relative size-12 rounded-full object-cover lg:size-14'
              />
            </div>

            <div className='border-stroke-soft-200 flex items-center rounded-full border-2 p-2 mix-blend-luminosity lg:p-3'>
              <Image
                src='https://alignui.com/images/blocks/testimonials-person-3.jpg'
                alt='Sophia Williams'
                width={56}
                height={56}
                className='size-12 rounded-full object-cover lg:size-14'
              />
            </div>
          </div>

          <h2 className='text-title-h5 lg:text-title-h4 text-text-strong-950 w-full font-[550] lg:max-w-[690px] lg:text-center'>
            Smart controls, simple interface. It&rsquo;s the only tool our
            finance ops actually enjoy using
          </h2>

          <div className='flex flex-col items-start gap-1 lg:items-center'>
            <span className='text-label-md text-text-strong-950'>
              Matthew Johnson
            </span>
            <span className='text-label-sm text-text-sub-600'>Founder</span>
          </div>
        </div>
      </div>
    </div>
  );
}