'use client';

import { useState, useEffect, useRef } from 'react';
import Image from 'next/image';
import { motion, AnimatePresence } from 'framer-motion';
import {
  Navbar as HeroNavbar,
  NavbarBrand,
  NavbarContent,
  NavbarItem,
  Button,
  Dropdown,
  DropdownTrigger,
  DropdownMenu,
  DropdownItem
} from '@heroui/react';
import { ArrowRight, ChevronDown, Menu, X, Sun, Moon, Globe, Layers, Rocket, ArrowLeftRight, Coins, LayoutDashboard, Radio, BookOpen, ShieldCheck, GraduationCap, MessageCircle, Headphones, Users, Briefcase, Mail, Newspaper, Rainbow } from 'lucide-react';
import ProductMenu from './ProductMenu';
import ResourceMenu from './ResourceMenu';
import { useLanguage } from '@/contexts/LanguageContext';
import { useTheme } from '@/contexts/ThemeContext';

export default function Navbar() {
  const [scrolled, setScrolled] = useState(false);
  const { language, setLanguage, t } = useLanguage();
  const { theme, toggleTheme } = useTheme();
  const [showProductMenu, setShowProductMenu] = useState(false);
  const [showResourceMenu, setShowResourceMenu] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [mobileProductOpen, setMobileProductOpen] = useState(false);
  const [mobileResourceOpen, setMobileResourceOpen] = useState(false);
  const [navBottom, setNavBottom] = useState(64);
  const navRef = useRef<HTMLElement | null>(null);

  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 50);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  useEffect(() => {
    if (mobileMenuOpen) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }
    return () => { document.body.style.overflow = ''; };
  }, [mobileMenuOpen]);

  useEffect(() => {
    if (!showProductMenu && !showResourceMenu) return;

    const handleClickOutside = (e: MouseEvent) => {
      const target = e.target as Element;
      if (showProductMenu && !target.closest('.product-menu-container')) {
        setShowProductMenu(false);
      }
      if (showResourceMenu && !target.closest('.resource-menu-container')) {
        setShowResourceMenu(false);
      }
    };

    // 延迟注册，避免当前 click 事件冒泡立即触发
    const timer = requestAnimationFrame(() => {
      document.addEventListener('click', handleClickOutside);
    });
    return () => {
      cancelAnimationFrame(timer);
      document.removeEventListener('click', handleClickOutside);
    };
  }, [showProductMenu, showResourceMenu]);

  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth >= 1024) {
        setMobileMenuOpen(false);
        setMobileProductOpen(false);
        setMobileResourceOpen(false);
      }
    };
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  useEffect(() => {
    const measure = () => {
      const el = navRef.current ?? (document.querySelector('header, nav') as HTMLElement);
      if (el) {
        navRef.current = el;
        const h = Math.ceil(el.getBoundingClientRect().height);
        setNavBottom(h);
        document.documentElement.style.setProperty('--navbar-height', `${h}px`);
      }
    };
    measure();
    const ro = new ResizeObserver(measure);
    const el = document.querySelector('header, nav') as HTMLElement;
    if (el) ro.observe(el);
    return () => ro.disconnect();
  }, []);

  const isDark = theme === 'dark';

  return (
    <>
      <HeroNavbar
        maxWidth="full"
        position="static"
        style={{
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          zIndex: 50,
          backgroundColor: isDark
            ? scrolled ? 'rgba(10, 10, 10, 0.7)' : 'rgba(10, 10, 10, 0.9)'
            : scrolled ? 'rgba(255, 255, 255, 0.7)' : 'rgba(255, 255, 255, 0.9)',
          backdropFilter: 'blur(50px)',
          borderTop: 'none',
          borderLeft: 'none',
          borderRight: 'none',
          borderBottom: isDark
            ? scrolled ? '1px solid #27272a' : '1px solid #18181b'
            : '1px solid #f3f4f6',
          boxShadow: 'none',
          transition: 'background-color 0.3s ease-out, border-color 0.3s ease-out'
        }}
        classNames={{
          wrapper: "px-4 lg:px-10 2xl:px-20 3xl:px-32 py-5"
        }}
      >
        {/* Logo */}
        <NavbarBrand>
          <motion.div
            initial={{ y: '-3rem', opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            transition={{ duration: 1, ease: 'easeOut' }}
          >
            <Image
              src="/logo0.svg"
              alt="Logo"
              width={160}
              height={40}
              priority
              style={{
                filter: isDark ? 'invert(1) brightness(1.2)' : 'none',
                transition: 'filter 0.3s ease-out'
              }}
            />
          </motion.div>
        </NavbarBrand>

        {/* Center Menu */}
        <NavbarContent className="hidden lg:flex gap-6" justify="center">
          {/* Product */}
          <NavbarItem className="product-menu-container">
            <Button
              variant="light"
              className="font-bold text-sm select-none bg-transparent"
              style={{ color: showProductMenu ? '#059669' : (isDark ? '#a1a1aa' : '#4b5563') }}
              endContent={
                <ChevronDown
                  size={14}
                  color={showProductMenu ? '#059669' : (isDark ? '#a1a1aa' : '#4b5563')}
                  style={{
                    transform: showProductMenu ? 'rotate(180deg)' : 'rotate(0deg)',
                    transition: 'transform 0.2s ease'
                  }}
                />
              }
              onPress={() => {
                setShowProductMenu(!showProductMenu);
                setShowResourceMenu(false);
              }}
            >
              {t('nav.product')}
            </Button>
          </NavbarItem>

          {/* Ecosystem */}
          <NavbarItem>
            <Button
              variant="light"
              className="font-bold text-sm select-none bg-transparent"
              style={{ color: isDark ? '#a1a1aa' : '#4b5563' }}
            >
              {t('nav.ecosystem')}
            </Button>
          </NavbarItem>

          {/* Resource */}
          <NavbarItem className="resource-menu-container">
            <Button
              variant="light"
              className="font-bold text-sm select-none bg-transparent"
              style={{ color: showResourceMenu ? '#059669' : (isDark ? '#a1a1aa' : '#4b5563') }}
              endContent={
                <ChevronDown
                  size={14}
                  color={showResourceMenu ? '#059669' : (isDark ? '#a1a1aa' : '#4b5563')}
                  style={{
                    transform: showResourceMenu ? 'rotate(180deg)' : 'rotate(0deg)',
                    transition: 'transform 0.2s ease'
                  }}
                />
              }
              onPress={() => {
                setShowResourceMenu(!showResourceMenu);
                setShowProductMenu(false);
              }}
            >
              {t('nav.resource')}
            </Button>
          </NavbarItem>
        </NavbarContent>

        {/* Right Content */}
        <NavbarContent justify="end" className="gap-2 lg:gap-4">
          {/* Launch App Button */}
          <NavbarItem>
            <motion.div
              initial={{ y: '-3rem', opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              transition={{ duration: 1, ease: 'easeOut', delay: 0.2 }}
            >
              <Button
                className="font-bold text-sm hover:scale-105 transition-transform duration-200 ease-out"
                style={{
                  backgroundColor: isDark ? '#ffffff' : '#111827',
                  color: isDark ? '#0a0a0a' : '#fafafa',
                  borderRadius: '9999px',
                  padding: '10px 20px',
                  transition: 'background-color 0.3s ease-out, color 0.3s ease-out, transform 0.2s ease-out',
                  boxShadow: '0px 4px 6px -4px rgba(229,231,235,1), 0px 10px 15px -3px rgba(229,231,235,1)'
                }}
                endContent={
                  <ArrowRight size={16} color={isDark ? '#0a0a0a' : '#ffffff'} />
                }
                onPress={() => window.open('http://152.69.205.186:3010/market', '_blank')}
              >
                {t('nav.launchApp')}
              </Button>
            </motion.div>
          </NavbarItem>

          {/* Theme Toggle - desktop only */}
          <NavbarItem className="hidden lg:flex">
            <Button
              isIconOnly
              variant="light"
              onPress={toggleTheme}
              className="transition-colors"
            >
              <div className="relative w-5 h-5">
                <AnimatePresence mode="wait" initial={false}>
                  {isDark ? (
                    <motion.div key="moon" className="absolute inset-0 flex items-center justify-center"
                      initial={{ opacity: 0, rotate: -90, scale: 0.5 }}
                      animate={{ opacity: 1, rotate: 0, scale: 1 }}
                      exit={{ opacity: 0, rotate: 90, scale: 0.5 }}
                      transition={{ duration: 0.3 }}
                    >
                      <Moon size={18} color="#a1a1aa" />
                    </motion.div>
                  ) : (
                    <motion.div key="sun" className="absolute inset-0 flex items-center justify-center"
                      initial={{ opacity: 0, rotate: 90, scale: 0.5 }}
                      animate={{ opacity: 1, rotate: 0, scale: 1 }}
                      exit={{ opacity: 0, rotate: -90, scale: 0.5 }}
                      transition={{ duration: 0.3 }}
                    >
                      <Sun size={18} color="#4B5563" />
                    </motion.div>
                  )}
                </AnimatePresence>
              </div>
            </Button>
          </NavbarItem>

          {/* Language Selector - desktop only */}
          <NavbarItem className="hidden lg:flex">
            <Dropdown
              classNames={{
                content: 'bg-bg-surface border-none shadow-lg min-w-[120px] w-[120px]'
              }}
            >
              <DropdownTrigger>
                <Button
                  variant="light"
                  className="font-bold text-sm text-text-secondary"
                  startContent={<Globe size={16} color={isDark ? '#a1a1aa' : '#4B5563'} />}
                  endContent={<ChevronDown size={12} color={isDark ? '#a1a1aa' : '#4B5563'} />}
                >
                  {language === 'zh' ? '中文' : 'EN'}
                </Button>
              </DropdownTrigger>
              <DropdownMenu
                aria-label="Language selection"
                onAction={(key) => setLanguage(key as 'zh' | 'en')}
                selectedKeys={new Set([language])}
                classNames={{
                  list: "py-2"
                }}
                itemClasses={{
                  base: "py-3 flex items-center justify-center"
                }}
              >
                <DropdownItem
                  key="zh"
                  className="text-text-primary hover:bg-bg-elevated text-center"
                >
                  中文
                </DropdownItem>
                <DropdownItem
                  key="en"
                  className="text-text-primary hover:bg-bg-elevated text-center"
                >
                  English
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </NavbarItem>
          {/* Hamburger - mobile only */}
          <NavbarItem className="lg:hidden">
            <Button
              isIconOnly
              variant="light"
              onPress={() => setMobileMenuOpen(!mobileMenuOpen)}
              aria-label="Toggle menu"
            >
              <AnimatePresence mode="wait" initial={false}>
                {mobileMenuOpen ? (
                  <motion.div
                    key="close"
                    initial={{ opacity: 0, rotate: -90 }}
                    animate={{ opacity: 1, rotate: 0 }}
                    exit={{ opacity: 0, rotate: 90 }}
                    transition={{ duration: 0.15 }}
                  >
                    <X size={20} color={isDark ? '#a1a1aa' : '#4b5563'} />
                  </motion.div>
                ) : (
                  <motion.div
                    key="menu"
                    initial={{ opacity: 0, rotate: 90 }}
                    animate={{ opacity: 1, rotate: 0 }}
                    exit={{ opacity: 0, rotate: -90 }}
                    transition={{ duration: 0.15 }}
                  >
                    <Menu size={20} color={isDark ? '#a1a1aa' : '#4b5563'} />
                  </motion.div>
                )}
              </AnimatePresence>
            </Button>
          </NavbarItem>
        </NavbarContent>
      </HeroNavbar>

      {/* Mobile Menu */}
      <AnimatePresence>
        {mobileMenuOpen && (
          <>
            {/* Backdrop — click outside to close */}
            <motion.div
              key="mobile-backdrop"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.15 }}
              className="lg:hidden fixed inset-0 z-[45]"
              onClick={() => {
                setMobileMenuOpen(false);
                setMobileProductOpen(false);
                setMobileResourceOpen(false);
              }}
            />
          <motion.div
            initial={{ opacity: 0, y: -8 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -8 }}
            transition={{ duration: 0.2, ease: 'easeOut' }}
            className="lg:hidden fixed left-0 right-0 z-[50]"
            style={{
              top: navBottom,
              backgroundColor: isDark ? 'rgba(10, 10, 10, 0.97)' : 'rgba(255, 255, 255, 0.97)',
              backdropFilter: 'blur(50px)',
              outline: 'none',
              border: 'none',
              borderBottom: isDark ? '1px solid #27272a' : '1px solid #e5e7eb',
              maxHeight: `calc(100vh - ${navBottom}px)`,
              overflowY: 'auto'
            }}
          >
            <div className="flex flex-col px-4 py-3">

              {/* Product */}
              <button
                className="flex items-center justify-between w-full px-3 py-4 text-sm font-bold rounded-lg transition-colors"
                style={{ color: mobileProductOpen ? '#059669' : (isDark ? '#a1a1aa' : '#4b5563') }}
                onClick={() => {
                  setMobileProductOpen(!mobileProductOpen);
                  setMobileResourceOpen(false);
                }}
              >
                {t('nav.product')}
                <ChevronDown
                  size={14}
                  color={mobileProductOpen ? '#059669' : (isDark ? '#a1a1aa' : '#4b5563')}
                  style={{ transform: mobileProductOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s ease' }}
                />
              </button>

              {/* Product Accordion */}
              <AnimatePresence>
                {mobileProductOpen && (
                  <motion.div
                    key="product-accordion"
                    initial={{ height: 0, opacity: 0 }}
                    animate={{ height: 'auto', opacity: 1 }}
                    exit={{ height: 0, opacity: 0 }}
                    transition={{ duration: 0.2, ease: 'easeOut' }}
                    style={{ overflow: 'hidden' }}
                  >
                    <div className="px-2 pb-3 flex flex-col gap-4">
                      {/* Core Yield Assets */}
                      <div>
                        <span className={`text-[10px] font-bold uppercase tracking-[1.2px] font-domine px-1 ${isDark ? 'text-[#52525b]' : 'text-[#9CA3AF]'}`}>
                          {language === 'zh' ? '核心收益资产' : 'Core Yield Assets'}
                        </span>
                        <div className="flex flex-col gap-2 mt-2">
                          <div className={`flex items-center gap-3 p-3 rounded-xl cursor-pointer ${isDark ? 'bg-[#27272a]' : 'bg-[#F9FAFB]'}`}>
                            <div className="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0" style={{ background: isDark ? '#ffffff' : '#000000' }}>
                              <Rainbow size={16} color={isDark ? '#000000' : '#ffffff'} />
                            </div>
                            <div className="flex items-center gap-2">
                              <span className={`text-sm font-bold font-domine ${isDark ? 'text-[#fafafa]' : 'text-[#111827]'}`}>AX-Fund</span>
                              <div className="px-1.5 py-0.5 rounded flex-shrink-0" style={{ background: '#D1FAE5' }}>
                                <span className="text-[9px] font-bold uppercase font-domine" style={{ color: '#047857' }}>
                                  {language === 'zh' ? '最高22% APY' : 'up to 22% APY'}
                                </span>
                              </div>
                            </div>
                          </div>
                          <div className={`flex items-center gap-3 p-3 rounded-xl cursor-pointer ${isDark ? 'bg-[#27272a]' : 'bg-[#F9FAFB]'}`}>
                            <div className="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0" style={{ background: isDark ? '#27272a' : '#ffffff', outline: `1px solid ${isDark ? '#3f3f46' : '#E5E7EB'}`, outlineOffset: '-1px' }}>
                              <Layers size={16} color={isDark ? '#d1d5db' : '#111827'} />
                            </div>
                            <div className="flex items-center gap-2">
                              <span className={`text-sm font-bold font-domine ${isDark ? 'text-[#fafafa]' : 'text-[#111827]'}`}>AX-Pool</span>
                              <div className="px-1.5 py-0.5 rounded flex-shrink-0" style={{ background: isDark ? '#3f3f46' : '#E5E7EB' }}>
                                <span className={`text-[9px] font-bold uppercase font-domine ${isDark ? 'text-[#a1a1aa]' : 'text-[#4B5563]'}`}>
                                  {language === 'zh' ? '多元化' : 'Diversified'}
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      {/* Platforms & Protocols */}
                      <div>
                        <span className={`text-[10px] font-bold uppercase tracking-[1.2px] font-domine px-1 ${isDark ? 'text-[#52525b]' : 'text-[#9CA3AF]'}`}>
                          {language === 'zh' ? '平台与协议' : 'Platforms & Protocols'}
                        </span>
                        <div className="flex flex-col gap-0.5 mt-2">
                          {[
                            { Icon: Rocket, titleZh: 'Launchpad', titleEn: 'Launchpad' },
                            { Icon: ArrowLeftRight, titleZh: 'DeFi市场', titleEn: 'DeFi Market' },
                            { Icon: Coins, titleZh: 'Token Factory', titleEn: 'Token Factory' },
                          ].map(({ Icon, titleZh, titleEn }) => (
                            <div key={titleEn} className={`flex items-center gap-3 px-2 py-2.5 rounded-lg cursor-pointer transition-colors ${isDark ? 'hover:bg-[#27272a]' : 'hover:bg-[#F9FAFB]'}`}>
                              <div className={`w-7 h-7 rounded-lg flex items-center justify-center flex-shrink-0 ${isDark ? 'bg-[#27272a] outline outline-1 outline-[#3f3f46]' : 'bg-[#F9FAFB] outline outline-1 outline-[#F3F4F6]'}`} style={{ outlineOffset: '-1px' }}>
                                <Icon size={14} color={isDark ? '#d1d5db' : '#111827'} />
                              </div>
                              <span className={`text-sm font-bold font-domine ${isDark ? 'text-[#fafafa]' : 'text-black'}`}>
                                {language === 'zh' ? titleZh : titleEn}
                              </span>
                            </div>
                          ))}
                        </div>
                      </div>

                      {/* Infrastructure */}
                      <div>
                        <span className={`text-[10px] font-bold uppercase tracking-[1.2px] font-domine px-1 ${isDark ? 'text-[#52525b]' : 'text-[#9CA3AF]'}`}>
                          {language === 'zh' ? '基础设施' : 'Infrastructure'}
                        </span>
                        <div className="flex flex-col gap-0.5 mt-2">
                          {[
                            { Icon: LayoutDashboard, titleZh: 'Asset Cockpit', titleEn: 'Asset Cockpit' },
                            { Icon: Radio, titleZh: 'Oracle Network', titleEn: 'Oracle Network' },
                          ].map(({ Icon, titleZh, titleEn }) => (
                            <div key={titleEn} className={`flex items-center gap-3 px-2 py-2.5 rounded-lg cursor-pointer transition-colors ${isDark ? 'hover:bg-[#27272a]' : 'hover:bg-[#F9FAFB]'}`}>
                              <div className={`w-7 h-7 rounded-lg flex items-center justify-center flex-shrink-0 ${isDark ? 'bg-[#27272a] outline outline-1 outline-[#3f3f46]' : 'bg-[#F9FAFB] outline outline-1 outline-[#F3F4F6]'}`} style={{ outlineOffset: '-1px' }}>
                                <Icon size={14} color={isDark ? '#d1d5db' : '#111827'} />
                              </div>
                              <span className={`text-sm font-bold font-domine ${isDark ? 'text-[#fafafa]' : 'text-black'}`}>
                                {language === 'zh' ? titleZh : titleEn}
                              </span>
                            </div>
                          ))}
                        </div>
                      </div>

                      {/* Bottom */}
                      <div className={`pt-2 border-t flex items-center justify-between ${isDark ? 'border-[#27272a]' : 'border-[#F3F4F6]'}`}>
                        <span className="text-xs font-domine text-[#9CA3AF]">
                          {language === 'zh' ? '最新审计：' : 'Latest Audit: '}
                          <span className={`font-medium ${isDark ? 'text-[#fafafa]' : 'text-black'}`}>Oct 2025 (Certik)</span>
                        </span>
                        <span className="text-xs font-bold uppercase font-domine cursor-pointer hover:opacity-70 tracking-[0.3px]" style={{ color: '#059669' }}>
                          {language === 'zh' ? '查看文档 →' : 'View Docs →'}
                        </span>
                      </div>
                    </div>
                  </motion.div>
                )}
              </AnimatePresence>

              <div style={{ height: '1px', backgroundColor: isDark ? '#27272a' : '#f3f4f6' }} />

              {/* Ecosystem */}
              <button
                className="flex items-center w-full px-3 py-4 text-sm font-bold rounded-lg transition-colors"
                style={{ color: isDark ? '#a1a1aa' : '#4b5563' }}
                onClick={() => setMobileMenuOpen(false)}
              >
                {t('nav.ecosystem')}
              </button>
              <div style={{ height: '1px', backgroundColor: isDark ? '#27272a' : '#f3f4f6' }} />

              {/* Resource */}
              <button
                className="flex items-center justify-between w-full px-3 py-4 text-sm font-bold rounded-lg transition-colors"
                style={{ color: mobileResourceOpen ? '#059669' : (isDark ? '#a1a1aa' : '#4b5563') }}
                onClick={() => {
                  setMobileResourceOpen(!mobileResourceOpen);
                  setMobileProductOpen(false);
                }}
              >
                {t('nav.resource')}
                <ChevronDown
                  size={14}
                  color={mobileResourceOpen ? '#059669' : (isDark ? '#a1a1aa' : '#4b5563')}
                  style={{ transform: mobileResourceOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s ease' }}
                />
              </button>

              {/* Resource Accordion */}
              <AnimatePresence>
                {mobileResourceOpen && (
                  <motion.div
                    key="resource-accordion"
                    initial={{ height: 0, opacity: 0 }}
                    animate={{ height: 'auto', opacity: 1 }}
                    exit={{ height: 0, opacity: 0 }}
                    transition={{ duration: 0.2, ease: 'easeOut' }}
                    style={{ overflow: 'hidden' }}
                  >
                    <div className="px-2 pb-3 flex flex-col gap-4">
                      {/* Documentation & Learning */}
                      <div>
                        <span className={`text-[10px] font-bold uppercase tracking-[1.2px] font-domine px-1 ${isDark ? 'text-[#52525b]' : 'text-[#9CA3AF]'}`}>
                          {language === 'zh' ? '文档与学习' : 'Documentation & Learning'}
                        </span>
                        <div className="flex flex-col gap-2 mt-2">
                          <div className={`flex items-center gap-3 p-3 rounded-xl cursor-pointer ${isDark ? 'bg-[#27272a]' : 'bg-[#F9FAFB]'}`}>
                            <div className="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0" style={{ background: isDark ? '#ffffff' : '#000000' }}>
                              <BookOpen size={16} color={isDark ? '#000000' : '#ffffff'} />
                            </div>
                            <div className="flex items-center gap-2">
                              <span className={`text-sm font-bold font-domine ${isDark ? 'text-[#fafafa]' : 'text-[#111827]'}`}>
                                {language === 'zh' ? '文档' : 'Docs'}
                              </span>
                              <div className="px-1.5 py-0.5 rounded flex-shrink-0" style={{ background: '#D1FAE5' }}>
                                <span className="text-[9px] font-bold uppercase font-domine" style={{ color: '#047857' }}>
                                  {language === 'zh' ? '已更新' : 'Updated'}
                                </span>
                              </div>
                            </div>
                          </div>
                          <div className={`flex items-center gap-3 p-3 rounded-xl cursor-pointer ${isDark ? 'bg-[#27272a]' : 'bg-[#F9FAFB]'}`}>
                            <div className="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0" style={{ background: isDark ? '#052e16' : '#ffffff', outline: '2px solid #10B981', outlineOffset: '-2px' }}>
                              <ShieldCheck size={16} color="#059669" />
                            </div>
                            <span className={`text-sm font-bold font-domine ${isDark ? 'text-[#fafafa]' : 'text-[#111827]'}`}>
                              {language === 'zh' ? '信任与安全' : 'Trust & Security'}
                            </span>
                          </div>
                        </div>
                      </div>

                      {/* Help & Support */}
                      <div>
                        <span className={`text-[10px] font-bold uppercase tracking-[1.2px] font-domine px-1 ${isDark ? 'text-[#52525b]' : 'text-[#9CA3AF]'}`}>
                          {language === 'zh' ? '帮助与支持' : 'Help & Support'}
                        </span>
                        <div className="flex flex-col gap-0.5 mt-2">
                          {[
                            { Icon: GraduationCap, titleZh: '学习中心', titleEn: 'Learning Center' },
                            { Icon: MessageCircle, titleZh: '社区论坛', titleEn: 'Community Forum' },
                            { Icon: Headphones, titleZh: '联系支持', titleEn: 'Contact Support' },
                          ].map(({ Icon, titleZh, titleEn }) => (
                            <div key={titleEn} className={`flex items-center gap-3 px-2 py-2.5 rounded-lg cursor-pointer transition-colors ${isDark ? 'hover:bg-[#27272a]' : 'hover:bg-[#F9FAFB]'}`}>
                              <div className={`w-7 h-7 rounded-lg flex items-center justify-center flex-shrink-0 ${isDark ? 'bg-[#27272a] outline outline-1 outline-[#3f3f46]' : 'bg-[#F9FAFB] outline outline-1 outline-[#F3F4F6]'}`} style={{ outlineOffset: '-1px' }}>
                                <Icon size={14} color={isDark ? '#d1d5db' : '#111827'} />
                              </div>
                              <span className={`text-sm font-bold font-domine ${isDark ? 'text-[#fafafa]' : 'text-black'}`}>
                                {language === 'zh' ? titleZh : titleEn}
                              </span>
                            </div>
                          ))}
                        </div>
                      </div>

                      {/* Company */}
                      <div>
                        <span className={`text-[10px] font-bold uppercase tracking-[1.2px] font-domine px-1 ${isDark ? 'text-[#52525b]' : 'text-[#9CA3AF]'}`}>
                          {language === 'zh' ? '公司' : 'Company'}
                        </span>
                        <div className="flex flex-col gap-0.5 mt-2">
                          {[
                            { Icon: Users, titleZh: '关于团队', titleEn: 'About Team' },
                            { Icon: Briefcase, titleZh: '招聘', titleEn: 'Careers' },
                            { Icon: Mail, titleZh: '联系我们', titleEn: 'Contact Us' },
                            { Icon: Newspaper, titleZh: '新闻媒体', titleEn: 'Press & Media' },
                          ].map(({ Icon, titleZh, titleEn }) => (
                            <div key={titleEn} className={`flex items-center gap-3 px-2 py-2.5 rounded-lg cursor-pointer transition-colors ${isDark ? 'hover:bg-[#27272a]' : 'hover:bg-[#F9FAFB]'}`}>
                              <div className={`w-7 h-7 rounded-lg flex items-center justify-center flex-shrink-0 ${isDark ? 'bg-[#27272a] outline outline-1 outline-[#3f3f46]' : 'bg-[#F9FAFB] outline outline-1 outline-[#F3F4F6]'}`} style={{ outlineOffset: '-1px' }}>
                                <Icon size={14} color={isDark ? '#d1d5db' : '#111827'} />
                              </div>
                              <span className={`text-sm font-bold font-domine ${isDark ? 'text-[#fafafa]' : 'text-black'}`}>
                                {language === 'zh' ? titleZh : titleEn}
                              </span>
                            </div>
                          ))}
                        </div>
                      </div>

                      {/* Bottom */}
                      <div className={`pt-2 border-t flex items-center justify-between ${isDark ? 'border-[#27272a]' : 'border-[#F3F4F6]'}`}>
                        <span className="text-xs font-domine text-[#9CA3AF]">
                          {language === 'zh' ? '最新更新：' : 'Latest Update: '}
                          <span className={`font-medium ${isDark ? 'text-[#fafafa]' : 'text-black'}`}>December 2025</span>
                        </span>
                        <div className="flex gap-4">
                          <span className={`text-xs font-bold font-domine cursor-pointer ${isDark ? 'text-[#6b7280]' : 'text-[#6B7280]'}`}>
                            {language === 'zh' ? '隐私政策' : 'Privacy Policy'}
                          </span>
                          <span className={`text-xs font-bold font-domine cursor-pointer ${isDark ? 'text-[#6b7280]' : 'text-[#6B7280]'}`}>
                            {language === 'zh' ? '服务条款' : 'Terms of Service'}
                          </span>
                        </div>
                      </div>
                    </div>
                  </motion.div>
                )}
              </AnimatePresence>

              {/* Theme + Language */}
              <div style={{ height: '1px', backgroundColor: isDark ? '#27272a' : '#f3f4f6', margin: '4px 0' }} />
              <div className="flex items-center gap-2 px-3 py-3">
                {/* Theme Toggle */}
                <Button
                  isIconOnly
                  variant="light"
                  onPress={toggleTheme}
                >
                  <div className="relative w-5 h-5">
                    <AnimatePresence mode="wait" initial={false}>
                      {isDark ? (
                        <motion.div key="moon" className="absolute inset-0 flex items-center justify-center"
                          initial={{ opacity: 0, rotate: -90, scale: 0.5 }} animate={{ opacity: 1, rotate: 0, scale: 1 }} exit={{ opacity: 0, rotate: 90, scale: 0.5 }} transition={{ duration: 0.3 }}>
                          <Moon size={18} color="#a1a1aa" />
                        </motion.div>
                      ) : (
                        <motion.div key="sun" className="absolute inset-0 flex items-center justify-center"
                          initial={{ opacity: 0, rotate: 90, scale: 0.5 }} animate={{ opacity: 1, rotate: 0, scale: 1 }} exit={{ opacity: 0, rotate: -90, scale: 0.5 }} transition={{ duration: 0.3 }}>
                          <Sun size={18} color="#4B5563" />
                        </motion.div>
                      )}
                    </AnimatePresence>
                  </div>
                </Button>

                {/* Language */}
                <Dropdown classNames={{ content: 'bg-bg-surface border-none shadow-lg min-w-[120px] w-[120px]' }}>
                  <DropdownTrigger>
                    <Button variant="light" className="font-bold text-sm text-text-secondary"
                      startContent={<Globe size={16} color={isDark ? '#a1a1aa' : '#4B5563'} />}
                      endContent={<ChevronDown size={12} color={isDark ? '#a1a1aa' : '#4B5563'} />}
                    >
                      {language === 'zh' ? '中文' : 'EN'}
                    </Button>
                  </DropdownTrigger>
                  <DropdownMenu aria-label="Language selection" onAction={(key) => setLanguage(key as 'zh' | 'en')} selectedKeys={new Set([language])} classNames={{ list: "py-2" }} itemClasses={{ base: "py-3 flex items-center justify-center" }}>
                    <DropdownItem key="zh" className="text-text-primary hover:bg-bg-elevated text-center">中文</DropdownItem>
                    <DropdownItem key="en" className="text-text-primary hover:bg-bg-elevated text-center">English</DropdownItem>
                  </DropdownMenu>
                </Dropdown>
              </div>
            </div>
          </motion.div>
          </>
        )}
      </AnimatePresence>

      {/* Custom Menus */}
      <ProductMenu
        isOpen={showProductMenu}
        onClose={() => setShowProductMenu(false)}
        language={language}
        top={navBottom}
      />
      <ResourceMenu
        isOpen={showResourceMenu}
        onClose={() => setShowResourceMenu(false)}
        language={language}
        top={navBottom}
      />
    </>
  );
}