import { COMPANY_INFO, PRODUCTS } from '@/lib/constants';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { ArrowRight, Check, TrendingUp } from 'lucide-react';

export const metadata = {
  title: `产品服务 - ${COMPANY_INFO.name}`,
  description: `了解${COMPANY_INFO.name}的产品和服务解决方案，包括ERP、CRM、OA、BI、物联网和AI智能应用`,
};

export default function ProductsPage() {
  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 lg:grid-cols-3 gap-8">
          {PRODUCTS.map((product) => (
            <Card key={product.id} className="h-full flex flex-col group hover:shadow-lg transition-shadow">
              <CardHeader>
                <Badge variant="secondary" className="w-fit mb-3">
                  {product.category}
                </Badge>
                <CardTitle className="text-xl">{product.title}</CardTitle>
              </CardHeader>
              <CardContent className="flex-1 flex flex-col">
                <CardDescription className="text-base leading-relaxed mb-4 flex-1">
                  {product.description}
                </CardDescription>
                
                {/* 核心功能 */}
                <div className="mb-4">
                  <p className="text-sm font-medium text-black mb-2">核心功能</p>
                  <div className="flex flex-wrap gap-1.5">
                    {product.features.slice(0, 4).map((feature, idx) => (
                      <span 
                        key={idx} 
                        className="inline-flex items-center text-xs px-2 py-1 bg-gray-100 text-gray-700 rounded"
                      >
                        <Check className="w-3 h-3 mr-1 text-green-600" />
                        {feature}
                      </span>
                    ))}
                  </div>
                </div>

                {/* 核心价值 */}
                <div className="mb-4">
                  <p className="text-sm font-medium text-black mb-2 flex items-center">
                    <TrendingUp className="w-4 h-4 mr-1 text-blue-600" />
                    核心价值
                  </p>
                  <ul className="space-y-1">
                    {product.benefits.map((benefit, idx) => (
                      <li key={idx} className="text-xs text-gray-600 flex items-start">
                        <span className="text-blue-600 mr-1.5">•</span>
                        {benefit}
                      </li>
                    ))}
                  </ul>
                </div>

                <Button variant="outline" className="w-full mt-auto group-hover:bg-black group-hover:text-white transition-colors">
                  了解详情
                  <ArrowRight className="ml-2 w-4 h-4" />
                </Button>
              </CardContent>
            </Card>
          ))}
        </div>

        {/* 底部CTA */}
        <div className="mt-20 text-center">
          <div className="bg-gradient-to-r from-gray-50 to-gray-100 rounded-2xl p-12">
            <h2 className="text-2xl sm:text-3xl font-bold text-black mb-4">
              需要定制化解决方案？
            </h2>
            <p className="text-gray-600 mb-8 max-w-2xl mx-auto">
              我们的专业团队可以根据您的业务需求，提供量身定制的产品开发和系统集成服务
            </p>
            <Button size="lg" className="bg-black text-white hover:bg-gray-800">
              联系我们
              <ArrowRight className="ml-2 w-4 h-4" />
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}
