'use client';

import { Users } from 'lucide-react';
import Image from 'next/image';

import AboutCounter from '@/shared/components/about-counter';
import { useLanguage } from '@/shared/language';

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

  return (
    <section id='about' className='py-16'>
      <div className='container mx-auto'>
        <div className='grid items-center gap-12 md:grid-cols-2'>
          <div>
            <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
              <Users className='h-6 w-6 text-red-600' />
            </div>
            <h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
              {t('home.about.title')}
            </h2>
            <p className='mb-6 text-gray-600'>{t('home.about.description1')}</p>
            <p className='mb-6 text-gray-600'>{t('home.about.description2')}</p>

            <AboutCounter />
            <div className='space-y-4'>
              <div className='flex items-start'>
                <div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
                  <span className='text-xs text-white'>✓</span>
                </div>
                <div className='ml-3'>
                  <h3 className='text-lg font-medium'>
                    {t('home.about.features.quality.title')}
                  </h3>
                  <p className='text-gray-600'>
                    {t('home.about.features.quality.description')}
                  </p>
                </div>
              </div>
              <div className='flex items-start'>
                <div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
                  <span className='text-xs text-white'>✓</span>
                </div>
                <div className='ml-3'>
                  <h3 className='text-lg font-medium'>
                    {t('home.about.features.equipment.title')}
                  </h3>
                  <p className='text-gray-600'>
                    {t('home.about.features.equipment.description')}
                  </p>
                </div>
              </div>
              <div className='flex items-start'>
                <div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
                  <span className='text-xs text-white'>✓</span>
                </div>
                <div className='ml-3'>
                  <h3 className='text-lg font-medium'>
                    {t('home.about.features.staff.title')}
                  </h3>
                  <p className='text-gray-600'>
                    {t('home.about.features.staff.description')}
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div
            className='relative h-[400px] overflow-hidden rounded-xl shadow-xl'
            data-aos='zoom-in-down'
          >
            <Image
              src='/placeholder.svg?height=400&width=600'
              alt='About our company'
              fill
              className='object-cover'
            />
          </div>
        </div>
      </div>
    </section>
  );
};