import Image from "next/image"
import { Code, Cpu, Database, Layers } from "lucide-react"

export default function AboutSection() {
  return (
    <section id="about" className="py-20 relative overflow-hidden">
      <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 pl-4">
            <div className="pl-4">
              <h2 className="text-3xl font-bold mb-2 uppercase">关于我们</h2>
              <p className="text-xs text-muted-foreground uppercase mb-4 font-mono">INFORMATION</p>
            </div>
            <div className="absolute left-0 top-0 bottom-0 w-1 bg-primary"></div>
            <div className="diagonal-line mb-8 ml-8"></div>
            <div className="content-overlay">
              <p className="text-muted-foreground mb-6 leading-relaxed">
                Simba Robotics 是隶属于黑龙江大学，专注于 RoboMaster 机甲大师机器人竞赛的机器人实验室与机器人战队。
              </p>
              <p className="text-muted-foreground leading-relaxed">
                我们致力于推动机器人技术的发展，同时为学生提供协作环境，培养实用工程技能。
              </p>
            </div>
          </div>

          <div className="md:w-2/3">
            <div className="relative">
              <div className="absolute -inset-4 bg-primary/10 blur-xl"></div>
              <div className="overflow-hidden border border-white/10 relative z-10">
                <Image
                  src="/placeholder.svg?height=600&width=800"
                  alt="Simba Robotics Team"
                  width={800}
                  height={400}
                  className="w-full h-auto"
                />
                <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-background to-transparent h-20"></div>
                <div className="absolute bottom-0 left-0 p-4">
                  <p className="text-xs text-primary font-mono">01/05</p>
                  <h3 className="text-xl font-bold">队伍风采</h3>
                </div>
              </div>
            </div>

            <div className="mt-8 border border-white/10 bg-white/5 card-hover-effect p-6">
              <h3 className="text-2xl font-bold mb-4 text-primary">技术研究方向</h3>
              <p className="text-muted-foreground mb-4 leading-relaxed">
                在 Simba
                Robotics，队员们将有机会接触并深入研究多个前沿技术领域。我们的研发工作涵盖了机器人工程的各个方面，为队员提供全面的技术成长路径。加入我们，你将在以下领域获得实战经验和专业技能：
              </p>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
                <div className="flex items-start gap-3">
                  <Layers className="h-6 w-6 text-primary mt-1" />
                  <div>
                    <h5 className="font-bold mb-1">机械设计与制造</h5>
                    <p className="text-sm text-muted-foreground">CAD建模、结构分析、3D打印、CNC加工、材料学、机构学</p>
                  </div>
                </div>
                <div className="flex items-start gap-3">
                  <Cpu className="h-6 w-6 text-primary mt-1" />
                  <div>
                    <h5 className="font-bold mb-1">嵌入式系统开发</h5>
                    <p className="text-sm text-muted-foreground">
                      单片机编程、PCB设计、电机控制、传感器融合、实时操作系统
                    </p>
                  </div>
                </div>
                <div className="flex items-start gap-3">
                  <Code className="h-6 w-6 text-primary mt-1" />
                  <div>
                    <h5 className="font-bold mb-1">计算机视觉与AI</h5>
                    <p className="text-sm text-muted-foreground">
                      目标检测、图像处理、深度学习、SLAM定位导航、决策算法
                    </p>
                  </div>
                </div>
                <div className="flex items-start gap-3">
                  <Database className="h-6 w-6 text-primary mt-1" />
                  <div>
                    <h5 className="font-bold mb-1">系统集成与项目管理</h5>
                    <p className="text-sm text-muted-foreground">软硬件协同、版本控制、团队协作、敏捷开发、技术文档</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}