import { useTranslation } from 'react-i18next';

const About = () => {
    const { t } = useTranslation();

    return (
        <section id="about" className="py-20 px-8">
            <div className="max-w-4xl mx-auto">
                <h2 className="text-4xl font-bold mb-8 text-accent">{t('about.title')}</h2>
                <div className="space-y-6 text-secondary/80">
                    <p className="text-lg leading-relaxed">
                        {t('about.description')}
                    </p>
                    <div className="grid md:grid-cols-2 gap-6 mt-8">
                        <div className="bg-secondary/5 p-6 rounded-lg border border-secondary/10">
                            <h3 className="text-xl font-semibold mb-3 text-accent">{t('about.experience_title')}</h3>
                            <p className="text-secondary/70">{t('about.experience_desc')}</p>
                        </div>
                        <div className="bg-secondary/5 p-6 rounded-lg border border-secondary/10">
                            <h3 className="text-xl font-semibold mb-3 text-accent">{t('about.approach_title')}</h3>
                            <p className="text-secondary/70">{t('about.approach_desc')}</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default About;
