'use client';

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

import { useLanguage } from '@/shared/language';
import { Button } from '@/shared/shadcn-ui/button';

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

  return (
    <section id='charity' className='py-16'>
      <div className='container mx-auto'>
        <div className='grid items-center gap-12 md:grid-cols-2'>
          <div
            className='relative order-2 h-[400px] overflow-hidden rounded-xl shadow-xl md:order-1'
            data-aos='zoom-out-up'
          >
            <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-3xl 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>
            <Button className='bg-red-600 hover:bg-red-700'>
              {t('home.charity.learnMore')}
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
};