From cb3fdc52f07e66ff3d6b4835b2cc75f845fe1a4b Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 11 Jul 2026 13:14:25 +0000
Subject: [PATCH] Changes

Co-authored-by: wolfoftyreso-debug <250630591+wolfoftyreso-debug@users.noreply.github.com>
---
 src/pages/OrderConfirmation.tsx | 108 ++++++++++++++++++++++++++++++++
 1 file changed, 108 insertions(+)
 create mode 100644 src/pages/OrderConfirmation.tsx

diff --git a/src/pages/OrderConfirmation.tsx b/src/pages/OrderConfirmation.tsx
new file mode 100644
index 0000000..44d7bc9
--- /dev/null
+++ b/src/pages/OrderConfirmation.tsx
@@ -0,0 +1,108 @@
+import { useSearchParams, useNavigate } from "react-router-dom";
+import { CheckCircle2, Truck, Mail, Calendar } from "lucide-react";
+import Header from "@/components/Header";
+import { Button } from "@/components/ui/button";
+
+const OrderConfirmation = () => {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+
+  const method = searchParams.get("method") ?? "card";
+  const kg = searchParams.get("kg");
+  const email = searchParams.get("email");
+  const sessionId = searchParams.get("session_id");
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Header />
+      <main className="pt-28 md:pt-32 px-6 pb-20">
+        <div className="max-w-2xl mx-auto">
+          <div className="text-center mb-10 animate-fade-in">
+            <div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-6">
+              <CheckCircle2 className="w-11 h-11 text-primary" strokeWidth={1.5} />
+            </div>
+            <div className="w-24 h-px bg-primary/40 mx-auto mb-6" />
+            <h1 className="font-display text-4xl md:text-5xl font-semibold mb-4">
+              Tack för din beställning!
+            </h1>
+            <p className="font-display italic text-lg md:text-xl text-muted-foreground">
+              Goda saker är på väg.
+            </p>
+          </div>
+
+          <div className="bg-card border border-border rounded-sm shadow-[0_10px_40px_-15px_rgba(0,0,0,0.15)] p-6 md:p-10 space-y-6">
+            {kg && (
+              <div className="text-center pb-6 border-b border-border">
+                <div className="text-muted-foreground text-xs uppercase tracking-widest mb-2">
+                  Ditt abonnemang
+                </div>
+                <div className="font-display text-3xl md:text-4xl font-semibold text-primary tabular-nums">
+                  {kg} kg kakor / vecka
+                </div>
+              </div>
+            )}
+
+            <div className="flex items-start gap-4">
+              <Truck className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" strokeWidth={1.5} />
+              <div>
+                <div className="font-display text-lg font-semibold mb-1">Leverans varje tisdag</div>
+                <p className="text-sm text-muted-foreground leading-relaxed">
+                  Vi levererar färska kakor till er adress inom Storstockholm varje tisdag
+                  morgon. Första leveransen kommer inom kort.
+                </p>
+              </div>
+            </div>
+
+            <div className="flex items-start gap-4">
+              <Calendar className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" strokeWidth={1.5} />
+              <div>
+                <div className="font-display text-lg font-semibold mb-1">
+                  {method === "invoice" ? "Faktura varje månad" : "Månatlig kortdragning"}
+                </div>
+                <p className="text-sm text-muted-foreground leading-relaxed">
+                  {method === "invoice"
+                    ? "Faktura skickas till er e-post varje månad med 30 dagars betalningsvillkor."
+                    : "Beloppet dras automatiskt från ert kort en gång i månaden. Du kan säga upp när som helst."}
+                </p>
+              </div>
+            </div>
+
+            <div className="flex items-start gap-4">
+              <Mail className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" strokeWidth={1.5} />
+              <div>
+                <div className="font-display text-lg font-semibold mb-1">Orderbekräftelse</div>
+                <p className="text-sm text-muted-foreground leading-relaxed">
+                  En bekräftelse{email ? <> skickas till <strong className="text-foreground">{email}</strong></> : " skickas till din e-post"} inom kort.
+                </p>
+              </div>
+            </div>
+
+            {sessionId && (
+              <div className="pt-4 border-t border-border text-center">
+                <p className="text-xs text-muted-foreground font-mono break-all">
+                  Referens: {sessionId}
+                </p>
+              </div>
+            )}
+          </div>
+
+          <div className="text-center mt-10">
+            <Button
+              onClick={() => navigate("/")}
+              variant="outline"
+              className="font-display"
+            >
+              Tillbaka till startsidan
+            </Button>
+          </div>
+
+          <p className="text-center text-sm text-muted-foreground mt-8 italic font-display">
+            Äkta svenskt konditorhantverk
+          </p>
+        </div>
+      </main>
+    </div>
+  );
+};
+
+export default OrderConfirmation;