'use client';

import { useLanguage } from '@/context/LanguageContext';
import Card from '@/components/ui/Card';
import { 
  CalendarIcon, 
  ChatBubbleLeftRightIcon,
  AcademicCapIcon 
} from '@heroicons/react/24/outline';

export default function AboutSection() {
  const { t } = useLanguage();

  return (
    <section className="section-padding bg-secondary-gray">
      <div className="container-page">
        <div className="text-center max-w-3xl mx-auto">
          <h2 className="section-title">{t('home.about.title')}</h2>
          <p className="section-subtitle">
            {t('home.about.description')}
          </p>
        </div>
        
        <div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8">
          <Card className="p-8 text-center card-hover">
            <div className="w-16 h-16 mx-auto bg-primary-yellow/20 rounded-full flex items-center justify-center">
              <CalendarIcon className="w-8 h-8 text-primary-dark" />
            </div>
            <h3 className="mt-6 text-xl font-semibold">
              {t('home.about.feature1')}
            </h3>
            <p className="mt-3 text-gray-600">
              {t('home.about.feature1Desc')}
            </p>
          </Card>
          
          <Card className="p-8 text-center card-hover">
            <div className="w-16 h-16 mx-auto bg-primary-yellow/20 rounded-full flex items-center justify-center">
              <ChatBubbleLeftRightIcon className="w-8 h-8 text-primary-dark" />
            </div>
            <h3 className="mt-6 text-xl font-semibold">
              {t('home.about.feature2')}
            </h3>
            <p className="mt-3 text-gray-600">
              {t('home.about.feature2Desc')}
            </p>
          </Card>
          
          <Card className="p-8 text-center card-hover">
            <div className="w-16 h-16 mx-auto bg-primary-yellow/20 rounded-full flex items-center justify-center">
              <AcademicCapIcon className="w-8 h-8 text-primary-dark" />
            </div>
            <h3 className="mt-6 text-xl font-semibold">
              {t('home.about.feature3')}
            </h3>
            <p className="mt-3 text-gray-600">
              {t('home.about.feature3Desc')}
            </p>
          </Card>
        </div>
      </div>
    </section>
  );
}
