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] 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>
                   )}