'use client';

import images from '@/assets/images/images';
import SectionTitle from '@/components/layout/sectionTitle';
import Image from 'next/image';
import { useTranslations } from 'next-intl';
import { useParams } from 'next/navigation';
import { TLocales } from '@/models/layout';

export default function HomeStorySection({
  className = '',
}: {
  className?: string;
}) {
  const t = useTranslations();
  const params = useParams();
  const locale = params.locale as TLocales;

  const statisticsData = [
    {
      title: t('com_home_story_projects_count'),
      count: '10K',
    },
    {
      title: t('com_home_story_customer_count'),
      count: '500',
    },
    {
      title: t('com_home_story_experience'),
      count: '25',
    },
  ];

  return (
    <div
      className={`container mx-auto flex flex-col gap-12 max-lg:gap-0 ${className}`}
    >
      <div className="grid grid-cols-1 gap-10 lg:grid-cols-2">
        <SectionTitle
          title={t('com_home_story_title')}
          description={t('com_home_story_slogan')}
          description_bold={t('com_home_story_slogan_bold')}
          locale={locale}
        />
        <div className="grid grid-cols-2 gap-3">
          {[images.homeBanner, images.aboutImg_1].map((e, i) => (
            <div
              className="aspect-video w-full overflow-hidden rounded-3xl"
              key={i}
            >
              <Image src={e} alt="" className="w-full object-cover" />
            </div>
          ))}
        </div>
      </div>

      <div className="grid grid-cols-1 gap-10 lg:grid-cols-2">
        <div className="aspect-video w-full overflow-hidden rounded-3xl max-lg:hidden">
          <Image
            src={images.whatWeDoImage}
            alt=""
            className="h-full w-full object-cover"
          />
        </div>
        <div className="flex flex-col py-8 max-lg:gap-6">
          <p className="text-base font-light text-gray-500">
            {t('com_home_story_description')}
          </p>
          <hr className="my-10 text-gray-100/50 max-lg:hidden" />
          <div className="grid grid-cols-3 justify-between gap-1">
            {statisticsData.map((stat, index) => (
              <div key={index} className="flex flex-col gap-1">
                <h3 className="text-primary text-2xl font-bold">
                  +{stat.count}
                </h3>
                <p className="text-sm text-gray-500">{stat.title}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}
