import { useState, useEffect } from 'react';
import {
    Brain,
    Database,
    Zap,
    ArrowRight,
    CheckCircle,
    Menu,
    X,
    Globe,
    ChevronDown
} from 'lucide-react';
import BreakoutGame from '../components/BreakoutGame';
import Logo from '../components/Logo';
import EmailSubscribe from '../components/EmailSubscribe';
import { useTranslation } from 'react-i18next';

const NewHome = () => {
    const { t, i18n } = useTranslation();
    const [isMenuOpen, setIsMenuOpen] = useState(false);
    const [isLangDropdownOpen, setIsLangDropdownOpen] = useState(false);

    // Language config
    const languages = {
        zh: { label: '中文', code: 'zh' },
        en: { label: 'English', code: 'en' },
        ja: { label: '日本語', code: 'ja' }
    };

    const currentLang = languages[i18n.language.split('-')[0] as keyof typeof languages] || languages.zh;

    const changeLanguage = (lng: string) => {
        i18n.changeLanguage(lng);
        setIsLangDropdownOpen(false);
        setIsMenuOpen(false);
    };

    const [scrolled, setScrolled] = useState(false);

    // Handle scroll effect for navbar
    useEffect(() => {
        const handleScroll = () => {
            setScrolled(window.scrollY > 50);
        };
        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    const toggleMenu = () => setIsMenuOpen(!isMenuOpen);

    return (
        <div className="bg-[#0A192F] min-h-screen font-sans selection:bg-[#64FFDA] selection:text-[#0A192F] relative overflow-x-hidden">

            {/* Navigation */}
            <nav className={`fixed w-full z-50 transition-all duration-300 ${scrolled ? 'bg-[#0A192F]/90 backdrop-blur-md py-4 shadow-lg' : 'bg-transparent py-6'}`}>
                <div className="max-w-7xl mx-auto px-6 flex justify-between items-center">
                    <div className="flex items-center gap-2 cursor-pointer" onClick={() => window.location.href = '/'}>
                        <Logo />
                    </div>

                    {/* Desktop Menu */}
                    <div className="hidden md:flex items-center gap-8">
                        <a href="#home" className="text-slate-300 hover:text-[#64FFDA] transition-colors text-sm font-medium">{t('nav.home')}</a>
                        <a href="#services" className="text-slate-300 hover:text-[#64FFDA] transition-colors text-sm font-medium">{t('nav.services')}</a>
                        <a href="#about" className="text-slate-300 hover:text-[#64FFDA] transition-colors text-sm font-medium">{t('nav.story')}</a>
                        <a href="#contact" className="text-slate-300 hover:text-[#64FFDA] transition-colors text-sm font-medium">{t('nav.contact')}</a>

                        {/* Language Switcher - Dropdown */}
                        <div className="relative">
                            <button
                                onClick={() => setIsLangDropdownOpen(!isLangDropdownOpen)}
                                className="flex items-center gap-2 text-xs font-mono text-slate-300 hover:text-[#64FFDA] transition-colors border border-slate-700 rounded px-3 py-2"
                            >
                                <Globe size={14} />
                                <span>{currentLang.label}</span>
                                <ChevronDown size={12} className={`transition-transform duration-200 ${isLangDropdownOpen ? 'rotate-180' : ''}`} />
                            </button>

                            {/* Dropdown Menu */}
                            {isLangDropdownOpen && (
                                <div className="absolute top-full right-0 mt-2 w-32 bg-[#112240] border border-[#233554] rounded shadow-xl py-1 flex flex-col z-50">
                                    {Object.values(languages).map((lang) => (
                                        <button
                                            key={lang.code}
                                            onClick={() => changeLanguage(lang.code)}
                                            className={`w-full text-left px-4 py-2 text-xs font-mono hover:bg-[#233554] transition-colors ${i18n.language.startsWith(lang.code) ? 'text-[#64FFDA]' : 'text-slate-400'}`}
                                        >
                                            {lang.label}
                                        </button>
                                    ))}
                                </div>
                            )}
                        </div>

                        <button className="px-5 py-2 border border-[#64FFDA] text-[#64FFDA] rounded hover:bg-[#64FFDA]/10 transition-all text-sm font-medium">
                            {t('nav.book')}
                        </button>
                    </div>

                    {/* Mobile Menu Button */}
                    <div className="flex items-center gap-4 md:hidden">
                        <button className="text-white" onClick={toggleMenu}>
                            {isMenuOpen ? <X /> : <Menu />}
                        </button>
                    </div>
                </div>

                {/* Mobile Menu Overlay */}
                {
                    isMenuOpen && (
                        <div className="md:hidden absolute top-full left-0 w-full bg-[#112240] border-b border-[#233554] py-4 px-6 flex flex-col gap-4 shadow-xl">
                            <a href="#home" className="block text-slate-300 hover:text-[#64FFDA]" onClick={toggleMenu}>{t('nav.home')}</a>
                            <a href="#services" className="block text-slate-300 hover:text-[#64FFDA]" onClick={toggleMenu}>{t('nav.services')}</a>
                            <a href="#about" className="block text-slate-300 hover:text-[#64FFDA]" onClick={toggleMenu}>{t('nav.story')}</a>

                            {/* Mobile Language Selector (Simple Row for ease of use on mobile) */}
                            <div className="flex items-center gap-4 py-2 border-t border-[#233554] mt-2 pt-4">
                                <Globe size={16} className="text-slate-500" />
                                <div className="flex gap-4">
                                    {Object.values(languages).map((lang) => (
                                        <button
                                            key={lang.code}
                                            onClick={() => changeLanguage(lang.code)}
                                            className={`text-sm ${i18n.language.startsWith(lang.code) ? 'text-[#64FFDA] font-bold' : 'text-slate-400'}`}
                                        >
                                            {lang.label}
                                        </button>
                                    ))}
                                </div>
                            </div>

                            <button className="w-full text-left text-[#64FFDA] font-medium mt-2">{t('nav.book')}</button>
                        </div>
                    )
                }
            </nav>

            {/* Hero Section */}
            <section id="home" className="relative pt-32 pb-20 md:pt-48 md:pb-32 px-6 overflow-hidden">
                {/* Abstract Background Elements - Optimized removing heavy blur/pulse */}
                <div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-b from-[#112240] to-transparent opacity-50 -z-10 transform skew-x-12"></div>
                {/* Replaced dynamic heavy blur with a static lighter gradient radial */}
                <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-[radial-gradient(circle_at_center,rgba(100,255,218,0.08)_0%,transparent_70%)] -z-10 pointer-events-none"></div>

                <div className="max-w-7xl mx-auto grid md:grid-cols-2 gap-12 items-center">
                    <div className="space-y-6">
                        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#64FFDA]/10 border border-[#64FFDA]/30 text-[#64FFDA] text-sm font-medium">
                            <span className="w-2 h-2 rounded-full bg-[#64FFDA]"></span>
                            {t('hero.badge')}
                        </div>
                        <h1 className="text-4xl md:text-6xl font-bold text-white leading-tight">
                            {t('hero.title_prefix')}<span className="text-[#64FFDA]">{t('hero.title_highlight_1')}</span>{t('hero.title_middle')}<br />
                            {t('hero.title_suffix')}<span className="text-[#64FFDA]">{t('hero.title_highlight_2')}</span>
                        </h1>
                        <p className="text-lg text-slate-400 max-w-xl leading-relaxed">
                            {t('hero.subtitle')}
                        </p>
                        <div className="flex flex-col sm:flex-row gap-4 pt-4">
                            <button className="px-8 py-4 bg-[#64FFDA] text-[#0A192F] font-bold rounded hover:bg-[#64FFDA]/90 transition-all flex items-center justify-center gap-2">
                                {t('hero.btn_explore')} <ArrowRight size={20} />
                            </button>
                            <button className="px-8 py-4 border border-slate-600 text-white rounded hover:border-[#64FFDA] hover:text-[#64FFDA] transition-all">
                                {t('hero.btn_philosophy')}
                            </button>
                        </div>

                        <div className="pt-8 flex items-center gap-8 text-slate-500 text-sm">
                            <div className="flex items-center gap-2">
                                <CheckCircle size={16} className="text-[#64FFDA]" /> {t('hero.feature_1')}
                            </div>
                            <div className="flex items-center gap-2">
                                <CheckCircle size={16} className="text-[#64FFDA]" /> {t('hero.feature_2')}
                            </div>
                        </div>
                    </div>

                    {/* Right Side Visual (Abstract Tech Illustration) */}
                    <div className="relative hidden md:block">
                        <div className="relative z-10 bg-[#112240] p-6 rounded-lg border border-[#233554] shadow-2xl transform rotate-3 hover:rotate-0 transition-all duration-500">
                            <div className="flex items-center justify-between mb-4 border-b border-[#233554] pb-2">
                                <div className="flex gap-2">
                                    <div className="w-3 h-3 rounded-full bg-red-500"></div>
                                    <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
                                    <div className="w-3 h-3 rounded-full bg-green-500"></div>
                                </div>
                                <div className="text-xs text-slate-500 font-mono">CCDW_Intelligence_Core.py</div>
                            </div>
                            <div className="space-y-3 font-mono text-sm">
                                <div className="flex gap-2">
                                    <span className="text-purple-400">import</span>
                                    <span className="text-white">{t('code.import_1')}</span>
                                    <span className="text-purple-400">as</span>
                                    <span className="text-yellow-400">{t('code.as_1')}</span>
                                </div>
                                <div className="flex gap-2">
                                    <span className="text-purple-400">import</span>
                                    <span className="text-white">{t('code.import_2')}</span>
                                    <span className="text-purple-400">as</span>
                                    <span className="text-yellow-400">{t('code.as_2')}</span>
                                </div>
                                <div className="h-4"></div>
                                <div className="text-slate-400">{t('code.comment')}</div>
                                <div className="text-[#64FFDA]">
                                    def future_of_work(): <br />
                                    &nbsp;&nbsp; await {t('code.as_1')}.execute(all_boring_tasks) <br />
                                    &nbsp;&nbsp; return {t('code.as_2')}.enjoy(creativity = True)
                                </div>
                                <div className="mt-4 p-3 bg-[#0A192F] rounded border-l-2 border-[#64FFDA] text-xs text-slate-300">
                                    {t('code.efficiency')} <br />
                                    {t('code.freedom')} <br />
                                    {t('code.mode')}
                                </div>
                            </div>
                        </div>
                        {/* Background decorative box */}
                        <div className="absolute top-4 left-4 w-full h-full border-2 border-[#64FFDA]/20 rounded-lg -z-10"></div>
                    </div>
                </div>
            </section>

            {/* Services Section */}
            <section id="services" className="py-20 px-6 bg-[#112240]">
                <div className="max-w-7xl mx-auto">
                    <div className="text-center mb-16">
                        <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">{t('services.title')}</h2>
                        <div className="w-16 h-1 bg-[#64FFDA] mx-auto rounded-full mb-4"></div>
                        <p className="text-slate-400 max-w-2xl mx-auto">
                            {t('services.subtitle')}
                        </p>
                    </div>

                    <div className="grid md:grid-cols-3 gap-8">
                        {/* Service 1 */}
                        <div className="bg-[#0A192F] p-8 rounded-xl border border-[#233554] hover:border-[#64FFDA] transition-all group hover:-translate-y-2">
                            <div className="w-14 h-14 bg-[#112240] rounded-lg flex items-center justify-center mb-6 group-hover:bg-[#64FFDA]/10 transition-colors">
                                <Brain className="text-[#64FFDA] w-8 h-8" />
                            </div>
                            <h3 className="text-xl font-bold text-white mb-3">{t('services.card_1.title')}</h3>
                            <p className="text-slate-400 text-sm leading-relaxed mb-6">
                                {t('services.card_1.desc')}
                            </p>
                            <ul className="space-y-2 text-sm text-slate-500">
                                <li className="flex items-center gap-2"><CheckCircle size={14} className="text-[#64FFDA]" /> {t('services.card_1.list_1')}</li>
                                <li className="flex items-center gap-2"><CheckCircle size={14} className="text-[#64FFDA]" /> {t('services.card_1.list_2')}</li>
                            </ul>
                        </div>

                        {/* Service 2 */}
                        <div className="bg-[#0A192F] p-8 rounded-xl border border-[#233554] hover:border-[#64FFDA] transition-all group hover:-translate-y-2">
                            <div className="w-14 h-14 bg-[#112240] rounded-lg flex items-center justify-center mb-6 group-hover:bg-[#64FFDA]/10 transition-colors">
                                <Database className="text-[#64FFDA] w-8 h-8" />
                            </div>
                            <h3 className="text-xl font-bold text-white mb-3">{t('services.card_2.title')}</h3>
                            <p className="text-slate-400 text-sm leading-relaxed mb-6">
                                {t('services.card_2.desc')}
                            </p>
                            <ul className="space-y-2 text-sm text-slate-500">
                                <li className="flex items-center gap-2"><CheckCircle size={14} className="text-[#64FFDA]" /> {t('services.card_2.list_1')}</li>
                                <li className="flex items-center gap-2"><CheckCircle size={14} className="text-[#64FFDA]" /> {t('services.card_2.list_2')}</li>
                            </ul>
                        </div>

                        {/* Service 3 */}
                        <div className="bg-[#0A192F] p-8 rounded-xl border border-[#233554] hover:border-[#64FFDA] transition-all group hover:-translate-y-2">
                            <div className="w-14 h-14 bg-[#112240] rounded-lg flex items-center justify-center mb-6 group-hover:bg-[#64FFDA]/10 transition-colors">
                                <Zap className="text-[#64FFDA] w-8 h-8" />
                            </div>
                            <h3 className="text-xl font-bold text-white mb-3">{t('services.card_3.title')}</h3>
                            <p className="text-slate-400 text-sm leading-relaxed mb-6">
                                {t('services.card_3.desc')}
                            </p>
                            <ul className="space-y-2 text-sm text-slate-500">
                                <li className="flex items-center gap-2"><CheckCircle size={14} className="text-[#64FFDA]" /> {t('services.card_3.list_1')}</li>
                                <li className="flex items-center gap-2"><CheckCircle size={14} className="text-[#64FFDA]" /> {t('services.card_3.list_2')}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>

            {/* Brand Story Section */}
            <section id="about" className="py-20 px-6 max-w-7xl mx-auto">
                <div className="grid md:grid-cols-2 gap-16 items-center">
                    <div className="relative">
                        <div className="aspect-square rounded-2xl overflow-hidden bg-slate-800 relative group shadow-2xl border border-[#233554]">
                            <BreakoutGame />
                        </div>
                    </div>

                    <div>
                        <span className="text-[#64FFDA] font-mono text-sm tracking-wider">{t('story.label')}</span>
                        <h2 className="text-3xl md:text-4xl font-bold text-white mt-4 mb-6">
                            {t('story.title_prefix')}<br />
                            {t('story.title_suffix')}<span className="text-[#64FFDA]">{t('story.title_highlight')}</span>
                        </h2>
                        <div className="space-y-4 text-slate-400 leading-relaxed">
                            <p>
                                {t('story.p1')}
                            </p>
                            <p>
                                <strong>{t('story.p2')}</strong>
                            </p>
                            <p>
                                {t('story.p3')}
                            </p>
                            <p>
                                {t('story.p4_prefix')}
                                <br />
                                {t('story.p4_part1')}
                                <br />
                                {t('story.p4_part2')}
                            </p>
                        </div>

                        <div className="mt-8 grid grid-cols-2 gap-4">
                            <div className="p-4 bg-[#112240] rounded border-l-4 border-[#64FFDA]">
                                <h4 className="text-white font-bold">{t('story.box_1_title')}</h4>
                                <p className="text-xs text-slate-500 mt-1">{t('story.box_1_desc')}</p>
                            </div>
                            <div className="p-4 bg-[#112240] rounded border-l-4 border-slate-600">
                                <h4 className="text-white font-bold">{t('story.box_2_title')}</h4>
                                <p className="text-xs text-slate-500 mt-1">{t('story.box_2_desc')}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* CTA Section */}
            <section id="contact" className="py-20 px-6">
                <div className="max-w-4xl mx-auto bg-gradient-to-r from-[#112240] to-[#0A192F] border border-[#233554] rounded-2xl p-8 md:p-12 relative overflow-hidden">
                    <div className="absolute top-0 right-0 w-64 h-64 bg-[#64FFDA] rounded-full filter blur-[100px] opacity-5"></div>

                    <div className="grid md:grid-cols-2 gap-8 items-center">
                        {/* Left side - Text */}
                        <div className="text-center md:text-left">
                            <h2 className="text-3xl font-bold text-white mb-4">{t('cta.title')}</h2>
                            <p className="text-slate-400 mb-4">
                                {t('cta.desc')}
                            </p>
                            <div className="flex flex-wrap gap-4 justify-center md:justify-start">
                                <div className="flex items-center gap-2 text-sm text-slate-500">
                                    <CheckCircle size={14} className="text-[#64FFDA]" />
                                    免费咨询
                                </div>
                                <div className="flex items-center gap-2 text-sm text-slate-500">
                                    <CheckCircle size={14} className="text-[#64FFDA]" />
                                    快速响应
                                </div>
                            </div>
                        </div>

                        {/* Right side - Email Subscribe */}
                        <div>
                            <EmailSubscribe />
                        </div>
                    </div>
                </div>
            </section>

            {/* Footer */}
            {/* Footer */}
            <footer className="bg-[#020c1b] py-12 px-6 border-t border-[#233554]">
                <div className="max-w-7xl mx-auto">
                    <div className="flex flex-col md:flex-row justify-between items-start gap-8 mb-12">
                        <div className="flex flex-col items-center md:items-start">
                            <div className="mb-2">
                                <Logo />
                            </div>
                            <p className="text-slate-500 text-sm mt-4 max-w-xs leading-relaxed">
                                {t('footer.company')}<br />
                                {t('footer.slogan')}
                            </p>
                        </div>

                        <div className="flex gap-8 text-slate-400 text-sm font-medium">
                            <a href="#" className="hover:text-[#64FFDA] transition-colors">{t('footer.privacy')}</a>
                            <a href="#" className="hover:text-[#64FFDA] transition-colors">{t('footer.terms')}</a>
                            <a href="#" className="hover:text-[#64FFDA] transition-colors">{t('footer.join')}</a>
                        </div>
                    </div>

                    <div className="border-t border-[#112240] pt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-xs">
                        <span className="text-slate-600">&copy; 2026 {t('footer.company')} {t('footer.rights')}</span>

                        <a href="/old-home" className="flex items-center gap-2 text-slate-500 hover:text-[#64FFDA] transition-colors group">
                            <span>{t('footer.letter')}</span>
                            <ArrowRight size={12} className="group-hover:translate-x-1 transition-transform" />
                        </a>
                    </div>
                </div>
            </footer>
        </div>
    );
};

export default NewHome;