import { useTranslation } from 'react-i18next';

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

    return (
        <section className="min-h-screen flex items-center justify-center px-8 py-20">
            <div className="max-w-4xl mx-auto text-center">
                <h1 className="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-accent to-secondary bg-clip-text text-transparent">
                    Louis EMARD
                </h1>
                <h2 className="text-2xl md:text-3xl text-secondary/80 mb-8">
                    {t('hero.title')}
                </h2>
                <p className="text-lg md:text-xl text-secondary/60 mb-12 max-w-2xl mx-auto">
                    {t('hero.subtitle')}
                </p>
                <div className="flex gap-4 justify-center flex-wrap">
                    <a 
                        href="#contact" 
                        className="px-8 py-3 bg-accent text-white rounded-lg hover:bg-accent/90 transition-all hover:shadow-lg"
                    >
                        {t('hero.cta')}
                    </a>
                    <a 
                        href="#projects"
                        onClick={(e) => {
                            e.preventDefault();
                            document.querySelector('#experience')?.scrollIntoView({ behavior: 'smooth' });
                        }}
                        className="px-8 py-3 border-2 border-accent text-accent rounded-lg hover:bg-accent hover:text-white transition-all cursor-pointer"
                    >
                        {t('hero.projects')}
                    </a>
                </div>
            </div>
        </section>
    );
};

export default Hero;
