'use client';

import { ArrowUpRight, CircleDollarSign, Clock3 } from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';

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

const avatars = [
  {
    src: 'https://alignui.com/images/blocks/hero-3-avatar-1.png',
    alt: 'Team member 1',
    bg: 'bg-[#ebebeb]',
  },
  {
    src: 'https://alignui.com/images/blocks/hero-3-avatar-2.png',
    alt: 'Team member 2',
    bg: 'bg-[#ffecc0]',
  },
  {
    src: 'https://alignui.com/images/blocks/hero-3-avatar-3.png',
    alt: 'Team member 3',
    bg: 'bg-[#c0d5ff]',
  },
  {
    src: 'https://alignui.com/images/blocks/hero-3-avatar-4.png',
    alt: 'Team member 4',
    bg: 'bg-[#c0eaff]',
  },
  {
    src: 'https://alignui.com/images/blocks/hero-3-avatar-5.png',
    alt: 'Team member 5',
    bg: 'bg-[#cac0ff]',
  },
  {
    src: 'https://alignui.com/images/blocks/hero-3-avatar-6.png',
    alt: 'Team member 6',
    bg: 'bg-[#ffc0c5]',
  },
];

const jobs = [
  {
    id: 'product-manager',
    title: 'Product Manager',
    description: 'Build reliable platforms that power modern business.',
    location: 'United States',
    type: 'Full-time',
    salary: '$100 - $120',
  },
  {
    id: 'ui-ux-designer',
    title: 'UI/UX Designer',
    description: 'Develop tools that help teams work smarter.',
    location: 'United States',
    type: 'Full-time',
    salary: '$100 - $120',
  },
  {
    id: 'software-engineer',
    title: 'Software Engineer',
    description: 'Create solutions that scale with global needs.',
    location: 'United States',
    type: 'Full-time',
    salary: '$100 - $120',
  },
];

function ImageCard({
  src,
  alt,
  caption,
  className,
  overlayClassName,
  captionClassName,
}: {
  src: string;
  alt: string;
  caption: string;
  className?: string;
  overlayClassName?: string;
  captionClassName?: string;
}) {
  return (
    <div
      className={cn(
        'bg-bg-weak-50 shadow-complex-5 relative overflow-hidden rounded-[16px] lg:rounded-[24px]',
        className,
      )}
    >
      <Image
        src={src}
        alt={alt}
        fill
        sizes='(min-width: 1024px) 456px, 262px'
        className='object-cover'
      />

      <div
        className={cn(
          'pointer-events-none absolute inset-x-0 bottom-0 overflow-hidden rounded-b-[16px] lg:rounded-b-[24px]',
          overlayClassName,
        )}
      >
        <div
          className='absolute inset-0 rounded-b-[16px] backdrop-blur-[2px] lg:rounded-b-[24px]'
          style={{
            maskImage: 'linear-gradient(to bottom, transparent 10%, black 45%)',
            WebkitMaskImage:
              'linear-gradient(to bottom, transparent 10%, black 45%)',
          }}
        />
        <div
          className='absolute inset-0 rounded-b-[16px] backdrop-blur-[4px] lg:rounded-b-[24px]'
          style={{
            maskImage: 'linear-gradient(to bottom, transparent 40%, black 75%)',
            WebkitMaskImage:
              'linear-gradient(to bottom, transparent 40%, black 75%)',
          }}
        />
        <div
          className='absolute inset-0 rounded-b-[16px] backdrop-blur-[7px] lg:rounded-b-[24px]'
          style={{
            maskImage:
              'linear-gradient(to bottom, transparent 70%, black 100%)',
            WebkitMaskImage:
              'linear-gradient(to bottom, transparent 70%, black 100%)',
          }}
        />
        <div
          className='absolute inset-0 rounded-b-[16px] opacity-[0.48] lg:rounded-b-[24px]'
          style={{
            background:
              'linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.16) 25%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.65) 75%, rgba(0,0,0,1) 100%)',
          }}
        />
      </div>

      <div className='pointer-events-none absolute inset-0 rounded-[16px] shadow-[inset_0_0_6px_0_rgba(255,255,255,0.24)] lg:rounded-[24px]' />

      <p
        className={cn(
          'text-label-sm lg:text-label-md text-static-white absolute opacity-[0.72]',
          captionClassName,
        )}
      >
        {caption}
      </p>
    </div>
  );
}

export default function BrightMindsCareersShowcase() {
  return (
    <div className='bg-bg-white-0 w-full py-10 lg:py-24'>
      <div className='mx-auto w-full max-w-[1072px] px-6 md:px-7'>
        <div className='grid grid-cols-1 gap-8 lg:grid-cols-[456px_1fr] lg:gap-x-16 lg:gap-y-7'>
          <div className='flex flex-col gap-4 lg:col-start-2 lg:row-start-1'>
            <div className='flex flex-col gap-3'>
              <span className='bg-bg-weak-50 text-label-sm text-text-sub-600 w-fit rounded-[9px] px-2.5 py-1'>
                Join our finance team
              </span>
              <h2 className='text-title-h4 lg:text-title-h2 text-text-strong-950 font-[550]'>
                Exciting careers for <br className='hidden lg:block' />
                bright minds
              </h2>
            </div>
            <p className='text-paragraph-md text-text-sub-600'>
              Connect your favorite apps to boost productivity.
            </p>
          </div>

          <div className='flex flex-col gap-8 lg:col-start-1 lg:row-span-3 lg:row-start-1 lg:self-start'>
            <div className='-mx-6 w-[calc(100%+48px)] lg:mx-0 lg:w-full'>
              <div className='no-scrollbar -my-5 flex gap-2 overflow-x-auto px-6 py-5 lg:mx-0 lg:my-0 lg:flex-wrap lg:gap-x-3 lg:gap-y-2 lg:overflow-visible lg:px-0 lg:py-0'>
                <ImageCard
                  src='https://alignui.com/images/blocks/careers-9-image-1.png'
                  alt='Team collaborating in the office'
                  caption='Choose joy, live bright.'
                  className='h-[200px] w-[262px] shrink-0 lg:h-[320px] lg:w-full'
                  overlayClassName='h-[124px]'
                  captionClassName='bottom-5 left-5 lg:bottom-6 lg:left-6'
                />
                <ImageCard
                  src='https://alignui.com/images/blocks/careers-9-image-2.png'
                  alt='Team member smiling'
                  caption='Shine from within.'
                  className='h-[200px] w-[262px] shrink-0 lg:aspect-square lg:h-auto lg:w-[calc(50%-6px)]'
                  overlayClassName='h-20'
                  captionClassName='bottom-5 left-4 lg:left-5'
                />
                <ImageCard
                  src='https://alignui.com/images/blocks/careers-9-image-3.png'
                  alt='Colleagues working together'
                  caption='Smile, it&rsquo;s contagious.'
                  className='h-[200px] w-[262px] shrink-0 lg:aspect-square lg:h-auto lg:w-[calc(50%-6px)]'
                  overlayClassName='h-20'
                  captionClassName='bottom-5 left-4 lg:left-5'
                />
              </div>
            </div>

            <div className='flex flex-col gap-8'>
              <p className='text-label-sm text-text-sub-600'>
                All in real time,{' '}
                <span className='text-text-soft-400'>
                  verify accounts, monitor activity, <br />
                  and ensure compliance standards.
                </span>
              </p>

              <div className='flex items-center gap-1'>
                <div className='flex items-center pr-1'>
                  {avatars.map((avatar) => (
                    <div
                      key={avatar.src}
                      className={cn(
                        'ring-stroke-white-0 -mr-1 size-5 shrink-0 overflow-hidden rounded-full ring-3',
                        avatar.bg,
                      )}
                    >
                      <Image
                        src={avatar.src}
                        alt={avatar.alt}
                        width={20}
                        height={20}
                        className='size-full object-cover'
                      />
                    </div>
                  ))}
                </div>
                <p className='text-label-sm text-text-sub-600'>
                  <span className='text-text-disabled-300'>—</span> 4.8/5 out of
                  254 reviews
                </p>
              </div>
            </div>
          </div>

          <div className='flex min-w-0 flex-col gap-3 lg:col-start-2 lg:row-start-2'>
            {jobs.map((job) => (
              <Link
                key={job.id}
                href='/'
                className='bg-bg-white-0 shadow-custom-input hover:bg-bg-weak-50 group relative flex flex-col gap-5 rounded-[20px] px-2 py-5 transition-colors lg:rounded-[24px] lg:px-3'
              >
                <div className='flex flex-col gap-1 px-3 pr-9'>
                  <h3 className='text-label-md text-text-strong-950'>
                    {job.title}
                  </h3>
                  <p className='text-label-sm text-text-sub-600'>
                    {job.description}
                  </p>
                </div>

                <Divider.Root />

                <div className='flex flex-col gap-2.5 px-3 lg:flex-row lg:flex-wrap lg:items-center'>
                  <div className='flex items-center gap-2'>
                    <Image
                      src='https://alignui.com/images/blocks/flags/us.svg'
                      alt='United States flag'
                      width={15}
                      height={15}
                      className='size-[15px] shrink-0'
                    />
                    <span className='text-label-sm text-text-sub-600'>
                      {job.location}
                    </span>
                  </div>
                  <span className='text-label-sm text-text-disabled-300 hidden lg:inline'>
                    ・
                  </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'>
                      {job.type}
                    </span>
                  </div>
                  <span className='text-label-sm text-text-disabled-300 hidden lg:inline'>
                    ・
                  </span>
                  <div className='flex items-center gap-2'>
                    <CircleDollarSign className='text-text-soft-400 size-[18px] shrink-0' />
                    <span className='text-label-sm text-text-sub-600'>
                      {job.salary}
                    </span>
                  </div>
                </div>

                <ArrowUpRight className='text-text-soft-400 group-hover:text-text-sub-600 absolute top-5 right-5 size-5 transition-colors' />
              </Link>
            ))}
          </div>

          <div className='flex flex-col gap-2 lg:col-start-2 lg:row-start-3 lg:flex-row lg:flex-wrap lg:items-center'>
            <p className='text-paragraph-sm text-text-sub-600'>
              Have a tool you&rsquo;d like to integrate?
            </p>
            <Link
              href='/'
              className='text-label-sm text-primary-base group flex w-fit items-center gap-1'
            >
              Explore all positions
              <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>
  );
}