import { useState, useEffect } from "react"; import { ChevronRight, ChevronLeft, Check, Phone, Mail, MapPin, User, Briefcase, CreditCard, Home, Heart, FileText, ArrowRight, CheckCircle2, Sparkles, Calculator, } from "lucide-react"; export default function Page() { const BLUE = "#2563eb"; const BLUE_DARK = "#1d4ed8"; const INK = "#0f172a"; const GRAY = "#64748b"; const LIGHT = "#f8fafc"; const BORDER = "#e2e8f0"; const [step, setStep] = useState(0); const [data, setData] = useState({ firstName: "", age: "", gender: "", status: "", income: "", debts: "", numCreditors: "", hasBailiff: null, hasProperty: null, hasBikReport: null, healthIssues: null, city: "", phone: "", email: "", consent: false, }); const [submitting, setSubmitting] = useState(false); const [result, setResult] = useState(null); const [error, setError] = useState(null); const steps = [ { id: "firstName", title: "Jak masz na imię?", icon: User }, { id: "age-gender", title: "Wiek i płeć", icon: User }, { id: "status", title: "Twoja sytuacja zawodowa", icon: Briefcase }, { id: "income", title: "Miesięczny dochód netto", icon: Briefcase }, { id: "debts", title: "Łączna kwota długów", icon: CreditCard }, { id: "creditors", title: "Liczba wierzycieli", icon: CreditCard }, { id: "bailiff", title: "Czy masz aktywnego komornika?", icon: FileText }, { id: "property", title: "Czy masz wartościowy majątek?", icon: Home }, { id: "health", title: "Stan zdrowia", icon: Heart }, { id: "bik", title: "Czy pobrałeś raport BIK?", icon: FileText }, { id: "city", title: "Twoja miejscowość", icon: MapPin }, { id: "contact", title: "Twoje dane kontaktowe", icon: Phone }, ]; const totalSteps = steps.length; const current = steps[step]; const Icon = current?.icon || User; const progress = ((step + 1) / totalSteps) * 100; const set = (key, val) => setData((d) => ({ ...d, [key]: val })); const canNext = (() => { switch (current?.id) { case "firstName": return data.firstName.trim().length >= 2; case "age-gender": return data.age && Number(data.age) >= 18 && Number(data.age) <= 99 && data.gender; case "status": return !!data.status; case "income": return data.income !== "" && Number(data.income) >= 0; case "debts": return data.debts !== "" && Number(data.debts) >= 0; case "creditors": return data.numCreditors !== "" && Number(data.numCreditors) >= 1; case "bailiff": return data.hasBailiff !== null; case "property": return data.hasProperty !== null; case "health": return data.healthIssues !== null; case "bik": return data.hasBikReport !== null; case "city": return data.city.trim().length >= 2; case "contact": return ( data.phone.trim().length >= 9 && /\S+@\S+\.\S+/.test(data.email) && data.consent ); default: return false; } })(); const next = async () => { setError(null); if (step < totalSteps - 1) { setStep(step + 1); window.scrollTo({ top: 0, behavior: "smooth" }); return; } // Last step → submit setSubmitting(true); try { const res = await fetch("/api/site/calculator/submit", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ ...data, age: Number(data.age), income: Number(data.income), debts: Number(data.debts), numCreditors: Number(data.numCreditors), }), }); const json = await res.json(); if (!res.ok) throw new Error(json.error || "Błąd wysyłki"); setResult(json); window.scrollTo({ top: 0, behavior: "smooth" }); } catch (e) { setError(e.message); } finally { setSubmitting(false); } }; const prev = () => { setError(null); if (step > 0) { setStep(step - 1); window.scrollTo({ top: 0, behavior: "smooth" }); } }; if (result) { return ; } return (

{/* Hero */}

Kalkulator oddłużeniowy

Sprawdź, ile długu możesz umorzyć

5 minut. {totalSteps} pytań. Konkretna analiza Twojej sytuacji na maila.

{/* Progress bar */}

Krok {step + 1} z {totalSteps} {Math.round(progress)}%

{/* Step content */}

{current.title}

{/* STEP 1: imię */} {current.id === "firstName" && (

Imię set("firstName", e.target.value)} placeholder="Twoje imię" style={{ width: "100%", padding: "14px 16px", border: `2px solid ${BORDER}`, borderRadius: 10, fontSize: 16 }} />

)} {/* STEP 2: wiek + płeć */} {current.id === "age-gender" && (

Wiek set("age", e.target.value)} placeholder="np. 42" style={{ width: "100%", padding: "14px 16px", border: `2px solid ${BORDER}`, borderRadius: 10, fontSize: 16, marginBottom: 16 }} /> Płeć

{[ { v: "K", l: "Kobieta" }, { v: "M", l: "Mężczyzna" }, { v: "X", l: "Inna / nie podaję" }, ].map((o) => ( ))}

)} {/* STEP 3: status */} {current.id === "status" && (

{[ { v: "etat", l: "Umowa o pracę" }, { v: "zlecenie", l: "Umowa zlecenie / dzieło" }, { v: "dzialalnosc", l: "Działalność gospodarcza" }, { v: "emeryt", l: "Emerytura / renta" }, { v: "bezrobotny", l: "Bezrobotny / brak dochodu" }, ].map((o) => ( ))}

)} {/* STEP 4: income */} {current.id === "income" && ( set("income", v)} placeholder="np. 4500" suffix="zł" hint="Po wszystkich potrąceniach, średnia z ostatnich 3 miesięcy" autoFocus /> )} {/* STEP 5: debts */} {current.id === "debts" && ( set("debts", v)} placeholder="np. 87500" suffix="zł" hint="Suma wszystkich zobowiązań: kredyty, pożyczki, karty, ZUS, US" autoFocus /> )} {/* STEP 6: creditors */} {current.id === "creditors" && (

Ilu masz wierzycieli (banków, firm pożyczkowych, urzędów)? set("numCreditors", e.target.value)} placeholder="np. 3" style={{ width: "100%", padding: "14px 16px", border: `2px solid ${BORDER}`, borderRadius: 10, fontSize: 16 }} />

)} {/* STEP 7-10: yes/no */} {current.id === "bailiff" && set("hasBailiff", v)} BLUE={BLUE} INK={INK} BORDER={BORDER} hint="Komornik aktywnie egzekwuje z konta lub wynagrodzenia?" />} {current.id === "property" && set("hasProperty", v)} BLUE={BLUE} INK={INK} BORDER={BORDER} hint="Mieszkanie, dom, samochód o wartości powyżej 30 tys. zł?" />} {current.id === "health" && set("healthIssues", v)} BLUE={BLUE} INK={INK} BORDER={BORDER} hint="Chroniczne problemy zdrowotne, niepełnosprawność, długoterminowa choroba?" />} {current.id === "bik" && set("hasBikReport", v)} BLUE={BLUE} INK={INK} BORDER={BORDER} hint="Raport BIK przyspiesza analizę. Możesz pobrać bezpłatnie raz w roku na bik.pl" />} {/* STEP 11: city */} {current.id === "city" && (

Miejscowość zamieszkania set("city", e.target.value)} placeholder="np. Warszawa" style={{ width: "100%", padding: "14px 16px", border: `2px solid ${BORDER}`, borderRadius: 10, fontSize: 16 }} />

Ustalimy sąd rejonowy właściwy dla Twojej sprawy.

)} {/* STEP 12: contact */} {current.id === "contact" && (

Numer telefonu set("phone", e.target.value)} placeholder="+48 ___ ___ ___" style={{ width: "100%", padding: "14px 16px", border: `2px solid ${BORDER}`, borderRadius: 10, fontSize: 16, marginBottom: 12 }} /> Email set("email", e.target.value)} placeholder="adres@email.pl" style={{ width: "100%", padding: "14px 16px", border: `2px solid ${BORDER}`, borderRadius: 10, fontSize: 16, marginBottom: 16 }} /> set("consent", e.target.checked)} style={{ marginTop: 2, accentColor: BLUE }} /> Wyrażam zgodę na kontakt telefoniczny i mailowy w sprawie analizy mojej sytuacji oraz przetwarzanie danych zgodnie z polityką prywatności.

)} {error && (

{error}

)}

{/* Footer nav */}

{step > 0 && ( )}

); } function YesNo({ value, onChange, BLUE, INK, BORDER, hint }) { return (

{hint &&

{hint}

}

); } function NumberInput({ value, onChange, placeholder, suffix, hint, autoFocus }) { return (

{hint &&

{hint}

}

onChange(e.target.value)} placeholder={placeholder} style={{ width: "100%", padding: "14px 50px 14px 16px", border: `2px solid #e2e8f0`, borderRadius: 10, fontSize: 18, fontWeight: 600 }} /> {suffix && ( {suffix} )}

); } function ResultScreen({ data, result, emailStatus, BLUE, BLUE_DARK, INK, GRAY, LIGHT, BORDER }) { const ratePercent = Math.round(result.forgivenessRate * 100); const fmt = (n) => Number(n).toLocaleString("pl-PL"); return (

{/* Hero result */}

WYNIK TWOJEJ KALKULACJI

{data.firstName}, możesz umorzyć

{fmt(result.forgivenAmount)} zł

({ratePercent}% Twojego zadłużenia)

{/* Personalized summary */}

Twoja sytuacja

{data.firstName}, Twoja sytuacja wygląda następująco:

Łączna kwota Twoich długów: {fmt(data.debts)} zł
Potencjalna szansa na umorzenie: {ratePercent}%
Możliwa kwota umorzenia: {fmt(result.forgivenAmount)} zł
Pozostała do spłaty (plan): {fmt(result.remainingDebt)} zł
Szacowana rata miesięczna: ~{fmt(result.monthlyPlan)} zł / mies.
Czas postępowania: ~{result.estimatedDuration} miesięcy

Pamiętaj: osoby młode i zdrowe umarzają zwykle ~70%. Osoby starsze lub z problemami zdrowotnymi — nawet 90%.

{/* Court info */}

Twój sąd rejonowy

{result.court.name}

Województwo: {result.court.region}
Średnio rozpatruje: {fmt(result.court.annualCases)} spraw / rok
Średni czas decyzji o upadłości: {result.court.avgMonthsToDecision} miesięcy

{/* Reasoning */}

Co wpłynęło na wynik

{/* Investment */}

INWESTYCJA W TWOJĄ WOLNOŚĆ

od 300 zł / miesiąc

Pełne prowadzenie sprawy od pierwszej rozmowy do umorzenia długów. Bez zaliczki, bez kasy z góry, płatność rozłożona na cały czas postępowania.

{/* Next step CTA */}

Co dalej?

{emailStatus?.clientSent ? `Wysłaliśmy szczegółową analizę na ${data.email}. Skontaktujemy się w ciągu 24h.` : `Zapisaliśmy Twoje dane. Ekspert skontaktuje się z Tobą w ciągu 24h pod numerem ${data.phone}.`}

Lub zadzwoń: 666 168 802

{/* Disclaimer */}

Wynik kalkulatora ma charakter wyłącznie orientacyjny i opiera się na danych statystycznych. Rzeczywista decyzja sądu może odbiegać od szacunków. Każda sprawa wymaga indywidualnej analizy prawnej.

); }