Add contact form page

Implemented a new contact flow:
- Added contact page with form and submission to email via edge function
- Exposed /contact route and wired to header/footer
- Updated edge function to send email using Resend (fetch-based) with CORS
- Integrated form validation and user feedback

X-Lovable-Edit-ID: edt-06d16b58-a22a-447e-b6cb-4a7b4af3347b

src/App.tsx

@@ -9,6 +9,7 @@ import ResetPassword from "./pages/ResetPassword";
 import Profile from "./pages/Profile";
 import Account from "./pages/Account";
 import AccountConfirmation from "./pages/AccountConfirmation";
+import Contact from "./pages/Contact";
 import { useCartSync } from "./hooks/useCartSync";
 
 const queryClient = new QueryClient();
@@ -20,6 +21,7 @@ function AppContent() {
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<Index />} />
+        <Route path="/contact" element={<Contact />} />
         <Route path="/reset-password" element={<ResetPassword />} />
         <Route path="/profile" element={<Profile />} />
         <Route path="/account" element={<Account />} />

src/components/Footer.tsx

@@ -25,7 +25,7 @@ const Footer = () => {
           <a href="#gallery" className="hover:text-primary transition-colors">
             Vårt sortiment
           </a>
-          <a href="#" className="hover:text-primary transition-colors">
+          <a href="/contact" className="hover:text-primary transition-colors">
             Kontakta oss
           </a>
         </div>

src/pages/Contact.tsx

@@ -0,0 +1,181 @@
+import { useState } from "react";
+import { z } from "zod";
+import { useNavigate } from "react-router-dom";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import { toast } from "sonner";
+import { supabase } from "@/integrations/supabase/client";
+import { Send, ArrowLeft } from "lucide-react";
+
+const contactSchema = z.object({
+  name: z.string().trim().min(1, "Namn krävs").max(100, "Max 100 tecken"),
+  email: z.string().trim().email("Ogiltig e-postadress").max(255, "Max 255 tecken"),
+  company: z.string().trim().max(100, "Max 100 tecken").optional(),
+  message: z.string().trim().min(1, "Meddelande krävs").max(2000, "Max 2000 tecken"),
+});
+
+type ContactForm = z.infer<typeof contactSchema>;
+
+const Contact = () => {
+  const navigate = useNavigate();
+  const [form, setForm] = useState<ContactForm>({
+    name: "",
+    email: "",
+    company: "",
+    message: "",
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const validation = contactSchema.safeParse(form);
+    if (!validation.success) {
+      toast.error(validation.error.errors[0].message);
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      const { error } = await supabase.functions.invoke("send-contact-email", {
+        body: {
+          name: form.name,
+          email: form.email,
+          company: form.company || "",
+          message: form.message,
+        },
+      });
+
+      if (error) {
+        throw error;
+      }
+
+      setIsSubmitted(true);
+      toast.success("Tack för ditt meddelande!");
+    } catch (error: any) {
+      console.error("Contact form error:", error);
+      toast.error("Något gick fel. Försök igen senare.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-background flex flex-col">
+      <Header />
+      <main className="flex-1 pt-24 pb-16 px-4">
+        <div className="max-w-xl mx-auto">
+          {/* Back link */}
+          <button
+            onClick={() => navigate("/")}
+            className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors mb-8"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            Tillbaka till startsidan
+          </button>
+
+          {/* Header */}
+          <div className="text-center mb-10">
+            <div className="w-16 h-px bg-primary/40 mx-auto mb-6"></div>
+            <h1 className="font-display text-3xl md:text-4xl font-semibold mb-3">
+              Kontakta oss
+            </h1>
+            <p className="text-muted-foreground">
+              Har du frågor om våra abonnemang eller vill veta mer? Hör av dig!
+            </p>
+          </div>
+
+          {isSubmitted ? (
+            <div className="bg-card border border-border rounded-lg p-8 text-center">
+              <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
+                <Send className="w-8 h-8 text-primary" />
+              </div>
+              <h2 className="font-display text-2xl font-semibold mb-2">
+                Tack för ditt meddelande!
+              </h2>
+              <p className="text-muted-foreground mb-6">
+                Vi återkommer till dig så snart som möjligt.
+              </p>
+              <Button onClick={() => navigate("/")} variant="outline">
+                Tillbaka till startsidan
+              </Button>
+            </div>
+          ) : (
+            <form onSubmit={handleSubmit} className="bg-card border border-border rounded-lg p-6 md:p-8 space-y-5">
+              <div className="space-y-2">
+                <Label htmlFor="name">Namn *</Label>
+                <Input
+                  id="name"
+                  type="text"
+                  value={form.name}
+                  onChange={(e) => setForm({ ...form, name: e.target.value })}
+                  placeholder="Ditt namn"
+                  required
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="email">E-post *</Label>
+                <Input
+                  id="email"
+                  type="email"
+                  value={form.email}
+                  onChange={(e) => setForm({ ...form, email: e.target.value })}
+                  placeholder="din@epost.se"
+                  required
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="company">Företag</Label>
+                <Input
+                  id="company"
+                  type="text"
+                  value={form.company}
+                  onChange={(e) => setForm({ ...form, company: e.target.value })}
+                  placeholder="Ditt företag (valfritt)"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="message">Meddelande *</Label>
+                <Textarea
+                  id="message"
+                  value={form.message}
+                  onChange={(e) => setForm({ ...form, message: e.target.value })}
+                  placeholder="Skriv ditt meddelande här..."
+                  rows={5}
+                  required
+                />
+              </div>
+
+              <Button
+                type="submit"
+                className="w-full"
+                disabled={isSubmitting}
+              >
+                {isSubmitting ? (
+                  "Skickar..."
+                ) : (
+                  <>
+                    <Send className="w-4 h-4 mr-2" />
+                    Skicka meddelande
+                  </>
+                )}
+              </Button>
+            </form>
+          )}
+        </div>
+      </main>
+      <Footer />
+    </div>
+  );
+};
+
+export default Contact;

supabase/functions/send-contact-email/index.ts

@@ -0,0 +1,95 @@
+import { serve } from "https://deno.land/std@0.190.0/http/server.ts";
+
+const corsHeaders = {
+  "Access-Control-Allow-Origin": "*",
+  "Access-Control-Allow-Headers":
+    "authorization, x-client-info, apikey, content-type",
+};
+
+interface ContactRequest {
+  name: string;
+  email: string;
+  company: string;
+  message: string;
+}
+
+const handler = async (req: Request): Promise<Response> => {
+  if (req.method === "OPTIONS") {
+    return new Response(null, { headers: corsHeaders });
+  }
+
+  try {
+    const { name, email, company, message }: ContactRequest = await req.json();
+
+    // Validate required fields
+    if (!name || !email || !message) {
+      throw new Error("Missing required fields");
+    }
+
+    // Validate email format
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(email)) {
+      throw new Error("Invalid email format");
+    }
+
+    // Validate field lengths
+    if (name.length > 100 || email.length > 255 || (company && company.length > 100) || message.length > 2000) {
+      throw new Error("Field length exceeded");
+    }
+
+    const RESEND_API_KEY = Deno.env.get("RESEND_API_KEY");
+    const recipientEmail = Deno.env.get("CONTACT_EMAIL") || "kontakt@example.com";
+
+    if (!RESEND_API_KEY) {
+      throw new Error("RESEND_API_KEY not configured");
+    }
+
+    const res = await fetch("https://api.resend.com/emails", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${RESEND_API_KEY}`,
+      },
+      body: JSON.stringify({
+        from: "Lennart Svensson Konditorivaror <noreply@lennartsvensson.se>",
+        to: [recipientEmail],
+        reply_to: email,
+        subject: `Kontaktförfrågan från ${name}`,
+        html: `
+          <h2>Ny kontaktförfrågan</h2>
+          <p><strong>Namn:</strong> ${name}</p>
+          <p><strong>E-post:</strong> ${email}</p>
+          ${company ? `<p><strong>Företag:</strong> ${company}</p>` : ""}
+          <hr />
+          <p><strong>Meddelande:</strong></p>
+          <p>${message.replace(/\n/g, "<br />")}</p>
+        `,
+      }),
+    });
+
+    if (!res.ok) {
+      const error = await res.text();
+      console.error("Resend API error:", error);
+      throw new Error("Failed to send email");
+    }
+
+    const data = await res.json();
+    console.log("Contact email sent successfully:", data);
+
+    return new Response(JSON.stringify({ success: true }), {
+      status: 200,
+      headers: { "Content-Type": "application/json", ...corsHeaders },
+    });
+  } catch (error: any) {
+    console.error("Error in send-contact-email function:", error);
+    return new Response(
+      JSON.stringify({ error: error.message }),
+      {
+        status: 500,
+        headers: { "Content-Type": "application/json", ...corsHeaders },
+      }
+    );
+  }
+};
+
+serve(handler);