'use client';

import Image from 'next/image';

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

const logos = [
  {
    src: 'https://alignui.com/images/blocks/brand-social-company-1.svg',
    darkSrc:
      'https://alignui.com/images/blocks/brand-social-company-1-dark.svg',
    alt: 'Synergy',
  },
  {
    src: 'https://alignui.com/images/blocks/brand-social-company-4.svg',
    darkSrc:
      'https://alignui.com/images/blocks/brand-social-company-4-dark.svg',
    alt: 'Apex',
  },
  {
    src: 'https://alignui.com/images/blocks/brand-social-company-3.svg',
    darkSrc:
      'https://alignui.com/images/blocks/brand-social-company-3-dark.svg',
    alt: 'Horizon',
  },
  {
    src: 'https://alignui.com/images/blocks/brand-social-company-2.svg',
    darkSrc:
      'https://alignui.com/images/blocks/brand-social-company-2-dark.svg',
    alt: 'Catalyst',
  },
  {
    src: 'https://alignui.com/images/blocks/brand-social-company-5.svg',
    darkSrc:
      'https://alignui.com/images/blocks/brand-social-company-5-dark.svg',
    alt: 'Phoenix',
  },
  {
    src: 'https://alignui.com/images/blocks/brand-social-company-6.svg',
    darkSrc:
      'https://alignui.com/images/blocks/brand-social-company-6-dark.svg',
    alt: 'Pulse',
  },
];

export default function AdaptiveBrandsLogoGrid() {
  return (
    <div className='bg-bg-white-0 w-full'>
      <div className='mx-auto flex w-full max-w-7xl flex-col gap-6 px-6 pt-10 pb-8 md:items-center md:gap-8 md:px-7 md:py-24'>
        <div className='flex flex-col gap-3 md:items-center md: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 font-[550] md:text-center'>
            Chosen by the world&rsquo;s most adaptive brands
          </h2>
        </div>

        <div className='grid w-full grid-cols-2 gap-3 md:grid-cols-3 xl:flex xl:flex-row'>
          {logos.map((logo) => (
            <div
              key={logo.alt}
              className='border-stroke-soft-200 bg-bg-white-0 flex h-20 items-center justify-center gap-1.5 overflow-hidden rounded-2xl border px-8 py-5 xl:flex-1'
            >
              <Image
                src={logo.src}
                alt={logo.alt}
                width={106}
                height={24}
                className='h-6 w-auto dark:hidden'
              />
              <Image
                src={logo.darkSrc}
                alt={logo.alt}
                width={106}
                height={24}
                className='hidden h-6 w-auto dark:block'
              />
            </div>
          ))}
        </div>

        <div className='text-paragraph-sm text-text-soft-400 md:mx-auto md:max-w-[404px] md: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>
  );
}