import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import { useState, useEffect } from 'react';
import { Globe, Menu, X, ChevronDown, Building, Award, Lightbulb, DollarSign, Target, Users, Calendar, MapPin, Phone, Mail, FileText, Cpu, TrendingUp, Shield, Search, ArrowRight, Clock, BarChart3, Globe2, ShieldCheck, MessageSquare, Play, Pause } from 'lucide-react';
import './App.css';

// Language translations for Chengyu Group
const translations = {
  zh: {
    brand: '诚裕集团',
    nav: {
      home: '首页',
      services: '业务服务',
      digitalHuman: '数字人播报',
      aiAssistant: 'AI助手',
      about: '关于我们',
      contact: '联系我们'
    },
    hero: {
      title: '诚裕集团 - 专业咨询服务领航者',
      subtitle: '近200人专业服务团队，400家长久合作伙伴，近300家上市、央企、国企客户，服务网络覆盖全国近三十个省（自治区、直辖市）',
      cta: '了解更多'
    },
    services: {
      title: '七大核心业务',
      taxService: '财税服务',
      innovationPlatform: '科技创新平台',
      honorAwards: '荣誉奖项服务',
      specialFunds: '专项资金服务',
      nationalRD: '国家重点研发计划',
      constructionQualification: '建筑业特级资质',
      investment: '投融资业务'
    },
    digitalHuman: {
      title: '数字人播报',
      subtitle: '通过AI数字人视频循环播放，直观展示诚裕集团的专业服务与成功案例',
      play: '播放',
      pause: '暂停',
      next: '下一个',
      prev: '上一个'
    },
    aiAssistant: {
      title: 'AI智能助手',
      subtitle: '智能解答您的疑问，无法解答时将为您转接诚裕专业顾问',
      placeholder: '请输入您的问题...',
      send: '发送',
      contact: '联系专家',
      contactTitle: '留下您的联系方式',
      contactSubtitle: '诚裕专业顾问会尽快与您联系',
      name: '姓名',
      phone: '电话',
      email: '邮箱',
      submit: '提交'
    }
  },
  en: {
    brand: 'Chengyu Group',
    nav: {
      home: 'Home',
      services: 'Services',
      digitalHuman: 'Digital Human',
      aiAssistant: 'AI Assistant',
      about: 'About',
      contact: 'Contact'
    },
    hero: {
      title: 'Chengyu Group - Professional Consulting Services Leader',
      subtitle: 'Nearly 200 professional service team members, 400 long-term partners, nearly 300 listed companies, central enterprises, and state-owned enterprise clients, service network covering nearly 30 provinces',
      cta: 'Learn More'
    },
    services: {
      title: 'Seven Core Business Areas',
      taxService: 'Tax Services',
      innovationPlatform: 'Innovation Platforms',
      honorAwards: 'Honor Awards',
      specialFunds: 'Special Funds',
      nationalRD: 'National R&D Programs',
      constructionQualification: 'Construction Qualification',
      investment: 'Investment & Financing'
    },
    digitalHuman: {
      title: 'Digital Human Broadcast',
      subtitle: 'Showcasing Chengyu Group professional services and success cases through AI digital human videos',
      play: 'Play',
      pause: 'Pause',
      next: 'Next',
      prev: 'Previous'
    },
    aiAssistant: {
      title: 'AI Smart Assistant',
      subtitle: 'Intelligently answer your questions, connect to Chengyu experts when unable to answer',
      placeholder: 'Please enter your question...',
      send: 'Send',
      contact: 'Contact Expert',
      contactTitle: 'Leave Your Contact',
      contactSubtitle: 'Chengyu experts will contact you soon',
      name: 'Name',
      phone: 'Phone',
      email: 'Email',
      submit: 'Submit'
    }
  },
  vi: {
    brand: 'Tập đoàn Chengyu',
    nav: {
      home: 'Trang chủ',
      services: 'Dịch vụ',
      digitalHuman: 'Người số',
      aiAssistant: 'AI Trợ lý',
      about: 'Về chúng tôi',
      contact: 'Liên hệ'
    },
    hero: {
      title: 'Tập đoàn Chengyu - Nhà lãnh đạo Dịch vụ Tư vấn Chuyên nghiệp',
      subtitle: 'Gần 200 thành viên đội ngũ dịch vụ chuyên nghiệp, 400 đối tác lâu dài, gần 300 khách hàng là công ty niêm yết, doanh nghiệp trung ương',
      cta: 'Tìm hiểu thêm'
    },
    services: {
      title: 'Bảy Lĩnh vực Kinh doanh Chính',
      taxService: 'Dịch vụ Thuế',
      innovationPlatform: 'Nền tảng Đổi mới',
      honorAwards: 'Giải thưởng Danh dự',
      specialFunds: 'Quỹ Đặc biệt',
      nationalRD: 'Chương trình Nghiên cứu',
      constructionQualification: 'Chứng chỉ Xây dựng',
      investment: 'Đầu tư & Tài chính'
    },
    digitalHuman: {
      title: 'Phát sóng Người số',
      subtitle: 'Trưng bày dịch vụ chuyên nghiệp và trường hợp thành công của Tập đoàn Chengyu qua video người số AI',
      play: 'Phát',
      pause: 'Tạm dừng',
      next: 'Tiếp',
      prev: 'Trước'
    },
    aiAssistant: {
      title: 'AI Trợ lý Thông minh',
      subtitle: 'Trả lời thông minh câu hỏi của bạn, kết nối với chuyên gia Chengyu khi không thể trả lời',
      placeholder: 'Vui lòng nhập câu hỏi...',
      send: 'Gửi',
      contact: 'Liên hệ Chuyên gia',
      contactTitle: 'Để lại Thông tin Liên hệ',
      contactSubtitle: 'Chuyên gia Chengyu sẽ liên hệ với bạn sớm',
      name: 'Tên',
      phone: 'Điện thoại',
      email: 'Email',
      submit: 'Gửi'
    }
  }
};

// Predefined AI responses for Chengyu Group
const aiResponses = {
  zh: {
    '财税服务': '诚裕集团提供专业的财税服务，包括高新技术企业认定、税收筹划等。我们拥有经验丰富的财税专家团队，为客户提供全方位的财税解决方案。',
    '科技创新平台': '我们协助企业申报各级科技创新平台，包括国家企业技术中心、国家工程研究中心、国家重点实验室等，助力企业提升科技创新能力。',
    '荣誉奖项': '诚裕集团帮助企业申报各级科技进步奖、中国专利奖等荣誉奖项，提升企业品牌形象和行业影响力。',
    '专项资金': '我们专业办理污染治理节能减碳、先进制造业和现代服务业发展等中央预算内投资专项资金项目。',
    '国家重点研发计划': '诚裕集团协助企业申报科技部国家重点研发计划重点专项，获得国家级科研资金支持。',
    '建筑业特级资质': '我们提供建筑业特级资质申报服务，帮助企业获得最高等级的建筑业资质认证。',
    '投融资业务': '诚裕集团提供专业的投融资咨询服务，协助企业获得资金支持，实现快速发展。',
    '团队规模': '诚裕集团拥有近200人的专业服务团队，包括注册会计师、注册税务师、高级工程师等各类专业人才。',
    '客户数量': '我们拥有400家长久合作伙伴，其中上市公司、央企集团公司、地方国企及其二三级子公司客户近300家。',
    '服务网络': '诚裕集团的服务网络覆盖全国近三十个省（自治区、直辖市），能够为客户提供及时、高效的服务。',
    '成立时间': '诚裕集团成立于2009年10月，注册资金10000万元，拥有15年以上的行业经验。',
    '资质认证': '诚裕是北京市科委的科技经费审计合格机构，连续三年是市科委的国高新技术企业认定咨询机构。'
  },
  en: {
    'tax service': 'Chengyu Group provides professional tax services, including high-tech enterprise certification and tax planning. We have an experienced team of tax experts.',
    'innovation platform': 'We assist enterprises in applying for various levels of technology innovation platforms, including national enterprise technology centers, national engineering research centers, etc.',
    'honor award': 'Chengyu Group helps enterprises apply for various science and technology progress awards, China Patent Awards, and other honors to enhance brand image.',
    'special fund': 'We specialize in handling central budget investment special funds for pollution control, energy saving, and carbon reduction projects.',
    'national rd': 'Chengyu Group assists enterprises in applying for national key R&D programs of the Ministry of Science and Technology.',
    'construction qualification': 'We provide construction industry special qualification application services to help enterprises obtain the highest level certification.',
    'investment': 'Chengyu Group provides professional investment and financing consulting services to help enterprises obtain financial support.',
    'team': 'Chengyu Group has nearly 200 professional service team members, including CPAs, registered tax agents, and senior engineers.',
    'clients': 'We have 400 long-term partners, including nearly 300 listed companies, central enterprises, and state-owned enterprises.',
    'network': 'Chengyu Groups service network covers nearly 30 provinces, providing timely and efficient services.',
    'established': 'Chengyu Group was established in October 2009 with registered capital of 100 million yuan and over 15 years of experience.',
    'certification': 'Chengyu is a qualified institution for science and technology fund auditing of Beijing Municipal Science and Technology Commission.'
  },
  vi: {
    'dịch vụ thuế': 'Tập đoàn Chengyu cung cấp dịch vụ thuế chuyên nghiệp, bao gồm chứng nhận doanh nghiệp công nghệ cao và hoạch định thuế.',
    'nền tảng đổi mới': 'Chúng tôi hỗ trợ doanh nghiệp đăng ký các nền tảng đổi mới công nghệ các cấp.',
    'giải thưởng danh dự': 'Tập đoàn Chengyu giúp doanh nghiệp đăng ký các giải thưởng tiến bộ khoa học và công nghệ.',
    'quỹ đặc biệt': 'Chúng tôi chuyên xử lý quỹ đặc biệt đầu tư ngân sách trung ương cho kiểm soát ô nhiễm.',
    'chương trình nghiên cứu': 'Tập đoàn Chengyu hỗ trợ doanh nghiệp đăng ký các chương trình nghiên cứu phát triển quốc gia.',
    'chứng chỉ xây dựng': 'Chúng tôi cung cấp dịch vụ đăng ký chứng chỉ đặc biệt ngành xây dựng.',
    'đầu tư': 'Tập đoàn Chengyu cung cấp dịch vụ tư vấn đầu tư và tài chính chuyên nghiệp.',
    'đội ngũ': 'Tập đoàn Chengyu có gần 200 thành viên đội ngũ dịch vụ chuyên nghiệp.',
    'khách hàng': 'Chúng tôi có 400 đối tác lâu dài, bao gồm gần 300 công ty niêm yết và doanh nghiệp nhà nước.',
    'mạng lưới': 'Mạng lưới dịch vụ của Tập đoàn Chengyu phủ sóng gần 30 tỉnh.',
    'thành lập': 'Tập đoàn Chengyu được thành lập vào tháng 10 năm 2009 với vốn đăng ký 100 triệu nhân dân tệ.',
    'chứng nhận': 'Chengyu là cơ quan đủ điều kiện kiểm toán quỹ khoa học của Ủy ban Khoa học Bắc Kinh.'
  }
};

// Digital human videos data for Chengyu Group
const digitalHumanVideos = [
  {
    id: 1,
    title: { zh: '诚裕集团财税服务介绍', en: 'Chengyu Group Tax Services Introduction', vi: 'Giới thiệu Dịch vụ Thuế Tập đoàn Chengyu' },
    description: { zh: '专业财税服务，助力企业发展', en: 'Professional tax services to help enterprise development', vi: 'Dịch vụ thuế chuyên nghiệp để hỗ trợ phát triển doanh nghiệp' },
    videoUrl: 'https://www.w3schools.com/html/mov_bbb.mp4',
    thumbnail: 'https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=800'
  },
  {
    id: 2,
    title: { zh: '科技创新平台申报服务', en: 'Science and Technology Innovation Platform Application', vi: 'Dịch vụ Đăng ký Nền tảng Đổi mới Công nghệ' },
    description: { zh: '国家级科技创新平台，提升企业核心竞争力', en: 'National-level innovation platforms to enhance core competitiveness', vi: 'Nền tảng đổi mới cấp quốc gia để nâng cao năng lực cạnh tranh cốt lõi' },
    videoUrl: 'https://www.w3schools.com/html/mov_bbb.mp4',
    thumbnail: 'https://images.unsplash.com/photo-1554224155-8d52cb6c0dc7?w=800'
  },
  {
    id: 3,
    title: { zh: '荣誉奖项申报成功案例', en: 'Honor Awards Application Success Cases', vi: 'Các Trường hợp Thành công trong Đăng ký Giải thưởng Danh dự' },
    description: { zh: '专业团队，高成功率', en: 'Professional team with high success rate', vi: 'Đội ngũ chuyên nghiệp với tỷ lệ thành công cao' },
    videoUrl: 'https://www.w3schools.com/html/mov_bbb.mp4',
    thumbnail: 'https://images.unsplash.com/photo-1553877522-43269d4ea984?w=800'
  }
];

function Header({ language, setLanguage, mobileMenuOpen, setMobileMenuOpen, t }) {
  return (
    <header className="bg-white/80 backdrop-blur-md shadow-lg sticky top-0 z-50 border-b border-gray-100">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          <div className="flex items-center">
            <Building className="h-8 w-8 text-blue-600 mr-3" />
            <span className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-blue-800 bg-clip-text text-transparent">{t.brand}</span>
          </div>
          
          <nav className="hidden md:flex space-x-8">
            <Link to="/" className="text-gray-700 hover:text-blue-600 font-medium transition-colors duration-200">{t.nav.home}</Link>
            <Link to="/services" className="text-gray-700 hover:text-blue-600 font-medium transition-colors duration-200">{t.nav.services}</Link>
            <Link to="/digital-human" className="text-gray-700 hover:text-blue-600 font-medium transition-colors duration-200">{t.nav.digitalHuman}</Link>
            <Link to="/ai-assistant" className="text-gray-700 hover:text-blue-600 font-medium transition-colors duration-200">{t.nav.aiAssistant}</Link>
            <Link to="/about" className="text-gray-700 hover:text-blue-600 font-medium transition-colors duration-200">{t.nav.about}</Link>
            <Link to="/contact" className="text-gray-700 hover:text-blue-600 font-medium transition-colors duration-200">{t.nav.contact}</Link>
          </nav>

          <div className="flex items-center space-x-4">
            <select 
              value={language} 
              onChange={(e) => setLanguage(e.target.value)}
              className="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white/80 backdrop-blur-sm"
            >
              <option value="zh">中文</option>
              <option value="en">English</option>
              <option value="vi">Tiếng Việt</option>
            </select>
            
            <button 
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
              className="md:hidden text-gray-700 hover:text-blue-600 transition-colors duration-200"
            >
              {mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
            </button>
          </div>
        </div>
      </div>

      {/* Mobile menu */}
      {mobileMenuOpen && (
        <div className="md:hidden bg-white/95 backdrop-blur-md border-t border-gray-100 shadow-lg">
          <div className="px-4 py-3 space-y-1">
            <Link to="/" className="block px-3 py-3 text-gray-700 hover:text-blue-600 font-medium hover:bg-gray-50 rounded-lg transition-colors duration-200">{t.nav.home}</Link>
            <Link to="/services" className="block px-3 py-3 text-gray-700 hover:text-blue-600 font-medium hover:bg-gray-50 rounded-lg transition-colors duration-200">{t.nav.services}</Link>
            <Link to="/digital-human" className="block px-3 py-3 text-gray-700 hover:text-blue-600 font-medium hover:bg-gray-50 rounded-lg transition-colors duration-200">{t.nav.digitalHuman}</Link>
            <Link to="/ai-assistant" className="block px-3 py-3 text-gray-700 hover:text-blue-600 font-medium hover:bg-gray-50 rounded-lg transition-colors duration-200">{t.nav.aiAssistant}</Link>
            <Link to="/about" className="block px-3 py-3 text-gray-700 hover:text-blue-600 font-medium hover:bg-gray-50 rounded-lg transition-colors duration-200">{t.nav.about}</Link>
            <Link to="/contact" className="block px-3 py-3 text-gray-700 hover:text-blue-600 font-medium hover:bg-gray-50 rounded-lg transition-colors duration-200">{t.nav.contact}</Link>
          </div>
        </div>
      )}
    </header>
  );
}

function HomePage({ t }) {
  return (
    <div>
      {/* Hero Section */}
      <section className="bg-gradient-to-r from-blue-600 to-blue-800 text-white py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h1 className="text-4xl md:text-6xl font-bold mb-6">{t.hero.title}</h1>
          <p className="text-xl md:text-2xl mb-8 max-w-4xl mx-auto">{t.hero.subtitle}</p>
          <Link to="/services" className="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
            {t.hero.cta}
          </Link>
        </div>
      </section>

      {/* Services Section */}
      <section className="py-16 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold text-center text-gray-900 mb-12">{t.services.title}</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <DollarSign className="h-12 w-12 text-blue-600 mb-4" />
              <h3 className="text-xl font-semibold mb-2">{t.services.taxService}</h3>
              <p className="text-gray-600">高新技术企业认定、税收筹划等</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <Lightbulb className="h-12 w-12 text-blue-600 mb-4" />
              <h3 className="text-xl font-semibold mb-2">{t.services.innovationPlatform}</h3>
              <p className="text-gray-600">国家企业技术中心、国家重点实验室等</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <Award className="h-12 w-12 text-blue-600 mb-4" />
              <h3 className="text-xl font-semibold mb-2">{t.services.honorAwards}</h3>
              <p className="text-gray-600">科技进步奖、中国专利奖等</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <Target className="h-12 w-12 text-blue-600 mb-4" />
              <h3 className="text-xl font-semibold mb-2">{t.services.specialFunds}</h3>
              <p className="text-gray-600">污染治理、节能减碳专项资金</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <Cpu className="h-12 w-12 text-blue-600 mb-4" />
              <h3 className="text-xl font-semibold mb-2">{t.services.nationalRD}</h3>
              <p className="text-gray-600">科技部国家重点研发计划</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <Shield className="h-12 w-12 text-blue-600 mb-4" />
              <h3 className="text-xl font-semibold mb-2">{t.services.constructionQualification}</h3>
              <p className="text-gray-600">建筑业特级资质业务</p>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function DigitalHumanPage({ t, language }) {
  const [currentVideoIndex, setCurrentVideoIndex] = useState(0);
  const [isPlaying, setIsPlaying] = useState(false);
  const video = digitalHumanVideos[currentVideoIndex];

  const handleNext = () => {
    setCurrentVideoIndex((prev) => (prev + 1) % digitalHumanVideos.length);
    setIsPlaying(false);
  };

  const handlePrev = () => {
    setCurrentVideoIndex((prev) => (prev - 1 + digitalHumanVideos.length) % digitalHumanVideos.length);
    setIsPlaying(false);
  };

  return (
    <div className="py-16">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 className="text-3xl font-bold text-center text-gray-900 mb-4">{t.digitalHuman.title}</h1>
        <p className="text-xl text-center text-gray-600 mb-12">{t.digitalHuman.subtitle}</p>

        <div className="bg-white rounded-lg shadow-lg overflow-hidden">
          <div className="aspect-video bg-gray-900 relative">
            {isPlaying ? (
              <video 
                src={video.videoUrl} 
                controls 
                autoPlay 
                className="w-full h-full object-cover"
                onEnded={() => setIsPlaying(false)}
              />
            ) : (
              <div className="w-full h-full flex items-center justify-center">
                <img 
                  src={video.thumbnail} 
                  alt={video.title[language]} 
                  className="w-full h-full object-cover"
                />
                <button 
                  onClick={() => setIsPlaying(true)}
                  className="absolute bg-blue-600 text-white p-4 rounded-full hover:bg-blue-700 transition-colors"
                >
                  <FileText className="h-8 w-8" />
                </button>
              </div>
            )}
          </div>

          <div className="p-6">
            <h2 className="text-2xl font-semibold mb-2">{video.title[language]}</h2>
            <p className="text-gray-600 mb-4">{video.description[language]}</p>
            
            <div className="flex justify-between items-center">
              <button 
                onClick={handlePrev}
                className="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 transition-colors flex items-center"
              >
                <ChevronDown className="h-5 w-5 mr-1 rotate-90" />
                {t.digitalHuman.prev}
              </button>
              
              <div className="flex space-x-2">
                {digitalHumanVideos.map((_, index) => (
                  <div 
                    key={index}
                    className={`h-2 w-2 rounded-full ${
                      index === currentVideoIndex ? 'bg-blue-600' : 'bg-gray-300'
                    }`}
                  />
                ))}
              </div>
              
              <button 
                onClick={handleNext}
                className="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 transition-colors flex items-center"
              >
                {t.digitalHuman.next}
                <ChevronDown className="h-5 w-5 ml-1 -rotate-90" />
              </button>
            </div>
          </div>
        </div>

        <div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
          {digitalHumanVideos.map((v, index) => (
            <div 
              key={v.id}
              className={`bg-white rounded-lg shadow-md overflow-hidden cursor-pointer transition-all ${
                index === currentVideoIndex ? 'ring-2 ring-blue-600' : 'hover:shadow-lg'
              }`}
              onClick={() => {
                setCurrentVideoIndex(index);
                setIsPlaying(false);
              }}
            >
              <img src={v.thumbnail} alt={v.title[language]} className="w-full h-32 object-cover" />
              <div className="p-4">
                <h3 className="font-semibold">{v.title[language]}</h3>
                <p className="text-sm text-gray-600">{v.description[language]}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function AIAssistantPage({ t, language }) {
  const [messages, setMessages] = useState([]);
  const [inputMessage, setInputMessage] = useState('');
  const [showContactForm, setShowContactForm] = useState(false);
  const [contactInfo, setContactInfo] = useState({ name: '', phone: '', email: '' });

  const handleSendMessage = () => {
    if (!inputMessage.trim()) return;

    const userMessage = { type: 'user', text: inputMessage };
    setMessages([...messages, userMessage]);

    // Simulate AI response
    setTimeout(() => {
      const responseKey = Object.keys(aiResponses[language]).find(key => 
        inputMessage.toLowerCase().includes(key.toLowerCase()) || 
        key.toLowerCase().includes(inputMessage.toLowerCase().split(' ')[0])
      );

      let aiResponse;
      if (responseKey) {
        aiResponse = aiResponses[language][responseKey];
      } else {
        aiResponse = language === 'zh' ? '抱歉，我暂时无法回答这个问题。您可以留下联系方式，我们的诚裕专业顾问会尽快与您联系。' :
                    language === 'en' ? 'Sorry, I cannot answer this question at the moment. You can leave your contact information and our Chengyu experts will contact you soon.' :
                    'Xin lỗi, tôi không thể trả lời câu hỏi này ngay lúc này. Bạn có thể để lại thông tin liên hệ và chuyên gia Chengyu sẽ liên hệ với bạn sớm.';
        setShowContactForm(true);
      }

      setMessages(prev => [...prev, { type: 'ai', text: aiResponse }]);
    }, 1000);

    setInputMessage('');
  };

  const handleContactSubmit = (e) => {
    e.preventDefault();
    alert(language === 'zh' ? '提交成功！诚裕专业顾问会尽快与您联系。' : 
          language === 'en' ? 'Submitted successfully! Chengyu experts will contact you soon.' :
          'Đã gửi thành công! Chuyên gia Chengyu sẽ liên hệ với bạn sớm.');
    setContactInfo({ name: '', phone: '', email: '' });
    setShowContactForm(false);
  };

  return (
    <div className="py-16">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 className="text-3xl font-bold text-center text-gray-900 mb-4">{t.aiAssistant.title}</h1>
        <p className="text-xl text-center text-gray-600 mb-12">{t.aiAssistant.subtitle}</p>

        <div className="bg-white rounded-lg shadow-lg h-96 flex flex-col">
          <div className="flex-1 overflow-y-auto p-4 space-y-4">
            {messages.length === 0 && (
              <div className="text-center text-gray-500 mt-8">
                <Cpu className="h-16 w-16 mx-auto mb-4 text-blue-600" />
                <p>{t.aiAssistant.placeholder}</p>
              </div>
            )}
            
            {messages.map((message, index) => (
              <div 
                key={index}
                className={`flex ${message.type === 'user' ? 'justify-end' : 'justify-start'}`}
              >
                <div 
                  className={`max-w-xs px-4 py-2 rounded-lg ${
                    message.type === 'user' 
                      ? 'bg-blue-600 text-white' 
                      : 'bg-gray-200 text-gray-800'
                  }`}
                >
                  {message.text}
                </div>
              </div>
            ))}
          </div>

          <div className="border-t p-4">
            <div className="flex space-x-2">
              <input 
                type="text"
                value={inputMessage}
                onChange={(e) => setInputMessage(e.target.value)}
                onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
                placeholder={t.aiAssistant.placeholder}
                className="flex-1 border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
              <button 
                onClick={handleSendMessage}
                className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors"
              >
                {t.aiAssistant.send}
              </button>
            </div>
          </div>
        </div>

        {showContactForm && (
          <div className="mt-8 bg-white rounded-lg shadow-lg p-6">
            <h3 className="text-xl font-semibold mb-2">{t.aiAssistant.contactTitle}</h3>
            <p className="text-gray-600 mb-4">{t.aiAssistant.contactSubtitle}</p>
            
            <form onSubmit={handleContactSubmit} className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">{t.aiAssistant.name}</label>
                <input 
                  type="text"
                  value={contactInfo.name}
                  onChange={(e) => setContactInfo({...contactInfo, name: e.target.value})}
                  required
                  className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                />
              </div>
              
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">{t.aiAssistant.phone}</label>
                <input 
                  type="tel"
                  value={contactInfo.phone}
                  onChange={(e) => setContactInfo({...contactInfo, phone: e.target.value})}
                  required
                  className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                />
              </div>
              
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">{t.aiAssistant.email}</label>
                <input 
                  type="email"
                  value={contactInfo.email}
                  onChange={(e) => setContactInfo({...contactInfo, email: e.target.value})}
                  required
                  className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                />
              </div>
              
              <button 
                type="submit"
                className="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition-colors"
              >
                {t.aiAssistant.submit}
              </button>
            </form>
          </div>
        )}
      </div>
    </div>
  );
}

function ServicesPage({ t }) {
  const services = [
    {
      icon: DollarSign,
      title: t.services.taxService,
      description: '以高新认定、税收筹划等为主的财税服务',
      details: ['高新技术企业认定', '税收筹划咨询', '财税合规服务']
    },
    {
      icon: Lightbulb,
      title: t.services.innovationPlatform,
      description: '国家企业技术中心、国家重点实验室等科技创新平台',
      details: ['国家企业技术中心', '国家工程研究中心', '国家重点实验室']
    },
    {
      icon: Award,
      title: t.services.honorAwards,
      description: '各级科技进步奖、中国专利奖等荣誉奖项',
      details: ['科技进步奖申报', '中国专利奖', '其他荣誉奖项']
    },
    {
      icon: Target,
      title: t.services.specialFunds,
      description: '污染治理节能减碳、先进制造业发展等专项资金',
      details: ['污染治理专项', '节能减碳专项', '先进制造业专项']
    },
    {
      icon: Cpu,
      title: t.services.nationalRD,
      description: '科技部国家重点研发计划重点专项',
      details: ['重点专项申报', '科研资金支持', '项目管理和咨询']
    },
    {
      icon: Shield,
      title: t.services.constructionQualification,
      description: '建筑业特级资质业务',
      details: ['特级资质申报', '资质升级咨询', '资质维护服务']
    },
    {
      icon: TrendingUp,
      title: t.services.investment,
      description: '投融资业务',
      details: ['投资咨询', '融资策划', '资本运作']
    }
  ];

  return (
    <div className="py-16">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 className="text-3xl font-bold text-center text-gray-900 mb-12">{t.services.title}</h1>
        
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {services.map((service, index) => (
            <div key={index} className="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
              <service.icon className="h-16 w-16 text-blue-600 mb-6" />
              <h3 className="text-2xl font-semibold mb-4">{service.title}</h3>
              <p className="text-gray-600 mb-4">{service.description}</p>
              <ul className="text-sm text-gray-500 space-y-1">
                {service.details.map((detail, idx) => (
                  <li key={idx}>• {detail}</li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function AboutPage() {
  return (
    <div className="py-16">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 className="text-3xl font-bold text-center text-gray-900 mb-12">关于诚裕集团</h1>
        
        <div className="bg-white rounded-lg shadow-lg p-8 space-y-8">
          <div>
            <h2 className="text-2xl font-semibold mb-4">集团简介</h2>
            <p className="text-gray-600 leading-relaxed">
              诚裕集团成立于2009年10月，注册资金10000万元，是一家专业的咨询服务集团。我们拥有近200人的专业服务团队，400家长久合作伙伴，其中上市公司、央企集团公司、地方国企及其二三级子公司客户近300家，客户遍布全国近三十个省（自治区、直辖市）。
            </p>
          </div>

          <div>
            <h2 className="text-2xl font-semibold mb-4">发展历程</h2>
            <ul className="space-y-2 text-gray-600">
              <li>• 2009年10月 - 诚裕集团成立，注册资金10000万元</li>
              <li>• 2010年 - 成为北京市科委科技经费审计合格机构</li>
              <li>• 2012年 - 连续三年成为市科委国高新技术企业认定咨询机构</li>
              <li>• 2015年 - 海淀园高新技术企业认定专业辅导机构</li>
              <li>• 2018年 - 服务网络覆盖全国近三十个省（自治区、直辖市）</li>
              <li>• 2021年 - 近200人专业服务团队，400家长久合作伙伴</li>
              <li>• 2024年 - 近300家上市、央企、国企客户，业内良好声誉</li>
            </ul>
          </div>

          <div>
            <h2 className="text-2xl font-semibold mb-4">组织架构</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="bg-blue-50 p-4 rounded-lg">
                <h3 className="font-semibold text-blue-900 mb-2">子公司</h3>
                <ul className="text-blue-700 text-sm space-y-1">
                  <li>• 海南诚裕助新科技发展有限公司</li>
                  <li>• 诚裕助新科技发展有限公司广西分公司</li>
                  <li>• 河南诚裕助新科技发展有限公司</li>
                  <li>• 陕西诚裕助新科技发展有限公司</li>
                  <li>• 山西诚裕助新科技发展有限公司</li>
                </ul>
              </div>
              <div className="bg-green-50 p-4 rounded-lg">
                <h3 className="font-semibold text-green-900 mb-2">成员企业</h3>
                <ul className="text-green-700 text-sm space-y-1">
                  <li>• 海南本久企业管理合伙企业（有限合伙）</li>
                  <li>• 北京创高助新会计师事务所（普通合伙）</li>
                  <li>• 中准会计师事务所（特殊普通合伙）河南分所</li>
                  <li>• 北京创高铁研科技发展有限公司</li>
                </ul>
              </div>
            </div>
          </div>

          <div>
            <h2 className="text-2xl font-semibold mb-4">企业文化</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="bg-blue-50 p-4 rounded-lg">
                <h3 className="font-semibold text-blue-900 mb-2">使命</h3>
                <p className="text-blue-700">为上市公司、央企、地方国企等大型公司提供专业的咨询服务，助力企业发展壮大。</p>
              </div>
              <div className="bg-green-50 p-4 rounded-lg">
                <h3 className="font-semibold text-green-900 mb-2">愿景</h3>
                <p className="text-green-700">成为业内最受信赖的咨询服务集团，引领行业发展。</p>
              </div>
              <div className="bg-yellow-50 p-4 rounded-lg">
                <h3 className="font-semibold text-yellow-900 mb-2">价值观</h3>
                <p className="text-yellow-700">专业、诚信、创新、服务</p>
              </div>
              <div className="bg-purple-50 p-4 rounded-lg">
                <h3 className="font-semibold text-purple-900 mb-2">服务理念</h3>
                <p className="text-purple-700">客户至上，质量第一</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function ContactPage() {
  return (
    <div className="py-16">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 className="text-3xl font-bold text-center text-gray-900 mb-12">联系我们</h1>
        
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          <div className="bg-white rounded-lg shadow-lg p-8">
            <h2 className="text-2xl font-semibold mb-6">联系信息</h2>
            
            <div className="space-y-4">
              <div className="flex items-start">
                <Building className="h-6 w-6 text-blue-600 mr-3 mt-1" />
                <div>
                  <h3 className="font-semibold">集团总部</h3>
                  <p className="text-gray-600">北京市海淀区中关村大街1号</p>
                </div>
              </div>
              
              <div className="flex items-start">
                <Phone className="h-6 w-6 text-blue-600 mr-3 mt-1" />
                <div>
                  <h3 className="font-semibold">客服热线</h3>
                  <p className="text-gray-600">400-888-9999</p>
                </div>
              </div>
              
              <div className="flex items-start">
                <Mail className="h-6 w-6 text-blue-600 mr-3 mt-1" />
                <div>
                  <h3 className="font-semibold">电子邮箱</h3>
                  <p className="text-gray-600">service@chengyu-group.com</p>
                </div>
              </div>
              
              <div className="flex items-start">
                <Globe className="h-6 w-6 text-blue-600 mr-3 mt-1" />
                <div>
                  <h3 className="font-semibold">官方网站</h3>
                  <p className="text-gray-600">www.chengyu-group.com</p>
                </div>
              </div>
            </div>
            
            <div className="mt-8">
              <h3 className="font-semibold mb-4">工作时间</h3>
              <p className="text-gray-600">周一至周五：9:00 - 18:00</p>
              <p className="text-gray-600">周六至周日：9:00 - 17:00</p>
              <p className="text-gray-600">节假日：请提前预约</p>
            </div>
          </div>
          
          <div className="bg-white rounded-lg shadow-lg p-8">
            <h2 className="text-2xl font-semibold mb-6">在线留言</h2>
            
            <form className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                <input 
                  type="text"
                  className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                  placeholder="请输入您的姓名"
                />
              </div>
              
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">电话</label>
                <input 
                  type="tel"
                  className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                  placeholder="请输入您的联系电话"
                />
              </div>
              
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                <input 
                  type="email"
                  className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                  placeholder="请输入您的电子邮箱"
                />
              </div>
              
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">留言内容</label>
                <textarea 
                  rows={4}
                  className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                  placeholder="请输入您的留言内容"
                />
              </div>
              
              <button 
                type="submit"
                className="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition-colors"
              >
                提交留言
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
}

function App() {
  const [language, setLanguage] = useState('zh');
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const t = translations[language];

  return (
    <Router>
      <div className="min-h-screen bg-gray-50">
        <Header 
          language={language} 
          setLanguage={setLanguage} 
          mobileMenuOpen={mobileMenuOpen}
          setMobileMenuOpen={setMobileMenuOpen}
          t={t}
        />
        
        <main>
          <Routes>
            <Route path="/" element={<HomePage t={t} />} />
            <Route path="/services" element={<ServicesPage t={t} />} />
            <Route path="/digital-human" element={<DigitalHumanPage t={t} language={language} />} />
            <Route path="/ai-assistant" element={<AIAssistantPage t={t} language={language} />} />
            <Route path="/about" element={<AboutPage />} />
            <Route path="/contact" element={<ContactPage />} />
          </Routes>
        </main>

        <footer className="bg-gray-900 text-white py-12">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
              <div>
                <div className="flex items-center mb-4">
                  <Building className="h-8 w-8 text-blue-400 mr-3" />
                  <span className="text-xl font-bold">{t.brand}</span>
                </div>
                <p className="text-gray-400 text-sm">专业咨询服务集团</p>
              </div>
              
              <div>
                <h3 className="font-semibold mb-4">快速链接</h3>
                <ul className="space-y-2 text-sm text-gray-400">
                  <li><Link to="/services" className="hover:text-white">业务服务</Link></li>
                  <li><Link to="/digital-human" className="hover:text-white">数字人播报</Link></li>
                  <li><Link to="/ai-assistant" className="hover:text-white">AI助手</Link></li>
                </ul>
              </div>
              
              <div>
                <h3 className="font-semibold mb-4">关于我们</h3>
                <ul className="space-y-2 text-sm text-gray-400">
                  <li><Link to="/about" className="hover:text-white">集团简介</Link></li>
                  <li><Link to="/contact" className="hover:text-white">联系我们</Link></li>
                  <li><a href="#" className="hover:text-white">加入我们</a></li>
                </ul>
              </div>
              
              <div>
                <h3 className="font-semibold mb-4">联系方式</h3>
                <ul className="space-y-2 text-sm text-gray-400">
                  <li>客服热线：400-888-9999</li>
                  <li>电子邮箱：service@chengyu-group.com</li>
                  <li>总部地址：北京市海淀区中关村大街1号</li>
                </ul>
              </div>
            </div>
            
            <div className="border-t border-gray-800 mt-8 pt-8 text-center text-sm text-gray-400">
              <p>&copy; 2024 {t.brand}. All rights reserved. | 京ICP备88888888号</p>
            </div>
          </div>
        </footer>
      </div>
    </Router>
  );
}

export default App;