'use client';

import { ChevronRight, Heart } from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';

import { Container } from '@/shared/components/container';
import { useTextController } from '@/shared/language/hooks/use-text-controller';
import { Button } from '@/shared/shadcn-ui/button';

export const CharitySection = () => {
  const { t } = useTextController();

  return (
    <section id='charity'>
      <Container>
        <div className='grid items-center gap-12 md:grid-cols-2'>
          <div
            className='relative order-2 h-[400px] w-full overflow-hidden rounded-xl shadow-xl md:order-1'
            data-aos='zoom-in'
          >
            <Image
              src='/placeholder.svg?height=400&width=600'
              alt='Charity Foundation'
              fill
              className='object-cover'
            />
          </div>
          <div className='order-1 md:order-2'>
            <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-xl font-bold tracking-tight sm:text-4xl'>
              {t('home.charity.title')}
            </h2>
            <p className='mb-6 text-gray-600'>
              {t('home.charity.description')}
            </p>
            <p className='mb-6 text-gray-600'>{t('home.charity.directions')}</p>
            <ul className='mb-6 space-y-2'>
              <li className='flex items-center'>
                <ChevronRight className='mr-2 h-5 w-5 text-red-600' />
                <span>{t('home.charity.education')}</span>
              </li>
              <li className='flex items-center'>
                <ChevronRight className='mr-2 h-5 w-5 text-red-600' />
                <span>{t('home.charity.children')}</span>
              </li>
              <li className='flex items-center'>
                <ChevronRight className='mr-2 h-5 w-5 text-red-600' />
                <span>{t('home.charity.ecology')}</span>
              </li>
              <li className='flex items-center'>
                <ChevronRight className='mr-2 h-5 w-5 text-red-600' />
                <span>{t('home.charity.sports')}</span>
              </li>
            </ul>
            <Link href={'/charity'}>
              <Button>{t('home.charity.learnMore')}</Button>
            </Link>
          </div>
        </div>
      </Container>
    </section>
  );
};