'use client';

import Image from 'next/image';

import * as StatusBadge from '@/components/ui/status-badge';
const stepsData = [
  {
    id: 'step1',
    image: 'https://alignui.com/images/blocks/how-it-works-2-image-1.svg',
    alt: 'how it works 2 image 1',
    title: 'Start with your team',
    description: 'Add people, set roles and launch your HR setup fast.',
  },
  {
    id: 'step2',
    image: 'https://alignui.com/images/blocks/how-it-works-2-image-2.svg',
    alt: 'how it works 2 image 2',
    title: 'Streamline daily work',
    description: 'Automate time-off and feedback to simplify daily tasks.',
  },
  {
    id: 'step3',
    image: 'https://alignui.com/images/blocks/how-it-works-2-image-3.svg',
    alt: 'how it works 2 image 3',
    title: 'Lead with confidence',
    description: 'Track key team insights to guide better decisions.',
  },
];

export default function HrTeamSetupSteps() {
  return (
    <div className='bg-bg-white-0 w-full py-10 lg:py-16'>
      <div className='mx-auto flex max-w-7xl flex-col gap-6 px-6 lg:gap-12 lg:px-7'>
        <div className='flex flex-col gap-8 lg:gap-12'>
          <div className='flex flex-col'>
            <StatusBadge.Root
              variant='light'
              className='text-label-sm text-text-sub-600 shadow-custom-input-2 bg-bg-white-0 mb-3 h-7 w-fit rounded-[9px] pr-2.5 pl-1.75 normal-case has-[>.dot]:gap-1 lg:mx-auto'
            >
              <StatusBadge.Dot className='text-primary-base mx-0 size-4 before:size-1.5' />
              How it works?
            </StatusBadge.Root>
            <h2 className='text-title-h4 lg:text-title-h3 xl:text-title-h2 text-text-strong-950 mb-4 !font-[550] lg:text-center'>
              Simplify time, feedback scheduling
            </h2>
            <p className='text-paragraph-md text-text-sub-600 lg:text-center'>
              Build efficient workflows, reduce manual work, and give your team{' '}
              <span className='text-label-md text-text-sub-600 lg:flex lg:justify-center'>
                more time to focus on culture and growth.
              </span>
            </p>
          </div>
        </div>
        <div className='bg-bg-white-0 border-stroke-soft-200 shadow-regular-xs flex flex-col rounded-[40px] border lg:flex-row'>
          {stepsData.map((step, index) => {
            const isLast = index === stepsData.length - 1;
            return (
              <div
                key={step.id}
                className={`flex flex-col items-center p-8 lg:p-8 xl:p-10 ${!isLast ? 'border-b lg:border-r lg:border-b-0' : ''} border-stroke-soft-200 h-auto`}
              >
                <Image
                  src={step.image}
                  alt={step.alt}
                  width={48}
                  height={48}
                  className='mb-5 size-12 lg:mb-6 lg:size-14 xl:size-16'
                />
                <h6 className='text-title-h6 lg:text-label-lg 2xl:text-title-h6 text-text-strong-950 mb-1 text-center !font-[550]'>
                  {step.title}
                </h6>
                <p className='text-label-md lg:text-paragraph-sm xl:text-label-md text-text-soft-400 text-center'>
                  {step.description}
                </p>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}