'use client';

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

import * as Badge from '@/components/ui/badge';
import { cn } from '@/utils/cn';

const teamMembers = [
  {
    name: 'Daniel Kim',
    role: 'Co-founder',
    image: 'https://alignui.com/images/blocks/teams-5-image-6.png',
  },
  {
    name: 'Emily Park',
    role: 'Co-founder',
    image: 'https://alignui.com/images/blocks/teams-5-image-1.png',
    pushLast: true,
  },
  {
    name: 'James Turner',
    role: 'Product Management',
    image: 'https://alignui.com/images/blocks/teams-5-image-4.png',
  },
  {
    name: 'Sophia Williams',
    role: 'UI/UX Designer',
    image: 'https://alignui.com/images/blocks/teams-5-image-7.png',
  },
  {
    name: 'Ommar Johnson',
    role: 'Product Designer',
    image: 'https://alignui.com/images/blocks/teams-5-image-2.png',
  },
  {
    name: 'Emma Wright',
    role: 'UX Designer',
    image: 'https://alignui.com/images/blocks/teams-5-image-3.png',
  },
];

export default function ProgressMakersTeamGallery() {
  return (
    <section 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='flex flex-col items-center gap-8 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-label-sm text-text-sub-600 h-7 w-fit rounded-[9px] px-2.5 normal-case'
              >
                Meet our experts
              </Badge.Root>
              <h2 className='text-title-h4 text-text-strong-950 lg:text-title-h3 w-full font-[550] lg:text-center'>
                Get to know the makers of progress
              </h2>
            </div>
            <p className='text-paragraph-md text-text-sub-600 w-full lg:text-center'>
              Inspiring change, breaking molds, and fostering teamwork.
            </p>
          </div>

          <div className='flex w-full flex-wrap items-center gap-3 lg:flex-nowrap'>
            {teamMembers.map((member) => (
              <article
                key={member.name}
                className={cn(
                  'relative h-[204px] w-[calc(50%-6px)] overflow-hidden rounded-2xl bg-neutral-200 sm:h-80 md:h-[400px] lg:h-60 lg:min-w-0 lg:flex-1 lg:rounded-3xl',
                  member.pushLast && 'order-last lg:order-none',
                )}
              >
                <Image
                  src={member.image}
                  alt={`${member.name}, ${member.role}`}
                  fill
                  sizes='(max-width: 1023px) 50vw, 200px'
                  className='object-cover object-top'
                />
                <div className='absolute inset-x-0 bottom-0 flex flex-col items-start justify-end px-4 pt-8 pb-4 lg:px-5 lg:pt-10 lg:pb-5'>
                  <div
                    className='pointer-events-none absolute inset-0 rounded-b-2xl backdrop-blur-[1px] lg:rounded-b-3xl'
                    style={{
                      maskImage:
                        'linear-gradient(to bottom, transparent 20%, black 70%)',
                      WebkitMaskImage:
                        'linear-gradient(to bottom, transparent 20%, black 70%)',
                    }}
                  />
                  <div
                    className='pointer-events-none absolute inset-0 rounded-b-2xl backdrop-blur-[4px] lg:rounded-b-3xl'
                    style={{
                      maskImage:
                        'linear-gradient(to bottom, transparent 60%, black 100%)',
                      WebkitMaskImage:
                        'linear-gradient(to bottom, transparent 60%, black 100%)',
                    }}
                  />
                  <div className='pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent to-black/[0.64]' />
                  <div className='relative flex w-full flex-col gap-1 lg:w-[150px]'>
                    <span className='text-label-sm text-static-white'>
                      {member.name}
                    </span>
                    <span className='text-label-xs text-static-white/[0.72]'>
                      {member.role}
                    </span>
                  </div>
                </div>
              </article>
            ))}
          </div>

          <div className='flex w-full flex-col items-start gap-2 lg:items-center'>
            <p className='text-paragraph-md text-text-sub-600 lg:text-center'>
              We&rsquo;re looking for new teammates.
            </p>
            <Link
              href='/careers'
              className='text-label-md text-primary-base group flex items-center gap-1'
            >
              Explore all positions
              <ArrowUpRight
                className='size-5 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5'
                aria-hidden='true'
              />
            </Link>
          </div>
        </div>
      </div>
    </section>
  );
}