'use client'

import { Mail, MessageSquare, Phone, MapPin } from 'lucide-react'

const contactMethods = [
  {
    icon: Mail,
    title: '电子邮件',
    value: 'contact@flnxi.com',
    description: '工作日24小时内回复',
    color: 'from-blue-500 to-cyan-500',
  },
  {
    icon: MessageSquare,
    title: '在线咨询',
    value: '微信客服',
    description: '扫码添加企业微信',
    color: 'from-green-500 to-emerald-500',
  },
  {
    icon: Phone,
    title: '电话咨询',
    value: '400-XXX-XXXX',
    description: '工作日 9:00-18:00',
    color: 'from-purple-500 to-pink-500',
  },
]

export default function Contact() {
  return (
    <section id="contact" className="py-24 bg-gradient-to-b from-apple-gray-50 to-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <div className="text-center mb-16">
          <h2 className="text-base text-apple-blue font-semibold tracking-wide uppercase mb-3">
            联系我们
          </h2>
          <h3 className="text-4xl sm:text-5xl font-bold text-apple-gray-900 mb-4">
            随时为您服务
          </h3>
          <p className="text-xl text-apple-gray-600 max-w-2xl mx-auto">
            有任何疑问或定制需求，欢迎联系我们的专业团队
          </p>
        </div>

        {/* Contact Methods */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16">
          {contactMethods.map((method, index) => {
            const Icon = method.icon
            return (
              <div
                key={method.title}
                className="group relative bg-white rounded-2xl p-8 apple-shadow hover:apple-shadow-lg transition-all duration-300 text-center"
                style={{
                  animation: 'slideUp 0.6s ease-out',
                  animationDelay: `${index * 0.1}s`,
                }}
              >
                {/* Background Gradient */}
                <div className={`absolute inset-0 rounded-2xl bg-gradient-to-br ${method.color} opacity-0 group-hover:opacity-5 transition-opacity duration-300`} />

                {/* Icon */}
                <div className="relative inline-flex mb-4">
                  <div className={`p-4 bg-gradient-to-br ${method.color} rounded-2xl group-hover:scale-110 transition-transform duration-300`}>
                    <Icon className="w-8 h-8 text-white" />
                  </div>
                </div>

                {/* Content */}
                <h4 className="text-xl font-semibold text-apple-gray-900 mb-2">
                  {method.title}
                </h4>
                <p className="text-lg font-medium text-apple-blue mb-2">
                  {method.value}
                </p>
                <p className="text-sm text-apple-gray-600">
                  {method.description}
                </p>
              </div>
            )
          })}
        </div>

        {/* CTA Card */}
        <div className="relative max-w-4xl mx-auto">
          <div className="relative bg-gradient-to-br from-apple-blue via-blue-600 to-purple-600 rounded-3xl p-8 md:p-12 text-center overflow-hidden apple-shadow-lg">
            {/* Background Pattern */}
            <div className="absolute inset-0 opacity-10">
              <div className="absolute top-0 right-0 w-64 h-64 bg-white rounded-full blur-3xl" />
              <div className="absolute bottom-0 left-0 w-64 h-64 bg-white rounded-full blur-3xl" />
            </div>

            {/* Content */}
            <div className="relative z-10">
              <div className="inline-flex items-center space-x-2 bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full text-white text-sm font-medium mb-6">
                <MapPin className="w-4 h-4" />
                <span>企业服务</span>
              </div>

              <h3 className="text-3xl md:text-4xl font-bold text-white mb-4">
                需要定制开发？
              </h3>
              <p className="text-white/90 text-lg mb-8 max-w-2xl mx-auto">
                我们提供专业的定制开发服务，根据您的业务需求
                <br />
                量身打造最适合的素材管理解决方案
              </p>

              <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
                <a
                  href="http://sc.flnxi.com"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="px-8 py-4 bg-white text-apple-blue rounded-full font-semibold button-hover apple-shadow-lg w-full sm:w-auto"
                >
                  先体验演示
                </a>
                <a
                  href="mailto:contact@flnxi.com"
                  className="px-8 py-4 bg-white/10 backdrop-blur-sm text-white border-2 border-white rounded-full font-semibold button-hover w-full sm:w-auto"
                >
                  发送邮件咨询
                </a>
              </div>

              {/* Stats */}
              <div className="grid grid-cols-3 gap-6 mt-12 max-w-2xl mx-auto">
                <div className="text-center">
                  <div className="text-3xl font-bold text-white mb-1">100+</div>
                  <div className="text-white/80 text-sm">企业用户</div>
                </div>
                <div className="text-center border-x border-white/20">
                  <div className="text-3xl font-bold text-white mb-1">98%</div>
                  <div className="text-white/80 text-sm">满意度</div>
                </div>
                <div className="text-center">
                  <div className="text-3xl font-bold text-white mb-1">48h</div>
                  <div className="text-white/80 text-sm">响应时间</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Trust Indicators */}
        <div className="mt-16 text-center">
          <p className="text-apple-gray-500 mb-6">已为这些行业提供服务</p>
          <div className="flex flex-wrap justify-center items-center gap-8">
            {['电商行业', '广告设计', '建筑装饰', '游戏开发', '影视制作'].map((industry) => (
              <div
                key={industry}
                className="px-6 py-3 bg-white rounded-full apple-shadow text-apple-gray-700 font-medium"
              >
                {industry}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}