Sihirbaz akışı ana sayfaya taşındı: sıralama girilince modal orada açılır

- Ortak SihirbazAdimlar bileşeni (3 adımlık seçim UI'ı) çıkarıldı;
  hem hero modalı hem /sonuc modalı kullanıyor
- /api/facetler: sıraya göre kategori/il/üniversite tipi facet'leri
- HeroForm: "Listemi oluştur" artık modalı açar; seçimler tamamlanınca
  localStorage'a (SIHIRBAZ_STORAGE_KEY) yazılıp /sonuc'a yönlendirilir
- /sonuc: modal yalnızca giriş dönüşünde (?sihirbaz=1) otomatik açılır;
  kayıtlı seçimler prefill olarak kullanılır

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/components/hero-form.tsx

@@ -2,49 +2,112 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
-import { ArrowRight } from "lucide-react";
+import { ArrowRight, Loader2 } from "lucide-react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { SihirbazAdimlar } from "@/components/sihirbaz-adimlar";
+import type { SihirbazFacetleri } from "@/lib/db";
+import { SIHIRBAZ_STORAGE_KEY, type SihirbazSecimleri } from "@/lib/sihirbaz";
+
+const TUR: string = "say";
 
 export function HeroForm() {
   const [siralama, setSiralama] = useState("");
+  const [sira, setSira] = useState<number | null>(null);
+  const [facetler, setFacetler] = useState<SihirbazFacetleri | null>(null);
+  const [yukleniyor, setYukleniyor] = useState(false);
+  const [modalAcik, setModalAcik] = useState(false);
   const router = useRouter();
 
-  function handleSubmit(e: React.FormEvent) {
+  async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     const value = Number(siralama.replace(/\./g, ""));
     if (!value || value < 1 || value > 4_000_000) {
       toast.error("Geçerli bir başarı sıralaması gir (ör. 85.000).");
       return;
     }
-    router.push(`/sonuc?sira=${value}`);
+    setYukleniyor(true);
+    try {
+      const res = await fetch(`/api/facetler?sira=${value}&tur=${TUR}`);
+      if (!res.ok) throw new Error();
+      const veri = (await res.json()) as { facetler: SihirbazFacetleri };
+      setSira(value);
+      setFacetler(veri.facetler);
+      setModalAcik(true);
+    } catch {
+      toast.error("Bir şeyler ters gitti, tekrar dener misin?");
+    } finally {
+      setYukleniyor(false);
+    }
+  }
+
+  // Seçimler tamam: sonuç sayfası (ve sonrası) kullanabilsin diye sakla, yönlendir.
+  function secimleriTamamla(secimler: SihirbazSecimleri) {
+    if (!sira) return;
+    try {
+      localStorage.setItem(
+        SIHIRBAZ_STORAGE_KEY,
+        JSON.stringify({ sira, tur: TUR, secimler }),
+      );
+    } catch {}
+    setModalAcik(false);
+    router.push(`/sonuc?sira=${sira}&tur=${TUR}`);
   }
 
   return (
-    <form
-      onSubmit={handleSubmit}
-      className="flex w-full max-w-md flex-col gap-3 sm:flex-row"
-    >
-      <label htmlFor="siralama" className="sr-only">
-        YKS başarı sıralaması
-      </label>
-      <Input
-        id="siralama"
-        inputMode="numeric"
-        placeholder="YKS başarı sıralaman (ör. 85.000)"
-        value={siralama}
-        onChange={(e) => setSiralama(e.target.value)}
-        className="h-12 flex-1 bg-white text-base"
-      />
-      <Button
-        type="submit"
-        size="lg"
-        className="h-12 cursor-pointer bg-orange-500 text-white transition-colors duration-200 hover:bg-orange-600"
+    <>
+      <form
+        onSubmit={handleSubmit}
+        className="flex w-full max-w-md flex-col gap-3 sm:flex-row"
       >
-        Listemi oluştur
-        <ArrowRight className="size-4" aria-hidden />
-      </Button>
-    </form>
+        <label htmlFor="siralama" className="sr-only">
+          YKS başarı sıralaması
+        </label>
+        <Input
+          id="siralama"
+          inputMode="numeric"
+          placeholder="YKS başarı sıralaman (ör. 85.000)"
+          value={siralama}
+          onChange={(e) => setSiralama(e.target.value)}
+          className="h-12 flex-1 bg-white text-base"
+        />
+        <Button
+          type="submit"
+          size="lg"
+          disabled={yukleniyor}
+          className="h-12 cursor-pointer bg-orange-500 text-white transition-colors duration-200 hover:bg-orange-600"
+        >
+          {yukleniyor ? (
+            <Loader2 className="size-4 animate-spin" aria-hidden />
+          ) : null}
+          Listemi oluştur
+          {yukleniyor ? null : <ArrowRight className="size-4" aria-hidden />}
+        </Button>
+      </form>
+
+      <Dialog open={modalAcik} onOpenChange={setModalAcik}>
+        <DialogContent className="max-h-[92dvh] gap-0 overflow-y-auto p-6 text-left sm:max-w-3xl">
+          <DialogTitle className="sr-only">Tercih listesi sihirbazı</DialogTitle>
+          <DialogDescription className="sr-only">
+            Sıralamana uygun seçimlerini yap, tercih planına geç.
+          </DialogDescription>
+          {facetler ? (
+            <SihirbazAdimlar
+              key={sira}
+              facetler={facetler}
+              sonButonEtiketi="Tercih planıma geç"
+              onTamamla={secimleriTamamla}
+            />
+          ) : null}
+        </DialogContent>
+      </Dialog>
+    </>
   );
 }

src/components/sihirbaz-adimlar.tsx

@@ -0,0 +1,239 @@
+"use client";
+
+// Sihirbazın 3 adımlık seçim gövdesi. Hem ana sayfadaki hero modalında hem de
+// /sonuc'taki sihirbaz modalında kullanılır; seçim state'ini kendi tutar,
+// tamamlanınca onTamamla(secimler) çağırır.
+
+import { useState } from "react";
+import { ArrowLeft, ArrowRight, Sparkles } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import type { SihirbazFacetleri } from "@/lib/db";
+import {
+  ONCELIKLER,
+  UNIVERSITE_TIPI_ETIKET,
+  type SihirbazSecimleri,
+  type UniversiteTipi,
+} from "@/lib/sihirbaz";
+
+export function Cip({
+  secili,
+  onClick,
+  children,
+}: {
+  secili: boolean;
+  onClick: () => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-pressed={secili}
+      className={
+        secili
+          ? "cursor-pointer rounded-full border border-primary bg-primary px-3.5 py-2 text-sm font-medium text-white transition-colors duration-200"
+          : "cursor-pointer rounded-full border border-slate-200 bg-white px-3.5 py-2 text-sm text-slate-700 transition-colors duration-200 hover:border-slate-300 hover:bg-slate-50"
+      }
+    >
+      {children}
+    </button>
+  );
+}
+
+export function SihirbazAdimlar({
+  facetler,
+  baslangicSecimler,
+  sonButonEtiketi,
+  onTamamla,
+}: {
+  facetler: SihirbazFacetleri;
+  baslangicSecimler?: SihirbazSecimleri | null;
+  sonButonEtiketi: string;
+  onTamamla: (secimler: SihirbazSecimleri) => void;
+}) {
+  const [adim, setAdim] = useState(0);
+  const [kategoriler, setKategoriler] = useState<string[]>(
+    baslangicSecimler?.kategoriler ?? [],
+  );
+  const [iller, setIller] = useState<string[]>(baslangicSecimler?.iller ?? []);
+  const [universiteTipi, setUniversiteTipi] = useState<UniversiteTipi>(
+    baslangicSecimler?.universiteTipi ?? "farketmez",
+  );
+  const [oncelikler, setOncelikler] = useState<string[]>(
+    baslangicSecimler?.oncelikler ?? [],
+  );
+
+  function listeDegistir(
+    liste: string[],
+    setListe: (v: string[]) => void,
+    deger: string,
+    maks?: number,
+  ) {
+    if (liste.includes(deger)) {
+      setListe(liste.filter((x) => x !== deger));
+    } else {
+      if (maks && liste.length >= maks) {
+        toast.info(`En fazla ${maks} seçebilirsin.`);
+        return;
+      }
+      setListe([...liste, deger]);
+    }
+  }
+
+  const adimGecerli = adim === 0 ? kategoriler.length > 0 : true;
+
+  return (
+    <div className="flex flex-col gap-5">
+      <div className="flex items-center gap-1.5">
+        {[0, 1, 2].map((i) => (
+          <span
+            key={i}
+            className={
+              i === adim
+                ? "h-1.5 w-6 rounded-full bg-primary transition-all"
+                : "h-1.5 w-1.5 rounded-full bg-slate-200 transition-all"
+            }
+          />
+        ))}
+        <span className="ml-2 text-xs font-medium text-slate-400">
+          Adım {adim + 1}/3
+        </span>
+      </div>
+
+      {adim === 0 ? (
+        <div>
+          <h3 className="font-heading text-lg font-bold">
+            Hangi alanlara ilgi duyuyorsun?
+          </h3>
+          <p className="mt-1 text-sm text-slate-500">
+            Sıralamanla ulaşabileceğin alanlar. En az bir tane seç.
+          </p>
+          <div className="mt-4 flex flex-wrap gap-2">
+            {facetler.kategoriler.map((k) => (
+              <Cip
+                key={k.ad}
+                secili={kategoriler.includes(k.ad)}
+                onClick={() => listeDegistir(kategoriler, setKategoriler, k.ad)}
+              >
+                {k.ad}
+                <span className="ml-1.5 text-xs opacity-70">{k.adet}</span>
+              </Cip>
+            ))}
+          </div>
+        </div>
+      ) : adim === 1 ? (
+        <div>
+          <h3 className="font-heading text-lg font-bold">
+            Nerede okumak istersin?
+          </h3>
+          <p className="mt-1 text-sm text-slate-500">
+            İstersen boş bırak (fark etmez). En fazla 5 il.
+          </p>
+          <div className="mt-4 flex flex-wrap gap-2">
+            {facetler.iller.map((i) => (
+              <Cip
+                key={i.il}
+                secili={iller.includes(i.il)}
+                onClick={() => listeDegistir(iller, setIller, i.il, 5)}
+              >
+                {i.il}
+                <span className="ml-1.5 text-xs opacity-70">{i.adet}</span>
+              </Cip>
+            ))}
+          </div>
+        </div>
+      ) : (
+        <div className="space-y-5">
+          <div>
+            <h3 className="font-heading text-lg font-bold">
+              Üniversite tipi & öncelikler
+            </h3>
+            <p className="mt-1 text-sm text-slate-500">
+              Bunlar listenin dengesini belirler.
+            </p>
+          </div>
+          <div>
+            <p className="mb-2 text-xs font-semibold tracking-wide text-slate-400 uppercase">
+              Üniversite tipi
+            </p>
+            <div className="flex flex-wrap gap-2">
+              {facetler.uniturler.map((u) => (
+                <Cip
+                  key={u.grup}
+                  secili={universiteTipi === u.grup}
+                  onClick={() =>
+                    setUniversiteTipi(
+                      universiteTipi === u.grup ? "farketmez" : u.grup,
+                    )
+                  }
+                >
+                  {UNIVERSITE_TIPI_ETIKET[u.grup]}
+                  <span className="ml-1.5 text-xs opacity-70">{u.adet}</span>
+                </Cip>
+              ))}
+              <Cip
+                secili={universiteTipi === "farketmez"}
+                onClick={() => setUniversiteTipi("farketmez")}
+              >
+                Fark etmez
+              </Cip>
+            </div>
+          </div>
+          <div>
+            <p className="mb-2 text-xs font-semibold tracking-wide text-slate-400 uppercase">
+              Senin için önemli olan
+            </p>
+            <div className="flex flex-wrap gap-2">
+              {ONCELIKLER.map((o) => (
+                <Cip
+                  key={o}
+                  secili={oncelikler.includes(o)}
+                  onClick={() => listeDegistir(oncelikler, setOncelikler, o)}
+                >
+                  {o}
+                </Cip>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="flex items-center justify-between border-t border-slate-100 pt-4">
+        <Button
+          type="button"
+          variant="ghost"
+          onClick={() => setAdim((a) => a - 1)}
+          disabled={adim === 0}
+          className="cursor-pointer"
+        >
+          <ArrowLeft className="size-4" aria-hidden />
+          Geri
+        </Button>
+        {adim < 2 ? (
+          <Button
+            type="button"
+            onClick={() => setAdim((a) => a + 1)}
+            disabled={!adimGecerli}
+            className="cursor-pointer bg-orange-500 text-white transition-colors duration-200 hover:bg-orange-600"
+          >
+            Devam
+            <ArrowRight className="size-4" aria-hidden />
+          </Button>
+        ) : (
+          <Button
+            type="button"
+            onClick={() =>
+              onTamamla({ kategoriler, iller, universiteTipi, oncelikler })
+            }
+            disabled={kategoriler.length === 0}
+            className="cursor-pointer bg-orange-500 text-white transition-colors duration-200 hover:bg-orange-600"
+          >
+            <Sparkles className="size-4" aria-hidden />
+            {sonButonEtiketi}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}