"use client"

import Link from "next/link"
import type { ServiceConfig } from "@/config/services"
import { ArrowRight } from "lucide-react"

interface ServiceCardProps {
  service: ServiceConfig
}

export default function ServiceCard({ service }: ServiceCardProps) {
  const IconComponent = service.icon

  return (
    <Link href={service.url}>
      <div className="glass-card-enhanced bg-white/40 backdrop-blur-2xl rounded-2xl p-8 border border-white/50 shadow-lg hover:shadow-2xl hover:-translate-y-3 transition-all duration-700 group overflow-hidden cursor-pointer">
        {/* Enhanced Background Gradient */}
        <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-16 h-16 bg-white/20 rounded-full blur-xl group-hover:bg-white/30 transition-all duration-500"></div>
        <div className="absolute bottom-4 left-4 w-12 h-12 bg-white/10 rounded-full blur-lg group-hover:bg-white/20 transition-all duration-500"></div>

        <div className="relative z-10">
          {/* Enhanced Icon with Multiple Glass Layers */}
          <div className="mb-6 relative">
            <div
              className={`w-16 h-16 rounded-2xl flex items-center justify-center 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 on icon */}
              <div className="absolute inset-0 bg-white/20 backdrop-blur-sm rounded-2xl"></div>
              <IconComponent size={32} className="text-white relative z-10" />
            </div>

            {/* Icon Glow Effect */}
            <div
              className={`absolute top-0 left-0 w-16 h-16 rounded-2xl bg-gradient-to-br ${service.gradient} opacity-30 blur-lg group-hover:opacity-50 transition-opacity duration-500`}
            ></div>
          </div>

          {/* Enhanced Title */}
          <h3 className="text-xl 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.name}
          </h3>

          {/* Description */}
          <p className="text-gray-600 leading-relaxed font-mono text-sm mb-6 line-clamp-3">{service.description}</p>

          {/* Enhanced CTA with Glass Effect */}
          <div className="flex items-center justify-between">
            <div className="glass-card-enhanced bg-white/30 backdrop-blur-xl rounded-full px-4 py-2 border border-white/40">
              <span className={`text-sm font-mono font-semibold`} style={{ color: service.color }}>
                {service.category}
              </span>
            </div>

            <div className="flex items-center text-gray-500 group-hover:text-blue-600 transition-colors duration-300">
              <span className="text-sm font-mono mr-2">了解更多</span>
              <ArrowRight size={16} className="group-hover:translate-x-1 transition-transform duration-300" />
            </div>
          </div>
        </div>
      </div>
    </Link>
  )
}