'use client';

import {
  Calendar,
  CheckCircle,
  Heart,
  Landmark,
  MapPin,
  Users,
} from 'lucide-react';
import Image from 'next/image';

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

import { CtaSection } from '@/widgets/cta-section';

export const metadata = {
  title: 'Благотворительность | GasNetwork - Сеть заправок в Таджикистане',
  description:
    'Благотворительные проекты и инициативы GasNetwork. Мы помогаем обществу и заботимся о будущем.',
};

export function CharityPage() {
  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=500&width=1920&text=Благотворительный+фонд+GasNetwork'
              alt={t('charity.hero.imageAlt')}
              width={1920}
              height={500}
              className='object-cover'
              priority
            />
            <div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
              <Container>
                <div
                  data-aos='fade-down'
                  data-aos-duration='800'
                  className='container mx-auto'
                >
                  <div className='max-w-2xl space-y-6 text-white'>
                    <div className='inline-flex items-center justify-center rounded-full bg-red-600/20 p-2'>
                      <Heart className='size-6 text-red-500' />
                    </div>
                    <h1 className='text-3xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
                      {t('charity.hero.title')}
                    </h1>
                    <p className='text-lg text-gray-200 sm:text-xl'>
                      {t('charity.hero.subtitle')}
                    </p>
                  </div>
                </div>
              </Container>
            </div>
          </div>
        </section>

        {/* Mission Section */}
        <Container>
          <section className='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'>
                    <Heart className='h-6 w-6 text-red-600' />
                  </div>
                  <h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
                    {t('charity.mission.title')}
                  </h2>
                  <p className='mb-6 text-gray-600'>
                    {t('charity.mission.description1')}
                  </p>
                  <p className='mb-6 text-gray-600'>
                    {t('charity.mission.description2')}
                  </p>

                  <div className='space-y-4'>
                    {[0, 1, 2].map((index) => (
                      <div
                        data-aos='fade-right'
                        key={index}
                        className='flex items-start'
                      >
                        <CheckCircle className='mr-3 h-6 w-6 flex-shrink-0 text-red-600' />
                        <div>
                          <h3 className='text-lg font-medium'>
                            {t(`charity.mission.principles.${index}.title`)}
                          </h3>
                          <p className='text-gray-600'>
                            {t(
                              `charity.mission.principles.${index}.description`,
                            )}
                          </p>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
                <div
                  data-aos='fade-right'
                  className='relative h-[500px] overflow-hidden rounded-xl shadow-xl'
                >
                  <Image
                    src='/placeholder.svg?height=500&width=600&text=Наша+миссия'
                    alt={t('charity.mission.imageAlt')}
                    fill
                    className='object-cover'
                  />
                </div>
              </div>
            </div>
          </section>
        </Container>

        {/* Key Figures */}
        <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('charity.stats.title')}
              </h2>
              <p className='mx-auto max-w-2xl text-white/80'>
                {t('charity.stats.subtitle')}
              </p>
            </div>
            <div className='grid grid-cols-1 gap-8 text-center md:grid-cols-3'>
              {[0, 1, 2].map((index) => (
                <div key={index} className='space-y-2'>
                  <h3 className='text-4xl font-bold'>
                    {t(`charity.stats.items.${index}.value`)}
                  </h3>
                  <p className='text-white/80'>
                    {t(`charity.stats.items.${index}.label`)}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </section>

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

              <div className='grid gap-6 md:grid-cols-3'>
                {[
                  {
                    title: 'Благотворительный марафон',
                    description:
                      'Ежегодный благотворительный марафон в поддержку детей с особыми потребностями.',
                    date: '15 июня 2023',
                    location: 'Парк Рудаки, Душанбе',
                    image: '/placeholder.svg?height=200&width=300&text=Марафон',
                  },
                  {
                    title: 'Экологическая акция',
                    description:
                      'Очистка берегов реки Варзоб от мусора и посадка деревьев.',
                    date: '22 июля 2023',
                    location: 'Река Варзоб, Душанбе',
                    image:
                      '/placeholder.svg?height=200&width=300&text=Экологическая+акция',
                  },
                  {
                    title: 'Сбор школьных принадлежностей',
                    description:
                      'Сбор школьных принадлежностей для детей из малообеспеченных семей к новому учебному году.',
                    date: '1-20 августа 2023',
                    location: 'Все заправки GasNetwork',
                    image:
                      '/placeholder.svg?height=200&width=300&text=Школьные+принадлежности',
                  },
                ].map((event, index) => (
                  <Card
                    data-aos='zoom-in-up'
                    key={index}
                    className='flex flex-col justify-between overflow-hidden'
                  >
                    <div>
                      <div className='relative h-48 w-full'>
                        <Image
                          src={event.image || '/placeholder.svg'}
                          alt={event.title}
                          fill
                          className='object-cover'
                        />
                      </div>
                      <CardHeader>
                        <CardTitle className='text-xl lg:text-2xl'>
                          {event.title}
                        </CardTitle>
                      </CardHeader>
                      <CardContent className='space-y-4'>
                        <p className='text-gray-600'>{event.description}</p>
                        <div className='flex items-center text-sm text-gray-500'>
                          <Calendar className='mr-2 h-4 w-4' />
                          {event.date}
                        </div>
                        <div className='flex items-center text-sm text-gray-500'>
                          <MapPin className='mr-2 h-4 w-4' />
                          {event.location}
                        </div>
                      </CardContent>
                    </div>
                    <CardFooter>
                      <Button className='w-full bg-red-600 hover:bg-red-700'>
                        {t(`charity.events.button`)}
                      </Button>
                    </CardFooter>
                  </Card>
                ))}
              </div>
            </div>
          </section>
        </Container>

        {/* How to Help */}
        <Container>
          <section className='py-16'>
            <div className='container mx-auto'>
              <div className='mb-12 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('charity.help.title')}
                </h2>
                <p className='mx-auto max-w-2xl text-gray-600'>
                  {t('charity.help.subtitle')}
                </p>
              </div>

              <div className='grid gap-3 md:grid-cols-2 md:gap-6 lg:grid-cols-4'>
                {[
                  {
                    title: 'Сделать пожертвование',
                    description:
                      'Ваше пожертвование поможет нам реализовать больше проектов и помочь большему количеству людей.',
                    icon: <Landmark className='h-10 w-10 text-red-600' />,
                  },
                  {
                    title: 'Стать волонтером',
                    description:
                      'Присоединяйтесь к нашей команде волонтеров и помогайте нам в реализации благотворительных проектов.',
                    icon: <Users className='h-10 w-10 text-red-600' />,
                  },
                  {
                    title: 'Участвовать в мероприятиях',
                    description:
                      'Принимайте участие в наших благотворительных мероприятиях и акциях.',
                    icon: <Calendar className='h-10 w-10 text-red-600' />,
                  },
                  {
                    title: 'Распространять информацию',
                    description:
                      'Расскажите о нашем фонде и его деятельности своим друзьям и знакомым.',
                    icon: <Heart className='h-10 w-10 text-red-600' />,
                  },
                ].map((item, index) => (
                  <Card data-aos='zoom-in' key={index} className='text-center'>
                    <CardHeader>
                      <div className='mb-4 flex justify-center'>
                        {item.icon}
                      </div>
                      <CardTitle className='break-words hyphens-auto'>
                        {item.title}
                      </CardTitle>
                    </CardHeader>
                    <CardContent>
                      <p className='text-gray-600'>{item.description}</p>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>
          </section>
        </Container>
        <CtaSection />
      </main>
    </div>
  );
}