"use client"; import { useState } from "react"; import { Field, Honeypot, StatusBanner } from "@/components/forms/Field"; import { inputClass, isEmail, isRequired, submitDemo, type SubmitResult } from "@/lib/forms"; const TOPICS = ["General", "Sales", "Support", "Feedback"]; export function FullContactForm() { const [v, setV] = useState({ fullName: "", email: "", phone: "", topic: "", contactMethod: "email", subscribe: false, preferredDate: "", message: "", website: "", }); const [attachmentName, setAttachmentName] = useState(""); const [errors, setErrors] = useState>({}); const [status, setStatus] = useState(null); const [submitting, setSubmitting] = useState(false); function upd(k: K, val: (typeof v)[K]) { setV((prev) => ({ ...prev, [k]: val })); } function validate() { const er: Record = {}; if (!isRequired(v.fullName)) er.fullName = "Please enter your name."; if (!isEmail(v.email)) er.email = "Please enter a valid email address."; if (!isRequired(v.topic)) er.topic = "Please choose a topic."; if (!isRequired(v.message)) er.message = "Please enter a message."; setErrors(er); return Object.keys(er).length === 0; } async function onSubmit(e: React.FormEvent) { e.preventDefault(); setStatus(null); if (!validate()) return; setSubmitting(true); const result = await submitDemo({ fullName: v.fullName, email: v.email, phone: v.phone, topic: v.topic, contactMethod: v.contactMethod, subscribe: v.subscribe ? "yes" : "no", preferredDate: v.preferredDate, message: v.message, attachment: attachmentName, website: v.website, }); setStatus(result); setSubmitting(false); } return (

upd("fullName", e.target.value)} /> upd("email", e.target.value)} /> upd("phone", e.target.value)} />

{["email", "phone"].map((m) => ( upd("contactMethod", e.target.value)} className="accent-[var(--accent)]" /> {m} ))}

upd("preferredDate", e.target.value)} />

upd("message", e.target.value)} />
      </Field>

<Field label="Attachment" htmlFor="f-file" hint="Demo only — the filename is read client-side; no file is uploaded.">
        <input
          id="f-file"
          type="file"
          className="block w-full text-sm text-muted file:mr-3 file:rounded-lg file:border-0 file:bg-surface-2 file:px-3 file:py-2 file:text-sm"
          onChange={(e) => setAttachmentName(e.target.files?.[0]?.name ?? "")}
        />
        {attachmentName && <p className="mt-1 text-xs text-muted">Selected: {attachmentName}</p>}
      </Field>

<label className="flex items-center gap-2 text-sm">
        <input type="checkbox" checked={v.subscribe} onChange={(e) => upd("subscribe", e.target.checked)} className="accent-[var(--accent)]" />
        Subscribe to occasional updates
      </label>

<Honeypot value={v.website} onChange={(e) => upd("website", e.target.value)} />

<button
        type="submit"
        disabled={submitting}
        className="rounded-lg bg-accent px-5 py-2.5 text-sm font-semibold text-accent-foreground transition-colors hover:bg-accent-hover disabled:opacity-60"
      >
        {submitting ? "Submitting…" : "Submit"}
      </button>
      {status && <StatusBanner result={status} />}
    </form>
  );
}
</article></body></html>

Full contact form