'use client';

import Image from 'next/image';

import * as Badge from '@/components/ui/badge';
const brands = [
  {
    name: 'Synergy',
    src: 'https://alignui.com/images/blocks/hero-1-brand-1-400.svg',
    darkSrc: 'https://alignui.com/images/blocks/hero-1-brand-1-400-dark.svg',
  },
  {
    name: 'Apex',
    src: 'https://alignui.com/images/blocks/hero-1-brand-8-400.svg',
    darkSrc: 'https://alignui.com/images/blocks/hero-1-brand-8-400-dark.svg',
  },
  {
    name: 'Horizon',
    src: 'https://alignui.com/images/blocks/hero-1-brand-2-400.svg',
    darkSrc: 'https://alignui.com/images/blocks/hero-1-brand-2-400-dark.svg',
  },
  {
    name: 'Catalyst',
    src: 'https://alignui.com/images/blocks/hero-1-brand-3-400.svg',
    darkSrc: 'https://alignui.com/images/blocks/hero-1-brand-3-400-dark.svg',
  },
  {
    name: 'Phoenix',
    src: 'https://alignui.com/images/blocks/hero-1-brand-4-400.svg',
    darkSrc: 'https://alignui.com/images/blocks/hero-1-brand-4-400-dark.svg',
  },
  {
    name: 'Pulse',
    src: 'https://alignui.com/images/blocks/hero-1-brand-5-400.svg',
    darkSrc: 'https://alignui.com/images/blocks/hero-1-brand-5-400-dark.svg',
  },
];

const testimonials = [
  {
    quote:
      'Everything we needed was already built in reporting, automation, integrations.',
    name: 'Matthew Johnson',
    role: 'Founder of Apex',
    logo: 'https://alignui.com/images/blocks/brand-social-logo-1.svg',
    darkLogo: 'https://alignui.com/images/blocks/brand-social-logo-1-dark.svg',
  },
  {
    quote:
      'Everything we needed was already built in reporting, automation, integrations.',
    name: 'Arthur Taylor',
    role: 'Co-founder of Catalyst',
    logo: 'https://alignui.com/images/blocks/brand-social-logo-7.svg',
    darkLogo: 'https://alignui.com/images/blocks/brand-social-logo-7-dark.svg',
  },
];

export default function SalesBrandTestimonials() {
  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 py-10 md:px-7 lg:items-center lg:gap-12 lg:py-24'>
        <div className='flex 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' />
              Testimonials
            </Badge.Root>
            <h2 className='text-title-h4 lg:text-title-h2 text-text-strong-950 font-[550] lg:text-center'>
              Real stories, proven impact
            </h2>
          </div>
          <p className='text-paragraph-md text-text-sub-600 lg:max-w-[528px] lg:text-center'>
            Hear how sales teams improved performance, built trust faster, and
            <br className='hidden lg:block' />
            <span className='text-label-md'>
              {' '}
              closed more deals using our smart tools.
            </span>
          </p>
        </div>

        <div className='-mx-6 md:-mx-7 lg:mx-0'>
          <div
            className='flex items-center gap-8 overflow-x-auto px-6 md:px-7 lg:justify-center lg:gap-12 lg:overflow-visible lg:px-0'
            style={{ scrollbarWidth: 'none' }}
          >
            {brands.map((brand) => (
              <div key={brand.name} className='shrink-0'>
                <Image
                  src={brand.src}
                  alt={brand.name}
                  width={106}
                  height={24}
                  className='h-6 w-auto dark:hidden'
                />
                <Image
                  src={brand.darkSrc}
                  alt={brand.name}
                  width={106}
                  height={24}
                  className='hidden h-6 w-auto dark:block'
                />
              </div>
            ))}
          </div>
        </div>

        <div className='grid w-full grid-cols-1 gap-1.5 lg:grid-cols-2'>
          {testimonials.map((t, i) => (
            <div
              key={i}
              className='bg-bg-weak-50 flex flex-col gap-8 rounded-[28px] p-8 lg:gap-20 lg:p-[38px]'
            >
              <p className='text-title-h6 lg:text-title-h4 text-text-strong-950 font-[550]'>
                {t.quote}
              </p>
              <div className='flex items-center gap-6 lg:justify-between'>
                <div className='flex min-w-0 flex-1 flex-col gap-1'>
                  <p className='text-label-sm lg:text-label-md text-text-strong-950'>
                    {t.name}
                  </p>
                  <p className='text-label-xs lg:text-label-sm text-text-sub-600'>
                    {t.role}
                  </p>
                </div>
                <Image
                  src={t.logo}
                  alt={t.name}
                  width={106}
                  height={24}
                  className='h-6 w-auto shrink-0 dark:hidden'
                />
                <Image
                  src={t.darkLogo}
                  alt={t.name}
                  width={106}
                  height={24}
                  className='hidden h-6 w-auto shrink-0 dark:block'
                />
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}