"use client"

import { useEffect, useState } from "react"

const technologies = [
  "React",
  "Next.js",
  "TypeScript",
  "Node.js",
  "Python",
  "Docker",
  "Kubernetes",
  "AWS",
  "MongoDB",
  "PostgreSQL",
  "Redis",
  "GraphQL",
  "Tailwind CSS",
  "Three.js",
  "WebGL",
  "Microservices",
  "DevOps",
  "CI/CD",
]

export default function TechStackSection() {
  const [currentIndex, setCurrentIndex] = useState(0)

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentIndex((prev) => (prev + 1) % technologies.length)
    }, 2000)
    return () => clearInterval(timer)
  }, [])

  return (
    <section className="py-20 px-4 relative overflow-hidden">
      <div className="container mx-auto max-w-7xl">
        <div className="text-center mb-16">
          <h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent mb-6 drop-shadow-sm font-mono">
            技术栈
          </h2>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto font-mono">使用的主要技术和工具</p>
        </div>

        {/* Enhanced Scrolling Tech Tags */}
        <div className="relative h-40 overflow-hidden mb-16">
          <div className="absolute inset-0 flex items-center">
            <div className="flex animate-scroll-smooth space-x-8">
              {[...technologies, ...technologies].map((tech, index) => (
                <div
                  key={index}
                  className={`flex-shrink-0 px-8 py-4 rounded-2xl border-2 transition-all duration-700 glass-card-white backdrop-blur-xl ${
                    index % technologies.length === currentIndex
                      ? "border-blue-300 bg-white/50 text-blue-600 shadow-lg scale-110"
                      : "border-gray-200/50 bg-white/30 text-gray-600 hover:border-blue-200/50 hover:text-blue-600"
                  }`}
                >
                  <span className="font-mono font-bold whitespace-nowrap text-lg">{tech}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Enhanced Value Propositions */}
        <div className="grid md:grid-cols-4 gap-6">
          {[
            { title: "技术栈", desc: "现代化技术选型", gradient: "from-blue-400 to-cyan-500" },
            { title: "代码质量", desc: "规范化开发流程", gradient: "from-purple-400 to-indigo-500" },
            { title: "项目交付", desc: "按时完成项目", gradient: "from-pink-400 to-rose-500" },
            { title: "技术支持", desc: "持续维护服务", gradient: "from-indigo-400 to-blue-500" },
          ].map((item, index) => (
            <div
              key={index}
              className="text-center p-8 rounded-2xl glass-card-white bg-white/40 border border-gray-200/50 hover:border-blue-200/50 transition-all duration-500 hover:-translate-y-2 group backdrop-blur-xl"
            >
              <div
                className={`w-12 h-12 mx-auto mb-4 rounded-xl bg-gradient-to-br ${item.gradient} flex items-center justify-center group-hover:scale-110 transition-transform duration-300 shadow-lg`}
              >
                <div className={`w-6 h-6 rounded-full bg-white/80`}></div>
              </div>
              <h3
                className={`text-lg font-bold mb-2 font-mono bg-gradient-to-r ${item.gradient} bg-clip-text text-transparent`}
              >
                {item.title}
              </h3>
              <p className="text-gray-600 text-sm font-mono">{item.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}