'use client';
import { useState, FormEvent } from 'react';

export default function Contact() {
  const [form, setForm] = useState({ name: '', email: '', msg: '' });
  const [error, setError] = useState('');

  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.msg) {
      setError('所有字段均为必填');
      return;
    }
    // TODO: 调用 API 提交表单
  };

  return (
    <section className="px-6 py-section bg-background">
      <div className="max-w-screen-sm mx-auto space-y-6">
        <h2 className="text-3xl font-light text-center">联系我们</h2>
        {error && <p className="text-red-500 text-sm">{error}</p>}
        <form className="flex flex-col space-y-4" onSubmit={handleSubmit}>
          <input
            type="text"
            placeholder="姓名"
            className="border p-3 rounded"
            value={form.name}
            onChange={e => setForm({ ...form, name: e.target.value })}
          />
          <input
            type="email"
            placeholder="邮箱"
            className="border p-3 rounded"
            value={form.email}
            onChange={e => setForm({ ...form, email: e.target.value })}
          />
          <textarea
            placeholder="留言"
            rows={5}
            className="border p-3 rounded"
            value={form.msg}
            onChange={e => setForm({ ...form, msg: e.target.value })}
          />
          <button
            type="submit"
            className="py-3 bg-accent text-white rounded disabled:opacity-50"
            disabled={!form.name || !form.email || !form.msg}
          >
            发送
          </button>
        </form>
      </div>
    </section>
  );
}