'use client';

import { Fragment } from 'react';
import { ArrowUpRight, TrendingUp } from 'lucide-react';
import Link from 'next/link';

import * as Badge from '@/components/ui/badge';
import * as Divider from '@/components/ui/divider';

const stats = [
  {
    value: '3M+',
    label: (
      <>
        Successful hires in <br className='hidden lg:block' />
        the last year.
      </>
    ),
    description:
      'Enabling companies to match talent with the right roles efficiently.',
  },
  {
    value: '95%',
    label: (
      <>
        Retention rate <br className='hidden lg:block' />
        improvement.
      </>
    ),
    description:
      'Enhanced onboarding processes help teams retain talent longer.',
  },
  {
    value: '200M+',
    label: (
      <>
        Companies using <br className='hidden lg:block' />
        our tools.
      </>
    ),
    description: 'Helping organizations of all sizes manage teams with ease.',
  },
  {
    value: '50K+',
    label: (
      <>
        Onboarding sessions <br className='hidden lg:block' />
        completed.
      </>
    ),
    description: 'Delivering seamless first-day experiences for new employees.',
  },
];

export default function WorkforcePerformanceStats() {
  return (
    <div className='bg-bg-white-0 w-full pt-10 pb-6 lg:py-24'>
      <div className='mx-auto w-full max-w-7xl px-6 lg:px-7'>
        <div className='flex flex-col items-start gap-6 lg:items-center lg:gap-10'>
          <div className='flex flex-col items-start gap-4 lg:items-center'>
            <div className='flex flex-col items-start gap-3 lg:items-center'>
              <Badge.Root
                variant='stroke'
                className='text-label-sm text-text-sub-600 bg-bg-weak-50 h-7 w-fit !gap-1.5 rounded-[9px] pr-[10px] pl-2 normal-case ring-transparent'
              >
                <Badge.Icon
                  as={TrendingUp}
                  className='text-primary-base mx-0 size-4'
                />
                Workforce performance data
              </Badge.Root>
              <h2 className='text-title-h4 lg:text-title-h2 text-text-strong-950 font-[550] lg:text-center'>
                Empowering teams to achieve more
              </h2>
            </div>
            <p className='text-paragraph-md text-text-sub-600 lg:max-w-[528px] lg:text-center'>
              Reduce repetitive admin work so your HR team can focus on building{' '}
              <span className='text-label-md text-text-sub-600'>
                stronger employee relationships.
              </span>
            </p>
          </div>

          <div className='flex w-full flex-col gap-6 lg:max-w-[808px] lg:gap-9'>
            {stats.map((stat) => (
              <Fragment key={stat.value}>
                <Divider.Root />
                <div className='flex flex-col gap-4 lg:flex-row lg:items-center lg:gap-10'>
                  <div className='flex flex-col gap-2 lg:contents'>
                    <span className='text-title-h4 lg:text-title-h2 text-text-strong-950 w-[164px] font-[550] lg:shrink-0'>
                      {stat.value}
                    </span>
                    <div className='bg-stroke-soft-200 hidden lg:block lg:w-px lg:self-stretch' />
                    <span className='text-label-sm text-text-soft-400 lg:flex-1'>
                      {stat.label}
                    </span>
                  </div>
                  <span className='text-label-md text-text-sub-600 lg:w-[288px] lg:shrink-0'>
                    {stat.description}
                  </span>
                </div>
              </Fragment>
            ))}

            <div className='bg-bg-weak-25 flex flex-col items-start gap-2 rounded-[10px] px-4 py-2.5 lg:flex-row lg:items-center'>
              <span className='text-label-sm text-text-sub-600 lg:flex-1'>
                Streamline hiring and onboarding today
              </span>
              <Link
                href='/'
                className='group text-text-sub-600 hover:text-text-strong-950 flex items-center gap-[5px] transition-colors'
              >
                <span className='text-label-sm'>Explore the full demo</span>
                <ArrowUpRight className='size-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5' />
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}