import { getServicesByCategory } from "@/config/services"
import ServiceCard from "@/components/service-card"
import Link from "next/link"
import { ArrowLeft } from "lucide-react"
import { Button } from "@/components/ui/button"

export default function ServicesPage() {
  const servicesByCategory = getServicesByCategory()

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100 text-gray-900">
      {/* Enhanced Glass Header */}
      <header className="sticky top-0 z-50 bg-white/30 backdrop-blur-2xl border-b border-white/40 shadow-lg">
        <div className="container mx-auto px-4 py-6">
          <div className="flex items-center justify-between">
            <Link href="/">
              <Button
                variant="ghost"
                className="glass-button-white bg-white/40 backdrop-blur-xl border border-white/50 hover:bg-white/60 transition-all duration-300"
              >
                <ArrowLeft className="mr-2" size={20} />
                返回首页
              </Button>
            </Link>

            <div className="flex items-center space-x-4">
              <div className="w-10 h-10 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 rounded-xl flex items-center justify-center shadow-lg">
                <span className="text-white font-bold text-lg font-mono">XZ</span>
              </div>
              <span className="text-2xl font-bold bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent font-mono">
                鑫泽焓界
              </span>
            </div>
          </div>
        </div>
      </header>

      {/* Hero Section with Enhanced Glass */}
      <section className="py-20 px-4 relative overflow-hidden">
        {/* Enhanced Background */}
        <div className="absolute inset-0 bg-gradient-to-br from-blue-50/80 via-white/60 to-purple-50/80">
          <div className="absolute inset-0 bg-gradient-to-r from-blue-100/20 via-purple-100/20 to-pink-100/20 animate-pulse"></div>
        </div>

        {/* Glass Pattern Overlay */}
        <div className="absolute inset-0 opacity-10">
          <div className="glass-pattern"></div>
        </div>

        <div className="container mx-auto max-w-7xl relative z-10">
          <div className="text-center mb-16">
            {/* Enhanced Glass Title Card */}
            <div className="inline-block glass-card-enhanced bg-white/50 backdrop-blur-2xl rounded-3xl p-8 mb-8 border border-white/60 shadow-2xl">
              <h1 className="text-4xl md:text-6xl font-bold bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent mb-4 font-mono">
                服务列表
              </h1>
              <p className="text-xl text-gray-600 max-w-3xl mx-auto font-mono leading-relaxed">
                提供的技术服务和解决方案
              </p>
            </div>
          </div>

          {/* Services by Category */}
          <div className="space-y-16">
            {Object.entries(servicesByCategory).map(([category, services]) => (
              <div key={category} className="space-y-8">
                {/* Category Header with Glass Effect */}
                <div className="text-center">
                  <div className="inline-block glass-card-enhanced bg-white/40 backdrop-blur-xl rounded-2xl px-8 py-4 border border-white/50 shadow-lg">
                    <h2 className="text-2xl md:text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent font-mono">
                      {category}
                    </h2>
                  </div>
                </div>

                {/* Services Grid */}
                <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                  {services.map((service) => (
                    <ServiceCard key={service.id} service={service} />
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  )
}