'use client';

import { Handshake } from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';

import { useLanguage } from '@/shared/language';
import { Button } from '@/shared/shadcn-ui/button';

export const PartnersSection = () => {
  const { t } = useLanguage();

  return (
    <section id='partners' className='bg-gray-50 px-2 py-8 sm:py-16'>
      <div className='container mx-auto'>
        <div className='mb-12 flex flex-col items-center justify-center text-center'>
          <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
            <Handshake className='h-6 w-6 text-red-600' />
          </div>
          <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
            {t('home.partners.title')}
          </h2>
          <p className='max-w-2xl text-gray-600'>
            {t('home.partners.description')}
          </p>
        </div>

        <div className='grid grid-cols-2 gap-4 sm:gap-8 md:grid-cols-4'>
          {[1, 2, 3, 4, 5, 6, 7, 8].map((partner) => (
            <div
              key={partner}
              className='flex h-32 flex-col items-center justify-center gap-0.5 rounded-lg bg-white p-6 shadow-md transition-transform hover:scale-105'
              data-aos='flip-left'
            >
              <Image
                src={`/placeholder.svg?height=80&width=160&text=Partner ${partner}`}
                alt={`Partner ${partner}`}
                width={160}
                height={80}
                className='max-h-16 w-auto'
              />
              <h4 className='font-extralight'>Название</h4>
            </div>
          ))}
        </div>

        <div className='mt-12 text-center'>
          <h3 className='mb-4 text-xl font-bold'>
            {t('home.partners.becomePartner')}
          </h3>
          <p className='mx-auto mb-6 max-w-2xl text-gray-600'>
            {t('home.partners.becomePartnerText')}
          </p>
          <Link href='#'>
            <Button className='bg-red-600 hover:bg-red-700'>
              {t('common.buttons.contactUs')}
            </Button>
          </Link>
        </div>
      </div>
    </section>
  );
};