import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Trophy, Medal, Award, Star } from "lucide-react"

export default function AchievementsSection() {
  const achievements = [
    {
      year: "2025",
      title: "RoboMaster 高校联盟赛 辽宁站",
      position: "三等奖",
      icon: <Award className="h-8 w-8 text-primary" />,
      description:
        "与 32 支来自辽宁周边城市的大学参赛队伍同台竞技，直接对阵的队伍有：哈尔滨工业大学 I Hiter 战队、北京邮电大学 鸿雁 战队、沈阳工业大学辽阳分校 赫兹矩阵战队。",
    },
    {
      year: "2024",
      title: "RoboMaster 高校联盟赛 山东站",
      position: "三等奖",
      icon: <Award className="h-8 w-8 text-primary" />,
      description:
        "与 32 支来自山东周边城市的大学参赛队伍同台竞技，直接对阵的队伍有：北方工业大学 DreamTeam 战队、哈尔滨工业大学威海 HERO 战队。",
    },
    {
      year: "2017",
      title: "RoboMaster 区域赛 东部赛区",
      position: "三等奖",
      icon: <Star className="h-8 w-8 text-primary" />,
      description:
        "与 29 支大学参赛队伍同台竞技。",
    },
  ]

  return (
    <section id="achievements" className="py-20 relative overflow-hidden">
      <div className="absolute inset-0 grid-pattern opacity-20" />
      <div className="absolute left-0 top-0 bottom-0 red-section z-0" />

      <div className="container mx-auto px-4 relative z-10">
        <div className="flex flex-col md:flex-row gap-8">
          <div className="md:w-1/3">
            <div className="red-accent pl-4">
              <h2 className="text-3xl font-bold mb-2 uppercase">战绩</h2>
              <p className="text-xs text-muted-foreground uppercase mb-4 font-mono">ACHIEVEMENTS</p>
            </div>
            <div className="diagonal-line mb-8"></div>
            <div className="content-overlay">
              <p className="text-muted-foreground leading-relaxed">
                我们在 RoboMaster 竞赛中的优异成绩证明了我们的技术实力和应对机器人挑战的创新方法。
              </p>
            </div>
          </div>

          <div className="md:w-2/3">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {achievements.map((achievement, index) => (
                <Card key={index} className="border-white/10 bg-background/60 backdrop-blur-sm card-hover-effect">
                  <CardHeader className="flex flex-row items-center gap-4 pb-2 border-b border-white/10">
                    <div className="p-2 bg-primary/10">{achievement.icon}</div>
                    <div>
                      <CardTitle className="text-xl">{achievement.title}</CardTitle>
                      <div className="flex items-center gap-2 text-sm text-muted-foreground">
                        <span className="text-primary font-mono">{achievement.year}</span>
                        <span>•</span>
                        <span>{achievement.position}</span>
                      </div>
                    </div>
                  </CardHeader>
                  <CardContent className="pt-4">
                    <p className="text-muted-foreground leading-relaxed">{achievement.description}</p>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}