"use client"

import Link from "next/link"
import { ArrowRight } from "lucide-react"
import { Button } from "@/components/ui/button"

const services = [
  {
    title: "Web程序开发",
    description: "前端和后端开发服务，包括响应式网站、Web应用程序和API接口开发。",
    gradient: "from-blue-400 to-cyan-500",
    borderColor: "border-blue-200/50",
    glowColor: "rgba(59,130,246,0.2)",
  },
  {
    title: "服务器后端计算",
    description: "服务器架构设计、数据库管理、后端服务开发和系统优化。",
    gradient: "from-purple-400 to-indigo-500",
    borderColor: "border-purple-200/50",
    glowColor: "rgba(147,51,234,0.2)",
  },
  {
    title: "网络架构搭建",
    description: "网络基础设施规划、网络安全配置和系统集成服务。",
    gradient: "from-pink-400 to-rose-500",
    borderColor: "border-pink-200/50",
    glowColor: "rgba(236,72,153,0.2)",
  },
]

export default function ServicesSection() {
  return (
    <section className="py-20 px-4 relative">
      <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">
            提供Web开发、服务器管理和网络架构相关的技术服务
          </p>
        </div>

        <div className="grid md:grid-cols-3 gap-8 mb-12">
          {services.map((service, index) => (
            <div
              key={index}
              className={`glass-card-enhanced bg-white/50 ${service.borderColor} backdrop-blur-2xl rounded-2xl shadow-lg hover:shadow-2xl hover:-translate-y-3 transition-all duration-700 group overflow-hidden`}
            >
              <div className="p-8 relative">
                {/* Enhanced Background gradient overlay */}
                <div
                  className={`absolute inset-0 bg-gradient-to-br ${service.gradient} opacity-5 group-hover:opacity-15 transition-opacity duration-500`}
                ></div>

                {/* Floating Glass Orbs */}
                <div className="absolute top-4 right-4 w-12 h-12 bg-white/20 rounded-full blur-xl group-hover:bg-white/30 transition-all duration-500 animate-float-orb"></div>
                <div
                  className="absolute bottom-4 left-4 w-8 h-8 bg-white/10 rounded-full blur-lg group-hover:bg-white/20 transition-all duration-500 animate-float-orb"
                  style={{ animationDelay: "2s" }}
                ></div>

                <div className="relative z-10">
                  <div className="mb-6">
                    {/* Enhanced 纯色背景图标，无图标内容，增强玻璃效果 */}
                    <div
                      className={`w-16 h-16 rounded-2xl mb-4 transition-all duration-500 group-hover:scale-110 group-hover:rotate-6 bg-gradient-to-br ${service.gradient} shadow-lg relative overflow-hidden`}
                    >
                      {/* Glass overlay */}
                      <div className="absolute inset-0 bg-white/20 backdrop-blur-sm rounded-2xl"></div>
                    </div>
                    <h3 className="text-2xl font-bold text-gray-800 mb-4 group-hover:bg-gradient-to-r group-hover:from-blue-600 group-hover:to-purple-600 group-hover:bg-clip-text group-hover:text-transparent transition-all duration-500 font-mono">
                      {service.title}
                    </h3>
                  </div>
                  <p className="text-gray-600 leading-relaxed font-mono text-sm">{service.description}</p>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Enhanced CTA to Services Page */}
        <div className="text-center">
          <div className="glass-card-enhanced bg-white/50 backdrop-blur-2xl rounded-2xl p-8 border border-white/50 shadow-lg inline-block">
            <h3 className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-4 font-mono">
              更多服务
            </h3>
            <p className="text-gray-600 mb-6 font-mono">查看完整的服务列表</p>
            <Link href="/services">
              <Button className="glass-button-white bg-white/40 backdrop-blur-xl border border-white/50 text-gray-800 font-bold px-8 py-3 rounded-2xl shadow-lg hover:shadow-xl hover:-translate-y-1 transition-all duration-300 font-mono group">
                查看所有服务
                <ArrowRight className="ml-2 group-hover:translate-x-1 transition-transform" size={20} />
              </Button>
            </Link>
          </div>
        </div>
      </div>
    </section>
  )
}