'use client';

import { useState, useEffect } from 'react';
import { getTranslations, type Language } from '@/lib/languages';

export default function LangPage({ params }: { params: { lang: string } }) {
    const [glitchActive, setGlitchActive] = useState(false);
    const [isLoaded, setIsLoaded] = useState(false);

    const lang = params.lang as Language;
    const t = getTranslations(lang);

    useEffect(() => {
        setIsLoaded(true);
        const glitchInterval = setInterval(() => {
            setGlitchActive(true);
            setTimeout(() => setGlitchActive(false), 200);
        }, 3000);

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

    return (
        <div className="max-w-7xl mx-auto px-6 py-20">
            <div
                className={`transform transition-all duration-1000 ${isLoaded ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'}`}
            >
                <div className="text-center mb-16">
                    <h1
                        className={`text-6xl md:text-8xl font-bold mb-4 ${glitchActive ? 'glitch-active' : ''}`}
                    >
                        <span className="text-cyan-400">{t.hero.title}</span>
                        <br />
                        <span className="text-pink-500">{t.hero.subtitle}</span>
                    </h1>

                    <p className="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl mx-auto">
                        {t.hero.description}
                    </p>

                    <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
                        <button className="px-8 py-4 bg-gradient-to-r from-cyan-500 to-blue-500 text-black font-bold rounded-lg hover:from-cyan-400 hover:to-blue-400 transition-all duration-300 transform hover:scale-105 shadow-lg shadow-cyan-500/25">
                            {t.hero.cta}
                        </button>
                        <button className="px-8 py-4 border-2 border-pink-500 text-pink-400 font-bold rounded-lg hover:bg-pink-500 hover:text-black transition-all duration-300 transform hover:scale-105">
                            🎤 {t.hero.voice}
                        </button>
                    </div>
                </div>

                {/* Features Grid */}
                <div className="grid md:grid-cols-3 gap-8 mt-20">
                    {[
                        {
                            title: t.features.ddos,
                            icon: '🛡️',
                            color: 'from-red-500 to-pink-500',
                        },
                        {
                            title: t.features.realtime,
                            icon: '📊',
                            color: 'from-cyan-500 to-blue-500',
                        },
                        {
                            title: t.features.global,
                            icon: '🌐',
                            color: 'from-purple-500 to-indigo-500',
                        },
                    ].map((feature, index) => (
                        <div
                            key={index}
                            className="group relative p-6 border border-cyan-500/30 rounded-lg backdrop-blur-sm hover:border-cyan-400 transition-all duration-300 transform hover:scale-105"
                        >
                            <div
                                className={`absolute inset-0 bg-gradient-to-br ${feature.color} opacity-0 group-hover:opacity-10 rounded-lg transition-opacity duration-300`}
                            ></div>
                            <div className="relative z-10">
                                <div className="text-4xl mb-4">{feature.icon}</div>
                                <h3 className="text-xl font-bold text-cyan-400 mb-2">
                                    {feature.title}
                                </h3>
                                <div className="w-full h-2 bg-gray-800 rounded-full overflow-hidden">
                                    <div
                                        className={`h-full bg-gradient-to-r ${feature.color} animate-pulse`}
                                        style={{ width: `${85 + index * 5}%` }}
                                    ></div>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>

                {/* Terminal Simulation */}
                <div className="mt-20 max-w-4xl mx-auto">
                    <div className="bg-black/80 border border-green-500/50 rounded-lg p-6 font-mono text-sm">
                        <div className="flex items-center mb-4">
                            <div className="flex space-x-2">
                                <div className="w-3 h-3 bg-red-500 rounded-full"></div>
                                <div className="w-3 h-3 bg-yellow-500 rounded-full"></div>
                                <div className="w-3 h-3 bg-green-500 rounded-full"></div>
                            </div>
                            <span className="ml-4 text-gray-400">cyber-cloud-terminal</span>
                        </div>
                        <div className="space-y-2">
                            <div className="text-green-400">$ system status --global</div>
                            <div className="text-cyan-400">
                                ✓ Shanghai DC: CPU 23% | RAM 45% | Network 1.2Gbps
                            </div>
                            <div className="text-cyan-400">
                                ✓ Tokyo DC: CPU 18% | RAM 38% | Network 980Mbps
                            </div>
                            <div className="text-cyan-400">
                                ✓ Seoul DC: CPU 31% | RAM 52% | Network 1.5Gbps
                            </div>
                            <div className="text-green-400 animate-pulse">$ _</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}