'use client';

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

import * as Badge from '@/components/ui/badge';
import * as FancyButton from '@/components/ui/fancy-button';

export default function ClickUpConnectionIntegrations() {
  return (
    <div className='bg-bg-white-0 w-full overflow-x-clip pt-10 pb-8 lg:py-[107px]'>
      <div className='mx-auto flex w-full max-w-7xl flex-col items-center gap-8 px-6 md:px-7 lg:gap-12'>
        <div className='relative h-[396px] w-[600px] max-w-full'>
          <div className='bg-bg-weak-50 absolute bottom-0 left-1/2 h-[192px] w-[374px] -translate-x-1/2 rounded-[40px] lg:h-[208px] lg:w-[600px]' />

          <div className='shadow-complex-8 bg-bg-white-0 absolute bottom-8 left-1/2 flex w-[320px] -translate-x-1/2 flex-col items-center gap-8 rounded-[32px] px-8 pt-8 pb-9 lg:bottom-10 lg:w-auto'>
            <div className='flex w-[212px] flex-col items-center gap-6'>
              <Badge.Root
                variant='lighter'
                className='bg-bg-weak-50 text-text-sub-600 text-label-sm h-7 w-fit gap-1.5 rounded-[9px] pr-2.5 pl-2 normal-case'
              >
                <Badge.Icon
                  as={Share2}
                  className='text-text-soft-400 mx-0 size-4'
                />
                Integrations
              </Badge.Root>

              <div className='flex w-full items-center gap-4'>
                <div className='bg-bg-white-0 ring-stroke-soft-200 shadow-complex flex items-center rounded-[20px] p-4 ring-1 ring-inset'>
                  <Boxes
                    className='text-primary-base size-10 stroke-[1.5]'
                    aria-label='Platform'
                  />
                </div>
                <div className='bg-bg-weak-25 flex items-center rounded-[20px] p-2'>
                  <Link2 className='text-text-sub-600 size-5' />
                </div>
                <div className='bg-bg-white-0 ring-stroke-soft-200 shadow-complex flex items-center rounded-[20px] p-4 ring-1 ring-inset'>
                  <Image
                    src='https://alignui.com/images/blocks/integrations-logo-clickup.svg'
                    alt='ClickUp'
                    width={40}
                    height={40}
                    className='size-10'
                  />
                </div>
              </div>
            </div>

            <div className='flex w-[276px] flex-col items-center gap-6'>
              <div className='flex w-full flex-col items-center gap-2 text-center'>
                <h3 className='text-label-lg text-text-strong-950'>
                  Get connected to ClickUp
                </h3>
                <p className='text-paragraph-sm text-text-soft-400'>
                  Discover integrations that connect your favorite apps, improve
                </p>
              </div>
              <FancyButton.Root
                variant='primary'
                size='small'
                className='shadow-complex-7 bg-primary-base !rounded-10 cursor-pointer px-3 after:opacity-0 hover:after:opacity-[.24]'
              >
                Allow access
              </FancyButton.Root>
            </div>
          </div>
        </div>

        <div className='flex w-full flex-col items-start gap-4 lg:items-center'>
          <h2 className='text-title-h4 lg:text-title-h3 text-text-strong-950 w-full font-[550] lg:text-center'>
            Powerful tools for better workflows
          </h2>
          <p className='text-paragraph-md text-text-sub-600 w-full lg:text-center'>
            Discover integrations that connect your favorite apps, improve{' '}
            <br className='hidden lg:block' />
            <span className='text-label-md text-text-sub-600'>
              productivity, and keep your work in sync.
            </span>
          </p>
          <Link
            href='/'
            className='text-label-md text-primary-base group flex items-center gap-1'
          >
            Explore all integrations
            <ArrowUpRight className='size-5 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5' />
          </Link>
        </div>
      </div>
    </div>
  );
}