'use client';

import { Fragment } from 'react';
import Image from 'next/image';

import * as Divider from '@/components/ui/divider';
import { cn } from '@/utils/cn';

const logos = [
  {
    src: 'https://alignui.com/images/blocks/logo-app-store.svg',
    alt: 'App Store',
    active: true,
  },
  {
    src: 'https://alignui.com/images/blocks/logo-google-play.svg',
    alt: 'Google Play',
    active: false,
  },
  {
    src: 'https://alignui.com/images/blocks/logo-microsoft.svg',
    alt: 'Microsoft',
    active: false,
  },
];

const stats = [
  { value: '4.9/5', label: 'Sales and marketing strategies.' },
  { value: '75%', label: 'Targeted audience optimization.' },
  { value: '4.5x', label: 'Cross-channel campaigns.' },
];

export default function ProductAdoptionMetricsTestimonial() {
  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 gap-8 lg:flex-row lg:items-start lg:gap-24'>
          <div className='flex min-w-0 flex-col items-start gap-8 lg:flex-1 lg:gap-14'>
            <div className='flex items-center gap-5'>
              {logos.map((logo) => (
                <div
                  key={logo.alt}
                  className={cn(
                    'relative flex shrink-0 items-center justify-center rounded-full',
                    logo.active
                      ? 'size-[52px]'
                      : 'border-stroke-soft-200 border p-3',
                  )}
                >
                  {logo.active && (
                    <>
                      <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={logo.src}
                    alt={logo.alt}
                    width={24}
                    height={24}
                    className='relative size-6'
                  />
                </div>
              ))}
            </div>

            <p className='text-title-h5 lg:text-title-h3 text-text-strong-950 w-full font-[550]'>
              Tasks, teams, and timelines all came together, we didn&rsquo;t
              need a tutorial or training at all.
            </p>

            <div className='flex flex-col gap-1'>
              <span className='text-label-lg text-text-strong-950'>
                Matthew Johnson
              </span>
              <span className='text-label-md text-text-soft-400'>Founder</span>
            </div>
          </div>

          <div className='bg-stroke-soft-200 hidden w-px self-stretch lg:block' />

          <div className='flex w-full flex-col gap-6 lg:w-[320px] lg:shrink-0 lg:justify-between lg:gap-0 lg:self-stretch'>
            <Divider.Root className='lg:hidden' />
            {stats.map((stat, index) => (
              <Fragment key={stat.value}>
                {index > 0 && <Divider.Root />}
                <div className='flex flex-col gap-2'>
                  <span className='text-title-h5 text-text-strong-950 font-[550]'>
                    {stat.value}
                  </span>
                  <span className='text-paragraph-md text-text-sub-600'>
                    {stat.label}
                  </span>
                </div>
              </Fragment>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}