'use client';

import Image from 'next/image';

import * as Badge from '@/components/ui/badge';

const brands = [
  {
    src: 'https://alignui.com/images/blocks/brand-social-logo-3.svg',
    darkSrc: 'https://alignui.com/images/blocks/brand-social-logo-3-dark.svg',
    alt: 'Phoenix',
    category: 'Healthcare & Wellness',
    number: '01',
  },
  {
    src: 'https://alignui.com/images/blocks/brand-social-logo-5.svg',
    darkSrc: 'https://alignui.com/images/blocks/brand-social-logo-5-dark.svg',
    alt: 'Synergy',
    category: 'HR Management',
    number: '02',
  },
  {
    src: 'https://alignui.com/images/blocks/brand-social-logo-2.svg',
    darkSrc: 'https://alignui.com/images/blocks/brand-social-logo-2-dark.svg',
    alt: 'Horizon',
    category: 'Developer Tools',
    number: '03',
  },
  {
    src: 'https://alignui.com/images/blocks/brand-social-logo-7.svg',
    darkSrc: 'https://alignui.com/images/blocks/brand-social-logo-7-dark.svg',
    alt: 'Catalyst',
    category: 'Marketing & Sales',
    number: '04',
  },
  {
    src: 'https://alignui.com/images/blocks/brand-social-logo-6.svg',
    darkSrc: 'https://alignui.com/images/blocks/brand-social-logo-6-dark.svg',
    alt: 'Pulse',
    category: 'Project Management',
    number: '05',
  },
  {
    src: 'https://alignui.com/images/blocks/brand-social-logo-8.svg',
    darkSrc: 'https://alignui.com/images/blocks/brand-social-logo-8-dark.svg',
    alt: 'Solaris',
    category: 'Energy & Utilities',
    number: '06',
  },
  {
    src: 'https://alignui.com/images/blocks/brand-social-logo-4.svg',
    darkSrc: 'https://alignui.com/images/blocks/brand-social-logo-4-dark.svg',
    alt: 'Aurora',
    category: 'Hospitality & Travel',
    number: '07',
  },
];

export default function GlobalIndustryBrandShowcase() {
  return (
    <div className='bg-bg-white-0 w-full overflow-hidden py-10 lg:py-24'>
      <div className='flex flex-col items-center gap-6 lg:gap-8'>
        <div className='mx-auto flex w-full max-w-7xl flex-col items-start gap-3 px-6 md:px-7 lg:items-center lg:gap-2.5'>
          <Badge.Root
            variant='stroke'
            className='text-label-sm text-text-sub-600 bg-bg-weak-50 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' />
            Brands & Social proof
          </Badge.Root>
          <h2 className='text-title-h5 text-text-strong-950 w-full font-[550] lg:text-center'>
            Where global brands build together
          </h2>
        </div>

        <div className='no-scrollbar flex w-full gap-1.5 overflow-x-auto px-6 md:px-7 lg:justify-center lg:overflow-visible lg:px-0'>
          {brands.map((brand) => (
            <div
              key={brand.alt}
              className='bg-bg-weak-25 relative flex size-[168px] shrink-0 flex-col items-center justify-center overflow-hidden rounded-2xl px-5 py-4 lg:size-60 lg:rounded-[24px]'
            >
              <span className='text-label-xs text-text-soft-400 absolute top-5 left-5'>
                {brand.number}
              </span>
              <Image
                src={brand.src}
                alt={brand.alt}
                width={106}
                height={24}
                className='h-6 w-auto dark:hidden'
              />
              <Image
                src={brand.darkSrc}
                alt={brand.alt}
                width={106}
                height={24}
                className='hidden h-6 w-auto dark:block'
              />
              <span className='bg-bg-soft-200 text-label-xs text-text-sub-600 absolute bottom-3 left-1/2 -translate-x-1/2 rounded-full px-2.5 py-1 whitespace-nowrap lg:bottom-4'>
                {brand.category}
              </span>
            </div>
          ))}
        </div>

        <div className='text-paragraph-sm text-text-soft-400 mx-auto w-full max-w-7xl px-6 text-left md:px-7 lg:max-w-[404px] lg:px-0 lg:text-center'>
          Start building trust by showcasing the partners <br />
          <span className='text-label-sm text-text-sub-600'>
            that power your success.
          </span>
        </div>
      </div>
    </div>
  );
}