"use client"

import {
  CodeIcon,
  CpuIcon,
  TerminalIcon,
  GlobeIcon,
  DatabaseIcon,
  LayerIcon,
} from "@hugeicons/core-free-icons"
import { HugeiconsIcon } from "@hugeicons/react"

import { OrbitingCircles } from "@/components/ui/orbiting-circles"
import { SectionWrapper } from "@/components/section-wrapper"

const techIcons = [
  { icon: <HugeiconsIcon icon={CodeIcon} className="size-6" />, label: "Go" },
  { icon: <HugeiconsIcon icon={TerminalIcon} className="size-6" />, label: "Python" },
  { icon: <HugeiconsIcon icon={DatabaseIcon} className="size-6" />, label: "TypeScript" },
  { icon: <HugeiconsIcon icon={CpuIcon} className="size-6" />, label: "C#" },
  { icon: <HugeiconsIcon icon={LayerIcon} className="size-6" />, label: "React" },
  { icon: <HugeiconsIcon icon={GlobeIcon} className="size-6" />, label: "Django" },
]

export function About() {
  return (
    <SectionWrapper id="about" className="py-24">
      <div className="mx-auto max-w-5xl px-6">
        <div className="grid gap-12 lg:grid-cols-2 lg:items-center">
          {/* 简介文字 */}
          <div>
            <h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">
              关于我
            </h2>
            <div className="space-y-3 text-muted-foreground">
              <p className="text-base">
                AI 驱动的全栈工程师，擅长把 AI、自动化和业务系统做成可落地、可衡量的产品。
              </p>
              <p className="text-sm">
                从 Go / Python / C# 后端、React 前端到 Docker / Linux 部署都能直接落地，覆盖全链路开发。
              </p>
              <p className="text-sm">
                正在寻找能把 AI 深度接入真实业务、以结果衡量价值的团队。
              </p>
            </div>
          </div>

          {/* 环绕动画 */}
          <div className="relative flex items-center justify-center">
            <div className="relative flex size-80 items-center justify-center">
              {/* 中心文字 */}
              <div className="z-10 text-center">
                <div className="text-4xl font-bold">6+</div>
                <div className="text-sm text-muted-foreground">
                  年经验
                </div>
              </div>

              <OrbitingCircles radius={110} duration={25} iconSize={40}>
                {techIcons.slice(0, 3).map((tech, i) => (
                  <div
                    key={i}
                    className="flex size-10 items-center justify-center rounded-full border border-border bg-background p-2"
                    title={tech.label}
                  >
                    {tech.icon}
                  </div>
                ))}
              </OrbitingCircles>
              <OrbitingCircles
                radius={160}
                duration={35}
                reverse
                iconSize={40}
              >
                {techIcons.slice(3).map((tech, i) => (
                  <div
                    key={i}
                    className="flex size-10 items-center justify-center rounded-full border border-border bg-background p-2"
                    title={tech.label}
                  >
                    {tech.icon}
                  </div>
                ))}
              </OrbitingCircles>
            </div>
          </div>
        </div>
      </div>
    </SectionWrapper>
  )
}