'use client'

import { Trophy, Award, FileText, Medal } from 'lucide-react'

const awards = [
  "2023 科大讯飞 AI 开发者大赛数字人赛道冠军",
  "2022 中国产业元宇宙创新大赛一等奖",
  "2023 元宇宙应用场景大赛产业生态先锋奖",
  "2024 退役军人创新创业大赛一等奖"
]

const patents = [
  "发明专利：融合多信息的 AI 虚拟人与用户交互方法",
  "发明专利：一种虚拟人物不同表情模型生成方法",
  "80+ 项计算机软件著作权",
  "50+ 项资质证书与备案"
]

export function Certifications() {
  return (
    <section className="py-20 bg-white" id="honor">
      <div className="container mx-auto px-4 md:px-6">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
          {/* Text Content */}
          <div className="space-y-8">
            <div>
              <h2 className="text-3xl font-bold text-secondary mb-6">荣誉与资质</h2>
              <p className="text-muted-foreground mb-8">
                凭借领先的技术实力与创新模式，白马家园荣获多项国家级大奖，并拥有完备的知识产权体系。
              </p>
            </div>

            <div className="space-y-6">
              <div className="flex gap-4">
                <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
                  <Trophy className="w-6 h-6 text-primary" />
                </div>
                <div>
                  <h3 className="font-bold text-lg mb-2">权威奖项</h3>
                  <ul className="space-y-2">
                    {awards.map((award, i) => (
                      <li key={i} className="flex items-center text-sm text-muted-foreground">
                        <span className="w-1.5 h-1.5 bg-primary rounded-full mr-2"></span>
                        {award}
                      </li>
                    ))}
                  </ul>
                </div>
              </div>

              <div className="flex gap-4">
                <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
                  <FileText className="w-6 h-6 text-primary" />
                </div>
                <div>
                  <h3 className="font-bold text-lg mb-2">知识产权</h3>
                  <ul className="space-y-2">
                    {patents.map((patent, i) => (
                      <li key={i} className="flex items-center text-sm text-muted-foreground">
                        <span className="w-1.5 h-1.5 bg-primary rounded-full mr-2"></span>
                        {patent}
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </div>
          </div>

          {/* Certificate Cards */}
          <div className="grid grid-cols-2 gap-4">
             <div className="aspect-[3/4] bg-accent rounded-lg shadow-sm border border-gray-100 p-4 flex flex-col items-center justify-center text-center">
                <Medal className="w-12 h-12 text-primary mb-4" />
                <span className="text-xs font-medium text-muted-foreground">科大讯飞冠军证书</span>
             </div>
             <div className="aspect-[3/4] bg-accent rounded-lg shadow-sm border border-gray-100 p-4 flex flex-col items-center justify-center text-center mt-8">
                <Award className="w-12 h-12 text-primary mb-4" />
                <span className="text-xs font-medium text-muted-foreground">发明专利证书</span>
             </div>
             <div className="aspect-[3/4] bg-accent rounded-lg shadow-sm border border-gray-100 p-4 flex flex-col items-center justify-center text-center">
                <Trophy className="w-12 h-12 text-primary mb-4" />
                <span className="text-xs font-medium text-muted-foreground">创新大赛一等奖</span>
             </div>
             <div className="aspect-[3/4] bg-accent rounded-lg shadow-sm border border-gray-100 p-4 flex flex-col items-center justify-center text-center mt-8">
                 <FileText className="w-12 h-12 text-primary mb-4" />
                 <span className="text-xs font-medium text-muted-foreground">收单外包服务机构备案</span>
             </div>
          </div>
        </div>
      </div>
    </section>
  )
}