asset-homepage/components/ResourceMenu.tsx

'use client';

import Image from 'next/image';
import { useState, useEffect } from 'react';
import { useTheme } from '@/contexts/ThemeContext';

interface ResourceMenuProps {
  isOpen: boolean;
  onClose: () => void;
  language: 'zh' | 'en';
}

export default function ResourceMenu({ isOpen, onClose, language }: ResourceMenuProps) {
  const { theme } = useTheme();
  const isDark = theme === 'dark';
  const [isVisible, setIsVisible] = useState(false);
  const [isClosing, setIsClosing] = useState(false);

  useEffect(() => {
    if (isOpen) {
      setIsVisible(true);
      setIsClosing(false);
    } else if (isVisible) {
      // 触发退出动画
      setIsClosing(true);
      // 动画结束后隐藏组件
      const timer = setTimeout(() => {
        setIsVisible(false);
        setIsClosing(false);
      }, 300); // 匹配动画时长
      return () => clearTimeout(timer);
    }
  }, [isOpen, isVisible]);

  if (!isVisible) return null;

  const content = {
    zh: {
      docLearning: '文档与学习',
      docs: '文档',
      docsDesc: '阅读技术文档、智能合约参考和集成指南。',
      docsBadge: '已更新',
      trustSecurity: '信任与安全',
      trustSecurityDesc: '查看审计、合规认证和我们的安全实践。',
      helpSupport: '帮助与支持',
      learningCenter: '学习中心',
      learningCenterDesc: '教程与视频指南。',
      communityForum: '社区论坛',
      communityForumDesc: '提问与交流。',
      contactSupport: '联系支持',
      contactSupportDesc: '从我们的团队获得帮助。',
      company: '公司',
      aboutTeam: '关于团队',
      aboutTeamDesc: '认识AssetX背后的团队。',
      careers: '招聘',
      careersDesc: '加入我们不断成长的团队。',
      contactUs: '联系我们',
      contactUsDesc: '合作与媒体咨询。',
      pressMedia: '新闻媒体',
      pressMediaDesc: '最新消息与品牌资产。',
      latestAudit: '最新审计：',
      auditInfo: 'Oct 2025 (Certik)',
      privacyPolicy: '隐私政策',
      termsOfService: '服务条款'
    },
    en: {
      docLearning: 'Documentation & Learning',
      docs: 'Docs',
      docsDesc: 'Read technical docs, smart contract references, and integration guides.',
      docsBadge: 'Updated',
      trustSecurity: 'Trust & Security',
      trustSecurityDesc: 'Review audits, compliance attestations, and our security practices.',
      helpSupport: 'Help & Support',
      learningCenter: 'Learning Center',
      learningCenterDesc: 'Tutorials & video guides.',
      communityForum: 'Community Forum',
      communityForumDesc: 'Ask questions & connect.',
      contactSupport: 'Contact Support',
      contactSupportDesc: 'Get help from our team.',
      company: 'Company',
      aboutTeam: 'About Team',
      aboutTeamDesc: 'Meet the people behind AssetX.',
      careers: 'Careers',
      careersDesc: 'Join our growing team.',
      contactUs: 'Contact Us',
      contactUsDesc: 'Partnerships & media inquiries.',
      pressMedia: 'Press & Media',
      pressMediaDesc: 'Latest news & brand assets.',
      latestAudit: 'Latest Audit:',
      auditInfo: 'Oct 2025 (Certik)',
      privacyPolicy: 'Privacy Policy',
      termsOfService: 'Terms of Service'
    }
  };

  const t = content[language];

  return (
    <>
      {/* Backdrop */}
      <div
        className={`fixed inset-0 bg-black/20 z-40 ${isClosing ? 'animate-fade-out-fast' : 'animate-fade-in'}`}
        onClick={onClose}
      />

      {/* Menu */}
      <div className={`fixed left-1/2 -translate-x-1/2 rounded-2xl shadow-xl border p-6 z-50 transition-colors ${
        isDark ? 'bg-[#18181b] border-[#27272a]' : 'bg-white border-[#e5e7eb]'
      } ${isClosing ? 'animate-slide-up' : 'animate-slide-down'}`}
        style={{ width: '1080px', top: '90px' }}
      >
        <div className="flex flex-row gap-8">
          {/* Left Column - Documentation & Learning */}
          <div className="flex flex-col gap-2 w-[340px]">
            {/* Section Title */}
            <div className="px-4 py-2">
              <span className="text-[#9ca1af] font-domine text-xs font-medium tracking-wider">
                {t.docLearning}
              </span>
            </div>

            {/* Docs Card */}
            <div className={`bg-transparent border border-transparent rounded-xl p-3 flex gap-2 cursor-pointer transition-all ${
              isDark ? 'hover:bg-[#374151] hover:border-[#4b5563]' : 'hover:bg-[#f9fafb] hover:border-[#e5e7eb]'
            }`}>
              <div className={`rounded-xl w-12 h-12 flex items-center justify-center flex-shrink-0 ${
                isDark ? 'bg-[#f9fafb]' : 'bg-[#111827]'
              }`}>
                <Image
                  src="/icon-book.svg"
                  alt="Docs"
                  width={24}
                  height={24}
                  style={{
                    filter: isDark ? 'invert(1)' : 'none'
                  }}
                />
              </div>
              <div className="flex flex-col gap-1 flex-1">
                <div className="flex items-center gap-2">
                  <span className={`font-domine text-sm font-bold ${
                    isDark ? 'text-[#fafafa]' : 'text-[#111827]'
                  }`}>
                    {t.docs}
                  </span>
                  <div className="bg-green-50 rounded px-2 py-0.5">
                    <span className="text-green-600 font-domine text-xs font-medium">
                      {t.docsBadge}
                    </span>
                  </div>
                </div>
                <p className="text-[#9ca1af] font-domine text-xs leading-relaxed">
                  {t.docsDesc}
                </p>
              </div>
            </div>

            {/* Trust & Security Card */}
            <div className={`bg-transparent border border-transparent rounded-xl p-3 flex gap-2 cursor-pointer transition-all ${
              isDark ? 'hover:bg-[#374151] hover:border-[#4b5563]' : 'hover:bg-[#f9fafb] hover:border-[#e5e7eb]'
            }`}>
              <div className={`rounded-xl w-12 h-12 flex items-center justify-center flex-shrink-0 ${
                isDark ? 'bg-[#374151]' : 'bg-[#f3f4f6]'
              }`}>
                <Image
                  src="/component-11.svg"
                  alt="Trust & Security"
                  width={24}
                  height={24}
                  style={{
                    filter: isDark ? 'invert(1) brightness(0.8)' : 'none'
                  }}
                />
              </div>
              <div className="flex flex-col gap-1 flex-1">
                <span className={`font-domine text-sm font-bold ${
                  isDark ? 'text-[#fafafa]' : 'text-[#111827]'
                }`}>
                  {t.trustSecurity}
                </span>
                <p className="text-[#9ca1af] font-domine text-xs leading-relaxed">
                  {t.trustSecurityDesc}
                </p>
              </div>
            </div>
          </div>

          {/* Middle Column - Image + Help & Support */}
          <div className="flex flex-col gap-6 flex-1 min-w-[380px]">
            {/* Image */}
            <div className={`rounded-xl p-3 flex items-center justify-center ${
              isDark ? 'bg-[#374151]' : 'bg-[#f9fafb]'
            }`}>
              <Image
                src="/image-280.png"
                alt="Resource Showcase"
                width={96}
                height={96}
                className="object-cover"
              />
            </div>

            {/* Help & Support */}
            <div className="flex flex-col gap-2">
              <div className="px-4 py-2">
                <span className="text-[#9ca1af] font-domine text-xs font-medium tracking-wider">
                  {t.helpSupport}
                </span>
              </div>
              <div className="flex flex-col gap-2">
                {/* Learning Center */}
                <div className={`bg-transparent border border-transparent rounded-xl p-3 flex gap-2 cursor-pointer transition-all ${
                  isDark ? 'hover:bg-[#27272a] hover:border-[#3f3f46]' : 'hover:bg-[#f9fafb] hover:border-[#e5e7eb]'
                }`}>
                  <div className={`rounded-xl w-8 h-8 flex items-center justify-center flex-shrink-0 ${
                    isDark ? 'bg-[#27272a]' : 'bg-[#f3f4f6]'
                  }`}>
                    <Image
                      src="/component-12.svg"
                      alt="Learning Center"
                      width={16}
                      height={16}
                      style={{
                        filter: isDark ? 'invert(1) brightness(0.8)' : 'none'
                      }}
                    />
                  </div>
                  <div className="flex flex-col gap-1">
                    <span className={`font-domine text-sm font-bold ${
                    isDark ? 'text-[#fafafa]' : 'text-[#111827]'
                  }`}>
                      {t.learningCenter}
                    </span>
                    <p className="text-[#9ca1af] font-domine text-xs">
                      {t.learningCenterDesc}
                    </p>
                  </div>
                </div>

                {/* Community Forum */}
                <div className={`bg-transparent border border-transparent rounded-xl p-3 flex gap-2 cursor-pointer transition-all ${
                  isDark ? 'hover:bg-[#27272a] hover:border-[#3f3f46]' : 'hover:bg-[#f9fafb] hover:border-[#e5e7eb]'
                }`}>
                  <div className={`rounded-xl w-8 h-8 flex items-center justify-center flex-shrink-0 ${
                    isDark ? 'bg-[#27272a]' : 'bg-[#f3f4f6]'
                  }`}>
                    <Image
                      src="/communication-chat-conversation0.svg"
                      alt="Community Forum"
                      width={16}
                      height={16}
                      style={{
                        filter: isDark ? 'invert(1) brightness(0.8)' : 'none'
                      }}
                    />
                  </div>
                  <div className="flex flex-col gap-1">
                    <span className={`font-domine text-sm font-bold ${
                    isDark ? 'text-[#fafafa]' : 'text-[#111827]'
                  }`}>
                      {t.communityForum}
                    </span>
                    <p className="text-[#9ca1af] font-domine text-xs">
                      {t.communityForumDesc}
                    </p>
                  </div>
                </div>

                {/* Contact Support */}
                <div className={`bg-transparent border border-transparent rounded-xl p-3 flex gap-2 cursor-pointer transition-all ${
                  isDark ? 'hover:bg-[#27272a] hover:border-[#3f3f46]' : 'hover:bg-[#f9fafb] hover:border-[#e5e7eb]'
                }`}>
                  <div className={`rounded-xl w-8 h-8 flex items-center justify-center flex-shrink-0 ${
                    isDark ? 'bg-[#27272a]' : 'bg-[#f3f4f6]'
                  }`}>
                    <Image
                      src="/component-13.svg"
                      alt="Contact Support"
                      width={16}
                      height={16}
                      style={{
                        filter: isDark ? 'invert(1) brightness(0.8)' : 'none'
                      }}
                    />
                  </div>
                  <div className="flex flex-col gap-1">
                    <span className={`font-domine text-sm font-bold ${
                    isDark ? 'text-[#fafafa]' : 'text-[#111827]'
                  }`}>
                      {t.contactSupport}
                    </span>
                    <p className="text-[#9ca1af] font-domine text-xs">
                      {t.contactSupportDesc}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Right Column - Company */}
          <div className="flex flex-col gap-2 w-[280px]">
            <div className="px-4 py-2">
              <span className="text-[#9ca1af] font-domine text-xs font-medium tracking-wider">
                {t.company}
              </span>
            </div>
            <div className="flex flex-col gap-2">
              {/* About Team */}
              <div className={`bg-transparent border border-transparent rounded-xl p-3 flex gap-2 cursor-pointer transition-all ${
                isDark ? 'hover:bg-[#27272a] hover:border-[#3f3f46]' : 'hover:bg-[#f9fafb] hover:border-[#e5e7eb]'
              }`}>
                <div className={`rounded-xl w-8 h-8 flex items-center justify-center flex-shrink-0 ${
                  isDark ? 'bg-[#27272a]' : 'bg-[#f3f4f6]'
                }`}>
                  <Image
                    src="/component-14.svg"
                    alt="About Team"
                    width={16}
                    height={16}
                    style={{
                      filter: isDark ? 'invert(1) brightness(0.8)' : 'none'
                    }}
                  />
                </div>
                <div className="flex flex-col gap-1">
                  <span className={`font-domine text-sm font-bold ${
                    isDark ? 'text-[#fafafa]' : 'text-[#111827]'
                  }`}>
                    {t.aboutTeam}
                  </span>
                  <p className="text-[#9ca1af] font-domine text-xs">
                    {t.aboutTeamDesc}
                  </p>
                </div>
              </div>

              {/* Careers */}
              <div className={`bg-transparent border border-transparent rounded-xl p-3 flex gap-2 cursor-pointer transition-all ${
                isDark ? 'hover:bg-[#27272a] hover:border-[#3f3f46]' : 'hover:bg-[#f9fafb] hover:border-[#e5e7eb]'
              }`}>
                <div className={`rounded-xl w-8 h-8 flex items-center justify-center flex-shrink-0 ${
                  isDark ? 'bg-[#27272a]' : 'bg-[#f3f4f6]'
                }`}>
                  <Image
                    src="/component-20-dark.svg"
                    alt="Careers"
                    width={16}
                    height={16}
                    style={{
                      filter: isDark ? 'invert(1) brightness(0.8)' : 'none'
                    }}
                  />
                </div>
                <div className="flex flex-col gap-1">
                  <span className={`font-domine text-sm font-bold ${
                    isDark ? 'text-[#fafafa]' : 'text-[#111827]'
                  }`}>
                    {t.careers}
                  </span>
                  <p className="text-[#9ca1af] font-domine text-xs">
                    {t.careersDesc}
                  </p>
                </div>
              </div>

              {/* Contact Us */}
              <div className={`bg-transparent border border-transparent rounded-xl p-3 flex gap-2 cursor-pointer transition-all ${
                isDark ? 'hover:bg-[#27272a] hover:border-[#3f3f46]' : 'hover:bg-[#f9fafb] hover:border-[#e5e7eb]'
              }`}>
                <div className={`rounded-xl w-8 h-8 flex items-center justify-center flex-shrink-0 ${
                  isDark ? 'bg-[#27272a]' : 'bg-[#f3f4f6]'
                }`}>
                  <Image
                    src="/component-21.svg"
                    alt="Contact Us"
                    width={16}
                    height={16}
                    style={{
                      filter: isDark ? 'invert(1) brightness(0.8)' : 'none'
                    }}
                  />
                </div>
                <div className="flex flex-col gap-1">
                  <span className={`font-domine text-sm font-bold ${
                    isDark ? 'text-[#fafafa]' : 'text-[#111827]'
                  }`}>
                    {t.contactUs}
                  </span>
                  <p className="text-[#9ca1af] font-domine text-xs">
                    {t.contactUsDesc}
                  </p>
                </div>
              </div>

              {/* Press & Media */}
              <div className={`bg-transparent border border-transparent rounded-xl p-3 flex gap-2 cursor-pointer transition-all ${
                isDark ? 'hover:bg-[#27272a] hover:border-[#3f3f46]' : 'hover:bg-[#f9fafb] hover:border-[#e5e7eb]'
              }`}>
                <div className={`rounded-xl w-8 h-8 flex items-center justify-center flex-shrink-0 ${
                  isDark ? 'bg-[#27272a]' : 'bg-[#f3f4f6]'
                }`}>
                  <Image
                    src="/component-22.svg"
                    alt="Press & Media"
                    width={16}
                    height={16}
                    style={{
                      filter: isDark ? 'invert(1) brightness(0.8)' : 'none'
                    }}
                  />
                </div>
                <div className="flex flex-col gap-1">
                  <span className={`font-domine text-sm font-bold ${
                    isDark ? 'text-[#fafafa]' : 'text-[#111827]'
                  }`}>
                    {t.pressMedia}
                  </span>
                  <p className="text-[#9ca1af] font-domine text-xs">
                    {t.pressMediaDesc}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Bottom Border */}
        <div className={`border-t mt-6 pt-4 flex items-center justify-between ${
          isDark ? 'border-[#27272a]' : 'border-[#f3f4f6]'
        }`}>
          <div className="text-[#9ca1af] font-domine text-sm">
            <span className="font-medium">{t.latestAudit}</span>
            <span className={`ml-1 font-bold ${
              isDark ? 'text-[#fafafa]' : 'text-[#111827]'
            }`}>{t.auditInfo}</span>
          </div>
          <div className="flex gap-4">
            <div className={`text-[#9ca1af] font-domine text-sm cursor-pointer transition-colors ${
              isDark ? 'hover:text-[#fafafa]' : 'hover:text-[#111827]'
            }`}>
              {t.privacyPolicy}
            </div>
            <div className={`text-[#9ca1af] font-domine text-sm cursor-pointer transition-colors ${
              isDark ? 'hover:text-[#fafafa]' : 'hover:text-[#111827]'
            }`}>
              {t.termsOfService}
            </div>
          </div>
        </div>
      </div>
    </>
  );
}