xunchiProduct/website/src/components/ContactForm.jsx

import { useState } from 'react';
import { CheckCircle, X } from 'lucide-react';

const productOptions = [
  '校企益邦',
  '实训管理平台',
  '智慧党建平台',
  '科研管理系统',
];

const initialFormState = {
  name: '',
  phone: '',
  company: '',
  product: '',
  message: '',
};

export default function ContactForm() {
  const [form, setForm] = useState(initialFormState);
  const [showModal, setShowModal] = useState(false);

  function handleChange(e) {
    const { name, value } = e.target;
    setForm((prev) => ({ ...prev, [name]: value }));
  }

  function handleSubmit(e) {
    e.preventDefault();
    setShowModal(true);
    console.log('提交表单', form);

    setForm(initialFormState);
  }

  function closeModal() {
    setShowModal(false);
  }

  const inputClass = 'w-full px-4 py-3 border border-gray-200 rounded-xl text-base focus:outline-none focus:ring-2 focus:ring-[#004ec4]/30 focus:border-[#004ec4]/60 transition-shadow placeholder-[#94a3b8] bg-white text-[#334155]';

  return (
    <>
      <section className="py-24 px-6 bg-[#fafbfc]">
        <div className="max-w-5xl mx-auto">
          <div className="text-center mb-16">
            <div className="flex flex-col items-center">
              <div className="inline-flex items-center gap-3 mb-5">
                <span className="w-5 h-[2px] rounded-full bg-[#004ec4]" />
                <span className="text-xs font-semibold uppercase tracking-[0.25em] text-[#004ec4]">Inquiry</span>
              </div>
              <h2 className="text-3xl xs:text-4xl sm:text-5xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
                在线咨询
              </h2>
              <p className="text-[#475569] text-sm sm:text-base md:text-lg lg:text-xl mt-4 md:mt-5 max-w-xl leading-relaxed">填写表单，我们将在 1 个工作日内与您联系</p>
            </div>
          </div>

          <div className="relative bg-white rounded-2xl p-8 md:p-10 border border-gray-100 overflow-hidden max-w-3xl mx-auto">
            <div className="absolute top-0 left-0 right-0 h-[2px] opacity-100"
              style={{ background: 'linear-gradient(90deg, transparent, #004ec4, transparent)' }} />
            <div className="absolute top-0 right-0 w-28 h-28 bg-[#004ec4]/[0.06] rounded-bl-full" />
            <div className="absolute bottom-0 left-0 w-16 h-16 border border-[#004ec4]/[0.15] rounded-tr-3xl" />

            <div className="relative z-10">
              <form onSubmit={handleSubmit} className="space-y-8">
                <div>
                  <label htmlFor="name" className="block text-base font-bold text-[#0f172a] mb-2">
                    姓名 <span className="text-red-400">*</span>
                  </label>
                  <input type="text" id="name" name="name" required value={form.name} onChange={handleChange}
                    placeholder="请输入您的姓名" className={inputClass} />
                </div>

                <div>
                  <label htmlFor="phone" className="block text-base font-bold text-[#0f172a] mb-2">
                    联系电话 <span className="text-red-400">*</span>
                  </label>
                  <input type="tel" id="phone" name="phone" required value={form.phone} onChange={handleChange}
                    placeholder="请输入您的联系电话" className={inputClass} />
                </div>

                <div>
                  <label htmlFor="company" className="block text-base font-bold text-[#0f172a] mb-2">单位名称</label>
                  <input type="text" id="company" name="company" value={form.company} onChange={handleChange}
                    placeholder="请输入您的单位名称" className={inputClass} />
                </div>

                <div>
                  <label htmlFor="product" className="block text-base font-bold text-[#0f172a] mb-2">
                    关注产品 <span className="text-[#94a3b8] text-sm">(可选)</span>
                  </label>
                  <select id="product" name="product" value={form.product} onChange={handleChange}
                    className="w-full px-4 py-3 border border-gray-200 rounded-xl text-base focus:outline-none focus:ring-2 focus:ring-[#004ec4]/30 focus:border-[#004ec4]/60 transition-shadow bg-white text-[#64748b]">
                    <option value="">请选择关注的产品</option>
                    {productOptions.map((product) => (
                      <option key={product} value={product}>{product}</option>
                    ))}
                  </select>
                </div>

                <div>
                  <label htmlFor="message" className="block text-base font-bold text-[#0f172a] mb-2">留言内容</label>
                  <textarea id="message" name="message" rows={4} value={form.message} onChange={handleChange}
                    placeholder="请输入您的留言内容" className={inputClass + ' resize-none'} />
                </div>

                <button
                  type="submit"
                  className="w-full py-4 text-white font-bold rounded-xl text-base transition-all focus:outline-none focus:ring-2 focus:ring-[#004ec4]/30 focus:ring-offset-2 hover:shadow-lg hover:shadow-[#004ec4]/30"
                  style={{ background: 'linear-gradient(135deg, #004ec4, #0659c7)' }}
                >
                  提交咨询
                </button>
              </form>
            </div>
          </div>
        </div>
      </section>

      {showModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={closeModal} />
          <div className="relative bg-white rounded-2xl p-8 md:p-10 max-w-md w-full shadow-2xl overflow-hidden">
            <div className="absolute top-0 left-0 right-0 h-[2px]"
              style={{ background: 'linear-gradient(90deg, transparent, #004ec4, transparent)' }} />
            <div className="absolute top-0 right-0 w-20 h-20 bg-[#004ec4]/[0.06] rounded-bl-full" />

            <button onClick={closeModal}
              className="absolute top-4 right-4 w-8 h-8 rounded-full bg-gray-50 flex items-center justify-center hover:bg-gray-100 transition-colors">
              <X className="w-4 h-4 text-[#94a3b8]" />
            </button>

            <div className="relative z-10 text-center">
              <div className="w-16 h-16 rounded-full bg-[#004ec4]/[0.12] border border-[#004ec4]/20 flex items-center justify-center mx-auto mb-6">
                <CheckCircle className="w-8 h-8 text-[#004ec4]" />
              </div>
              <h3 className="text-xl font-bold text-[#0f172a] mb-3">提交成功</h3>
              <p className="text-[#64748b] text-base leading-relaxed mb-8">
                感谢您的咨询！我们将在 <span className="font-bold text-[#004ec4]">1 个工作日</span> 内与您联系
              </p>
              <button onClick={closeModal}
                className="w-full py-3.5 text-white font-bold rounded-xl text-base transition-all hover:shadow-lg hover:shadow-[#004ec4]/30"
                style={{ background: 'linear-gradient(135deg, #004ec4, #0659c7)' }}>
                我知道了
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}