'use client';

import {
  Facebook,
  Instagram,
  XformerlyTwitter,
} from '@/components/misc/logo-icons';
import Image from 'next/image';
import Link from 'next/link';

import * as Badge from '@/components/ui/badge';
const teamData = [
  {
    id: 'member1',
    name: 'James Turner',
    role: 'Brand Strategy Director',
    image: 'https://alignui.com/images/blocks/teams-4-image-1.jpg',
    socials: {
      instagram: '/',
      facebook: '/',
      twitter: '/',
    },
  },
  {
    id: 'member2',
    name: 'Emily Park',
    role: 'Digital Solutions Expert',
    image: 'https://alignui.com/images/blocks/teams-4-image-2.jpg',
    socials: {
      instagram: '/',
      facebook: '/',
      twitter: '/',
    },
  },
  {
    id: 'member3',
    name: 'Daniel Kim',
    role: 'Creative Marketing Partner',
    image: 'https://alignui.com/images/blocks/teams-4-image-3.jpg',
    socials: {
      instagram: '/',
      facebook: '/',
      twitter: '/',
    },
  },
  {
    id: 'member4',
    name: 'Sophia Williams',
    role: 'Experience Innovation Lead',
    image: 'https://alignui.com/images/blocks/teams-4-image-4.jpg',
    socials: {
      instagram: '/',
      facebook: '/',
      twitter: '/',
    },
  },
  {
    id: 'member5',
    name: 'Emma Wright',
    role: 'Product Design Manager',
    image: 'https://alignui.com/images/blocks/teams-4-image-5.jpg',
    socials: {
      instagram: '/',
      facebook: '/',
      twitter: '/',
    },
  },
];

export default function InnovationTeamShowcase() {
  return (
    <div className='bg-bg-white-0 w-full py-10 lg:py-24'>
      <div className='mx-auto max-w-7xl px-6 lg:px-7'>
        <div className='mb-8 flex flex-col lg:mb-16 lg:items-center'>
          <Badge.Root
            variant='lighter'
            className='text-label-sm text-text-sub-600 bg-bg-weak-50 mb-3 h-7 w-fit rounded-[9px] px-2.5 normal-case'
          >
            Together, we innovate
          </Badge.Root>
          <h3 className='text-title-h4 lg:text-title-h3 text-text-strong-950 mb-4 !font-[550]'>
            Building ideas, shaping futures
          </h3>
          <p className='text-paragraph-md text-text-sub-600 lg:text-center'>
            Pushing limits, sharing ideas, and building lasting impact.
          </p>
        </div>
        <div className='flex flex-col gap-8 lg:flex-row lg:gap-6'>
          {teamData.map((member) => (
            <div
              key={member.id}
              className='flex flex-1 flex-row gap-6 lg:flex-col lg:items-center'
            >
              <Image
                src={member.image}
                alt={member.name}
                width={180}
                height={180}
                className='size-22 shrink-0 rounded-full lg:size-40 xl:size-45'
              />
              <div className='flex flex-1 flex-col lg:items-center'>
                <div className='text-label-md text-text-strong-950 mb-1 lg:text-center'>
                  {member.name}
                </div>
                <div className='text-label-sm text-text-sub-600 mb-5 lg:text-center'>
                  {member.role}
                </div>
                <div className='flex flex-1 items-end gap-3.5 lg:justify-center'>
                  <Link
                    href={member.socials.instagram}
                    className='group flex size-5'
                  >
                    <Instagram className='text-text-soft-400 group-hover:text-text-sub-600 size-5 transition-all duration-300' />
                  </Link>
                  <Link
                    href={member.socials.facebook}
                    className='group flex size-5'
                  >
                    <Facebook className='text-text-soft-400 group-hover:text-text-sub-600 size-5 transition-all duration-300' />
                  </Link>
                  <Link
                    href={member.socials.twitter}
                    className='group flex size-5'
                  >
                    <XformerlyTwitter className='text-text-soft-400 group-hover:text-text-sub-600 size-5 transition-all duration-300' />
                  </Link>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}