asset-homepage/components/ProductMenu.tsx

'use client';

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

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

export default function ProductMenu({ isOpen, onClose, language }: ProductMenuProps) {
  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: {
      coreYieldAssets: '核心收益资产',
      axFund: 'AX-Fund',
      axFundDesc: '购买AX-Fund收益代币，获得市场中性收益策略的敞口。收益随时间在代币价格中累积。',
      axFundBadge: '最高22% APY',
      axPool: 'AX-Pool',
      axPoolDesc: '以ALP提供流动性支持收益代币市场并赚取交易费',
      axPoolBadge: '多元化',
      platformsProtocols: '平台与协议',
      launchpad: 'Launchpad',
      launchpadDesc: '发行与代币化新RWA',
      defiMarket: 'DeFi市场',
      defiMarketDesc: '资产代币的交换与借贷',
      tokenFactory: 'Token Factory',
      tokenFactoryDesc: '标准化铸造协议',
      infrastructure: '基础设施',
      assetCockpit: 'Asset Cockpit',
      assetCockpitDesc: '投资组合分析与管理',
      oracleNetwork: 'Oracle Network',
      oracleNetworkDesc: '实时链下数据源',
      latestAudit: '最新审计：',
      auditInfo: 'Oct 2025 (Certik)',
      viewDocs: '查看文档 →'
    },
    en: {
      coreYieldAssets: 'Core Yield Assets',
      axFund: 'AX-Fund',
      axFundDesc: 'Buy the AX-Fund Yield Token to gain exposure to market-neutral yield strategies. Yield accrues in token price over time.',
      axFundBadge: 'up to 22% APY',
      axPool: 'AX-Pool',
      axPoolDesc: 'Provide liquidity as ALP to support Yield Token markets and earn trading fees',
      axPoolBadge: 'Diversified',
      platformsProtocols: 'Platforms & Protocols',
      launchpad: 'Launchpad',
      launchpadDesc: 'Issue & tokenize new RWAs.',
      defiMarket: 'Defi Market',
      defiMarketDesc: 'Swap & Lending for assets tokens.',
      tokenFactory: 'Token Factory',
      tokenFactoryDesc: 'Standardized minting protocol.',
      infrastructure: 'Infrastructure',
      assetCockpit: 'Asset Cockpit',
      assetCockpitDesc: 'Portfolio analytics & mgmt.',
      oracleNetwork: 'Oracle Network',
      oracleNetworkDesc: 'Real-time off-chain data feeds.',
      latestAudit: 'Latest Audit:',
      auditInfo: 'Oct 2025 (Certik)',
      viewDocs: 'View Documentation →'
    }
  };

  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 - Core Yield Assets */}
        <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.coreYieldAssets}
            </span>
          </div>

          {/* AX-Fund Card */}
          <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-12 h-12 flex items-center justify-center flex-shrink-0 ${
              isDark ? 'bg-[#f9fafb]' : 'bg-[#111827]'
            }`}>
              <Image
                src="/environment-rainbow0.svg"
                alt="AX-Fund"
                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-[#f9fafb]' : 'text-[#111827]'
                }`}>
                  {t.axFund}
                </span>
                <div className="bg-green-50 rounded px-2 py-0.5">
                  <span className="text-green-600 font-domine text-xs font-medium">
                    {t.axFundBadge}
                  </span>
                </div>
              </div>
              <p className="text-[#9ca1af] font-domine text-xs leading-relaxed">
                {t.axFundDesc}
              </p>
            </div>
          </div>

          {/* AX-Pool Card */}
          <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-12 h-12 flex items-center justify-center flex-shrink-0 ${
              isDark ? 'bg-[#27272a]' : 'bg-[#f3f4f6]'
            }`}>
              <Image
                src="/environment-planet0.svg"
                alt="AX-Pool"
                width={24}
                height={24}
                style={{
                  filter: isDark ? 'invert(1) brightness(0.8)' : '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-[#f9fafb]' : 'text-[#111827]'
                }`}>
                  {t.axPool}
                </span>
                <div className="bg-blue-50 rounded px-2 py-0.5">
                  <span className="text-blue-600 font-domine text-xs font-medium">
                    {t.axPoolBadge}
                  </span>
                </div>
              </div>
              <p className="text-[#9ca1af] font-domine text-xs leading-relaxed">
                {t.axPoolDesc}
              </p>
            </div>
          </div>
        </div>

        {/* Middle Column - Image + Platforms */}
        <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-270.png"
              alt="Product Showcase"
              width={96}
              height={96}
              className="object-cover"
            />
          </div>

          {/* Platforms & Protocols */}
          <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.platformsProtocols}
              </span>
            </div>
            <div className="flex flex-col gap-2">
              {/* Launchpad */}
              <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-[#f9fafb]' : 'bg-[#111827]'
                }`}>
                  <Image
                    src="/component-20.svg"
                    alt="Launchpad"
                    width={16}
                    height={16}
                    style={{
                      filter: isDark ? 'invert(1)' : 'none'
                    }}
                  />
                </div>
                <div className="flex flex-col gap-1">
                  <span className={`font-domine text-sm font-bold ${
                    isDark ? 'text-[#fafafa]' : 'text-[#111827]'
                  }`}>
                    {t.launchpad}
                  </span>
                  <p className="text-[#9ca1af] font-domine text-xs">
                    {t.launchpadDesc}
                  </p>
                </div>
              </div>

              {/* DeFi Market */}
              <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="DeFi Market"
                    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.defiMarket}
                  </span>
                  <p className="text-[#9ca1af] font-domine text-xs">
                    {t.defiMarketDesc}
                  </p>
                </div>
              </div>

              {/* Token Factory */}
              <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="/vuesax-linear-buy-crypto1.svg"
                    alt="Token Factory"
                    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.tokenFactory}
                  </span>
                  <p className="text-[#9ca1af] font-domine text-xs">
                    {t.tokenFactoryDesc}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Right Column - Infrastructure */}
        <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.infrastructure}
            </span>
          </div>
          <div className="flex flex-col gap-2">
            {/* Asset Cockpit */}
            <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="/navigation-map0.svg"
                  alt="Asset Cockpit"
                  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.assetCockpit}
                </span>
                <p className="text-[#9ca1af] font-domine text-xs">
                  {t.assetCockpitDesc}
                </p>
              </div>
            </div>

            {/* Oracle Network */}
            <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-10.svg"
                  alt="Oracle Network"
                  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.oracleNetwork}
                </span>
                <p className="text-[#9ca1af] font-domine text-xs">
                  {t.oracleNetworkDesc}
                </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="text-green-600 font-domine text-sm font-bold cursor-pointer hover:opacity-70 transition-opacity">
          {t.viewDocs}
        </div>
      </div>
    </div>
    </>
  );
}