'use client';

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

import * as Badge from '@/components/ui/badge';
import * as LinkButton from '@/components/ui/link-button';
const integrationsData = [
  {
    id: 'dropbox',
    name: 'Dropbox',
    description: 'Sync all files and updates in seconds, always up to date',
    icon: 'https://alignui.com/images/blocks/integrations-logo-dropbox.svg',
  },
  {
    id: 'zendesk',
    name: 'Zendesk',
    description: 'Manage customer conversations and support in one place.',
    icon: 'https://alignui.com/images/blocks/integrations-logo-zendesk.svg',
    darkIcon:
      'https://alignui.com/images/blocks/integrations-logo-zendesk-dark.svg',
  },
  {
    id: 'loom',
    name: 'Loom',
    description: 'Record and share quick video updates across your team.',
    icon: 'https://alignui.com/images/blocks/integrations-logo-loom.svg',
  },
  {
    id: 'clickup',
    name: 'Clickup',
    description: 'Plan, track, and manage projects in a single workspace.',
    icon: 'https://alignui.com/images/blocks/integrations-logo-clickup.svg',
  },
  {
    id: 'linear',
    name: 'Linear',
    description: 'Track tasks, manage workflows, and resolve issues faster.',
    icon: 'https://alignui.com/images/blocks/integrations-logo-linear.svg',
  },
  {
    id: 'slack',
    name: 'Slack',
    description:
      'Communicate instantly and keep everyone aligned in real time.',
    icon: 'https://alignui.com/images/blocks/integrations-logo-slack.svg',
  },
];

export default function TeamworkToolsIntegrationsGrid() {
  return (
    <div className='bg-bg-white-0 w-full py-10 lg:py-24'>
      <div className='mx-auto flex max-w-7xl flex-col lg:px-7'>
        <div className='mb-8 flex flex-col px-6 lg:mb-12 lg:items-center lg:px-0'>
          <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 capitalize lg:mx-auto'
          >
            Apps & Integrations
          </Badge.Root>
          <h3 className='text-title-h4 xl:text-title-h3 text-text-strong-950 !font-[550] lg:text-center'>
            Smarter tools for better teamwork
          </h3>
        </div>
        <div className='mb-8 grid grid-cols-1 gap-1.5 px-3 md:grid-cols-2 lg:mb-12 lg:grid-cols-3'>
          {integrationsData.map((integration) => (
            <div
              key={integration.id}
              className='bg-bg-weak-50 flex flex-col gap-7 rounded-[28px] p-7 xl:gap-10 xl:p-10'
            >
              <div className='shadow-custom-input-4 bg-bg-white-0 flex size-12 shrink-0 items-center justify-center rounded-[14px]'>
                <Image
                  src={integration.icon}
                  alt={`${integration.name} Logo`}
                  width={32}
                  height={32}
                  className={`size-7 shrink-0 object-cover ${integration.darkIcon ? 'dark:hidden' : ''}`}
                />
                {integration.darkIcon && (
                  <Image
                    src={integration.darkIcon}
                    alt={`${integration.name} Logo`}
                    width={32}
                    height={32}
                    className='hidden size-7 shrink-0 object-cover dark:block'
                  />
                )}
              </div>
              <div className='flex flex-col gap-2'>
                <h5 className='text-label-lg text-text-strong-950'>
                  {integration.name}
                </h5>
                <p className='text-label-md text-text-sub-600'>
                  {integration.description}
                </p>
              </div>
            </div>
          ))}
        </div>
        <div className='flex flex-col gap-6 px-6 lg:items-center'>
          <p className='text-paragraph-md text-text-sub-600 lg:text-center'>
            Explore tools that connect your apps, streamline work,
            <span className='text-label-md text-text-sub-600 lg:flex lg:justify-center'>
              and keep teams in sync.
            </span>
          </p>
          <LinkButton.Root
            className='text-primary-base text-label-md group h-auto w-fit cursor-pointer gap-1 whitespace-break-spaces'
            asChild
          >
            <a href='#'>
              See all integrations
              <LinkButton.Icon
                as={ArrowUpRight}
                className='text-primary-base size-5 transition-all duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5'
              />
            </a>
          </LinkButton.Root>
        </div>
      </div>
    </div>
  );
}