'use client';

import { ChevronRight } from 'lucide-react';

import { Marquee } from '@/components/animation/marquee';
import {
  AppStore,
  Google,
  GoogleDrive,
  Linkedin,
  Shopify,
  Trustpilot,
  XformerlyTwitter,
} from '@/components/misc/logo-icons';
import * as Button from '@/components/ui/button';

const logos = [
  {
    name: 'Google',
    icon: <Google className='size-8' />,
  },
  {
    name: 'Shopify',
    icon: <Shopify className='size-8' />,
  },
  {
    name: 'LinkedIn',
    icon: <Linkedin className='size-8' />,
  },
  {
    name: 'App Store',
    icon: <AppStore className='size-8' />,
  },
  {
    name: 'Google Drive',
    icon: <GoogleDrive className='h-7 w-8' />,
  },
  {
    name: 'Trustpilot',
    icon: <Trustpilot className='size-8' />,
  },
  {
    name: 'X',
    icon: <XformerlyTwitter className='text-text-strong-950 size-7' />,
  },
];

export default function TrustedCompaniesLogoMarquee() {
  return (
    <div className='bg-bg-white-0 w-full overflow-hidden'>
      <div className='mx-auto flex w-full max-w-5xl flex-col items-center gap-8 px-6 py-10 md:gap-10 md:px-7 md:py-16 lg:py-24'>
        <div className='flex max-w-2xl flex-col items-center gap-4 text-center'>
          <h2 className='text-title-h4 text-text-strong-950 md:text-title-h3 font-[550]'>
            We are trusted by 1,000+ businesses worldwide
          </h2>
          <p className='text-paragraph-md text-text-sub-600 md:text-paragraph-lg'>
            Trusted globally by creators, productivity enthusiasts, and
            professionals at leading tech companies
          </p>
        </div>

        <div className='relative w-full py-4 md:py-6'>
          <div className='from-bg-white-0 pointer-events-none absolute inset-y-0 left-0 z-10 w-16 bg-linear-to-r to-transparent md:w-32' />
          <div className='from-bg-white-0 pointer-events-none absolute inset-y-0 right-0 z-10 w-16 bg-linear-to-l to-transparent md:w-32' />
          <Marquee
            aria-hidden='true'
            repeat={3}
            pauseOnHover
            className='py-6 [--duration:32s] [--gap:1rem] md:[--gap:1rem] lg:[--gap:1rem]'
          >
            {logos.map((logo) => (
              <div
                key={logo.name}
                className='text-text-sub-600 flex h-12 min-w-20 items-center justify-center opacity-90 transition-opacity duration-200 group-hover:opacity-100 md:min-w-28'
              >
                <span className='sr-only'>{logo.name}</span>
                {logo.icon}
              </div>
            ))}
          </Marquee>
        </div>

        <Button.Root
          variant='neutral'
          mode='stroke'
          size='small'
          className='shadow-custom-xs h-9 cursor-pointer gap-1.5 rounded-xl pr-2.5 pl-3.5'
          asChild
        >
          <a href='#'>
            Read customer stories
            <Button.Icon as={ChevronRight} className='size-4' />
          </a>
        </Button.Root>
      </div>
    </div>
  );
}