import { motion } from 'framer-motion';
import { useRef } from 'react';
import {
  Target,
  Heart,
  Award,
  Users,
  Calendar,
  TrendingUp,
  Building2,
  Globe,
} from 'lucide-react';
import { Header } from '../components/Header';
import { Footer } from '../components/Footer';
import { COMPANY_INFO } from '../lib/constants';
import { usePageTitle } from '../hooks/usePageTitle';

// 发展历程数据
const milestones = [
  {
    year: '2010',
    title: '公司成立',
    description: '示例集团在北京成立，开始布局金融服务业务',
    icon: Building2,
  },
  {
    year: '2012',
    title: '首次战略融资',
    description: '完成 A 轮融资，获得知名投资机构认可',
    icon: TrendingUp,
  },
  {
    year: '2015',
    title: '业务扩展',
    description: '成立科技研发子公司，进军科技领域',
    icon: Globe,
  },
  {
    year: '2018',
    title: '规模扩张',
    description: '员工规模突破 200 人，服务客户超过 500 家',
    icon: Users,
  },
  {
    year: '2020',
    title: '产业投资布局',
    description: '成立产业投资基金，全面进入投资领域',
    icon: Target,
  },
  {
    year: '2023',
    title: '集团化运营',
    description: '正式更名为示例集团，形成多元化业务体系',
    icon: Award,
  },
  {
    year: '2025',
    title: '新里程碑',
    description: '管理资产突破 500 亿，员工规模超过 500 人',
    icon: Calendar,
  },
];

// 核心价值观数据
const coreValues = [
  {
    icon: Heart,
    title: '诚信为本',
    description: '诚信是企业发展的基石，我们始终坚守诚信底线，与客户、合作伙伴建立长期信任关系',
    color: 'from-red-500 to-red-600',
  },
  {
    icon: Target,
    title: '创新驱动',
    description: '创新是企业发展的动力，我们持续投入研发，不断推出创新产品和服务',
    color: 'from-blue-500 to-blue-600',
  },
  {
    icon: Award,
    title: '卓越品质',
    description: '品质是企业生存的根本，我们追求卓越，确保每一个项目都达到最高标准',
    color: 'from-yellow-500 to-yellow-600',
  },
  {
    icon: Users,
    title: '共赢合作',
    description: '合作是企业成功的关键，我们与客户、员工、合作伙伴实现互利共赢',
    color: 'from-green-500 to-green-600',
  },
];

// 团队成员数据
const teamMembers = [
  {
    name: '张明远',
    position: '董事长兼 CEO',
    bio: '毕业于清华大学金融系，拥有 20 年金融行业经验，曾任多家知名金融机构高管。',
  },
  {
    name: '李晓峰',
    position: '首席财务官 CFO',
    bio: '持有注册会计师资格，曾在四大会计师事务所工作 15 年，专业财务管理和资本运作专家。',
  },
  {
    name: '王建华',
    position: '首席技术官 CTO',
    bio: '计算机科学博士，曾在国内外知名科技公司担任技术负责人，拥有多项技术专利。',
  },
  {
    name: '陈静雅',
    position: '首席运营官 COO',
    bio: 'MBA 学位，拥有丰富的企业运营管理经验，擅长战略规划和流程优化。',
  },
];

// 荣誉资质数据
const honors = [
  { name: '国家级高新技术企业认证', year: '2020' },
  { name: '北京市优秀企业', year: '2021' },
  { name: '中国最佳雇主品牌', year: '2022' },
  { name: '金融科技创新奖', year: '2023' },
  { name: '年度优秀企业', year: '2024' },
  { name: 'ESG 最佳实践奖', year: '2025' },
];

/**
 * About 组件 - 关于我们页面
 */
export const About: React.FC = () => {
  const timelineRef = useRef<HTMLDivElement>(null);
  usePageTitle('关于我们');

  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">
                示例集团成立于 2010 年，是一家集科技研发、金融服务、产业投资于一体的综合性企业集团
              </p>
            </motion.div>
          </div>
        </section>

        {/* 公司简介 */}
        <section className="py-20">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="grid lg:grid-cols-2 gap-12 items-center">
              <motion.div
                initial={{ opacity: 0, x: -30 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6 }}
              >
                <h2 className="text-3xl font-bold text-primary-dark mb-6">
                  公司简介
                </h2>
                <div className="space-y-6 text-gray-600 leading-relaxed">
                  <p>
                    <strong>{COMPANY_INFO.fullName}</strong>
                    成立于 {COMPANY_INFO.established}，总部位于 {COMPANY_INFO.headquarters}。
                    经过十余年的稳健发展，示例集团已形成了以金融服务、科技研发、产业投资为核心的多元化业务体系。
                  </p>
                  <p>
                    集团秉承"诚信、创新、共赢"的核心价值观，致力于为客户创造最大价值。
                    我们拥有一支经验丰富、专业高效的管理团队，汇聚了金融、科技、投资等领域的优秀人才。
                  </p>
                  <p>
                    截至目前，示例集团已成功为超过 1000 家企业客户提供专业服务，
                    管理资产规模突破 500 亿元人民币，业务范围覆盖全国主要城市。
                  </p>
                </div>

                {/* 核心数据 */}
                <div className="mt-8 grid grid-cols-3 gap-6">
                  <div className="text-center p-4 bg-primary/5 rounded-xl">
                    <div className="text-2xl font-bold text-primary">15+</div>
                    <div className="text-sm text-gray-600">年发展历程</div>
                  </div>
                  <div className="text-center p-4 bg-accent/10 rounded-xl">
                    <div className="text-2xl font-bold text-accent-dark">500+</div>
                    <div className="text-sm text-gray-600">员工人数</div>
                  </div>
                  <div className="text-center p-4 bg-green-100 rounded-xl">
                    <div className="text-2xl font-bold text-green-700">1000+</div>
                    <div className="text-sm text-gray-600">服务客户</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, delay: 0.2 }}
              >
                <div className="aspect-[4/3] rounded-2xl overflow-hidden shadow-xl">
                  <img 
                    src="/images/about-office.jpg" 
                    alt="示例集团办公环境" 
                    className="w-full h-full object-cover"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent flex items-end justify-center p-8">
                    <div className="text-center text-white">
                      <div className="text-4xl font-bold mb-2">示例集团</div>
                      <div className="text-xl opacity-90">稳健前行 · 携手共赢</div>
                    </div>
                  </div>
                </div>
                {/* 装饰元素 */}
                <div className="absolute -bottom-6 -right-6 w-32 h-32 bg-accent/20 rounded-2xl -z-10" />
                <div className="absolute -top-6 -left-6 w-24 h-24 bg-primary/10 rounded-2xl -z-10" />
              </motion.div>
            </div>
          </div>
        </section>

        {/* 发展历程时间线 */}
        <section className="py-20 bg-white" ref={timelineRef}>
          <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="relative">
              {/* 中轴线 */}
              <div className="absolute left-1/2 -translate-x-1/2 w-0.5 h-full bg-gradient-to-b from-primary via-accent to-primary-light hidden md:block" />

              {/* 时间线项目 */}
              <div className="space-y-12">
                {milestones.map((milestone, index) => (
                  <motion.div
                    key={milestone.year}
                    className={`flex items-center gap-8 ${
                      index % 2 === 0 ? 'md:flex-row' : 'md:flex-row-reverse'
                    }`}
                    initial={{ opacity: 0, y: 30 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }}
                    transition={{ delay: index * 0.1, duration: 0.5 }}
                  >
                    {/* 内容区域 */}
                    <div className="flex-1 text-center md:text-left">
                      <div
                        className={`p-6 bg-white rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow ${
                          index % 2 === 0 ? 'md:pr-12' : 'md:pl-12'
                        }`}
                      >
                        <span className="inline-block px-3 py-1 bg-accent/20 text-accent-dark text-sm font-semibold rounded-full mb-3">
                          {milestone.year}
                        </span>
                        <h3 className="text-xl font-semibold text-primary-dark mb-2">
                          {milestone.title}
                        </h3>
                        <p className="text-gray-600">{milestone.description}</p>
                      </div>
                    </div>

                    {/* 中间图标 */}
                    <div className="hidden md:flex items-center justify-center w-12 h-12 rounded-full bg-primary text-white shadow-lg z-10">
                      <milestone.icon size={20} />
                    </div>

                    {/* 空白区域 */}
                    <div className="flex-1 hidden md:block" />
                  </motion.div>
                ))}
              </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-2 lg:grid-cols-4 gap-8">
              {coreValues.map((value, index) => (
                <motion.div
                  key={value.title}
                  className="text-center p-6 rounded-2xl bg-white/5 hover:bg-white/10 transition-colors"
                  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={`inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-br ${value.color} text-white mb-5`}
                  >
                    <value.icon size={32} />
                  </div>
                  <h3 className="text-xl font-semibold mb-3">{value.title}</h3>
                  <p className="text-gray-300 text-sm leading-relaxed">
                    {value.description}
                  </p>
                </motion.div>
              ))}
            </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">
              {teamMembers.map((member, index) => (
                <motion.div
                  key={member.name}
                  className="text-center p-6 bg-white rounded-2xl shadow-sm border border-gray-100 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="w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden ring-4 ring-primary/10">
                     <div className="w-full h-full rounded-full bg-gradient-to-br from-primary to-primary-light flex items-center justify-center text-white text-2xl font-bold shadow-lg">
                       {member.name.charAt(0)}
                     </div>
                   </div>
                  <h3 className="text-xl font-semibold text-primary-dark">
                    {member.name}
                  </h3>
                  <p className="text-accent font-medium mb-3">{member.position}</p>
                  <p className="text-gray-600 text-sm leading-relaxed">
                    {member.bio}
                  </p>
                </motion.div>
              ))}
            </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-3 gap-6">
              {honors.map((honor, index) => (
               <motion.div
                   key={honor.name}
                   className="flex items-center gap-4 p-5 bg-background rounded-xl hover:shadow-md transition-shadow"
                   initial={{ opacity: 0, x: -20 }}
                   whileInView={{ opacity: 1, x: 0 }}
                   viewport={{ once: true }}
                   transition={{ delay: index * 0.1, duration: 0.5 }}
                   whileHover={{ x: 5 }}
                 >
                   <div className="flex-shrink-0 w-16 h-16 rounded-lg bg-gradient-to-br from-accent/20 to-accent/10 flex items-center justify-center">
                     <Award size={28} className="text-accent" />
                   </div>
                   <div className="flex-1">
                     <h4 className="font-medium text-primary-dark">
                       {honor.name}
                     </h4>
                     <p className="text-sm text-gray-500">获得年份：{honor.year}</p>
                   </div>
                 </motion.div>
              ))}
            </div>
          </div>
        </section>
      </main>

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

export default About;