import Footer from '../components/Footer';
import { useLanguage } from '../context/LanguageContext';

function Home() {
    const { t } = useLanguage();

    return (
        <div className="relative min-h-screen bg-white">
            {/* Floating elements */}
            <div className="absolute inset-0 overflow-hidden pointer-events-none">
                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
            </div>

            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 pt-32">
                {/* Interactive cursor element */}
                <div className="absolute top-32 right-8 max-w-[300px] text-xs text-gray-500 group cursor-pointer hover:text-black transition-colors">
                    {t('home.description')}
                    <div className="h-0.5 w-0 bg-brand-blue transition-all duration-300 group-hover:w-full"></div>
                </div>

                {/* Main content */}
                <div>
                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 lg:text-[120px] relative">
                        <span className="relative inline-block">
                            {t('home.title')}
                            <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
                        </span>
                        <div className="flex items-center gap-2">
                            <span className="text-brand-blue group-hover:translate-x-2 transition-transform">→</span>
                            <span className="relative">
                                {t('home.subtitle')}
                                <span className="absolute -bottom-2 left-0 w-full h-0.5 bg-brand-pink transform scale-x-0 transition-transform group-hover:scale-x-100"></span>
                            </span>
                            <span className="text-brand-teal ml-2 animate-spin-slow">*</span>
                        </div>
                    </h1>

                    {/* Scrolling text with gradient fade */}
                    <div className="mt-16 overflow-hidden border-t border-b border-gray-200 py-3 relative">
                        <div className="absolute inset-y-0 left-0 w-20 bg-gradient-to-r from-white to-transparent z-10"></div>
                        <div className="absolute inset-y-0 right-0 w-20 bg-gradient-to-l from-white to-transparent z-10"></div>
                        <div className="flex gap-8 text-sm text-gray-400 animate-scroll">
                            <span className="hover:text-brand-purple transition-colors">{t('home.features.aiTrends')}</span>
                            <span>•</span>
                            <span className="hover:text-brand-pink transition-colors">{t('home.features.imageGen')}</span>
                            <span>•</span>
                            <span className="hover:text-brand-blue transition-colors">{t('home.features.analytics')}</span>
                            <span>•</span>
                            <span className="hover:text-brand-teal transition-colors">{t('home.features.brandGrowth')}</span>
                        </div>
                    </div>

                    {/* Video/Image section */}
                    <div className="mt-16">
                        <div className="bg-gradient-to-br from-brand-purple/5 to-brand-pink/5 rounded-3xl p-12 aspect-[16/9] relative group overflow-hidden">
                            {/* Video Background */}
                            <video
                                className="absolute inset-0 w-full h-full object-cover rounded-2xl opacity-90"
                                autoPlay
                                loop
                                muted
                                playsInline
                            >
                                <source src="/video.mp4" type="video/mp4" />
                            </video>

                            {/* Gradient Overlay */}
                            <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent rounded-2xl"></div>

                            {/* Interactive button */}
                            <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2">
                                <div className="bg-black text-white rounded-full px-6 py-3 text-sm cursor-pointer group-hover:px-8 transition-all duration-300 flex items-center gap-2 hover:bg-brand-purple">
                                    <span>{t('home.explore')}</span>
                                    <span className="transform group-hover:translate-x-1 transition-transform">→</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <Footer />
        </div>
    );
}

export default Home;
