import React, { useState } from 'react';
import { 
  ShieldCheck, 
  BrainCircuit, 
  Activity, 
  Lock, 
  Globe2, 
  ChevronRight, 
  Menu, 
  X,
  Building2,
  TrendingUp,
  FileKey
} from 'lucide-react';

export default function App() {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  return (
    <div className="min-h-screen bg-slate-950 text-slate-50 font-sans selection:bg-cyan-500/30">
      {/* 导航栏 */}
      <nav className="fixed w-full z-50 bg-slate-950/80 backdrop-blur-md border-b border-slate-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-20">
            {/* Logo */}
            <div className="flex items-center space-x-2">
              <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-cyan-400 to-blue-600 flex items-center justify-center shadow-lg shadow-cyan-500/20">
                <ShieldCheck className="w-6 h-6 text-white" />
              </div>
              <span className="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-white to-slate-400">
                Groundhog
              </span>
            </div>

            {/* 桌面端菜单 */}
            <div className="hidden md:flex items-center space-x-8">
              <a href="#products" className="text-slate-300 hover:text-white transition-colors">核心产品</a>
              <a href="#technology" className="text-slate-300 hover:text-white transition-colors">技术特色</a>
              <a href="#compliance" className="text-slate-300 hover:text-white transition-colors">行业合规</a>
              <a href="#about" className="text-slate-300 hover:text-white transition-colors">关于我们</a>
              <button className="bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-400 hover:to-blue-500 text-white px-6 py-2.5 rounded-full font-medium transition-all shadow-lg shadow-blue-500/25">
                申请演示
              </button>
            </div>

            {/* 移动端菜单按钮 */}
            <div className="md:hidden flex items-center">
              <button 
                onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
                className="text-slate-300 hover:text-white"
              >
                {isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
              </button>
            </div>
          </div>
        </div>

        {/* 移动端下拉菜单 */}
        {isMobileMenuOpen && (
          <div className="md:hidden bg-slate-900 border-b border-slate-800 px-4 pt-2 pb-6 space-y-2">
            <a href="#products" className="block px-3 py-2 text-slate-300 hover:bg-slate-800 rounded-lg">核心产品</a>
            <a href="#technology" className="block px-3 py-2 text-slate-300 hover:bg-slate-800 rounded-lg">技术特色</a>
            <a href="#compliance" className="block px-3 py-2 text-slate-300 hover:bg-slate-800 rounded-lg">行业合规</a>
            <button className="w-full mt-4 bg-blue-600 text-white px-4 py-3 rounded-lg font-medium">
              申请演示
            </button>
          </div>
        )}
      </nav>

      {/* Hero 区域 */}
      <section className="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden">
        {/* 背景光效 */}
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-blue-600/20 rounded-full blur-[120px] pointer-events-none"></div>
        
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
          <div className="inline-flex items-center space-x-2 px-3 py-1 rounded-full bg-slate-800/50 border border-slate-700 text-cyan-400 text-sm font-medium mb-8">
            <span className="relative flex h-2 w-2">
              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-cyan-400 opacity-75"></span>
              <span className="relative inline-flex rounded-full h-2 w-2 bg-cyan-500"></span>
            </span>
            <span>保护全球 Web3 支付生态</span>
          </div>
          
          <h1 className="text-5xl lg:text-7xl font-extrabold tracking-tight mb-8">
            AI 驱动的 <br className="hidden lg:block" />
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-500">
              Web3 反欺诈与合规工具
            </span>
          </h1>
          
          <p className="text-xl text-slate-400 max-w-3xl mx-auto mb-10 leading-relaxed">
            专注 Web3 支付安全，利用先进的深度学习算法实时分析链上行为。
            拦截洗钱、黑客攻击与诈骗风险，做您的专属“合规卫士”。
          </p>
          
          <div className="flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-6">
            <button className="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-400 hover:to-blue-500 text-white rounded-full font-semibold text-lg transition-all shadow-lg shadow-blue-500/25 flex items-center justify-center">
              立即接入 <ChevronRight className="ml-2 w-5 h-5" />
            </button>
            <button className="w-full sm:w-auto px-8 py-4 bg-slate-800 hover:bg-slate-700 border border-slate-700 text-white rounded-full font-semibold text-lg transition-all flex items-center justify-center">
              查看开发文档
            </button>
          </div>
        </div>
      </section>

      {/* 数据与背书条 */}
      <section className="border-y border-slate-800 bg-slate-900/50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center divide-x divide-slate-800">
            <div>
              <div className="text-3xl font-bold text-white mb-1">A轮</div>
              <div className="text-sm text-slate-400">最新融资阶段</div>
            </div>
            <div>
              <div className="text-3xl font-bold text-white mb-1">总部</div>
              <div className="text-sm text-slate-400">新加坡 (Singapore)</div>
            </div>
            <div>
              <div className="text-3xl font-bold text-white mb-1">SFA</div>
              <div className="text-sm text-slate-400">金融科技协会成员</div>
            </div>
            <div>
              <div className="text-3xl font-bold text-white mb-1">24/7</div>
              <div className="text-sm text-slate-400">实时链上监控</div>
            </div>
          </div>
        </div>
      </section>

      {/* 核心产品与技术特征 */}
      <section id="products" className="py-24 bg-slate-950">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-4">全面覆盖 Web3 业务场景</h2>
            <p className="text-slate-400 max-w-2xl mx-auto">专为去中心化金融 (DeFi) 协议、支付网关及加密机构打造的企业级合规矩阵。</p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {/* 卡片 1 */}
            <div className="bg-slate-900 border border-slate-800 rounded-2xl p-8 hover:border-blue-500/50 transition-colors group relative overflow-hidden">
              <div className="absolute top-0 right-0 w-32 h-32 bg-cyan-500/10 rounded-full blur-3xl -mr-16 -mt-16 transition-all group-hover:bg-cyan-500/20"></div>
              <div className="w-14 h-14 bg-blue-500/10 border border-blue-500/20 rounded-xl flex items-center justify-center mb-6">
                <Lock className="w-7 h-7 text-cyan-400" />
              </div>
              <h3 className="text-xl font-bold mb-3">加密资产反欺诈</h3>
              <p className="text-slate-400 leading-relaxed">
                专为 Web3 支付和 DeFi 协议设计。在交易发生的毫秒内阻断恶意地址和欺诈合约，保护用户资产安全。
              </p>
            </div>

            {/* 卡片 2 */}
            <div className="bg-slate-900 border border-slate-800 rounded-2xl p-8 hover:border-blue-500/50 transition-colors group relative overflow-hidden">
              <div className="absolute top-0 right-0 w-32 h-32 bg-purple-500/10 rounded-full blur-3xl -mr-16 -mt-16 transition-all group-hover:bg-purple-500/20"></div>
              <div className="w-14 h-14 bg-purple-500/10 border border-purple-500/20 rounded-xl flex items-center justify-center mb-6">
                <BrainCircuit className="w-7 h-7 text-purple-400" />
              </div>
              <h3 className="text-xl font-bold mb-3">深度学习智能引擎</h3>
              <p className="text-slate-400 leading-relaxed">
                利用 AI 技术和深度学习算法分析链上交易行为，实时识别异常模式（如洗钱、黑客攻击或资金盘诈骗风险）。
              </p>
            </div>

            {/* 卡片 3 */}
            <div className="bg-slate-900 border border-slate-800 rounded-2xl p-8 hover:border-blue-500/50 transition-colors group relative overflow-hidden">
              <div className="absolute top-0 right-0 w-32 h-32 bg-blue-500/10 rounded-full blur-3xl -mr-16 -mt-16 transition-all group-hover:bg-blue-500/20"></div>
              <div className="w-14 h-14 bg-blue-500/10 border border-blue-500/20 rounded-xl flex items-center justify-center mb-6">
                <Activity className="w-7 h-7 text-blue-400" />
              </div>
              <h3 className="text-xl font-bold mb-3">可操作风险评分</h3>
              <p className="text-slate-400 leading-relaxed">
                作为“合规卫士”，我们将极其复杂的链上网络数据转化为直观、可操作的风险评分 (Risk Score)，便于机构决策。
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* 行业定位与合规价值 */}
      <section id="compliance" className="py-24 bg-slate-900 border-y border-slate-800 relative overflow-hidden">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="lg:flex lg:items-center lg:space-x-16">
            <div className="lg:w-1/2 mb-12 lg:mb-0">
              <div className="inline-flex items-center space-x-2 px-3 py-1 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-400 text-sm font-medium mb-6">
                <FileKey className="w-4 h-4" />
                <span>满足严格监管要求</span>
              </div>
              <h2 className="text-3xl md:text-4xl font-bold mb-6">
                Web3 时代的<span className="text-blue-400">“合规卫士”</span>
              </h2>
              <p className="text-lg text-slate-400 mb-8 leading-relaxed">
                随着全球对加密货币监管的日益严格，支付网关和加密机构面临前所未有的合规压力。
                Groundhog 通过先进的 AI 技术，帮助企业轻松应对反洗钱 (AML) 和 KYC/KYT 挑战。
              </p>
              
              <ul className="space-y-4">
                {[
                  "实时监控链上资金流向，阻断高危交易",
                  "为每笔交易和地址生成精准的风险评分",
                  "满足新加坡 MAS 及全球主流金融监管标准",
                  "无缝集成现有支付网关与业务流程"
                ].map((item, index) => (
                  <li key={index} className="flex items-start">
                    <ShieldCheck className="w-6 h-6 text-cyan-400 mr-3 flex-shrink-0" />
                    <span className="text-slate-300">{item}</span>
                  </li>
                ))}
              </ul>
            </div>
            
            {/* 模拟仪表盘插图 */}
            <div className="lg:w-1/2">
              <div className="bg-slate-950 rounded-2xl border border-slate-800 p-6 shadow-2xl relative">
                {/* Mac 窗口控制按钮 */}
                <div className="flex space-x-2 mb-6">
                  <div className="w-3 h-3 rounded-full bg-slate-700"></div>
                  <div className="w-3 h-3 rounded-full bg-slate-700"></div>
                  <div className="w-3 h-3 rounded-full bg-slate-700"></div>
                </div>
                
                <div className="space-y-6">
                  <div className="flex justify-between items-end">
                    <div>
                      <div className="text-slate-400 text-sm mb-1">地址风险检测 (0x7a...8F9)</div>
                      <div className="text-3xl font-bold text-red-400">92.4 <span className="text-sm font-normal text-slate-500">/ 100</span></div>
                    </div>
                    <div className="px-3 py-1 bg-red-500/10 text-red-400 border border-red-500/20 rounded-lg text-sm font-medium">
                      高危 - 涉嫌洗钱
                    </div>
                  </div>
                  
                  {/* 模拟图表/数据条 */}
                  <div className="space-y-3">
                    <div>
                      <div className="flex justify-between text-xs text-slate-400 mb-1">
                        <span>混币器交互概率</span>
                        <span>88%</span>
                      </div>
                      <div className="h-2 w-full bg-slate-800 rounded-full overflow-hidden">
                        <div className="h-full bg-red-500 w-[88%]"></div>
                      </div>
                    </div>
                    <div>
                      <div className="flex justify-between text-xs text-slate-400 mb-1">
                        <span>黑客攻击关联度</span>
                        <span>45%</span>
                      </div>
                      <div className="h-2 w-full bg-slate-800 rounded-full overflow-hidden">
                        <div className="h-full bg-yellow-500 w-[45%]"></div>
                      </div>
                    </div>
                  </div>

                  <div className="bg-slate-900 border border-slate-800 rounded-xl p-4">
                    <div className="text-sm text-slate-400 mb-2">AI 行为分析建议：</div>
                    <div className="text-slate-200 text-sm leading-relaxed">
                      该地址在过去 24 小时内与已知的 Tornado Cash 节点产生高频交互，且资金来源追溯至某 DeFi 黑客事件。建议立即冻结相关支付请求。
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 背景与融资信息 */}
      <section id="about" className="py-24 bg-slate-950 text-center">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <Globe2 className="w-12 h-12 text-blue-500 mx-auto mb-6" />
          <h2 className="text-3xl font-bold mb-6">立足新加坡，服务全球 Web3 生态</h2>
          <p className="text-slate-400 text-lg mb-12">
            作为一家处于快速成长期的 A 轮金融科技初创公司，Groundhog 是新加坡金融科技协会 (SFA) 
            及多个知名 Web3 加速器的活跃成员。我们致力于将最前沿的 AI 技术引入加密货币世界。
          </p>
          <div className="flex justify-center items-center space-x-8 opacity-60 grayscale hover:grayscale-0 transition-all duration-500">
             {/* 占位符 Logo */}
             <div className="flex items-center space-x-2 text-xl font-bold text-slate-300">
               <Building2 className="w-6 h-6" />
               <span>SFA Member</span>
             </div>
             <div className="hidden sm:block w-px h-8 bg-slate-700"></div>
             <div className="flex items-center space-x-2 text-xl font-bold text-slate-300">
               <TrendingUp className="w-6 h-6" />
               <span>Series A Backed</span>
             </div>
          </div>
        </div>
      </section>

      {/* CTA (Call to Action) */}
      <section className="py-20 relative">
        <div className="absolute inset-0 bg-gradient-to-b from-transparent to-blue-900/20"></div>
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
          <h2 className="text-3xl md:text-5xl font-bold mb-6">准备好保障您的 Web3 业务了吗？</h2>
          <p className="text-slate-400 text-lg mb-10">
            仅需几行代码，即可接入强大的 AI 反欺诈引擎，让每一笔加密资产交易更安全、更合规。
          </p>
          <button className="px-8 py-4 bg-white text-slate-900 hover:bg-slate-100 rounded-full font-bold text-lg transition-all shadow-lg shadow-white/10">
            联系销售获取 Demo
          </button>
        </div>
      </section>

      {/* 页脚 */}
      <footer className="bg-slate-950 border-t border-slate-900 pt-16 pb-8">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
            <div className="col-span-2">
              <div className="flex items-center space-x-2 mb-4">
                <ShieldCheck className="w-6 h-6 text-cyan-400" />
                <span className="text-xl font-bold text-white">Groundhog</span>
              </div>
              <p className="text-slate-500 text-sm max-w-sm mb-4">
                Groundhog.com / Groundhog.ai <br/>
                利用 AI 技术解决加密货币生态系统中的合规性挑战。
              </p>
            </div>
            <div>
              <h4 className="text-white font-semibold mb-4">产品服务</h4>
              <ul className="space-y-2 text-sm text-slate-500">
                <li><a href="#" className="hover:text-cyan-400 transition-colors">支付反欺诈</a></li>
                <li><a href="#" className="hover:text-cyan-400 transition-colors">链上行为分析</a></li>
                <li><a href="#" className="hover:text-cyan-400 transition-colors">合规风险评分</a></li>
                <li><a href="#" className="hover:text-cyan-400 transition-colors">API 文档</a></li>
              </ul>
            </div>
            <div>
              <h4 className="text-white font-semibold mb-4">关于公司</h4>
              <ul className="space-y-2 text-sm text-slate-500">
                <li><a href="#" className="hover:text-cyan-400 transition-colors">关于我们</a></li>
                <li><a href="#" className="hover:text-cyan-400 transition-colors">新闻动态</a></li>
                <li><a href="#" className="hover:text-cyan-400 transition-colors">加入我们</a></li>
                <li><a href="#" className="hover:text-cyan-400 transition-colors">联系方式</a></li>
              </ul>
            </div>
          </div>
          <div className="border-t border-slate-900 pt-8 flex flex-col md:flex-row justify-between items-center text-sm text-slate-600">
            <p>© {new Date().getFullYear()} Groundhog.ai. All rights reserved. (Singapore)</p>
            <div className="flex space-x-4 mt-4 md:mt-0">
              <a href="#" className="hover:text-slate-400">隐私政策</a>
              <a href="#" className="hover:text-slate-400">服务条款</a>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}