import { useState } from "react"

const team = [
  {
    name: "吴彧博",
    handle: "@wuyubo",
    role: "技术经理",
    bio: "统筹技术架构与团队管理，把控项目质量与交付节奏。全栈背景，擅长系统设计与技术决策。",
    skills: ["Go", "Rust", "K8s"],
    color: "#10b981",
  },
  {
    name: "郝咏",
    handle: "@haoyong",
    role: "前端负责人",
    bio: "专注跨平台前端开发，React Native 与 Taro 专家。追求极致的用户体验与性能优化。",
    skills: ["React Native", "Taro", "TypeScript"],
    color: "#3b82f6",
  },
  {
    name: "吴翔宇",
    handle: "@wuxiangyu",
    role: "后端负责人",
    bio: "高并发系统架构师，Go 语言专家。负责服务端架构设计与数据库优化，保障系统稳定。",
    skills: ["Go", "PostgreSQL", "Redis"],
    color: "#f97316",
  },
  {
    name: "韩惠子",
    handle: "@hanhuizi",
    role: "产品经理",
    bio: "负责产品规划与需求分析，连接技术与业务。善于将复杂需求转化为清晰的产品方案。",
    skills: ["Figma", "Product", "Data"],
    color: "#a855f7",
  },
]

export function Team() {
  const [active, setActive] = useState(0)

  return (
    <section id="team" className="py-32 relative overflow-hidden">
      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-accent/[0.02] to-transparent" />

      <div className="max-w-6xl mx-auto px-6 relative">
        {/* Section header */}
        <div className="mb-20">
          <div className="flex items-center gap-3 mb-6">
            <div className="h-px w-8 bg-accent/50" />
            <span className="text-[11px] text-accent font-medium tracking-widest uppercase">the team</span>
          </div>
          <h2 className="text-4xl sm:text-5xl font-bold text-foreground mb-6 tracking-tight">
            核心成员
          </h2>
          <p className="text-base text-muted-foreground leading-relaxed max-w-2xl">
            哈工大背景的技术团队，小而精，每个人都是各自领域的专家。
          </p>
        </div>

        {/* Horizontal expanding cards */}
        <div className="flex flex-col lg:flex-row gap-3 min-h-[420px]">
          {team.map((member, index) => {
            const isActive = active === index

            return (
              <div
                key={member.name}
                className="group relative cursor-pointer overflow-hidden"
                style={{
                  flex: isActive ? 3 : 1,
                  transition: "flex 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
                }}
                onMouseEnter={() => setActive(index)}
              >
                <div
                  className={`h-full rounded-2xl border transition-all duration-500 flex flex-col justify-between p-6 min-w-0 ${
                    isActive
                      ? "border-border/40 bg-foreground/[0.02]"
                      : "border-border/20 hover:border-border/30"
                  }`}
                >
                  {/* Background glow */}
                  <div
                    className={`absolute inset-0 pointer-events-none transition-opacity duration-500 ${isActive ? "opacity-100" : "opacity-0"}`}
                    style={{
                      background: `radial-gradient(ellipse at 80% 100%, ${member.color}08, transparent 60%)`,
                    }}
                  />

                  <div className="relative">
                    {/* Name & role */}
                    <div className="mb-4">
                      <h3 className="text-lg font-bold text-foreground tracking-tight mb-1">
                        {member.name}
                      </h3>
                      <div className="flex items-center gap-2 min-w-0">
                        <span className="text-[11px] text-muted-foreground font-mono truncate">{member.handle}</span>
                        <span
                          className="px-2 py-0.5 text-[9px] font-semibold rounded-full border shrink-0"
                          style={{
                            color: member.color,
                            borderColor: `${member.color}40`,
                            backgroundColor: `${member.color}10`,
                          }}
                        >
                          {member.role}
                        </span>
                      </div>
                    </div>

                    {/* Bio - expands on active */}
                    <p
                      className={`text-muted-foreground leading-relaxed transition-all duration-500 ${
                        isActive
                          ? "text-sm max-w-sm opacity-100"
                          : "text-[11px] opacity-0 lg:opacity-60 line-clamp-2"
                      }`}
                    >
                      {member.bio}
                    </p>
                  </div>

                  {/* Skills */}
                  <div className="relative flex flex-wrap gap-1.5 mt-4">
                    {member.skills.map((s) => (
                      <span
                        key={s}
                        className={`font-mono text-muted-foreground border border-border/30 rounded-md transition-all duration-500 ${
                          isActive ? "px-2.5 py-1 text-[11px]" : "px-2 py-0.5 text-[10px]"
                        }`}
                      >
                        {s}
                      </span>
                    ))}
                  </div>

                  {/* Bottom accent line */}
                  <div
                    className={`absolute bottom-0 left-6 right-6 h-[2px] rounded-full transition-all duration-500 ${isActive ? "opacity-100" : "opacity-0"}`}
                    style={{ background: `linear-gradient(90deg, transparent, ${member.color}, transparent)` }}
                  />
                </div>
              </div>
            )
          })}
        </div>
      </div>
    </section>
  )
}