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

export default function AchievementsSection() {
  const achievements = [
    {
      year: "2023",
      title: "RoboMaster International Championship",
      position: "Finals Qualification",
      icon: <Trophy className="h-8 w-8 text-primary" />,
      description:
        "Competed against 32 international teams and advanced to the final rounds, showcasing exceptional strategy and robot performance.",
    },
    {
      year: "2022",
      title: "RoboMaster Regional Competition",
      position: "Champion",
      icon: <Medal className="h-8 w-8 text-primary" />,
      description:
        "Achieved perfect scores in autonomous navigation and target acquisition challenges, securing the regional championship.",
    },
    {
      year: "2022",
      title: "Best Technical Innovation Award",
      position: "Winner",
      icon: <Award className="h-8 w-8 text-primary" />,
      description:
        "Recognized for developing a novel obstacle avoidance system using advanced sensor fusion technology.",
    },
    {
      year: "2021",
      title: "RoboMaster Technical Challenge",
      position: "Runner-up",
      icon: <Star className="h-8 w-8 text-primary" />,
      description:
        "Excelled in technical challenge segments, particularly in autonomous operation and precision control categories, earning recognition from industry experts.",
    },
  ]

  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>
  )
}