import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import Link from "next/link"
import { achievements } from "@/lib/achievement-data"

export default function AchievementsSection() {
  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) => (
                <Link key={index} href={achievement.link} target="_blank" rel="noopener noreferrer">
                  <Card className="border-white/10 bg-background/60 backdrop-blur-sm card-hover-effect transition-all duration-300 hover:translate-y-[-5px]">
                    <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>
                </Link>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}