import Link from 'next/link';
import { COMPANY_INFO, NEWS } from '@/lib/constants';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { ArrowRight, Calendar } from 'lucide-react';

export const metadata = {
  title: `新闻动态 - ${COMPANY_INFO.name}`,
  description: `了解${COMPANY_INFO.name}的最新动态和行业资讯`,
};

export default function NewsPage() {
  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">
          {NEWS.map((news) => (
            <Card key={news.id} className="h-full flex flex-col">
              <CardHeader>
                <div className="flex items-center gap-2 mb-3">
                  <Badge variant="secondary">{news.category}</Badge>
                  <span className="text-sm text-gray-500 flex items-center gap-1">
                    <Calendar className="w-3 h-3" />
                    {news.date}
                  </span>
                </div>
                <CardTitle className="text-xl leading-tight">{news.title}</CardTitle>
              </CardHeader>
              <CardContent className="flex-1 flex flex-col">
                <CardDescription className="text-base leading-relaxed mb-6 flex-1">
                  {news.excerpt}
                </CardDescription>
                <Link
                  href={`/news/${news.id}`}
                  className="inline-flex items-center text-sm font-medium text-black hover:underline"
                >
                  阅读更多
                  <ArrowRight className="ml-1 w-4 h-4" />
                </Link>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </div>
  );
}
