'use client';

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

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

const categories = [
  {
    name: 'Product',
    description: 'Build tools that empower teams.',
    jobs: ['Product Designer', 'UI/UX Designer', 'Product Manager'],
  },
  {
    name: 'Engineering',
    description: 'Develop systems that scale globally.',
    jobs: ['React Engineer', 'Front-end Developer', 'Back-end Developer'],
  },
];

export default function ProductEngineeringCareersList() {
  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 lg:px-7'>
        <div className='mx-auto flex w-full max-w-[1016px] flex-col items-start gap-8 lg:items-center lg:gap-12'>
          <div className='flex w-full flex-col items-start gap-4 lg:items-center'>
            <div className='flex w-full flex-col items-start gap-3 lg:items-center'>
              <Badge.Root
                variant='lighter'
                className='bg-bg-weak-50 text-text-sub-600 text-label-sm h-7 w-fit rounded-[9px] px-2.5 normal-case'
              >
                Join our finance team
              </Badge.Root>
              <h2 className='text-title-h4 lg:text-title-h3 text-text-strong-950 w-full font-[550] lg:text-center'>
                Join us in shaping tomorrow&rsquo;s work
              </h2>
            </div>
            <p className='text-paragraph-md text-text-sub-600 w-full lg:text-center'>
              Create solutions that empower people and businesses worldwide.
            </p>
          </div>

          <div className='flex w-full flex-col gap-6 lg:gap-8'>
            {categories.map((category, categoryIndex) => {
              const isLast = categoryIndex === categories.length - 1;

              return (
                <Fragment key={category.name}>
                  <Divider.Root />
                  <div className='flex flex-col gap-6 lg:flex-row lg:gap-8'>
                    <div className='flex w-[288px] shrink-0 flex-col gap-1'>
                      <h3 className='text-label-md text-text-strong-950'>
                        {category.name}
                      </h3>
                      <p className='text-paragraph-sm text-text-sub-600 w-[242px]'>
                        {category.description}
                      </p>
                    </div>

                    <div className='flex w-full min-w-0 flex-col gap-5 lg:flex-1 lg:gap-6'>
                      {category.jobs.map((job, jobIndex) => (
                        <Fragment key={job}>
                          {jobIndex > 0 ? <Divider.Root /> : null}
                          <div className='relative flex flex-col gap-3 lg:h-8 lg:flex-row lg:items-center lg:gap-16'>
                            <span className='text-label-md text-text-strong-950 lg:flex-1'>
                              {job}
                            </span>
                            <div className='flex items-center gap-2'>
                              <div className='flex items-center gap-2'>
                                <Globe2 className='text-text-soft-400 size-[18px] shrink-0' />
                                <span className='text-label-sm text-text-sub-600 whitespace-nowrap'>
                                  United States
                                </span>
                              </div>
                              <span className='text-label-sm text-text-disabled-300'>
                                ・
                              </span>
                              <div className='flex items-center gap-2'>
                                <Clock3 className='text-text-soft-400 size-[18px] shrink-0' />
                                <span className='text-label-sm text-text-sub-600 whitespace-nowrap'>
                                  Remote
                                </span>
                              </div>
                            </div>
                            <Link
                              href='/'
                              aria-label={`View ${job} position`}
                              className='bg-bg-white-0 border-stroke-soft-200 shadow-regular-xs group absolute top-0 right-0 flex shrink-0 items-center justify-center rounded-[9px] border px-2.5 py-1 lg:static'
                            >
                              <ArrowUpRight className='text-text-soft-400 size-5 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5' />
                            </Link>
                          </div>
                        </Fragment>
                      ))}

                      {isLast ? (
                        <>
                          <Divider.Root />
                          <div className='bg-bg-weak-50 flex flex-col items-center gap-4 rounded-[16px] px-6 py-5 lg:flex-row lg:gap-3 lg:rounded-[12px] lg:px-4 lg:py-3'>
                            <Boxes
                              className='text-primary-base size-[18px] shrink-0'
                              aria-hidden='true'
                            />
                            <div className='flex flex-col items-center gap-2 lg:contents'>
                              <p className='text-paragraph-sm text-text-sub-600 text-center lg:flex-1 lg:text-left'>
                                Looking for more opportunities to grow?
                              </p>
                              <Link
                                href='/'
                                className='text-label-sm text-text-sub-600 group flex shrink-0 items-center gap-[5px]'
                              >
                                Explore all positions
                                <ArrowUpRight className='text-text-soft-400 size-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5' />
                              </Link>
                            </div>
                          </div>
                        </>
                      ) : null}
                    </div>
                  </div>
                </Fragment>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}