// App — Proton wspiera landing page (redesign 1:1 wg makiety) const { useState, useEffect, useMemo, useRef, createContext, useContext } = React; // Kontekst danych — dostępny w każdym komponencie const DataCtx = createContext(null); const SelCtx = createContext(null); // ---------- kontekst wyboru: token (telefon/BaseLinker) lub order_id (online/IdoSell) ---------- const SEL_Q = new URLSearchParams(window.location.search); // Odrzuć pusty ORAZ niepodstawiony placeholder [iai:...] (async/defer lub podgląd). // Bez tego wszyscy klienci dostaliby ten sam klucz proton_choice_o_[iai:order_sn] // i pierwszy wybór pokazałby "Dziękujemy" reszcie. Placeholder → brak kontekstu (mode 'info'). const realId = (v) => { v = (v || '').trim(); return (!v || v.indexOf('[iai:') !== -1) ? '' : v; }; const SEL = { token: realId(SEL_Q.get('token')), order_id: realId(SEL_Q.get('order_id')), email: SEL_Q.get('email') || SEL_Q.get('customer_email') || '', order_value: SEL_Q.get('order_value') || SEL_Q.get('value') || '', // Tryb TEST: ?konto=1|2|3 wybiera odbiorcę powiadomień (1 Jarosław, 2 Ariana, 3 Marcin). // Bez tego W3 wysyła mail #1 zawsze na konto 3. konto: SEL_Q.get('konto') || SEL_Q.get('konto_testowe') || '', }; SEL.mode = SEL.token ? 'telefon' : (SEL.order_id ? 'online' : 'info'); SEL.key = SEL.token ? ('proton_choice_t_' + SEL.token) : SEL.order_id ? ('proton_choice_o_' + SEL.order_id) : ''; const N8N_CHOICE = { telefon: 'https://primary-production-94d6b.up.railway.app/webhook/pw-v2-landing', online: 'https://primary-production-94d6b.up.railway.app/webhook/pw-v2-wybor-online', }; // Zapis wyboru. Telefon → W3 pw-v2-landing; online → W1 pw-v2-wybor-online. async function submitChoice(campaign) { if (SEL.mode === 'info') return { ok: false, status: 'no_context' }; const konto = SEL.konto ? { konto_testowe: SEL.konto } : {}; const body = SEL.mode === 'telefon' ? { token: SEL.token, campaign_id: campaign.id, ...konto } : { order_id: SEL.order_id, campaign_id: campaign.id, customer_email: SEL.email, order_value: SEL.order_value, ...konto }; const r = await fetch(N8N_CHOICE[SEL.mode], { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body), }); if (!r.ok) throw new Error('HTTP ' + r.status); let data = {}; try { data = await r.json(); } catch (e) { data = { status: 'ok' }; } const status = data.status || 'ok'; return { ok: status === 'ok', status }; } // ---------- helpers ---------- const fmtPln = (n) => n.toLocaleString('pl-PL', { maximumFractionDigits: 0 }) + ' zł'; const fmtNum = (n) => n.toLocaleString('pl-PL'); // ---------- LOADING / ERROR ---------- function LoadingScreen() { return (

Ładowanie zbiórek…

); } function ErrorScreen({ error }) { return (

Nie udało się załadować danych.
{error}

); } // ---------- HERO ---------- function Hero() { return (
Proton
Dziękujemy za zamówienie

Wskaż zbiórkę, której
Proton pomoże dzięki Tobie

Wybierz jedną z organizacji poniżej. Nic nie dopłacasz, część wartości Twojego zamówienia przekażemy na wybraną zbiórkę.

Wybierz zbiórkę ↓
To zajmie mniej niż 10 sekund • wybór jest dobrowolny
Proton wspiera — kolaż osób, którym pomagamy
); } // ---------- CAMPAIGN CARD ---------- function CampaignCard({ c, inView }) { const { CATEGORIES } = useContext(DataCtx); const sel = useContext(SelCtx); const [fill, setFill] = useState(0); useEffect(() => { if (inView) { const id = setTimeout(() => setFill(c.pct), 80); return () => clearTimeout(id); } }, [inView, c.pct]); const catLabel = (CATEGORIES.find(x => x.id === c.cat)?.label || 'Zbiórka').toUpperCase(); return (
{c.title}
{catLabel}

{c.title}

{c.short &&

{c.short}

}
{fmtPln(c.raised)} z {fmtPln(c.goal)} {c.pct}%
Czytaj więcej {sel && sel.mode !== 'info' && ( sel.chosen ? : )}
); } // ---------- AKTYWNE ZBIÓRKI ---------- function CampaignsSection() { const { CAMPAIGNS, CATEGORIES } = useContext(DataCtx); const [cat, setCat] = useState('all'); const [inView, setInView] = useState(false); const sectionRef = useRef(null); useEffect(() => { const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setInView(true); io.disconnect(); } }, { threshold: 0.05 }); if (sectionRef.current) io.observe(sectionRef.current); return () => io.disconnect(); }, []); const filtered = useMemo( () => (cat === 'all' ? CAMPAIGNS : CAMPAIGNS.filter(c => c.cat === cat)), [cat, CAMPAIGNS] ); return (

Aktywne zbiórki

Proton wspiera dzięki Twojemu zamówieniu
{CATEGORIES.map(c => ( ))}
{filtered.length === 0 ? (
Brak zbiórek w tej kategorii.
) : ( filtered.map(c => ) )}
); } // ---------- JAK TO DZIAŁA ---------- function HowItWorks() { const steps = [ { n: '01', title: 'Kupujesz', desc: 'Twoje zamówienie w Protonie zostało przyjęte. Część jego wartości czeka na wskazanie zbiórki.', icon: ( ), }, { n: '02', title: 'Wybierasz zbiórkę po dostawie', desc: 'Wybierasz konkretną zbiórkę z listy powyżej. Nic nie dopłacasz, a Proton finansuje całą wpłatę ze swoich środków.', icon: ( ), }, { n: '03', title: 'Proton przekazuje środki', desc: 'Śledzisz na bieżąco, ile razem skierowaliśmy do potrzebujących. Twój wybór ma mierzalny efekt.', icon: ( ), }, ]; return (

Jak to działa?

{steps.map((s, i) => (
{s.n}
{s.icon}

{s.title}

{i < steps.length - 1 && ( )}

{s.desc}

))}
); } // ---------- ZREALIZOWANE ---------- function SuccessStories() { const { COMPLETED } = useContext(DataCtx); if (!COMPLETED.length) return null; return (

Zbiórki, które udało się zrealizować razem

Każda decyzja klienta Proton trafia do konkretnych ludzi. Tak razem budujemy trwałe zmiany.

{COMPLETED.map(d => (
{d.title} ZREALIZOWANE
Proton wspiera

{d.title}

{d.story &&

{d.story}

}
Zebrano: {fmtPln(d.raised)}
Czytaj więcej
))}
); } // ---------- FAQ FORMALNE ---------- function FormalFAQ() { const items = [ { q: 'Skąd są środki?', a: 'Z budżetu marketingowego operatora programu Proton Wspiera. To Proton finansuje całą wpłatę ze środków własnych.', }, { q: 'Czy klient przekazuje pieniądze?', a: 'Nie. Klient nie jest darczyńcą — nie przekazuje własnych pieniędzy ani nie powstaje po jego stronie żaden obowiązek podatkowy.', }, { q: 'Co dokładnie robi klient?', a: 'Pełni rolę współdecydenta — wskazuje organizację pożytku publicznego, do której Proton skieruje część wartości jego zamówienia.', }, { q: 'Jak to działa od strony formalnej?', a: 'Proton przekazuje darowiznę na rzecz wybranej organizacji pożytku publicznego ze środków własnych, w ramach programu wsparcia społecznego.', }, ]; const [open, setOpen] = useState(0); return (

Jak to działa od strony formalnej?

{items.map((it, i) => (

{it.a}

))}
); } // ---------- FOOTER ---------- function Footer() { return ( ); } // ---------- MODAL POTWIERDZENIA / BANER PODZIĘKOWANIA (inline, bez zależności CSS) ---------- function ConfirmModal({ campaign, onCancel, onConfirm, busy, error }) { if (!campaign) return null; return (
e.stopPropagation()} style={{ background: '#fff', borderRadius: 16, maxWidth: 420, width: '100%', padding: '24px 22px', boxShadow: '0 20px 60px -20px rgba(0,0,0,.4)' }}>

Potwierdź wybór

Wspierasz: {campaign.title}

Wybór jest jednorazowy — po potwierdzeniu nie można go zmienić.

{error &&

{error}

}
); } function ThanksModal({ title, onClose }) { useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [onClose]); return (
e.stopPropagation()} style={{ background: '#fff', borderRadius: 16, maxWidth: 460, width: '100%', padding: '34px 28px 26px', textAlign: 'center', boxShadow: '0 24px 70px -20px rgba(0,0,0,.45)' }}>

Dziękujemy za Twój wybór!

Twój zakup wraz z Proton wspiera wesprze:

{title}

Będziemy informować Cię o postępach zbiórki na e-mail. Nic nie dopłacasz — środki przekazuje Proton.

); } function ThanksBanner({ title }) { return (
✓ Dziękujemy za Twój wybór! Twój zakup wesprze: {title}. Będziemy informować Cię o postępach na e-mail.
); } // ---------- APP ---------- function App() { const [appData, setAppData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); // wybór akcji (telefon/online) const [confirmC, setConfirmC] = useState(null); const [busy, setBusy] = useState(false); const [chErr, setChErr] = useState(null); const [chosen, setChosen] = useState(null); const [thanks, setThanks] = useState(null); useEffect(() => { window.loadProtonData() .then(d => { setAppData(d); setLoading(false); }) .catch(e => { setError(e.message); setLoading(false); }); }, []); useEffect(() => { if (loading || error) return; return window.subscribeToRealtimeStats((newStats) => { setAppData(prev => ({ ...prev, STATS: { ...prev.STATS, ...newStats } })); }); }, [loading, error]); // już wybrano dla tego kontekstu? (UX; serwer i tak jest autorytatywny) useEffect(() => { if (!SEL.key) return; try { const v = localStorage.getItem(SEL.key); if (v) setChosen({ title: v }); } catch (e) {} }, []); const openConfirm = (c) => { if (SEL.mode === 'info') return; setChErr(null); setConfirmC(c); }; const doConfirm = async () => { if (!confirmC) return; setBusy(true); setChErr(null); try { const res = await submitChoice(confirmC); if (res.ok) { try { localStorage.setItem(SEL.key, confirmC.title); } catch (e) {} setChosen({ title: confirmC.title }); setThanks({ title: confirmC.title }); setConfirmC(null); } else { setChErr( res.status === 'invalid_token' ? 'Ten link został już wykorzystany lub jest nieprawidłowy.' : res.status === 'campaign_unavailable' ? 'Ta zbiórka nie jest już dostępna.' : res.status === 'no_context' ? 'Otwórz tę stronę z linku, który otrzymałeś w wiadomości.' : 'Nie udało się zapisać wyboru. Spróbuj ponownie.' ); } } catch (e) { setChErr('Błąd połączenia. Spróbuj ponownie za chwilę.'); } setBusy(false); }; if (loading) return ; if (error) return ; return ( {chosen && }