import { motion } from 'framer-motion';
import { TrendingUp, Cpu, Building2, Briefcase, ArrowRight } from 'lucide-react';
import { Link } from 'react-router-dom';
import { SERVICES } from '../../lib/constants';

/**
 * ServicesSection 组件 - 核心业务展示区域
 */

// 业务卡片组件
const ServiceCard: React.FC<{
  service: typeof SERVICES[0];
  index: number;
}> = ({ 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
      className="group relative p-8 bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden"
      initial={{ opacity: 0, y: 30 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ delay: index * 0.1, duration: 0.5 }}
      whileHover={{ y: -8, boxShadow: '0 20px 40px rgba(0,0,0,0.1)' }}
    >
      {/* 背景装饰 */}
      <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-primary/5 to-accent/5 rounded-full -translate-y-1/2 translate-x-1/2 group-hover:scale-150 transition-transform duration-500" />

      {/* 图标 */}
      <div className="relative z-10 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="relative z-10 text-xl font-semibold text-primary-dark mb-4">
        {service.title}
      </h3>
      <p className="relative z-10 text-gray-600 leading-relaxed mb-6">
        {service.description}
      </p>

      {/* 特性列表 */}
      <ul className="relative z-10 space-y-3 mb-8">
        {service.features.map((feature) => (
          <li key={feature} className="flex items-center gap-2 text-sm text-gray-600">
            <span className="w-1.5 h-1.5 rounded-full bg-accent" />
            {feature}
          </li>
        ))}
      </ul>

      {/* 了解更多链接 */}
      <Link
        to={`/services/${service.id}`}
        className="relative z-10 inline-flex items-center gap-2 text-primary font-medium group-hover:text-primary-light transition-colors"
      >
        了解更多
        <motion.span
          initial={{ x: 0 }}
          whileHover={{ x: 5 }}
          transition={{ duration: 0.2 }}
        >
          <ArrowRight size={18} />
        </motion.span>
      </Link>

      {/* 悬停边框效果 */}
      <div className="absolute inset-0 border-2 border-transparent group-hover:border-accent/30 rounded-2xl transition-colors duration-300" />
    </motion.div>
  );
};

export const ServicesSection: React.FC = () => {
  return (
    <section
      id="services"
      className="py-20 lg:py-28 bg-white"
      aria-labelledby="services-heading"
    >
      <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
            id="services-heading"
            className="text-3xl md:text-4xl font-bold text-primary-dark"
          >
            核心业务
          </h2>
          <p className="mt-4 text-lg text-gray-600 max-w-3xl mx-auto">
            我们提供全方位的专业服务，帮助客户实现商业目标
          </p>
        </motion.div>

        {/* 业务卡片网格 */}
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
          {SERVICES.map((service, index) => (
            <ServiceCard key={service.id} service={service} index={index} />
          ))}
        </div>

        {/* 查看全部服务 */}
        <motion.div
          className="mt-12 text-center"
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true }}
          transition={{ delay: 0.4, duration: 0.6 }}
        >
          <Link
            to="/services"
            className="inline-flex items-center gap-2 px-8 py-4 bg-primary text-white font-medium rounded-lg hover:bg-primary-light transition-colors shadow-lg shadow-primary/25"
          >
            查看全部服务
            <ArrowRight size={20} />
          </Link>
        </motion.div>
      </div>
    </section>
  );
};

export default ServicesSection;
