InfiniteCloud/components/Contact.tsx

'use client';
import { useState } from 'react';
import { Mail, Phone, MapPin, Clock, Send, CheckCircle, AlertCircle, Building, MessageSquare, MessageCircle } from 'lucide-react';

export default function Contact() {
  const [form, setForm] = useState({ 
    name: '', 
    email: '', 
    company: '',
    phone: '',
    subject: '',
    message: '',
    inquiryType: 'general'
  });
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error'>('idle');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    
    try {
      const response = await fetch('https://formspree.io/f/xkgvgzal', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          name: form.name,
          email: form.email,
          company: form.company,
          phone: form.phone,
          subject: form.subject,
          message: form.message,
          inquiryType: form.inquiryType,
          _subject: `来自网站的联系表单 - ${form.subject || '一般咨询'}`
        })
      });

      if (response.ok) {
        setSubmitStatus('success');
        setForm({ name: '', email: '', company: '', phone: '', subject: '', message: '', inquiryType: 'general' });
      } else {
        setSubmitStatus('error');
      }
    } catch (error) {
      setSubmitStatus('error');
    } finally {
      setIsSubmitting(false);
    }
  };

  const contactInfo = [
    {
      icon: MapPin,
      title: '公司地址',
      details: ['全球远程办公', '总部位于美国纽约'],
      color: 'text-red-500'
    },
    {
      icon: Phone,
      title: 'WhatsApp',
      details: ['+1 917-402-9875', '7×24 小时技术支持'],
      color: 'text-blue-500'
    },
    {
      icon: Mail,
      title: '邮箱地址',
      details: ['support@pinnovatecloud.com', 'info@pinnovatecloud.com'],
      color: 'text-green-500'
    },
    {
      icon: MessageCircle,
      title: 'Telegram',
      details: ['@pinnovatecloud', '即时响应支持'],
      color: 'text-purple-500'
    }
  ];

  return (
    <section className="px-6 py-16 bg-white" id="contact-form">
      <div className="max-w-screen-xl mx-auto">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold text-primary mb-4">发送消息</h2>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
            填写下面的表单，我们的团队会在 24 小时内回复您。
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
          {/* 联系表单 */}
          <div className="lg:col-span-2">
            <div className="bg-gray-50 rounded-2xl p-8">
              {submitStatus === 'success' && (
                <div className="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg flex items-center gap-3">
                  <CheckCircle className="w-5 h-5 text-green-500" />
                  <span className="text-green-700">消息发送成功！我们会尽快回复您。</span>
                </div>
              )}

              {submitStatus === 'error' && (
                <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg flex items-center gap-3">
                  <AlertCircle className="w-5 h-5 text-red-500" />
                  <span className="text-red-700">发送失败，请稍后重试或直接联系我们。</span>
                </div>
              )}

              <form onSubmit={handleSubmit} className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      姓名 *
                    </label>
                    <input
                      type="text"
                      required
                      className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-accent focus:border-transparent outline-none transition-colors"
                      placeholder="请输入您的姓名"
                      value={form.name}
                      onChange={e => setForm({ ...form, name: e.target.value })}
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      邮箱 *
                    </label>
                    <input
                      type="email"
                      required
                      className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-accent focus:border-transparent outline-none transition-colors"
                      placeholder="请输入您的邮箱"
                      value={form.email}
                      onChange={e => setForm({ ...form, email: e.target.value })}
                    />
                  </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      公司名称
                    </label>
                    <input
                      type="text"
                      className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-accent focus:border-transparent outline-none transition-colors"
                      placeholder="请输入您的公司名称"
                      value={form.company}
                      onChange={e => setForm({ ...form, company: e.target.value })}
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      联系电话
                    </label>
                    <input
                      type="tel"
                      className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-accent focus:border-transparent outline-none transition-colors"
                      placeholder="请输入您的联系电话"
                      value={form.phone}
                      onChange={e => setForm({ ...form, phone: e.target.value })}
                    />
                  </div>
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    咨询类型
                  </label>
                  <select
                    className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-accent focus:border-transparent outline-none transition-colors"
                    value={form.inquiryType}
                    onChange={e => setForm({ ...form, inquiryType: e.target.value })}
                  >
                    <option value="general">一般咨询</option>
                    <option value="sales">销售咨询</option>
                    <option value="support">技术支持</option>
                    <option value="partnership">合作洽谈</option>
                    <option value="feedback">意见反馈</option>
                  </select>
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    主题
                  </label>
                  <input
                    type="text"
                    className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-accent focus:border-transparent outline-none transition-colors"
                    placeholder="请输入消息主题"
                    value={form.subject}
                    onChange={e => setForm({ ...form, subject: e.target.value })}
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    详细消息 *
                  </label>
                  <textarea
                    required
                    rows={6}
                    className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-accent focus:border-transparent outline-none transition-colors resize-none"
                    placeholder="请详细描述您的问题或需求..."
                    value={form.message}
                    onChange={e => setForm({ ...form, message: e.target.value })}
                  />
                </div>

                <button
                  type="submit"
                  disabled={isSubmitting || !form.name || !form.email || !form.message}
                  className="w-full flex items-center justify-center gap-2 py-4 px-6 bg-accent text-white rounded-xl font-semibold hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                >
                  {isSubmitting ? (
                    <>
                      <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                      发送中...
                    </>
                  ) : (
                    <>
                      <Send className="w-5 h-5" />
                      发送消息
                    </>
                  )}
                </button>
              </form>
            </div>
          </div>

          {/* 联系信息 */}
          <div className="space-y-8">
            <div>
              <h3 className="text-2xl font-bold text-primary mb-6">联系信息</h3>
              <div className="space-y-6">
                {contactInfo.map((info, index) => (
                  <div key={index} className="flex items-start gap-4">
                    <div className={`w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center flex-shrink-0 ${info.color}`}>
                      <info.icon className="w-6 h-6" />
                    </div>
                    <div>
                      <h4 className="font-semibold text-primary mb-2">{info.title}</h4>
                      {info.details.map((detail, idx) => (
                        <p key={idx} className="text-gray-600 text-sm mb-1">{detail}</p>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* 在线客服 */}
            <div className="bg-gradient-to-r from-accent to-blue-600 rounded-2xl p-6 text-white">
              <div className="flex items-center gap-3 mb-4">
                <MessageSquare className="w-6 h-6" />
                <h4 className="text-lg font-semibold">在线客服</h4>
              </div>
              <p className="text-blue-100 mb-4">
                需要即时帮助？我们的在线客服团队随时为您服务。
              </p>
              <button className="w-full py-3 bg-white text-accent rounded-xl font-semibold hover:bg-gray-100 transition-colors">
                开始对话
              </button>
            </div>

            {/* 工作时间提醒 */}
            <div className="bg-yellow-50 border border-yellow-200 rounded-xl p-6">
              <div className="flex items-start gap-3">
                <Clock className="w-5 h-5 text-yellow-600 mt-0.5" />
                <div>
                  <h4 className="font-semibold text-yellow-800 mb-2">响应时间</h4>
                  <ul className="text-sm text-yellow-700 space-y-1">
                    <li>• 在线客服：即时响应</li>
                    <li>• 邮件支持：24 小时内</li>
                    <li>• 电话支持：7×24 小时</li>
                    <li>• 紧急问题：1 小时内</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}