import React from 'react';
import { Monitor, Server, Code, Database, Globe, Shield } from 'lucide-react';
import { ServiceItem } from '../types';

const services: ServiceItem[] = [
  {
    title: '定制软件开发',
    description: '根据企业独特需求，打造专属的Web应用、移动端APP及桌面软件，优化业务流程。',
    icon: Code,
  },
  {
    title: '企业数字化转型',
    description: '提供全方位的数字化咨询与落地实施方案，助力传统企业实现智能化升级。',
    icon: Monitor,
  },
  {
    title: '系统集成服务',
    description: '打破信息孤岛，实现异构系统间的数据互通与功能协同，提升整体运营效率。',
    icon: Server,
  },
  {
    title: '大数据分析',
    description: '挖掘数据价值，提供可视化报表与智能决策支持，让数据成为企业的核心资产。',
    icon: Database,
  },
  {
    title: '云服务与部署',
    description: '提供安全可靠的云端架构设计、迁移及运维服务，保障业务的高可用性。',
    icon: Globe,
  },
  {
    title: '信息安全保障',
    description: '构建多层次的安全防护体系，保护企业核心数据资产不受威胁。',
    icon: Shield,
  },
];

const Services: React.FC = () => {
  return (
    <section id="services" className="py-24 bg-white">
      <div className="container mx-auto px-6">
        <div className="text-center max-w-3xl mx-auto mb-16">
          <h2 className="text-sm font-bold tracking-widest text-feie-gold uppercase mb-3">核心业务 • Services</h2>
          <h3 className="text-3xl md:text-4xl font-serif text-feie-dark mb-6">
            全方位技术解决方案
          </h3>
          <div className="w-16 h-1 bg-feie-dark mx-auto"></div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {services.map((service, index) => (
            <div 
              key={index} 
              className="group p-8 border border-gray-100 bg-feie-cream/30 hover:bg-feie-dark hover:border-feie-dark transition-all duration-500 rounded-sm relative overflow-hidden"
            >
              <div className="absolute top-0 right-0 w-24 h-24 bg-feie-gold/10 rounded-bl-full -mr-4 -mt-4 transition-all duration-500 group-hover:bg-feie-gold/20"></div>
              
              <service.icon 
                className="w-10 h-10 text-feie-gold mb-6 group-hover:text-feie-gold transition-colors duration-300" 
                strokeWidth={1.5}
              />
              
              <h4 className="text-xl font-serif font-bold text-feie-dark mb-4 group-hover:text-feie-white transition-colors duration-300">
                {service.title}
              </h4>
              
              <p className="text-gray-600 font-light leading-relaxed group-hover:text-gray-300 transition-colors duration-300">
                {service.description}
              </p>

              <div className="mt-6 w-8 h-px bg-feie-gold group-hover:w-full transition-all duration-500"></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Services;