"use client"

import { Mail, MapPin } from "lucide-react"
import { Card, CardContent } from "@/components/ui/card"

export default function ContactSection() {
  return (
    <section className="py-20 px-4 relative" id="contact">
      <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">项目咨询和技术支持</p>
        </div>

        <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
          {/* Contact Information */}
          <Card className="glass-card-white bg-white/40 border border-blue-200/50 backdrop-blur-xl shadow-lg hover:shadow-xl transition-all duration-500 group">
            <CardContent className="p-8">
              <div className="flex items-center space-x-4 mb-4">
                <div className="w-12 h-12 bg-gradient-to-br from-blue-400 to-cyan-500 rounded-xl flex items-center justify-center backdrop-blur-sm shadow-lg group-hover:scale-110 transition-all duration-300">
                  <Mail className="text-white" size={24} />
                </div>
                <div>
                  <h3 className="text-lg font-bold text-gray-800 font-mono">邮箱联系</h3>
                  <p className="text-blue-600 font-mono">zichen.hao@entalnet.com</p>
                </div>
              </div>
            </CardContent>
          </Card>

          <Card className="glass-card-white bg-white/40 border border-purple-200/50 backdrop-blur-xl shadow-lg hover:shadow-xl transition-all duration-500 group">
            <CardContent className="p-8">
              <div className="flex items-center space-x-4 mb-4">
                <div className="w-12 h-12 bg-gradient-to-br from-purple-400 to-indigo-500 rounded-xl flex items-center justify-center backdrop-blur-sm shadow-lg group-hover:scale-110 transition-all duration-300">
                  <MapPin className="text-white" size={24} />
                </div>
                <div>
                  <h3 className="text-lg font-bold text-gray-800 font-mono">服务地区</h3>
                  <p className="text-purple-600 font-mono">中国大陆</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

        <div className="mt-12 max-w-2xl mx-auto">
          <div className="glass-card-white bg-white/40 p-8 rounded-2xl border border-gray-200/50 backdrop-blur-xl shadow-lg">
            <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>
            <ul className="space-y-3 text-gray-600">
              <li className="flex items-center space-x-3">
                <div className="w-2 h-2 bg-blue-400 rounded-full"></div>
                <span className="font-mono">技术支持</span>
              </li>
              <li className="flex items-center space-x-3">
                <div className="w-2 h-2 bg-purple-400 rounded-full"></div>
                <span className="font-mono">项目交付</span>
              </li>
              <li className="flex items-center space-x-3">
                <div className="w-2 h-2 bg-pink-400 rounded-full"></div>
                <span className="font-mono">持续维护</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  )
}