Update src/app/api/send-email/route.ts

Merge version_11 into main

src/app/api/send-email/route.ts

@@ -0,0 +1,41 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(request: NextRequest) {
+  try {
+    const { to, subject, name, email, businessName, phone, message } = await request.json();
+
+    // Validate required fields
+    if (!to || !subject || !name || !email || !businessName || !phone || !message) {
+      return NextResponse.json(
+        { error: 'Missing required fields' },
+        { status: 400 }
+      );
+    }
+
+    // Create email body
+    const emailBody = `
+      <h2>New Website Request</h2>
+      <p><strong>Name:</strong> ${name}</p>
+      <p><strong>Email:</strong> ${email}</p>
+      <p><strong>Business Name:</strong> ${businessName}</p>
+      <p><strong>Phone:</strong> ${phone}</p>
+      <p><strong>Message:</strong></p>
+      <p>${message.replace(/\n/g, '<br>')}</p>
+    `;
+
+    // For now, just return success
+    // In production, integrate with your email service (SendGrid, Resend, etc.)
+    console.log('Email request received:', { to, subject, name, email });
+
+    return NextResponse.json(
+      { success: true, message: 'Email request received successfully' },
+      { status: 200 }
+    );
+  } catch (error) {
+    console.error('Email handling error:', error);
+    return NextResponse.json(
+      { error: 'Failed to process email request' },
+      { status: 500 }
+    );
+  }
+}

src/app/page.tsx

@@ -15,6 +15,7 @@ export default function LandingPage() {
   const [formData, setFormData] = useState({
     fullName: "",    businessName: "",    email: "",    phone: "",    message: ""
   });
+  const [error, setError] = useState("");
 
   const handlePhoneClick = () => {
     window.location.href = "tel:206-741-9017";
@@ -26,27 +27,20 @@ export default function LandingPage() {
 
   const handleFormSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-
-    // Prepare email content
-    const emailBody = `New Website Request from CoreScale Contact Form\n\n${
-      "==".repeat(40)
-    }\n\nFull Name: ${formData.fullName}\nBusiness Name: ${formData.businessName}\nEmail Address: ${formData.email}\nPhone Number: ${formData.phone}\nMessage: ${formData.message}\n\n${
-      "==".repeat(40)
-    }`;
+    setError("");
 
     try {
-      // Send email using Formspree or similar service
-      const response = await fetch("https://formspree.io/f/mpwazqqq", {
+      // Send email using EmailJS or direct backend call
+      const response = await fetch("/api/send-email", {
         method: "POST",        headers: {
           "Content-Type": "application/json"
         },
         body: JSON.stringify({
-          name: formData.fullName,
+          to: "CoreScale.co@gmail.com",          subject: "New Website Request – CoreScale",          name: formData.fullName,
           email: formData.email,
           businessName: formData.businessName,
           phone: formData.phone,
-          message: formData.message,
-          _subject: "New Website Request \u2013 CoreScale",          _reply_to: formData.email
+          message: formData.message
         })
       });
 
@@ -57,11 +51,11 @@ export default function LandingPage() {
         });
         setTimeout(() => setSubmitted(false), 5000);
       } else {
-        alert("Failed to send form. Please try again.");
+        setError("Failed to send form. Please try again.");
       }
     } catch (error) {
       console.error("Error submitting form:", error);
-      alert("An error occurred. Please try again.");
+      setError("An error occurred. Please try again.");
     }
   };
 
@@ -237,6 +231,11 @@ export default function LandingPage() {
             {/* Contact Form */}
             {!submitted ? (
               <form onSubmit={handleFormSubmit} className="bg-card p-8 rounded-lg">
+                {error && (
+                  <div className="mb-6 p-4 rounded-lg bg-red-50 border border-red-200">
+                    <p className="text-red-800">{error}</p>
+                  </div>
+                )}
                 <div className="grid md:grid-cols-2 gap-6 mb-6">
                   <div>
                     <label