update

app/components/Contact.tsx

@@ -3,9 +3,11 @@
 import { useState, useEffect } from 'react';
 import { motion } from 'framer-motion';
 import { Mail, Phone, MapPin, Send, Github, Linkedin, Twitter } from 'lucide-react';
+import { useToast } from '@/components/Toast';
 
 const Contact = () => {
   const [mounted, setMounted] = useState(false);
+  const { showEmailSent, showEmailError } = useToast();
 
   useEffect(() => {
     setMounted(true);
@@ -24,12 +26,33 @@ const Contact = () => {
     e.preventDefault();
     setIsSubmitting(true);
     
-    // Simulate form submission
-    setTimeout(() => {
+    try {
+      const response = await fetch('/api/email', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          name: formData.name,
+          email: formData.email,
+          subject: formData.subject,
+          message: formData.message,
+        }),
+      });
+
+      if (response.ok) {
+        showEmailSent(formData.email);
+        setFormData({ name: '', email: '', subject: '', message: '' });
+      } else {
+        const errorData = await response.json();
+        showEmailError(errorData.error || 'Unbekannter Fehler');
+      }
+    } catch (error) {
+      console.error('Error sending email:', error);
+      showEmailError('Netzwerkfehler beim Senden der E-Mail');
+    } finally {
       setIsSubmitting(false);
-      alert('Thank you for your message! I will get back to you soon.');
-      setFormData({ name: '', email: '', subject: '', message: '' });
-    }, 2000);
+    }
   };
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {