import { Card, CardContent } from "@/components/ui/card"
import Image from "next/image"

export default function TeamGroupsSection() {
  const groups = [
    {
      name: "机械架构组",
      code: "MEST",
      icon: "/icons/mest.svg",
      description:
        "负责设计和制造机器人的物理结构，包括底盘、武器系统和机械部件。",
      responsibilities: [
        "3D 建模与 CAD 出图",
        "CNC 加工制造",
        "机械结构分析与优化",
        "结构装配与测试",
      ],
    },
    {
      name: "电传测控组",
      code: "ELCT",
      icon: "/icons/elct.svg",
      description:
        "开发机器人的配电与控制系统, 涵盖电路设计、功率管理和嵌入式开发。",
      responsibilities: [
        "电路设计与 PCB Layout",
        "功率管理系统设计",
        "电机控制和驱动开发",
        "传感器集成与信号处理",
        "控制理论应用",
      ],
    },
    {
      name: "视觉算法组",
      code: "VSAG",
      icon: "/icons/vsag.svg",
      description:
        "开发计算机视觉和人工智能系统，使机器人能够感知和理解周围环境，实现自主操作。",
      responsibilities: [
        "计算机视觉算法开发",
        "对象识别与跟踪",
        "机器学习模型训练",
        "实时图像处理优化",
      ],
    },
    {
      name: "宣传筹划组",
      code: "PRAM",
      icon: "/icons/pram.svg",
      description:
        "管理团队品牌、文档、社交媒体和外联工作，以宣传我们的团队并获得赞助，并规划赛季任务、维护战队开发环境。",
      responsibilities: [
        "平面与视觉设计",
        "社交媒体运营",
        "招商引资",
        "战队开发平台运维与项目管理",
      ],
    },
  ]

  return (
    <section id="team-groups" className="py-20 relative overflow-hidden">
      <div className="absolute right-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 items-start">
          <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 font-mono text-muted-foreground uppercase mb-4">TEAM STRUCTURE</p>
            </div>
            <div className="diagonal-line mb-8"></div>
            <div className="content-overlay">
              <p className="text-muted-foreground mb-6 leading-relaxed">
                Simba Robotics 将任务划分给四个不同专精方向的技术小组，团结协作，完成机器人的开发。
              </p>
            </div>
          </div>

          <div className="md:w-2/3">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {groups.map((group, index) => (
                <Card
                  key={index}
                  className="border-white/10 bg-background/60 backdrop-blur-sm overflow-hidden card-hover-effect"
                >
                  <CardContent className="p-0">
                    <div className="bg-primary/10 p-4 flex items-center gap-4 border-b border-white/10">
                      <div className="p-3 bg-background/30 flex items-center justify-center">
                        <Image
                          src={group.icon || "/placeholder.svg"}
                          alt={group.name}
                          width={48}
                          height={48}
                          className="w-12 h-12"
                        />
                      </div>
                      <div>
                        <h3 className="text-xl font-bold">{group.name}</h3>
                        <p className="text-xs font-mono text-primary">{group.code}</p>
                      </div>
                    </div>
                    <div className="p-4">
                      <p className="text-muted-foreground mb-4 leading-relaxed">{group.description}</p>
                      <h4 className="font-bold mb-2 text-primary text-sm">关键职能:</h4>
                      <ul className="space-y-1 pl-5 list-disc text-muted-foreground text-sm">
                        {group.responsibilities.map((item, idx) => (
                          <li key={idx}>{item}</li>
                        ))}
                      </ul>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}