import { motion } from 'framer-motion';
import { useState } from 'react';
import {
  TrendingUp,
  Cpu,
  Building2,
  Briefcase,
  CheckCircle,
  Target,
  BarChart3,
  Shield,
  Lightbulb,
  Rocket,
  Handshake,
  PieChart,
  Globe,
  Users,
  Zap,
} from 'lucide-react';
import { Header } from '../components/Header';
import { Footer } from '../components/Footer';
import { SERVICES } from '../lib/constants';
import { usePageTitle } from '../hooks/usePageTitle';

/**
 * Services 组件 - 产品服务页面
 */

// 详细服务数据
const serviceDetails = {
  finance: {
    description: '我们的金融服务涵盖资产配置、投资顾问、风险管理等全方位金融解决方案，帮助客户实现财富稳健增长。',
    features: [
      { icon: PieChart, title: '资产配置', desc: '根据客户风险偏好和投资目标，提供个性化的资产配置方案' },
      { icon: TrendingUp, title: '投资顾问', desc: '专业投资顾问团队，提供一对一的投资咨询和指导服务' },
      { icon: Shield, title: '风险管理', desc: '完善的风险控制体系，确保投资安全可控' },
      { icon: BarChart3, title: '业绩报告', desc: '定期提供详细的业绩报告和分析，让客户清晰了解投资状况' },
    ],
    process: [
      { step: '01', title: '需求沟通', desc: '了解客户投资目标和风险偏好' },
      { step: '02', title: '方案设计', desc: '制定个性化资产配置方案' },
      { step: '03', title: '投资执行', desc: '按照方案进行投资操作' },
      { step: '04', title: '持续跟踪', desc: '定期调整和优化投资组合' },
    ],
  },
  tech: {
    description: '我们聚焦人工智能、大数据、云计算等前沿技术，为企业提供全方位的数字化转型解决方案。',
    features: [
      { icon: Cpu, title: 'AI 解决方案', desc: '利用人工智能技术，帮助企业实现智能化升级' },
      { icon: Lightbulb, title: '大数据分析', desc: '深度挖掘数据价值，提供决策支持' },
      { icon: Zap, title: '云服务', desc: '为企业提供稳定、高效的云计算服务' },
      { icon: Rocket, title: '产品研发', desc: '定制化软件产品开发和创新解决方案' },
    ],
    process: [
      { step: '01', title: '需求分析', desc: '深入了解企业数字化需求' },
      { step: '02', title: '方案规划', desc: '制定数字化转型路线图' },
      { step: '03', title: '开发实施', desc: '按照方案进行系统开发和部署' },
      { step: '04', title: '运维支持', desc: '提供持续的技术支持和维护服务' },
    ],
  },
  investment: {
    description: '我们专注于新兴产业投资，通过战略投资推动产业升级，为投资者创造丰厚回报。',
    features: [
      { icon: Target, title: '股权投资', desc: '聚焦高成长性企业，把握产业投资机会' },
      { icon: Building2, title: '产业基金', desc: '设立专项产业基金，支持重点产业发展' },
      { icon: Handshake, title: '并购重组', desc: '协助企业进行并购整合，实现规模扩张' },
      { icon: Globe, title: '跨境投资', desc: '布局全球市场，寻求国际投资机会' },
    ],
    process: [
      { step: '01', title: '项目筛选', desc: '严格筛选优质投资项目' },
      { step: '02', title: '尽职调查', desc: '深入调研项目基本面' },
      { step: '03', title: '投资决策', desc: '专业评审委员会决策' },
      { step: '04', title: '投后管理', desc: '提供增值服务，助力企业成长' },
    ],
  },
  consulting: {
    description: '我们为企业提供战略规划、运营优化、风险管理等专业咨询服务，助力企业持续发展。',
    features: [
      { icon: Target, title: '战略规划', desc: '帮助企业制定长期发展战略' },
      { icon: Users, title: '管理咨询', desc: '优化组织架构和业务流程' },
      { icon: BarChart3, title: '财务咨询', desc: '提供财务规划和优化建议' },
      { icon: Shield, title: '风险咨询', desc: '识别和控制企业经营风险' },
    ],
    process: [
      { step: '01', title: '现状诊断', desc: '全面评估企业现状' },
      { step: '02', title: '问题分析', desc: '深入分析核心问题' },
      { step: '03', title: '方案设计', desc: '制定针对性解决方案' },
      { step: '04', title: '落地实施', desc: '协助方案落地和效果跟踪' },
    ],
  },
};

// 成功案例数据
const cases = [
  {
    id: 1,
    title: '某大型制造企业数字化转型',
    category: 'tech',
    description: '帮助某大型制造企业完成全面的数字化转型，实现生产效率提升 30%，成本降低 20%。',
    result: ['生产效率提升 30%', '成本降低 20%', '库存周转率提升 40%'],
    image: null,
  },
  {
    id: 2,
    title: '新兴产业基金设立与运营',
    category: 'investment',
    description: '为某地方政府设立 50 亿元新兴产业投资基金，成功投资 20 余个优质项目。',
    result: ['基金规模 50 亿元', '投资项目 20+', '平均回报率 25%'],
    image: null,
  },
  {
    id: 3,
    title: '企业战略重组咨询项目',
    category: 'consulting',
    description: '为某上市公司提供战略重组咨询服务，成功完成业务整合，实现市值增长 50%。',
    result: ['市值增长 50%', '完成 3 家公司整合', '营收增长 35%'],
    image: null,
  },
  {
    id: 4,
    title: '高净值客户财富管理',
    category: 'finance',
    description: '为某高净值客户提供全方位的财富管理服务，5 年累计收益达到 120%。',
    result: ['累计收益 120%', '资产规模增长 80%', '零重大风险事件'],
    image: null,
  },
];

// 合作伙伴数据
const partners = [
  { name: '中国银行', industry: '金融' },
  { name: '华为技术', industry: '科技' },
  { name: '中信证券', industry: '金融' },
  { name: '阿里巴巴', industry: '科技' },
  { name: '招商银行', industry: '金融' },
  { name: '腾讯云', industry: '科技' },
  { name: '建设银行', industry: '金融' },
  { name: '字节跳动', industry: '科技' },
];

// 分类标签
const categories = [
  { id: 'all', label: '全部' },
  { id: 'finance', label: '金融服务' },
  { id: 'tech', label: '科技研发' },
  { id: 'investment', label: '产业投资' },
  { id: 'consulting', label: '咨询服务' },
];

/**
 * 成功案例卡片组件
 */
const CaseCard: React.FC<{ case: typeof cases[0]; index: number }> = ({ case: caseItem, index }) => (
  <motion.div
    className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-lg transition-shadow"
    initial={{ opacity: 0, y: 30 }}
    whileInView={{ opacity: 1, y: 0 }}
    viewport={{ once: true }}
    transition={{ delay: index * 0.1, duration: 0.5 }}
    whileHover={{ y: -5 }}
  >
 {/* 案例图片 */}
     <div className="aspect-[16/9] overflow-hidden bg-gradient-to-br from-primary/5 to-primary-light/10">
       <img 
         src={`https://images.unsplash.com/photo-${
           caseItem.category === 'tech' ? '1518770660439-4636190af475' : 
           caseItem.category === 'investment' ? '1460925895917-afdab827c52f' : 
           caseItem.category === 'consulting' ? '1552664730-d307ca884978' : 
           '1551288049-1bf847840e16'
         }?w=800&h=450&fit=crop`}
         alt={caseItem.title}
         className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
       />
     </div>
    <div className="p-6">
      <span className="inline-block px-3 py-1 text-xs font-medium bg-accent/20 text-accent-dark rounded-full mb-3">
        {categories.find(c => c.id === caseItem.category)?.label}
      </span>
      <h3 className="text-xl font-semibold text-primary-dark mb-3">
        {caseItem.title}
      </h3>
      <p className="text-gray-600 text-sm mb-4">{caseItem.description}</p>
      <div className="space-y-2">
        {caseItem.result.map((result, i) => (
          <div key={i} className="flex items-center gap-2 text-sm text-gray-600">
            <CheckCircle size={14} className="text-accent flex-shrink-0" />
            {result}
          </div>
        ))}
      </div>
    </div>
  </motion.div>
);

/**
 * Services 组件
 */
export const Services: React.FC = () => {
  usePageTitle('产品服务');
  const [activeCategory, setActiveCategory] = useState('all');

  const filteredCases = activeCategory === 'all'
    ? cases
    : cases.filter(c => c.category === activeCategory);

  return (
    <motion.div
      className="min-h-screen bg-background"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
    >
      {/* 顶部导航 */}
      <Header />

      {/* 主内容 */}
      <main>
        {/* 页面标题 */}
        <section className="pt-32 pb-16 bg-gradient-to-br from-primary to-primary-light">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <motion.div
              className="text-center text-white"
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
            >
              <h1 className="text-4xl md:text-5xl font-bold mb-4">
                产品服务
              </h1>
              <p className="text-xl text-white/80 max-w-3xl mx-auto">
                为客户提供全方位的专业服务解决方案
              </p>
            </motion.div>
          </div>
        </section>

        {/* 服务概览 */}
        <section className="py-20">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <motion.div
              className="text-center mb-16"
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
            >
              <h2 className="text-3xl font-bold text-primary-dark mb-4">
                核心业务板块
              </h2>
              <p className="text-lg text-gray-600">
                四大核心业务，构建全方位服务体系
              </p>
            </motion.div>

            {/* 服务卡片 */}
            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
              {SERVICES.map((service, index) => {
                const iconMap: Record<string, React.ComponentType<{ size?: number; className?: string }>> = {
                  TrendingUp,
                  Cpu,
                  Building2,
                  Briefcase,
                };
                const Icon = iconMap[service.icon] || TrendingUp;

                return (
                  <motion.div
                    key={service.id}
                    className="group p-8 bg-white rounded-2xl shadow-sm border border-gray-100 hover:shadow-lg transition-all duration-300"
                    initial={{ opacity: 0, y: 30 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }}
                    transition={{ delay: index * 0.1, duration: 0.5 }}
                    whileHover={{ y: -8 }}
                  >
                    <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-br from-primary to-primary-light text-white mb-6 group-hover:scale-110 transition-transform duration-300">
                      <Icon size={32} />
                    </div>
                    <h3 className="text-xl font-semibold text-primary-dark mb-4">
                      {service.title}
                    </h3>
                    <p className="text-gray-600 text-sm leading-relaxed mb-6">
                      {service.description}
                    </p>
                    <ul className="space-y-2">
                      {service.features.map((feature, i) => (
                        <li key={i} className="flex items-center gap-2 text-sm text-gray-600">
                          <CheckCircle size={14} className="text-accent" />
                          {feature}
                        </li>
                      ))}
                    </ul>
                  </motion.div>
                );
              })}
            </div>
          </div>
        </section>

        {/* 详细服务介绍 - 使用 Tab 切换 */}
        <section className="py-20 bg-white">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <motion.div
              className="text-center mb-16"
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
            >
              <h2 className="text-3xl font-bold text-primary-dark mb-4">
                服务详情
              </h2>
              <p className="text-lg text-gray-600">
                深入了解我们的专业服务
              </p>
            </motion.div>

            {/* 使用静态展示代替 Tab - 展示金融服务 */}
            <div className="grid lg:grid-cols-2 gap-12 items-center mb-20">
              <motion.div
                initial={{ opacity: 0, x: -30 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6 }}
              >
                <span className="inline-block px-4 py-1 bg-accent/20 text-accent-dark text-sm font-semibold rounded-full mb-4">
                  金融服务
                </span>
                <h3 className="text-2xl font-bold text-primary-dark mb-6">
                  专业财富管理解决方案
                </h3>
                <p className="text-gray-600 leading-relaxed mb-8">
                  {serviceDetails.finance.description}
                </p>

                {/* 特性列表 */}
                <div className="grid sm:grid-cols-2 gap-4 mb-8">
                  {serviceDetails.finance.features.map((feature, index) => (
                    <div key={index} className="flex items-start gap-3 p-4 bg-background rounded-xl">
                      <div className="p-2 bg-primary/10 rounded-lg">
                        <feature.icon size={20} className="text-primary" />
                      </div>
                      <div>
                        <h4 className="font-medium text-primary-dark text-sm">
                          {feature.title}
                        </h4>
                        <p className="text-xs text-gray-500 mt-1">{feature.desc}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </motion.div>

              <motion.div
                className="relative"
                initial={{ opacity: 0, x: 30 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6 }}
              >
               <div className="aspect-square rounded-2xl overflow-hidden shadow-xl">
                   <img 
                     src="https://images.unsplash.com/photo-1554224311-beee460ae6ba?w=800&h=800&fit=crop"
                     alt="金融服务 - 数据分析与财富管理"
                     className="w-full h-full object-cover hover:scale-105 transition-transform duration-500"
                   />
                 </div>
              </motion.div>
            </div>

            {/* 科技研发 */}
            <div className="grid lg:grid-cols-2 gap-12 items-center mb-20">
              <motion.div
                className="order-2 lg:order-1"
                initial={{ opacity: 0, x: -30 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6 }}
              >
               <div className="aspect-square rounded-2xl overflow-hidden shadow-xl">
                   <img 
                     src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=800&h=800&fit=crop"
                     alt="科技研发 - 数字化转型与创新"
                     className="w-full h-full object-cover hover:scale-105 transition-transform duration-500"
                   />
                 </div>
              </motion.div>

              <motion.div
                className="order-1 lg:order-2"
                initial={{ opacity: 0, x: 30 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6 }}
              >
                <span className="inline-block px-4 py-1 bg-primary/10 text-primary text-sm font-semibold rounded-full mb-4">
                  科技研发
                </span>
                <h3 className="text-2xl font-bold text-primary-dark mb-6">
                  数字化转型专家
                </h3>
                <p className="text-gray-600 leading-relaxed mb-8">
                  {serviceDetails.tech.description}
                </p>

                <div className="grid sm:grid-cols-2 gap-4 mb-8">
                  {serviceDetails.tech.features.map((feature, index) => (
                    <div key={index} className="flex items-start gap-3 p-4 bg-background rounded-xl">
                      <div className="p-2 bg-accent/20 rounded-lg">
                        <feature.icon size={20} className="text-accent-dark" />
                      </div>
                      <div>
                        <h4 className="font-medium text-primary-dark text-sm">
                          {feature.title}
                        </h4>
                        <p className="text-xs text-gray-500 mt-1">{feature.desc}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </motion.div>
            </div>
          </div>
        </section>

        {/* 成功案例 */}
        <section className="py-20 bg-background">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <motion.div
              className="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-12"
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
            >
              <div>
                <h2 className="text-3xl font-bold text-primary-dark mb-2">
                  成功案例
                </h2>
                <p className="text-lg text-gray-600">
                  真实项目，展现专业实力
                </p>
              </div>

              {/* 筛选标签 */}
              <div className="flex flex-wrap gap-2">
                {categories.slice(0, 5).map((category) => (
                  <button
                    key={category.id}
                    onClick={() => setActiveCategory(category.id)}
                    className={`px-4 py-2 text-sm font-medium rounded-lg transition-all ${
                      activeCategory === category.id
                        ? 'bg-primary text-white'
                        : 'bg-white text-gray-600 hover:bg-gray-100'
                    }`}
                  >
                    {category.label}
                  </button>
                ))}
              </div>
            </motion.div>

            {/* 案例网格 */}
            <div className="grid md:grid-cols-2 lg:grid-cols-2 gap-8">
              {filteredCases.map((caseItem, index) => (
                <CaseCard key={caseItem.id} case={caseItem} index={index} />
              ))}
            </div>
          </div>
        </section>

        {/* 合作伙伴 */}
        <section className="py-20 bg-white">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <motion.div
              className="text-center mb-16"
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
            >
              <h2 className="text-3xl font-bold text-primary-dark mb-4">
                合作伙伴
              </h2>
              <p className="text-lg text-gray-600">
                与众多知名企业建立深度合作关系
              </p>
            </motion.div>

            <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
              {partners.map((partner, index) => (
                <motion.div
                  key={partner.name}
                  className="p-6 bg-background rounded-xl hover:shadow-md transition-shadow flex flex-col items-center"
                  initial={{ opacity: 0, scale: 0.9 }}
                  whileInView={{ opacity: 1, scale: 1 }}
                  viewport={{ once: true }}
                  transition={{ delay: index * 0.1, duration: 0.5 }}
                  whileHover={{ y: -3 }}
                >
               <div className="w-16 h-16 rounded-lg overflow-hidden mb-4 bg-gradient-to-br from-primary/10 to-primary-light/10 flex items-center justify-center">
                     <Building2 size={32} className="text-primary opacity-50" />
                   </div>
                  <h4 className="font-semibold text-primary-dark">
                    {partner.name}
                  </h4>
                  <p className="text-sm text-gray-500">{partner.industry}</p>
                </motion.div>
              ))}
            </div>
          </div>
        </section>

        {/* 服务流程 */}
        <section className="py-20 bg-primary-dark text-white">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <motion.div
              className="text-center mb-16"
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
            >
              <h2 className="text-3xl font-bold mb-4">服务流程</h2>
              <p className="text-lg text-gray-300">
                标准化流程，确保服务质量
              </p>
            </motion.div>

            <div className="grid md:grid-cols-4 gap-8">
              {serviceDetails.finance.process.map((step, index) => (
                <motion.div
                  key={step.step}
                  className="text-center"
                  initial={{ opacity: 0, y: 30 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ delay: index * 0.1, duration: 0.5 }}
                >
                  <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-accent text-primary-dark font-bold text-xl mb-6">
                    {step.step}
                  </div>
                  <h3 className="text-xl font-semibold mb-3">{step.title}</h3>
                  <p className="text-gray-400 text-sm">{step.desc}</p>
                </motion.div>
              ))}
            </div>
          </div>
        </section>
      </main>

      {/* 页脚 */}
      <Footer />
    </motion.div>
  );
};

export default Services;
