'use client';

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

import AboutCounter from '@/shared/components/about-counter';
import { Container } from '@/shared/components/container';
import { useTextController } from '@/shared/language/hooks/use-text-controller';

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

  return (
    <section id='about'>
      <Container>
        <div className='text-justify'>
          <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-3 text-gray-600 sm:mb-6'>
            {t('home.about.description1')}
          </p>
          <p className='mb-3 text-gray-600 sm:mb-6'>
            {t('home.about.description2')}
          </p>
        </div>
        <div className='my-4 grid items-center gap-6 sm:my-8 md:grid-cols-2 md:gap-12'>
          <div>
            <AboutCounter />
            <Features />
          </div>
          <div
            className='relative h-[400px] overflow-hidden rounded-xl md:h-full'
            data-aos='zoom-in-down'
          >
            <Image
              src='/clients/loyatly/oriyo-price-board.png'
              alt='About our company'
              fill
              className='w-full object-contain p-2.5'
            />
          </div>
        </div>
      </Container>
    </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 } = useTextController();

  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>
  );
};