'use client';

import { Fuel, History, MapPin, Star, Target, Users } from 'lucide-react';
import Image from 'next/image';

import { AboutUsPageData } from '@/app/api-utlities/@types/about-us';

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

import { CompanyTimeline } from '@/widgets/about-page/company-timeline';
import { StationGallery } from '@/widgets/about-page/station-gallery';
import { CtaSection } from '@/widgets/cta-section';

export const metadata = {
  title: 'about.metadata.title',
  description: 'about.metadata.description',
};

export interface AboutPageProps {
  content: AboutUsPageData;
}

export default function AboutPage({ content }: AboutPageProps) {
  const { t } = useTextController();

  return (
    <div className='flex min-h-screen flex-col'>
      <main className='flex-1'>
        {/* Hero Section */}
        <section className='relative'>
          <div className='relative h-[400px] w-full overflow-hidden'>
            <Image
              src='/placeholder.svg?height=400&width=1920&text=Наша+История'
              alt={t('about.hero.imageAlt')}
              width={1920}
              height={400}
              className='object-cover'
              priority
            />
            <div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30 px-2'>
              <div
                data-aos='fade-down'
                data-aos-duration='1000'
                className='container mx-auto'
              >
                <div className='max-w-2xl space-y-4 text-white'>
                  <h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
                    {t('about.hero.title')}
                  </h1>
                  <p className='text-lg text-gray-200'>
                    {t('about.hero.subtitle')}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Company Overview */}
        <Container>
          <section className='py-16'>
            <div className='container mx-auto'>
              <div className='grid items-center gap-12 md:grid-cols-2'>
                <div data-aos='fade-right'>
                  <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
                    <Fuel className='h-6 w-6 text-red-600' />
                  </div>
                  <h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
                    {t('about.overview.title')}
                  </h2>
                  <p className='mb-6 text-gray-600'>
                    {t('about.overview.description1')}
                  </p>
                  <p className='mb-6 text-gray-600'>
                    {t('about.overview.description2')}
                  </p>
                  <p className='mb-6 text-gray-600'>
                    {t('about.overview.description3')}
                  </p>

                  <div className='mb-6 grid grid-cols-1 gap-4 md:grid-cols-2'>
                    {[0, 1, 2, 3].map((index) => (
                      <div key={index} 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(`about.overview.benefits.${index}.title`)}
                          </h3>
                          <p className='text-gray-600'>
                            {t(`about.overview.benefits.${index}.description`)}
                          </p>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
                <div
                  data-aos='zoom-out-right'
                  className='relative h-[500px] overflow-hidden rounded-xl shadow-xl'
                >
                  <Image
                    src='/placeholder.svg?height=500&width=600&text=Главный+офис'
                    alt={t('about.overview.imageAlt')}
                    fill
                    className='object-cover'
                  />
                </div>
              </div>
            </div>
          </section>
        </Container>

        {/* Stats Section */}
        <section className='bg-red-600 py-16 text-white'>
          <div className='container mx-auto'>
            <div className='mb-12 text-center'>
              <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
                {t('about.stats.title')}
              </h2>
              <p className='mx-auto max-w-2xl text-white/80'>
                {t('about.stats.subtitle')}
              </p>
            </div>
            <div className='grid grid-cols-1 gap-8 text-center sm:grid-cols-2 md:grid-cols-4'>
              {[0, 1, 2, 3].map((index) => (
                <div key={index} className='space-y-2'>
                  <h3 className='text-4xl font-bold'>
                    <AnimatedCounter
                      end={Number(t(`about.stats.items.${index}.value`))}
                      suffix={
                        t(`about.stats.items.${index}.suffix`) ===
                        `about.stats.items.${index}.suffix`
                          ? ''
                          : t(`about.stats.items.${index}.suffix`) || ''
                      }
                    />
                  </h3>
                  <p className='text-sm text-white/80'>
                    {t(`about.stats.items.${index}.label`)}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Our History */}
        <section className='py-16'>
          <div className='container mx-auto'>
            <Container>
              <div className='mb-12 flex flex-col items-center justify-center text-center'>
                <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
                  <History className='h-6 w-6 text-red-600' />
                </div>
                <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
                  {t('about.history.title')}
                </h2>
                <p className='max-w-2xl text-gray-600'>
                  {t('about.history.subtitle')}
                </p>
              </div>
            </Container>

            <Container>
              <CompanyTimeline timeline={content.history} />
            </Container>
          </div>
        </section>

        {/* Our Stations */}
        <Container>
          <section className='bg-gray-50 py-16'>
            <div className='container mx-auto'>
              <div className='mb-12 flex flex-col items-center justify-center text-center'>
                <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
                  <MapPin className='h-6 w-6 text-red-600' />
                </div>
                <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
                  {t('about.stations.title')}
                </h2>
                <p className='max-w-2xl text-gray-600'>
                  {t('about.stations.subtitle')}
                </p>
              </div>

              <StationGallery stations={content.stations} />

              <div className='mt-12 text-center'>
                <p className='mx-auto mb-6 max-w-2xl text-gray-600'>
                  {t('about.stations.description')}
                </p>
                <Button className='bg-red-600 hover:bg-red-700'>
                  {t('about.stations.buttonText')}{' '}
                  <MapPin className='ml-2 h-4 w-4' />
                </Button>
              </div>
            </div>
          </section>
        </Container>

        {/* Our Values */}
        <Container>
          <section className='py-16'>
            <div className='container mx-auto'>
              <div className='mb-12 flex flex-col items-center justify-center text-center'>
                <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
                  <Target className='h-6 w-6 text-red-600' />
                </div>
                <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
                  {t('about.values.title')}
                </h2>
                <p className='max-w-2xl text-gray-600'>
                  {t('about.values.subtitle')}
                </p>
              </div>

              <div
                data-aos='flip-up'
                data-aos-duration='600'
                className='grid gap-8 md:grid-cols-3'
              >
                {[0, 1, 2].map((index) => (
                  <Card
                    key={index}
                    className='overflow-hidden transition-all hover:shadow-lg'
                  >
                    <CardContent className='p-6'>
                      <div className='mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100'>
                        <Star className='h-6 w-6 text-red-600' />
                      </div>
                      <h3 className='mb-2 text-xl font-bold'>
                        {t(`about.values.items.${index}.title`)}
                      </h3>
                      <p className='text-gray-600'>
                        {t(`about.values.items.${index}.description`)}
                      </p>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>
          </section>
        </Container>

        {/* Our Team */}
        <Container>
          <section className='bg-gray-50 py-16'>
            <div className='container mx-auto px-2'>
              <div className='mb-12 flex flex-col items-center justify-center text-center'>
                <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-4 text-3xl font-bold tracking-tight sm:text-4xl'>
                  {t('about.team.title')}
                </h2>
                <p className='max-w-2xl text-gray-600'>
                  {t('about.team.subtitle')}
                </p>
              </div>

              <div
                data-aos='flip-down'
                data-aos-duration='600'
                className='grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4'
              >
                {content.team.map((member, index) => (
                  <div
                    key={index}
                    className='overflow-hidden rounded-lg bg-white shadow-md transition-transform hover:scale-105'
                  >
                    <div className='relative h-64 w-full'>
                      {member.photo && (
                        <Image
                          src={member.photo}
                          alt={t(`about.team.members.${index}.name`)}
                          fill
                          className='object-cover'
                        />
                      )}
                    </div>
                    <div className='p-4 text-center'>
                      <h3 className='text-lg font-bold'>{member.name}</h3>
                      <p className='text-gray-600'>{member.profession}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </section>
        </Container>

        {/* Testimonials */}
        <Container>
          <section className='py-16'>
            <div className='container mx-auto'>
              <div className='mb-12 flex flex-col items-center justify-center text-center'>
                <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
                  <Star className='h-6 w-6 text-red-600' />
                </div>
                <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
                  {t('about.testimonials.title')}
                </h2>
                <p className='max-w-2xl text-gray-600'>
                  {t('about.testimonials.subtitle')}
                </p>
              </div>

              <div
                data-aos='zoom-out-right'
                className='grid gap-8 md:grid-cols-3'
              >
                {content.reviews.map((review, index) => (
                  <Card
                    key={index}
                    className='overflow-hidden transition-all hover:shadow-lg'
                  >
                    <CardContent className='p-6'>
                      <div className='mb-4 flex'>
                        {Array(5)
                          .fill(0)
                          .map((_, i) => (
                            <Star
                              key={i}
                              className={`h-5 w-5 ${i < Number(review.rating) ? 'fill-yellow-400 text-yellow-400' : 'text-gray-300'}`}
                            />
                          ))}
                      </div>
                      <p className='mb-4 text-gray-600 italic'>
                        "{review.review}"
                      </p>
                      <p className='font-semibold'>{review.fullname}</p>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>
          </section>
        </Container>

        <CtaSection />
      </main>
    </div>
  );
}