xiaso-flnxi-website/components/Contact.tsx

'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-20 bg-gradient-to-b from-apple-gray-50 to-white">
      <div className="max-w-6xl 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">
          <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">
              <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">
                付费版¥599永久使用，无限团队+素材 | 需要定制？联系我们量身打造
              </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-10 py-4 bg-white text-apple-blue rounded-full font-bold text-lg button-hover apple-shadow-lg w-full sm:w-auto"
                >
                  先免费体验
                </a>
                <a
                  href="mailto:contact@flnxi.com"
                  className="px-10 py-4 bg-white/10 backdrop-blur-sm text-white border-2 border-white rounded-full font-bold text-lg button-hover w-full sm:w-auto"
                >
                  联系购买/定制
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}