import { useTranslation } from 'react-i18next';
import { Linkedin, Github } from 'lucide-react';

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

    const scrollToSection = (sectionId: string) => {
        const element = document.getElementById(sectionId);
        if (element) {
            element.scrollIntoView({ behavior: 'smooth' });
        }
    };

    return (
        <section id="home" className="relative min-h-screen text-white overflow-hidden">
            {/* Concentric Circles Background */}
            <div className="absolute inset-0 pointer-events-none flex items-center justify-center" style={{ zIndex: 2 }}>
                {[1, 2, 3].map((index) => (
                    <div
                        key={index}
                        className="absolute rounded-full border border-zinc-800/30"
                        style={{
                            width: `${index * 30}%`,
                            height: `${index * 30}%`,
                            opacity: 0.1,
                            transform: 'translateZ(0)'
                        }}
                    />
                ))}
            </div>

            {/* Social Links Bar */}
            <div className="absolute top-20 left-0 right-0 px-4 sm:px-8" style={{ zIndex: 40 }}>
                <div className="max-w-7xl mx-auto flex justify-between items-center">
                    <div className="flex gap-4">
                        <a
                            href="https://www.linkedin.com/in/damjan-savi%C4%87-720288127/"
                            target="_blank"
                            rel="noopener noreferrer"
                            className="group text-zinc-400 hover:text-white transition-colors"
                            aria-label="LinkedIn"
                        >
                            <Linkedin className="transform transition-transform group-hover:scale-110" size={20} />
                        </a>
                        <a
                            href="https://github.com/damjan1996"
                            target="_blank"
                            rel="noopener noreferrer"
                            className="group text-zinc-400 hover:text-white transition-colors"
                            aria-label="GitHub"
                        >
                            <Github className="transform transition-transform group-hover:scale-110" size={20} />
                        </a>
                    </div>
                    <a
                        href="mailto:info@damjan-savic.com"
                        className="text-sm text-zinc-400 hover:text-white transition-colors uppercase tracking-wider"
                    >
                        {t('pages.home.hero.cta')}
                    </a>
                </div>
            </div>

            {/* Main Content */}
            <div className="flex flex-col items-center justify-start min-h-screen px-4 pt-32 relative" style={{ zIndex: 30 }}>
                {/* Profile Image */}
                <div
                    className="w-56 h-56 sm:w-72 sm:h-72 mb-8 rounded-full overflow-hidden border-2 border-zinc-800"
                    style={{ transform: 'translateZ(0)' }}
                >
                    <picture>
                        <source
                            srcSet="/portrait-224.webp 224w, /portrait-448.webp 448w, /portrait-288.webp 288w, /portrait-576.webp 576w"
                            sizes="(max-width: 640px) 224px, 288px"
                            type="image/webp"
                        />
                        <source
                            srcSet="/portrait-224.jpg 224w, /portrait-288.jpg 288w"
                            sizes="(max-width: 640px) 224px, 288px"
                            type="image/jpeg"
                        />
                        <img
                            src="/portrait-288.jpg"
                            alt={t('pages.home.hero.image.alt')}
                            className="w-full h-full object-cover"
                            loading="eager"
                            fetchPriority="high"
                            width={288}
                            height={288}
                            decoding="sync"
                        />
                    </picture>
                </div>

                {/* Title and Name */}
                <p className="text-zinc-400 text-sm sm:text-base tracking-wider mb-2">
                    {t('pages.home.hero.title')}
                </p>
                <h1 className="text-4xl sm:text-5xl font-bold mb-3 flex items-center">
                    {t('pages.home.hero.name')}<span className="animate-pulse ml-1">|</span>
                </h1>
                <p className="text-zinc-300 text-sm sm:text-base max-w-xl text-center mb-2 px-4">
                    {t('pages.home.hero.description')}
                </p>
                <p className="text-zinc-400 text-xs sm:text-sm mb-8">
                    {t('pages.home.hero.currentRole')}
                </p>

                {/* Navigation */}
                <div className="flex flex-col sm:flex-row gap-4 sm:gap-8 text-white text-base sm:text-lg z-20">
                    <button
                        onClick={() => scrollToSection('experience')}
                        className="relative w-full sm:w-auto px-8 py-3 rounded-full uppercase cursor-pointer overflow-hidden group"
                    >
                        <span className="relative z-10">{t('pages.home.hero.navigation.experience')}</span>
                        <div className="absolute inset-0 bg-zinc-700/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-full" />
                    </button>
                    <button
                        onClick={() => scrollToSection('skills')}
                        className="relative w-full sm:w-auto px-8 py-3 rounded-full uppercase cursor-pointer overflow-hidden group"
                    >
                        <span className="relative z-10">{t('pages.home.hero.navigation.skills')}</span>
                        <div className="absolute inset-0 bg-zinc-700/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-full" />
                    </button>
                    <button
                        onClick={() => scrollToSection('projects')}
                        className="relative w-full sm:w-auto px-8 py-3 rounded-full uppercase cursor-pointer overflow-hidden group"
                    >
                        <span className="relative z-10">{t('pages.home.hero.navigation.projects')}</span>
                        <div className="absolute inset-0 bg-zinc-700/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-full" />
                    </button>
                    <button
                        onClick={() => scrollToSection('about')}
                        className="relative w-full sm:w-auto px-8 py-3 rounded-full uppercase cursor-pointer overflow-hidden group"
                    >
                        <span className="relative z-10">{t('pages.home.hero.navigation.about')}</span>
                        <div className="absolute inset-0 bg-zinc-700/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-full" />
                    </button>
                </div>
            </div>

            {/* Contact Button Bottom */}
            <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2" style={{ zIndex: 40 }}>
                <a
                    href="mailto:info@damjan-savic.com"
                    className="w-12 h-12 flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 transition-colors"
                    aria-label={t('pages.home.hero.social.getInTouch')}
                >
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
                        <path d="M0 3v18h24v-18h-24zm21.518 2l-9.518 7.713-9.518-7.713h19.036zm-19.518 14v-11.817l10 8.104 10-8.104v11.817h-20z"/>
                    </svg>
                </a>
            </div>
        </section>
    );
};

export default Hero;
