feat: initial Funktechnik Schubert website

components/ContactForm.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { useState, type FormEvent } from "react";
+
+export default function ContactForm() {
+  const [message, setMessage] = useState("");
+  const [error, setError] = useState("");
+  const [pending, setPending] = useState(false);
+
+  async function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setError("");
+    setMessage("");
+    const form = new FormData(event.currentTarget);
+    const name = String(form.get("name") ?? "").trim();
+    const email = String(form.get("email") ?? "").trim();
+    const text = String(form.get("message") ?? "").trim();
+
+    if (!name || !email.includes("@") || text.length < 10 || form.get("privacy") !== "on") {
+      setError("Bitte füllen Sie alle Pflichtfelder aus und bestätigen Sie die Datenschutz-Hinweise.");
+      return;
+    }
+
+    setPending(true);
+    try {
+      const response = await fetch("/api/contact", { method: "POST", body: form });
+      const result = await response.json() as { message?: string };
+      if (!response.ok) throw new Error(result.message ?? "Nachricht konnte nicht gesendet werden.");
+      event.currentTarget.reset();
+      setMessage(result.message ?? "Ihre Nachricht wurde vorbereitet.");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Nachricht konnte nicht gesendet werden.");
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return (
+    <form className="form" onSubmit={submit} noValidate>
+      <div className="field">
+        <label htmlFor="name">Name</label>
+        <input id="name" name="name" />
+      </div>
+      <div className="field">
+        <label htmlFor="email">E-Mail</label>
+        <input id="email" name="email" type="email" />
+      </div>
+      <div className="field">
+        <label htmlFor="message">Nachricht</label>
+        <textarea id="message" name="message" />
+      </div>
+      <label className="checkbox">
+        <input type="checkbox" name="privacy" />
+        <span>Ich stimme zu, dass meine Angaben zur Bearbeitung der Kontaktanfrage verarbeitet werden.</span>
+      </label>
+      {error && <p className="error">{error}</p>}
+      {message && <p className="success">{message}</p>}
+      <button className="button" type="submit" disabled={pending}>{pending ? "Wird gesendet..." : "Nachricht senden"}</button>
+    </form>
+  );
+}