'use client';

import { motion } from 'framer-motion';
import { useInView } from 'framer-motion';
import { useRef } from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { Lightbulb, Users, Target, Award } from 'lucide-react';
import { COMPANY_INFO, STATS } from '@/lib/constants';

const values = [
  {
    icon: Lightbulb,
    title: '创新驱动',
    description: '持续探索前沿技术，以创新思维解决业务挑战，为客户创造差异化价值',
  },
  {
    icon: Users,
    title: '客户至上',
    description: '深入理解客户需求，提供个性化解决方案，建立长期合作伙伴关系',
  },
  {
    icon: Target,
    title: '追求卓越',
    description: '精益求精的工作态度，确保每个项目都达到最高质量标准',
  },
  {
    icon: Award,
    title: '诚信负责',
    description: '恪守商业道德，对承诺负责，赢得客户和社会的信任与尊重',
  },
];

const milestones = [
  {
    date: '2026年1月15日',
    title: '公司成立',
    description: '四川睿新致远科技有限公司在成都龙泉驿区正式成立，开始提供软件开发服务',
  },
];

export function AboutSection() {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: '-100px' });

  return (
    <section id="about" className="py-24 bg-white relative" ref={ref}>
      <div className="absolute inset-0 bg-[linear-gradient(rgba(0,94,184,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(0,94,184,0.02)_1px,transparent_1px)] bg-[size:40px_40px]" />
      <div className="container-wide relative z-10">
        <motion.div 
          initial={{ opacity: 0, y: 20 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6 }}
          className="max-w-4xl mx-auto"
        >
          <div className="text-center mb-16">
            <span className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-[#005EB8]/30 bg-[#E8F4FD] text-[#005EB8] text-sm font-medium mb-4">
              关于我们
            </span>
            <h2 className="text-4xl md:text-5xl font-bold text-[#1A1A2E] mb-6">
              关于 <span className="text-[#C41E3A]">{COMPANY_INFO.shortName}</span>
            </h2>
            <p className="text-lg text-[#718096]">
              {COMPANY_INFO.slogan}
            </p>
          </div>

          <div className="mb-16">
            <h3 className="text-2xl font-bold text-[#1A1A2E] mb-4">公司简介</h3>
            <p className="text-[#718096] mb-6 leading-relaxed">
              {COMPANY_INFO.name}成立于{COMPANY_INFO.founded}年1月15日，总部位于{COMPANY_INFO.location}龙泉驿区幸福路12号。
              公司专注于信息技术服务与解决方案，致力于为企业提供全方位的数字化转型支持。
            </p>
            <p className="text-[#718096] mb-6 leading-relaxed">
              我们拥有一支经验丰富的技术团队，在软件开发、云计算、数据分析、信息安全等领域具有深厚的技术积累。
              公司秉承&ldquo;专注科技创新，驱动智慧未来&rdquo;的理念，为客户提供高质量的产品和服务，助力企业在数字经济时代实现转型升级。
            </p>
          </div>

          <motion.div 
            initial={{ opacity: 0, y: 20 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-16"
          >
            {STATS.map((stat, idx) => (
              <Card key={idx} className="text-center border-[#E2E8F0]">
                <CardContent className="pt-6">
                  <div className="text-3xl sm:text-4xl font-bold text-[#C41E3A] mb-2">{stat.value}</div>
                  <div className="text-sm text-[#718096]">{stat.label}</div>
                </CardContent>
              </Card>
            ))}
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.3 }}
            className="mb-16"
          >
            <h3 className="text-2xl font-bold text-[#1A1A2E] mb-8 text-center">企业价值观</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {values.map((value, idx) => (
                <motion.div
                  key={value.title}
                  initial={{ opacity: 0, y: 20 }}
                  animate={isInView ? { opacity: 1, y: 0 } : {}}
                  transition={{ duration: 0.5, delay: 0.4 + idx * 0.1 }}
                  className="flex items-start gap-4 p-6 bg-[#F5F7FA] rounded-xl border border-[#E2E8F0] hover:border-[#005EB8] transition-all duration-300"
                >
                  <div className="w-12 h-12 rounded-lg bg-[#005EB8] flex items-center justify-center flex-shrink-0">
                    <value.icon className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <h4 className="font-semibold text-[#1A1A2E] mb-2">{value.title}</h4>
                    <p className="text-[#718096] text-sm">{value.description}</p>
                  </div>
                </motion.div>
              ))}
            </div>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.5 }}
          >
            <h3 className="text-2xl font-bold text-[#1A1A2E] mb-8 text-center">发展历程</h3>
            <div className="space-y-6">
              {milestones.map((milestone, idx) => (
                <motion.div
                  key={milestone.title}
                  initial={{ opacity: 0, x: -20 }}
                  animate={isInView ? { opacity: 1, x: 0 } : {}}
                  transition={{ duration: 0.5, delay: 0.6 + idx * 0.1 }}
                  className="flex flex-col md:flex-row md:items-start gap-4 p-6 bg-[#F5F7FA] rounded-xl border border-[#E2E8F0]"
                >
                  <div className="md:w-32 flex-shrink-0">
                    <span className="text-sm font-medium text-[#005EB8]">{milestone.date}</span>
                  </div>
                  <div className="flex-1">
                    <h4 className="font-semibold text-[#1A1A2E] mb-1">{milestone.title}</h4>
                    <p className="text-[#718096] text-sm">{milestone.description}</p>
                  </div>
                </motion.div>
              ))}
            </div>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
}
