From 2f93f2b25db25bd76d3898e648bd74d0b2db9d45 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sun, 12 Jul 2026 13:43:05 +0000
Subject: [PATCH 1/3] Changes

Co-authored-by: wolfoftyreso-debug <250630591+wolfoftyreso-debug@users.noreply.github.com>
---
 src/components/PlansSection.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/PlansSection.tsx b/src/components/PlansSection.tsx
index 6ae1926..e1bc3d4 100644
--- a/src/components/PlansSection.tsx
+++ b/src/components/PlansSection.tsx
@@ -1,11 +1,22 @@
 import { useState, useMemo, useEffect } from "react";
-import { Loader2, CheckCircle2, CreditCard, FileText } from "lucide-react";
+import { Loader2, CheckCircle2, CreditCard, FileText, ChevronsUpDown, Check } from "lucide-react";
 import { supabase } from "@/integrations/supabase/client";
 import { useAuth } from "@/hooks/useAuth";
 import { toast } from "sonner";
 import { z } from "zod";
 import { StripeEmbeddedCheckout } from "@/components/StripeEmbeddedCheckout";
 import { getStripeEnvironment, hasPaymentsConfigured } from "@/lib/stripe";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { cn } from "@/lib/utils";
+
+const STORSTOCKHOLM_CITIES = [
+  "Stockholm", "Solna", "Sundbyberg", "Nacka", "Lidingö", "Danderyd",
+  "Täby", "Sollentuna", "Järfälla", "Upplands Väsby", "Sigtuna",
+  "Vallentuna", "Österåker", "Vaxholm", "Värmdö", "Tyresö", "Haninge",
+  "Nynäshamn", "Botkyrka", "Salem", "Södertälje", "Nykvarn", "Huddinge",
+  "Bromma", "Ekerö", "Upplands-Bro",
+];
 
 const PRICE_PER_KG_EXKL = 325; // exkl. moms, används för Stripe/faktura
 const VAT_RATE = 0.25;

From e2358e8e62388e9a9511ec1e0c0e29eaf32bddb6 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sun, 12 Jul 2026 13:43:13 +0000
Subject: [PATCH 2/3] Changes

Co-authored-by: wolfoftyreso-debug <250630591+wolfoftyreso-debug@users.noreply.github.com>
---
 src/components/PlansSection.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/PlansSection.tsx b/src/components/PlansSection.tsx
index e1bc3d4..7534579 100644
--- a/src/components/PlansSection.tsx
+++ b/src/components/PlansSection.tsx
@@ -58,6 +58,7 @@ const PlansSection = () => {
   const [submitted, setSubmitted] = useState<null | "card" | "invoice">(null);
   const [errors, setErrors] = useState<Record<string, string>>({});
   const [clientSecret, setClientSecret] = useState<string | null>(null);
+  const [cityOpen, setCityOpen] = useState(false);
   const [form, setForm] = useState({
     företag: "",
     epost: "",

From 90fd9c9c2b162fe9158fa068f23e725ec6ed428e Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sun, 12 Jul 2026 13:43:24 +0000
Subject: [PATCH 3/3] Changes

Co-authored-by: wolfoftyreso-debug <250630591+wolfoftyreso-debug@users.noreply.github.com>
---
 src/components/PlansSection.tsx | 49 +++++++++++++++++++++++++++------
 1 file changed, 41 insertions(+), 8 deletions(-)

diff --git a/src/components/PlansSection.tsx b/src/components/PlansSection.tsx
index 7534579..3229827 100644
--- a/src/components/PlansSection.tsx
+++ b/src/components/PlansSection.tsx
@@ -426,14 +426,47 @@ const PlansSection = () => {
                   <label className="block mb-1.5 text-sm font-semibold">
                     Stad <span className="text-primary">*</span>
                   </label>
-                  <input
-                    name="stad"
-                    placeholder="t.ex. Stockholm"
-                    value={form.stad}
-                    onChange={handleChange}
-                    aria-invalid={!!errors.stad}
-                    className="w-full px-4 py-3 rounded-sm bg-background border border-border focus:outline-none focus:ring-2 focus:ring-primary/30"
-                  />
+                  <Popover open={cityOpen} onOpenChange={setCityOpen}>
+                    <PopoverTrigger asChild>
+                      <button
+                        type="button"
+                        role="combobox"
+                        aria-expanded={cityOpen}
+                        aria-invalid={!!errors.stad}
+                        className={cn(
+                          "w-full px-4 py-3 rounded-sm bg-background border border-border focus:outline-none focus:ring-2 focus:ring-primary/30 flex items-center justify-between text-left",
+                          !form.stad && "text-muted-foreground"
+                        )}
+                      >
+                        {form.stad || "Välj stad..."}
+                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                      </button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-[--radix-popover-trigger-width] p-0" align="start">
+                      <Command>
+                        <CommandInput placeholder="Sök stad..." />
+                        <CommandList>
+                          <CommandEmpty>Ingen stad hittades.</CommandEmpty>
+                          <CommandGroup>
+                            {STORSTOCKHOLM_CITIES.map((city) => (
+                              <CommandItem
+                                key={city}
+                                value={city}
+                                onSelect={(v) => {
+                                  setForm((f) => ({ ...f, stad: v }));
+                                  setErrors((e) => ({ ...e, stad: "" }));
+                                  setCityOpen(false);
+                                }}
+                              >
+                                <Check className={cn("mr-2 h-4 w-4", form.stad === city ? "opacity-100" : "opacity-0")} />
+                                {city}
+                              </CommandItem>
+                            ))}
+                          </CommandGroup>
+                        </CommandList>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
                   {errors.stad && (
                     <p className="text-destructive text-xs mt-1">{errors.stad}</p>
                   )}