'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 logos = [
  {
    name: 'Envato',
    src: 'https://alignui.com/images/blocks/integrations-logo-envato.svg',
    pos: 'top-0 left-1/2',
  },
  {
    name: 'Notion',
    src: 'https://alignui.com/images/blocks/integrations-logo-notion.svg',
    darkSrc:
      'https://alignui.com/images/blocks/integrations-logo-notion-dark.svg',
    pos: 'top-[23px] left-[calc(50%+87px)] lg:top-[31px] lg:left-[calc(50%+116px)]',
  },
  {
    name: 'Linear',
    src: 'https://alignui.com/images/blocks/integrations-logo-linear.svg',
    pos: 'top-[23px] left-[calc(50%-87px)] lg:top-[31px] lg:left-[calc(50%-116px)]',
  },
  {
    name: 'Dropbox',
    src: 'https://alignui.com/images/blocks/integrations-logo-dropbox.svg',
    pos: 'top-[87px] left-[calc(50%-151px)] lg:top-[116px] lg:left-[calc(50%-201px)]',
  },
  {
    name: 'Monday',
    src: 'https://alignui.com/images/blocks/integrations-logo-monday.svg',
    pos: 'top-[87px] left-[calc(50%+151px)] lg:top-[116px] lg:left-[calc(50%+201px)]',
  },
  {
    name: 'ClickUp',
    src: 'https://alignui.com/images/blocks/integrations-logo-clickup.svg',
    pos: 'top-[174px] left-[calc(50%-174px)] lg:top-[232px] lg:left-[calc(50%-232px)]',
  },
  {
    name: 'Zoom',
    src: 'https://alignui.com/images/blocks/integrations-logo-zoom.svg',
    pos: 'top-[174px] left-[calc(50%+174px)] lg:top-[232px] lg:left-[calc(50%+232px)]',
  },
];

export default function OrbitLogoIntegrations() {
  return (
    <div className='bg-bg-white-0 w-full overflow-x-clip'>
      <div className='mx-auto flex w-full max-w-7xl flex-col items-center gap-8 px-6 pt-10 pb-8 md:px-7 lg:gap-14 lg:py-24'>
        <div className='relative h-[270px] w-full min-w-[270px] lg:h-[360px] lg:w-[600px]'>
          <div className='absolute top-[30px] left-1/2 h-[174px] w-[348px] -translate-x-1/2 overflow-hidden lg:top-[40px] lg:h-[232px] lg:w-[464px]'>
            <div className='bg-stroke-soft-200 size-[348px] rounded-full p-px lg:size-[464px]'>
              <div className='bg-bg-white-0 size-full rounded-full' />
            </div>
            <div
              className='absolute inset-0 size-[348px] animate-spin rounded-full p-px lg:size-[464px]'
              style={{
                animationDuration: '8s',
                background:
                  'conic-gradient(from 0deg, transparent 60%, var(--color-primary-base) 100%)',
              }}
            >
              <div className='bg-bg-white-0 size-full rounded-full' />
            </div>
          </div>

          <div className='absolute top-[90px] left-1/2 h-[114px] w-[228px] -translate-x-1/2 overflow-hidden lg:top-[120px] lg:h-[152px] lg:w-[304px]'>
            <div className='bg-stroke-soft-200 size-[228px] rounded-full p-px lg:size-[304px]'>
              <div className='bg-bg-white-0 size-full rounded-full' />
            </div>
            <div
              className='absolute inset-0 size-[228px] animate-spin rounded-full p-px lg:size-[304px]'
              style={{
                animationDuration: '6s',
                background:
                  'conic-gradient(from 0deg, transparent 60%, var(--color-primary-base) 100%)',
              }}
            >
              <div className='bg-bg-white-0 size-full rounded-full' />
            </div>
          </div>

          {logos.map((logo) => (
            <div
              key={logo.name}
              className={cn(
                'bg-bg-white-0 shadow-gray-shadow-4 absolute flex size-[60px] -translate-x-1/2 items-center justify-center rounded-full lg:size-20',
                logo.pos,
              )}
            >
              <Image
                src={logo.src}
                alt={logo.name}
                width={40}
                height={40}
                className={cn(
                  'size-[30px] lg:size-10',
                  logo.darkSrc && 'dark:hidden',
                )}
              />
              {logo.darkSrc && (
                <Image
                  src={logo.darkSrc}
                  alt={logo.name}
                  width={40}
                  height={40}
                  className='hidden size-[30px] lg:size-10 dark:block'
                />
              )}
            </div>
          ))}

          <div className='bg-bg-white-0 shadow-complex absolute top-[150px] left-1/2 flex size-[108px] -translate-x-1/2 items-center justify-center rounded-full lg:top-[200px] lg:size-36'>
            <Image
              src='https://alignui.com/images/blocks/integrations-logo-2.svg'
              alt='Brand'
              width={56}
              height={56}
              className='size-[42px] lg:size-14 dark:hidden'
            />
            <Image
              src='https://alignui.com/images/blocks/integrations-logo-2-dark.svg'
              alt='Brand'
              width={56}
              height={56}
              className='hidden size-[42px] lg:size-14 dark:block'
            />
          </div>
        </div>

        <div className='flex w-full flex-col gap-4 lg:items-center'>
          <div className='flex flex-col gap-3 lg:items-center'>
            <Badge.Root
              variant='stroke'
              className='text-label-sm text-text-sub-600 bg-bg-white-0 shadow-custom-input-2 h-7 w-fit !gap-1 rounded-[9px] pr-[10px] pl-[7px] normal-case ring-transparent'
            >
              <Badge.Dot className='text-primary-base mx-0 size-4 before:size-1.5' />
              Apps & Integrations
            </Badge.Root>
            <h2 className='text-title-h4 lg:text-title-h2 text-text-strong-950 font-[550] lg:text-center'>
              Smarter tools for better teamwork
            </h2>
          </div>
          <div className='flex flex-col gap-4 lg:max-w-[528px] lg:items-center lg:gap-6'>
            <p className='text-paragraph-md text-text-sub-600 lg:text-center'>
              Connect your favorite apps to boost productivity and keep
              <br className='hidden lg:block' />
              <span className='text-label-md'> every workflow in sync.</span>
            </p>
            <Link
              href='/'
              className='text-label-md text-primary-base flex items-center gap-1'
            >
              Explore all integrations
              <ArrowUpRight className='size-5' />
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}