import { COMPANY_INFO, SERVICES } from '@/lib/constants';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Code, Cloud, BarChart3, Shield } from 'lucide-react';

const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
  Code,
  Cloud,
  BarChart3,
  Shield,
};

export const metadata = {
  title: `核心业务 - ${COMPANY_INFO.name}`,
  description: `了解${COMPANY_INFO.name}的核心业务领域和专业服务`,
};

export default function ServicesPage() {
  return (
    <div className="pt-32 pb-20">
      <div className="container-custom">
        <div className="text-center max-w-3xl mx-auto mb-16">
          <Badge variant="outline" className="mb-4">
            核心业务
          </Badge>
          <h1 className="text-4xl sm:text-5xl font-bold text-black mb-6">
            我们的服务
          </h1>
          <p className="text-lg text-gray-600">
            提供全方位的技术解决方案，助力企业数字化转型
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
          {SERVICES.map((service) => {
            const Icon = iconMap[service.icon];
            return (
              <Card key={service.id} className="h-full">
                <CardHeader>
                  <div className="w-14 h-14 bg-black rounded-xl flex items-center justify-center mb-4">
                    {Icon && <Icon className="w-7 h-7 text-white" />}
                  </div>
                  <CardTitle className="text-2xl">{service.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <CardDescription className="text-base leading-relaxed">
                    {service.description}
                  </CardDescription>
                </CardContent>
              </Card>
            );
          })}
        </div>
      </div>
    </div>
  );
}
