"use client"

import { getServiceById } from "@/config/services"
import Link from "next/link"
import { ArrowLeft, Mail } from "lucide-react"
import { Button } from "@/components/ui/button"
import { notFound } from "next/navigation"
import type { FC } from "react"

interface ServiceDetailPageProps {
  params: {
    slug: string
  }
}

export const ServiceDetailPageClient: FC<ServiceDetailPageProps> = ({ params }) => {
  const service = getServiceById(params.slug)

  if (!service) {
    notFound()
  }

  const IconComponent = service.icon

  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="/services">
              <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>

            <Link href="/" 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>
            </Link>
          </div>
        </div>
      </header>

      {/* Service Detail Content */}
      <section className="py-20 px-4 relative overflow-hidden">
        {/* Static Light Background */}
        <div className="absolute inset-0 bg-gray-50/80">
          <div className="absolute inset-0" style={{ backgroundColor: `${service.color}08` }}></div>
        </div>

        <div className="container mx-auto max-w-4xl relative z-10">
          {/* Service Header */}
          <div className="text-center mb-16">
            <div className="glass-card-enhanced bg-white/50 backdrop-blur-2xl rounded-3xl p-12 border border-white/60 shadow-2xl">
              {/* Service Icon */}
              <div className="mb-8 flex justify-center">
                <div
                  className="w-24 h-24 rounded-3xl flex items-center justify-center shadow-2xl relative overflow-hidden"
                  style={{ backgroundColor: `${service.color}20` }}
                >
                  <div className="absolute inset-0 bg-white/20 backdrop-blur-sm rounded-3xl"></div>
                  <IconComponent size={48} className="relative z-10" style={{ color: service.color }} />
                </div>
              </div>

              <h1 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 font-mono">
                {service.name}
              </h1>

              <div className="glass-card-enhanced bg-white/30 backdrop-blur-xl rounded-full px-6 py-3 border border-white/40 inline-block mb-6">
                <span className="text-lg font-mono font-semibold" style={{ color: service.color }}>
                  {service.category}
                </span>
              </div>

              <p className="text-xl text-gray-600 leading-relaxed font-mono max-w-3xl mx-auto">{service.description}</p>
            </div>
          </div>

          {/* Service Details */}
          <div className="grid md:grid-cols-2 gap-8 mb-16">
            {/* Features */}
            <div className="glass-card-enhanced bg-white/40 backdrop-blur-2xl rounded-2xl p-8 border border-white/50 shadow-lg">
              <h2 className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-6 font-mono">
                服务内容
              </h2>
              <ul className="space-y-4 text-gray-600 font-mono">
                <li className="flex items-center space-x-3">
                  <div className="w-2 h-2 rounded-full" style={{ backgroundColor: service.color }}></div>
                  <span>技术实现</span>
                </li>
                <li className="flex items-center space-x-3">
                  <div className="w-2 h-2 rounded-full" style={{ backgroundColor: service.color }}></div>
                  <span>项目交付</span>
                </li>
                <li className="flex items-center space-x-3">
                  <div className="w-2 h-2 rounded-full" style={{ backgroundColor: service.color }}></div>
                  <span>技术支持</span>
                </li>
                <li className="flex items-center space-x-3">
                  <div className="w-2 h-2 rounded-full" style={{ backgroundColor: service.color }}></div>
                  <span>文档提供</span>
                </li>
              </ul>
            </div>

            {/* Contact */}
            <div className="glass-card-enhanced bg-white/40 backdrop-blur-2xl rounded-2xl p-8 border border-white/50 shadow-lg">
              <h2 className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-6 font-mono">
                联系咨询
              </h2>
              <div className="space-y-4">
                <div className="flex items-center space-x-4">
                  <div
                    className="w-12 h-12 rounded-xl flex items-center justify-center shadow-lg"
                    style={{ backgroundColor: `${service.color}20` }}
                  >
                    <Mail className="text-white" size={20} style={{ color: service.color }} />
                  </div>
                  <div>
                    <p className="text-sm text-gray-500 font-mono">邮箱咨询</p>
                    <p className="font-mono" style={{ color: service.color }}>
                      zichen.hao@entalnet.com
                    </p>
                  </div>
                </div>

                <Button
                  className="w-full glass-button-white bg-white/40 backdrop-blur-xl border border-white/50 text-gray-800 font-bold py-3 rounded-2xl shadow-lg hover:shadow-xl hover:-translate-y-1 transition-all duration-300 font-mono"
                  onClick={() =>
                    window.open(
                      `mailto:zichen.hao@entalnet.com?subject=${service.name}咨询&body=您好，我想了解${service.name}相关信息。`,
                      "_blank",
                    )
                  }
                >
                  邮件咨询
                </Button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}