'use client';

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

import { CharityPageData } from '@/app/api-utlities/@types/pages';

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

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

export interface CharityPageProps {
  content: CharityPageData;
}

export function CharityPage({ content }: CharityPageProps) {
  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=Благотворительный+фонд+Ориё'
              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 data-aos='fade-down' data-aos-duration='800'>
                <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>
              </Container>
            </div>
          </div>
        </section>

        {/* Mission Section */}
        <Container>
          <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>
        </Container>

        {/* Key Figures */}
        <Container className='bg-red-600 text-white'>
          <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>
        </Container>

        {/* Upcoming Events */}
        <Container className='bg-gray-50'>
          <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'>
            {content.charities.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.name}
                      fill
                      className='object-cover'
                    />
                  </div>
                  <CardHeader>
                    <CardTitle className='text-xl lg:text-2xl'>
                      {event.name}
                    </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>
        </Container>

        {/* How to Help */}
        <Container>
          <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>
        </Container>
        <CtaSection />
      </main>
    </div>
  );
}