import Image from "next/image"
import { Shield, Zap, Brain, Users } 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">
                  <Shield 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 className="flex items-start gap-3">
                  <Zap 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 className="flex items-start gap-3">
                  <Brain 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 className="flex items-start gap-3">
                  <Users 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>
  )
}