'use client';

import { useState, useEffect } from 'react';
import Navigation from '../../components/Navigation';
import Footer from '../../components/Footer';
import { useLanguage } from '../../hooks/useLanguage';

interface Particle {
    id: number;
    x: number;
    y: number;
    size: number;
    speed: number;
    opacity: number;
}

interface HomePageProps {
    params: {
        lang: string;
    };
}

export default function HomePage({ params }: HomePageProps) {
    const { currentLang, setCurrentLang, currentContent, createLocalizedPath } = useLanguage(
        params.lang,
    );
    const [isLoaded, setIsLoaded] = useState(false);
    const [particles, setParticles] = useState<Particle[]>([]);

    // Initialize particles for background effect
    useEffect(() => {
        const newParticles = Array.from({ length: 50 }, (_, i) => ({
            id: i,
            x: Math.random() * 100,
            y: Math.random() * 100,
            size: Math.random() * 3 + 1,
            speed: Math.random() * 0.5 + 0.1,
            opacity: Math.random() * 0.5 + 0.2,
        }));
        setParticles(newParticles);
        setIsLoaded(true);
    }, []);

    // Animate particles
    useEffect(() => {
        const interval = setInterval(() => {
            setParticles((prev) =>
                prev.map((particle) => ({
                    ...particle,
                    y: (particle.y + particle.speed) % 100,
                })),
            );
        }, 50);

        return () => clearInterval(interval);
    }, []);

    return (
        <>
            <div className="min-h-screen bg-gray-900 text-white relative overflow-hidden">
                {/* Animated particle background */}
                <div className="absolute inset-0 overflow-hidden">
                    {particles.map((particle) => (
                        <div
                            key={particle.id}
                            className="absolute w-1 h-1 bg-cyan-400 rounded-full animate-pulse"
                            style={{
                                left: `${particle.x}%`,
                                top: `${particle.y}%`,
                                width: `${particle.size}px`,
                                height: `${particle.size}px`,
                                opacity: particle.opacity,
                                boxShadow: `0 0 ${particle.size * 2}px rgba(34, 211, 238, 0.5)`,
                            }}
                        />
                    ))}
                </div>

                {/* Gradient overlay */}
                <div className="absolute inset-0 bg-gradient-to-br from-blue-900/20 via-purple-900/20 to-cyan-900/20" />

                {/* Navigation */}
                <Navigation
                    currentLang={currentLang}
                    setCurrentLang={setCurrentLang}
                    content={currentContent}
                    createLocalizedPath={createLocalizedPath}
                />

                {/* Hero Section */}
                <section className="relative z-10 px-6 py-20">
                    <div className="max-w-7xl mx-auto text-center">
                        <div
                            className={`transition-all duration-1000 ${isLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}
                        >
                            <h1 className="text-6xl md:text-8xl font-bold mb-6 bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-600 bg-clip-text text-transparent">
                                {currentContent.hero.title}
                            </h1>
                            <p className="text-2xl md:text-3xl text-cyan-300 mb-8 font-light">
                                {currentContent.hero.subtitle}
                            </p>
                            <p className="text-xl text-gray-300 mb-12 max-w-3xl mx-auto leading-relaxed">
                                {currentContent.hero.description}
                            </p>

                            <div className="flex flex-col sm:flex-row gap-6 justify-center">
                                <button className="px-8 py-4 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full text-lg font-semibold hover:from-cyan-400 hover:to-blue-500 transition-all duration-300 transform hover:scale-105 shadow-lg shadow-cyan-500/25">
                                    {currentContent.hero.cta}
                                </button>
                                <button className="px-8 py-4 border-2 border-cyan-400 rounded-full text-lg font-semibold hover:bg-cyan-400 hover:text-gray-900 transition-all duration-300 transform hover:scale-105">
                                    {currentContent.hero.learn}
                                </button>
                            </div>
                        </div>
                    </div>
                </section>

                {/* Services Section */}
                <section className="relative z-10 px-6 py-20">
                    <div className="max-w-7xl mx-auto">
                        <div className="text-center mb-16">
                            <h2 className="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
                                {currentContent.services.title}
                            </h2>
                            <p className="text-xl text-gray-300">
                                {currentContent.services.subtitle}
                            </p>
                        </div>

                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                            {currentContent.services.items.map((service, index) => (
                                <div
                                    key={index}
                                    className="group relative p-6 bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-cyan-500/20 hover:border-cyan-400/50 transition-all duration-300 transform hover:scale-105"
                                >
                                    {/* 3D Icon effect */}
                                    <div className="w-16 h-16 mb-6 mx-auto bg-gradient-to-br from-cyan-400 to-blue-600 rounded-xl flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
                                        <div className="w-8 h-8 bg-white/20 rounded-lg" />
                                    </div>

                                    <h3 className="text-xl font-bold mb-4 text-cyan-300 group-hover:text-cyan-200 transition-colors">
                                        {service.title}
                                    </h3>
                                    <p className="text-gray-400 group-hover:text-gray-300 transition-colors">
                                        {service.description}
                                    </p>

                                    {/* Glow effect */}
                                    <div className="absolute inset-0 bg-gradient-to-r from-cyan-500/10 to-blue-500/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                                </div>
                            ))}
                        </div>
                    </div>
                </section>

                {/* Decorative lines */}
                <div className="absolute top-1/2 left-0 w-full h-px bg-gradient-to-r from-transparent via-cyan-500/50 to-transparent" />

                <div className="absolute top-1/3 left-0 w-full h-px bg-gradient-to-r from-transparent via-blue-500/30 to-transparent" />

                <div className="absolute top-2/3 left-0 w-full h-px bg-gradient-to-r from-transparent via-purple-500/30 to-transparent" />

                {/* Footer */}
                <Footer content={currentContent} createLocalizedPath={createLocalizedPath} />
            </div>
        </>
    );
}