'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='px-2 py-8 sm: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 />
            <Features />
          </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>
  );
};

interface Feature {
  title: string;
  description: string;
}

const features: Array<Feature> = [
  {
    title: 'home.about.features.quality.title',
    description: 'home.about.features.quality.description',
  },
  {
    title: 'home.about.features.equipment.title',
    description: 'home.about.features.equipment.description',
  },
  {
    title: 'home.about.features.staff.title',
    description: 'home.about.features.staff.description',
  },
];

const Features = () => {
  const { t } = useLanguage();

  return (
    <div className='space-y-4'>
      {features.map(({ title, description }) => {
        return (
          <div key={title} 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(title)}</h3>
              <p className='text-gray-600'>{t(description)}</p>
            </div>
          </div>
        );
      })}
    </div>
  );
};