oriyo_next/src/widgets/about-page/company-timeline.tsx

'use client';

import { Calendar, ChevronDown, ChevronUp } from 'lucide-react';
import { useState } from 'react';

import { useTextController } from '@/shared/language/hooks/use-text-controller';
import { Button } from '@/shared/shadcn-ui/button';
import { Card, CardContent } from '@/shared/shadcn-ui/card';

const timelineEvents = [
  {
    year: '2008',
    title: 'Основание компании',
    description:
      'GasNetwork была основана с открытием первых трех заправочных станций в Душанбе. С самого начала компания поставила перед собой цель предоставлять качественное топливо и отличный сервис.',
  },
  {
    year: '2010',
    title: 'Расширение сети',
    description:
      'Открытие еще пяти заправочных станций в различных регионах Таджикистана. Начало формирования единого стандарта обслуживания на всех станциях сети.',
  },
  {
    year: '2012',
    title: 'Внедрение программы лояльности',
    description:
      'Запуск первой в Таджикистане программы лояльности для клиентов сети заправок. Введение карт постоянного клиента с накопительной системой бонусов.',
  },
  {
    year: '2014',
    title: 'Модернизация оборудования',
    description:
      'Масштабная программа по обновлению оборудования на всех заправочных станциях сети. Внедрение современных технологий для повышения качества обслуживания.',
  },
  {
    year: '2016',
    title: 'Открытие 15-й заправки',
    description:
      'Значительное расширение сети с открытием юбилейной 15-й заправочной станции. GasNetwork становится одной из крупнейших сетей заправок в Таджикистане.',
  },
  {
    year: '2018',
    title: 'Запуск мобильного приложения',
    description:
      'Разработка и запуск мобильного приложения для клиентов сети. Возможность отслеживать бонусы, находить ближайшие заправки и получать специальные предложения.',
  },
  {
    year: '2020',
    title: 'Создание благотворительного фонда',
    description:
      'Основание благотворительного фонда GasNetwork для поддержки социальных проектов в Таджикистане. Начало активной социальной деятельности компании.',
  },
  {
    year: '2023',
    title: 'Современное развитие',
    description:
      'Сегодня GasNetwork - это 25+ современных заправочных станций по всему Таджикистану, более 150 сотрудников и тысячи довольных клиентов ежедневно.',
  },
];

export function CompanyTimeline() {
  const [expanded, setExpanded] = useState(false);
  const displayEvents = expanded ? timelineEvents : timelineEvents.slice(0, 4);

  const { t } = useTextController();

  return (
    <div className='relative'>
      <div className='absolute left-1/2 -z-10 -ml-0.5 hidden h-full w-0.5 bg-gradient-to-b from-red-200 via-red-200 to-transparent md:block' />

      <div className='space-y-8'>
        {displayEvents.map((event, index) => (
          <div key={index} className='relative'>
            <div className='items-center md:grid md:grid-cols-2 md:gap-8'>
              <div
                className={`mb-4 md:mb-0 ${index % 2 === 0 ? 'md:pr-10 md:text-right' : 'md:order-last md:pl-10'}`}
                data-aos='zoom-in-down'
              >
                <div className='mb-2 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
                  <Calendar className='size-5 text-red-600' />
                </div>
                <h3 className='text-xl font-bold'>{event.year}</h3>
                <h4 className='mb-2 text-lg font-semibold'>{event.title}</h4>
              </div>

              <div
                className={
                  index % 2 === 0
                    ? 'md:pl-10'
                    : 'md:order-first md:pr-10 md:text-right'
                }
              >
                <Card
                  className='overflow-hidden transition-all hover:shadow-md'
                  data-aos={'fade-up'}
                >
                  <CardContent className='p-4'>
                    <p className='text-gray-600'>{event.description}</p>
                  </CardContent>
                </Card>
              </div>
            </div>

            <div className='absolute top-5 left-1/2 -ml-3 hidden size-6 items-center justify-center rounded-full bg-red-600 md:flex'>
              <div className='size-3 rounded-full bg-white'></div>
            </div>
          </div>
        ))}
      </div>

      {timelineEvents.length > 4 && (
        <div className='mt-8 text-center'>
          <Button
            variant='outline'
            onClick={() => {
              setExpanded(!expanded);
            }}
            className='inline-flex items-center'
          >
            {expanded ? (
              <>
                {t('about.companyTimeline.rollUp.button')}{' '}
                <ChevronUp className='ml-2 size-4' />
              </>
            ) : (
              <>
                {t('about.companyTimeline.show.button')}{' '}
                <ChevronDown className='ml-2 size-4' />
              </>
            )}
          </Button>
        </div>
      )}
    </div>
  );
}