// ============================================================ // ui.jsx — wspólne komponenty: nawigacja, stopka, formularze, // pełny przepływ głosowania (double opt-in + weryfikacja e-ID — symulacja) // ============================================================ const { useState, useEffect, useRef } = React; function navigate(path) { window.location.hash = "#" + path; if (path !== "/koncepcja" && path !== "/mapa") window.scrollTo(0, 0); } function Link({ to, className, children, ...rest }) { return { if (to !== "/koncepcja" && to !== "/mapa") window.scrollTo(0, 0); }} {...rest}>{children}; } // ---------- Toast ---------- let _toastFn = null; function ToastHost() { const [msg, setMsg] = useState(null); useEffect(() => { _toastFn = (m) => { setMsg(m); clearTimeout(_toastFn._t); _toastFn._t = setTimeout(() => setMsg(null), 3200); }; return () => { _toastFn = null; }; }, []); if (!msg) return null; return
✓{msg}
; } function toast(m) { if (_toastFn) _toastFn(m); } // ---------- Nawigacja ---------- function Nav({ route }) { const links = [ ["/koncepcja", "Koncepcja"], ["/gminy", "Dla gmin"], ["/inwestorzy", "Dla inwestorów"], ["/kontakt", "Kontakt", "hide-m"], ]; return ( ); } // ---------- Stopka ---------- // ---------- Logo Park&Protect ---------- function LogoMark({ size = 26 }) { return ( ); } function LogoWordmark() { return ( Park&Protect ); } function Footer() { return ( ); } // ---------- Modal ---------- function Modal({ onClose, children, width }) { return (
{ if (e.target === e.currentTarget) onClose(); }}>
{children}
); } // ---------- Fake Turnstile ---------- function Turnstile({ ok, onOk }) { const [busy, setBusy] = useState(false); return (
{ if (ok || busy) return; setBusy(true); setTimeout(() => { setBusy(false); onOk(); }, 700); }}>
{ok ? "✓" : busy ? : ""}
{ok ? "Zweryfikowano" : "Potwierdź, że nie jesteś robotem"}
Cloudflare Turnstile
); } // ---------- Disclaimer ---------- function Disclaimer() { return (

Deklaracja ma charakter niewiążącego badania zainteresowania. Nie stanowi oferty, rezerwacji ani zobowiązania. Nie przyjmujemy żadnych wpłat.

); } // ---------- Liczniki głosów ---------- function VoteCounter({ locId, size }) { useStore(); const v = votesFor(locId); const big = size === "lg"; return (
{fmt(v.total)} głosów ✓ {fmt(v.verified)} zweryfikowanych
); } function VoteDistribution({ locId }) { useStore(); const v = votesFor(locId); if (!v.total) return

Brak potwierdzonych głosów — bądź pierwszy.

; const pct = (n) => (100 * n / v.total) + "%"; return (
kupno · {v.buy} najem · {v.rent} poparcie · {v.support}
); } // ============================================================ // Przepływ głosowania: // form → wysłany e-mail (symulacja) → potwierdzono → upsell e-ID → ✓ // ============================================================ function VoteFlow({ loc, onDone, compact }) { const s = useStore(); const already = s.myVotes.find((v) => v.locId === loc.id && !v.withdrawn); const [stage, setStage] = useState(already ? (already.verified ? "verified" : "confirmed") : "form"); const [interest, setInterest] = useState("support"); const [priceBand, setPriceBand] = useState(""); const [email, setEmail] = useState(""); const [rodo, setRodo] = useState(false); const [contact, setContact] = useState(false); const [ts, setTs] = useState(false); const [err, setErr] = useState(null); const [idModal, setIdModal] = useState(null); // 'mojeid' | 'mobywatel' const submit = () => { if (!/.+@.+\..+/.test(email)) return setErr("Podaj prawidłowy adres e-mail."); if (!rodo) return setErr("Zgoda na przetwarzanie danych jest wymagana."); if (!ts) return setErr("Potwierdź weryfikację antybotową."); setErr(null); setStage("sent"); }; const confirmEmail = () => { Store.set({ myVotes: [...Store.get().myVotes, { locId: loc.id, interest, priceBand, verified: false, email, ts: Date.now() }] }); Store.audit("system", "confirm_email", "declaration", { loc: loc.slug }); setStage("confirmed"); toast("Głos potwierdzony i doliczony do agregatów"); }; const verify = (method) => { setIdModal(null); const votes = Store.get().myVotes.map((v) => v.locId === loc.id ? { ...v, verified: true, method } : v); Store.set({ myVotes: votes }); Store.audit("system", "identity_verified", "declaration", { loc: loc.slug, method }); setStage("verified"); toast("Tożsamość potwierdzona — głos ma status zweryfikowany ✓"); }; // ---------- etapy ---------- if (stage === "sent") return (
✉
Sprawdź skrzynkę
Wysłaliśmy link potwierdzający na {email}. Głos zostanie doliczony po kliknięciu (link ważny 7 dni).
); if (stage === "confirmed" || stage === "verified") return (
✓ głos oddany {stage === "verified" && ✓ zweryfikowany tożsamością}
{stage === "confirmed" && (
Wzmocnij swój głos

Potwierdź tożsamość przez bank (mojeID) lub mObywatela. Zweryfikowane głosy mają największą wagę w raportach dla gmin. Nie zapisujemy Twojego numeru PESEL.

)}
Moje głosy →
{idModal && setIdModal(null)} onVerified={() => verify(idModal)} />}
); // stage === 'form' return (
{[["buy", "Jestem zainteresowany kupnem miejsca postojowego"], ["rent", "Jestem zainteresowany najmem miejsca postojowego"], ["support", "Popieram tę lokalizację (nie potrzebuję miejsca)"]].map(([val, label]) => ( ))}
{interest === "buy" && (
)} {interest === "rent" && (
)}
setEmail(e.target.value)} /> Wyślemy link potwierdzający (double opt-in). Jeden adres = jeden głos na lokalizację.
setTs(true)} /> {err &&
{err}
}
); } // ---------- symulacja brokera e-ID ---------- function IdentityModal({ method, onClose, onVerified }) { const [step, setStep] = useState(0); const labels = method === "mojeid" ? { title: "mojeID — weryfikacja przez bank", sub: "Zostaniesz przekierowany do logowania w swojej bankowości elektronicznej.", action: "Zaloguj się do banku" } : { title: "mObywatel — weryfikacja zdalna", sub: "Weryfikacja przez aplikację mObywatel (broker e-ID, poziom eIDAS substantial).", action: "Otwórz mObywatel" }; useEffect(() => { if (step === 1) { const t = setTimeout(() => setStep(2), 1400); return () => clearTimeout(t); } }, [step]); return (
symulacja przekierowania do brokera e-id

{labels.title}

{step === 0 && (

{labels.sub}

Przekazany zostanie wyłącznie minimalny zakres danych. Numer PESEL jest przetwarzany przelotnie w pamięci i zapisywany wyłącznie jako nieodwracalny skrót (HMAC) gwarantujący zasadę „1 osoba = 1 głos". Imię i nazwisko nie są zapisywane.
)} {step === 1 && (

Trwa autoryzacja u dostawcy tożsamości…

)} {step === 2 && (
✓ tożsamość potwierdzona

Atrybuty zostały odebrane i natychmiast porzucone. Zapisano wyłącznie skrót HMAC.

)}
); } // ---------- formularz leadowy ---------- function LeadForm({ type, fields, sourcePage }) { const [vals, setVals] = useState({}); const [ts, setTs] = useState(false); const [sent, setSent] = useState(false); const [err, setErr] = useState(null); const set = (k) => (e) => setVals({ ...vals, [k]: e.target.value }); if (sent) return (
✓
Dziękuję za zgłoszenie
Odezwę się w ciągu 2 dni roboczych.
); return (
{fields.map(([key, label, opts]) => (
{opts && opts.textarea ? : }
))} setTs(true)} /> {err &&
{err}
}

Dane z formularza służą wyłącznie do kontaktu w sprawie zapytania.

); } Object.assign(window, { navigate, Link, Nav, Footer, LogoMark, LogoWordmark, Modal, Turnstile, Disclaimer, VoteCounter, VoteDistribution, VoteFlow, IdentityModal, LeadForm, ToastHost, toast, });