{/* soft star */}

); } // ——— Product Stage: single, full-bleed product, with swipe —————————— function ProductStage({ product, direction, onEnter }) { return (

); } // ——— Grid view: all products at once ———————————————————————————— function GridView({ products, onPick, liked, toggleLike }) { return (

{products.map((p, i) => ( ))}

); } // ——— Size picker (fixed-width row; collapses to centered ONE SIZE label) — function SizeRow({ product, selected, onSelect }) { const isOneSize = product.sizes.length === 1 && product.sizes[0] === "OS"; if (isOneSize) { return (

{`ONE SIZE${product.oneSizeNote ? ` (${product.oneSizeNote})` : ""}`}

); } const MAX = 4; const slots = [...product.sizes]; while (slots.length < MAX) slots.push(null); return (

{slots.map((s, i) => ( s ? ( onSelect(s)} style={{ width: 48, minWidth: 48, padding: "10px 0", fontSize: 13 }} > {s} ) : (

) ))}

); } // ——— Cart Drawer —————————————————————————————————————————————— function CartDrawer({ open, items, onClose, onRemove, onQty, onCheckout, checkoutLoading, checkoutError }) { const total = items.reduce((sum, it) => sum + it.price * it.qty, 0); return (

e.stopPropagation()} style={{ position: "absolute", right: 16, top: 16, bottom: 16, width: "min(440px, calc(100vw - 32px))", borderRadius: 32, padding: 24, background: "rgba(20,22,28,0.55)", backdropFilter: "blur(50px) saturate(180%)", WebkitBackdropFilter: "blur(50px) saturate(180%)", boxShadow: LIQUID_SHADOW + ", 0 30px 80px rgba(0,0,0,0.5)", color: "#fff", transform: open ? "translateX(0)" : "translateX(calc(100% + 24px))", transition: "transform 500ms cubic-bezier(.2,.9,.3,1)", display: "flex", flexDirection: "column", }} >

TORBA · {items.length}

{items.length === 0 && (

· · ·

)} {items.map(it => (

{it.name} · {it.size}

{it.price * it.qty}zł

onQty(it.key, -1)} ariaLabel="Zmniejsz"> {it.qty} onQty(it.key, +1)} ariaLabel="Zwiększ">

))}

TOTAL {total}zł

To przedsprzedaż. Adres lub kod paczkomatu InPost podajesz przy płatności. Termin wysyłki potwierdzimy mailowo.

0 && !checkoutLoading ? onCheckout : undefined} style={{ width: "100%", padding: "18px 24px", fontSize: 14, letterSpacing: "0.25em", opacity: items.length === 0 ? 0.45 : 1, cursor: items.length > 0 && !checkoutLoading ? "pointer" : "not-allowed", }} > {checkoutLoading ? "..." : "➡️"} {checkoutError && (

{checkoutError}

)}

); } // ——— Favorites Drawer —————————————————————————————————————————— function FavDrawer({ open, products, liked, onClose, onPick, toggleLike }) { const items = products.filter(p => liked.has(p.id)); return (

ULUBIONE · {items.length}

{items.length === 0 && (

NIC TU JESZCZE NIE MA

)} {items.map(p => ( ))}

); } function VipGate({ checking, code, loading, error, onCodeChange, onSubmit }) { return (

STREFA LIMITOWANEGO DOSTĘPU

Wpisz swoje hasło VIP z otrzymanego maila

onCodeChange(e.target.value)} placeholder="Wpisz hasło VIP" autoComplete="off" spellCheck={false} disabled={checking || loading} style={{ width: "100%", boxSizing: "border-box", borderRadius: 14, border: "1px solid rgba(255,255,255,0.2)", background: "rgba(255,255,255,0.06)", color: "#fff", padding: "13px 14px", fontSize: 16, outline: "none", letterSpacing: "0.04em", userSelect: "text", }} /> {error && (

{error}

)}

); } function PresaleCountdownGate({ remainingMs, hue, variant }) { const countdown = formatCountdownParts(remainingMs); return (

Start przedsprzedaży

{`${countdown.days} : ${countdown.hours} : ${countdown.minutes} : ${countdown.seconds}`}

7.06.2026 10:00

); } // ——— Root —————————————————————————————————————————————————————————— function App() { const ACCESS_GATE_ENABLED = false; const CART_STORAGE_KEY = "zegrze-vip-cart"; const CART_TTL_MS = 24 * 60 * 60 * 1000; const TWEAKS = /*EDITMODE-BEGIN*/{ "backdrop": "dusk", "hue": 212, "defaultView": "stage" }/*EDITMODE-END*/; const [tweaks, setTweaks] = useState(TWEAKS); const [tweaksVisible, setTweaksVisible] = useState(false); const [idx, setIdx] = useState(() => { const saved = localStorage.getItem("zegrze-idx"); return saved ? parseInt(saved, 10) : 0; }); const [direction, setDirection] = useState(1); const [selectedSize, setSelectedSize] = useState({}); const [cartOpen, setCartOpen] = useState(false); const [favOpen, setFavOpen] = useState(false); const [cart, setCart] = useState(() => { try { const raw = localStorage.getItem(CART_STORAGE_KEY); if (!raw) return []; const parsed = JSON.parse(raw); const updatedAt = Number(parsed?.updatedAt || 0); const items = Array.isArray(parsed?.items) ? parsed.items : []; if (!updatedAt || Date.now() - updatedAt > CART_TTL_MS) { localStorage.removeItem(CART_STORAGE_KEY); return []; } return items; } catch { return []; } }); const [liked, setLiked] = useState(new Set()); const [view, setView] = useState("stage"); // stage | grid const [adding, setAdding] = useState(false); const [checkoutLoading, setCheckoutLoading] = useState(false); const [checkoutError, setCheckoutError] = useState(""); const [checkoutState, setCheckoutState] = useState(() => { const status = new URLSearchParams(window.location.search).get("checkout"); return status === "success" || status === "cancel" ? status : ""; }); const [imagesReady, setImagesReady] = useState(false); const [preloadProgress, setPreloadProgress] = useState(0); const [loginUiReady, setLoginUiReady] = useState(false); const [authChecking, setAuthChecking] = useState(ACCESS_GATE_ENABLED); const [authorized, setAuthorized] = useState(!ACCESS_GATE_ENABLED); const [accessCode, setAccessCode] = useState(""); const [accessLoading, setAccessLoading] = useState(false); const [accessError, setAccessError] = useState(""); const [clockNow, setClockNow] = useState(() => Date.now()); const lastWheelAtRef = useRef(0); const checkoutCacheRef = useRef({ signature: "", url: "" }); const countdownBlocked = clockNow < PRESALE_UNLOCK_AT; const countdownRemainingMs = Math.max(0, PRESALE_UNLOCK_AT - clockNow); const readyImageSet = useMemo( () => (window.__ZEGRZE_READY_IMAGES || (window.__ZEGRZE_READY_IMAGES = new Set())), [] ); const imageSources = useMemo( () => Array.from(new Set(PRODUCTS.map(p => p.image).filter(Boolean))), [] ); const checkoutItems = useMemo( () => cart.map((it) => ({ id: it.id, code: it.code, name: it.name, size: it.size, qty: it.qty, })), [cart] ); const checkoutSignature = useMemo( () => checkoutItems.map((it) => `${it.code}:${it.size}:${it.qty}`).sort().join("|"), [checkoutItems] ); useEffect(() => { if (!countdownBlocked) return; const timer = setInterval(() => setClockNow(Date.now()), 1000); return () => clearInterval(timer); }, [countdownBlocked]); useEffect(() => { localStorage.setItem("zegrze-idx", String(idx)); }, [idx]); useEffect(() => { try { if (cart.length === 0) { localStorage.removeItem(CART_STORAGE_KEY); return; } localStorage.setItem( CART_STORAGE_KEY, JSON.stringify({ updatedAt: Date.now(), items: cart }) ); } catch { // Ignore storage write failures (private mode/quota). } }, [cart, CART_STORAGE_KEY]); useEffect(() => { let cancelled = false; const preloadLogo = new Promise((resolve) => { const img = new Image(); img.onload = resolve; img.onerror = resolve; img.src = "assets/logo.webp"; }); const minDelay = new Promise((resolve) => setTimeout(resolve, 220)); Promise.all([preloadLogo, minDelay]).then(() => { if (!cancelled) setLoginUiReady(true); }); return () => { cancelled = true; }; }, []); useEffect(() => { if (!ACCESS_GATE_ENABLED) { setAuthorized(true); setAuthChecking(false); return; } let cancelled = false; const clearInviteParam = () => { const params = new URLSearchParams(window.location.search); if (!params.has("invite")) return; params.delete("invite"); const query = params.toString(); const cleanUrl = `${window.location.pathname}${query ? `?${query}` : ""}${window.location.hash || ""}`; window.history.replaceState({}, "", cleanUrl); }; const initAccess = async () => { setAuthChecking(true); try { const sessionRes = await fetch("/api/vip-session"); const sessionPayload = await sessionRes.json().catch(() => ({})); if (sessionRes.ok && sessionPayload.authorized) { if (!cancelled) { setAuthorized(true); setAuthChecking(false); } return; } const inviteCode = new URLSearchParams(window.location.search).get("invite"); if (inviteCode) { const inviteRes = await fetch("/api/vip-access", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ mode: "link", code: inviteCode }), }); const invitePayload = await inviteRes.json().catch(() => ({})); if (inviteRes.ok && invitePayload.ok) { clearInviteParam(); if (!cancelled) setAuthorized(true); return; } if (!cancelled) { setAccessError(invitePayload.error || "Link VIP jest nieprawidłowy."); } } } catch (err) { if (!cancelled) { setAccessError(err?.message || "Nie udało się zweryfikować dostępu."); } } finally { if (!cancelled) setAuthChecking(false); } }; initAccess(); return () => { cancelled = true; }; }, [ACCESS_GATE_ENABLED]); useEffect(() => { if (!checkoutState) return; const params = new URLSearchParams(window.location.search); if (!params.has("checkout")) return; params.delete("checkout"); const query = params.toString(); const cleanUrl = `${window.location.pathname}${query ? `?${query}` : ""}${window.location.hash || ""}`; window.history.replaceState({}, "", cleanUrl); }, [checkoutState]); useEffect(() => { if (!authorized || checkoutItems.length === 0) { checkoutCacheRef.current = { signature: "", url: "" }; return; } const controller = new AbortController(); const prefetchSignature = checkoutSignature; const timeoutId = setTimeout(async () => { try { const response = await fetch("/api/create-checkout-session", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ items: checkoutItems }), signal: controller.signal, }); const payload = await response.json().catch(() => ({})); if (response.ok && payload.url) { checkoutCacheRef.current = { signature: prefetchSignature, url: payload.url }; } } catch (err) { if (err?.name !== "AbortError") { checkoutCacheRef.current = { signature: "", url: "" }; } } }, 350); return () => { clearTimeout(timeoutId); controller.abort(); }; }, [authorized, checkoutItems, checkoutSignature]); // Preload all product images once to avoid delayed per-product loading. useEffect(() => { if (imageSources.length === 0) { setImagesReady(true); setPreloadProgress(1); return; } let cancelled = false; const total = imageSources.length; let retryTimer = null; const decodeImage = (src) => new Promise((resolve, reject) => { const img = new Image(); img.decoding = "async"; img.onload = () => { if (typeof img.decode === "function") { img.decode().then(resolve).catch(() => resolve()); return; } resolve(); }; img.onerror = () => reject(new Error(`Nie udało się wczytać obrazu: ${src}`)); img.src = src; }); const preloadAttempt = async (attempt = 1) => { if (cancelled) return; let done = 0; setPreloadProgress(0); const jobs = imageSources.map((src) => decodeImage(src) .then(() => { readyImageSet.add(src); }) .finally(() => { done += 1; if (!cancelled) setPreloadProgress(done / total); }) ); const results = await Promise.allSettled(jobs); if (cancelled) return; const failed = results.some((result) => result.status === "rejected"); if (!failed) { setImagesReady(true); setPreloadProgress(1); return; } const backoffMs = Math.min(5000, 1000 + attempt * 800); retryTimer = setTimeout(() => { preloadAttempt(attempt + 1); }, backoffMs); }; preloadAttempt(); return () => { cancelled = true; if (retryTimer) clearTimeout(retryTimer); }; }, [imageSources, readyImageSet]); // Tweak-mode wiring useEffect(() => { const handler = (e) => { if (!e.data) return; if (e.data.type === "__activate_edit_mode") setTweaksVisible(true); if (e.data.type === "__deactivate_edit_mode") setTweaksVisible(false); }; window.addEventListener("message", handler); window.parent.postMessage({ type: "__edit_mode_available" }, "*"); return () => window.removeEventListener("message", handler); }, []); const updateTweak = (key, value) => { setTweaks(t => ({ ...t, [key]: value })); window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [key]: value } }, "*"); }; const product = PRODUCTS[idx]; const size = selectedSize[product.id] ?? product.sizes[0]; const cartCount = cart.reduce((n, it) => n + it.qty, 0); const go = (d) => { setDirection(d); setIdx(i => (i + d + PRODUCTS.length) % PRODUCTS.length); }; const addToBag = () => { const key = `${product.id}-${size}`; setCart(c => { const existing = c.find(x => x.key === key); if (existing) return c.map(x => x.key === key ? { ...x, qty: x.qty + 1 } : x); return [ ...c, { key, id: product.id, code: product.code, name: product.name, image: product.image, price: product.price, size, qty: 1 } ]; }); setAdding(true); setTimeout(() => setAdding(false), 900); }; const startCheckout = async () => { if (checkoutLoading || cart.length === 0) return; setCheckoutError(""); const cached = checkoutCacheRef.current; if (cached.url && cached.signature === checkoutSignature) { window.location.assign(cached.url); return; } setCheckoutLoading(true); try { const response = await fetch("/api/create-checkout-session", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ items: checkoutItems }), }); const payload = await response.json().catch(() => ({})); if (!response.ok || !payload.url) { throw new Error(payload.error || "Nie udało się rozpocząć płatności."); } window.location.assign(payload.url); } catch (err) { setCheckoutLoading(false); setCheckoutError(err?.message || "Błąd połączenia ze Stripe."); } }; const toggleLike = (id) => { setLiked(s => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; }); }; const submitAccess = async (e) => { e.preventDefault(); if (authChecking || accessLoading) return; const code = accessCode.trim(); if (!code) { setAccessError("Podaj kod dostępu."); return; } setAccessLoading(true); setAccessError(""); try { const response = await fetch("/api/vip-access", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ code }), }); const payload = await response.json().catch(() => ({})); if (!response.ok || !payload.ok) { throw new Error(payload.error || "Nie udało się zweryfikować kodu."); } setAuthorized(true); setAccessCode(""); } catch (err) { setAccessError(err?.message || "Błąd autoryzacji."); } finally { setAccessLoading(false); } }; // Keyboard nav useEffect(() => { const h = (e) => { if (view !== "stage") return; if (e.key === "ArrowRight") go(+1); if (e.key === "ArrowLeft") go(-1); }; window.addEventListener("keydown", h); return () => window.removeEventListener("keydown", h); }, [view]); // Swipe const touchRef = useRef({ x: 0 }); const onTouchStart = e => { touchRef.current.x = e.touches[0].clientX; }; const onTouchEnd = e => { const dx = e.changedTouches[0].clientX - touchRef.current.x; if (Math.abs(dx) > 50 && view === "stage") go(dx < 0 ? +1 : -1); }; const onWheel = e => { if (view !== "stage" || cartOpen || favOpen) return; if (Math.abs(e.deltaY) < 12) return; const now = Date.now(); if (now - lastWheelAtRef.current < 450) return; lastWheelAtRef.current = now; go(e.deltaY > 0 ? +1 : -1); }; if (!authorized) { const showLoginLoader = authChecking || !loginUiReady; return (

{showLoginLoader ? (

Ładowanie

) : ( { setAccessCode(value); if (accessError) setAccessError(""); }} onSubmit={submitAccess} /> )}

); } if (countdownBlocked) { return ( ); } return (

Ładowanie

{/* Top bar — floating elements aligned on a single row */} {checkoutState && (

{checkoutState === "success" ? "Dziękujemy! To przedsprzedaż — termin wysyłki potwierdzimy mailowo." : "Płatność anulowana. Wróć do koszyka, gdy będziesz gotowy/gotowa."}

)}

Trwa przedsprzedaż

setView(v => v === "stage" ? "grid" : "stage")} size={44} ariaLabel="Przełącz widok" > {view === "stage" ? : }

{ setCartOpen(false); setFavOpen(true); }} size={44} ariaLabel="Otwórz ulubione" badge={liked.size || undefined} style={{ color: liked.size ? "#ff5a5a" : "#fff" }} > 0} size={17}/> { setFavOpen(false); setCartOpen(true); }} size={44} ariaLabel="Otwórz torbę" badge={cartCount} >

{/* Content layer */}

{view === "stage" ? ( ) : ( { setIdx(i); setView("stage"); }} /> )}

{/* Bottom bar — two pill groups */} {view === "stage" && (

{/* Size selector with arrows on both sides */}

go(-1)} size={40} ariaLabel="Poprzedni"> setSelectedSize(m => ({ ...m, [product.id]: s }))} /> go(+1)} size={40} ariaLabel="Następny">

{/* Price + like + add to bag group */}

{product.price}zł

toggleLike(product.id)} size={40} ariaLabel="Polub" style={{ color: liked.has(product.id) ? "#ff5a5a" : "#fff" }} >

✓

)} {/* Progress dots — horizontal, above action bar */} {view === "stage" && (

{PRODUCTS.map((_, i) => (

)} setCartOpen(false)} onRemove={key => setCart(c => c.filter(x => x.key !== key))} onQty={(key, d) => setCart(c => c.flatMap(x => { if (x.key !== key) return [x]; const n = x.qty + d; return n <= 0 ? [] : [{ ...x, qty: n }]; }))} onCheckout={startCheckout} checkoutLoading={checkoutLoading} checkoutError={checkoutError} /> setFavOpen(false)} onPick={(id) => { const i = PRODUCTS.findIndex(p => p.id === id); if (i >= 0) { setIdx(i); setView("stage"); } }} toggleLike={toggleLike} /> {/* Tweaks panel */} {tweaksVisible && (

TWEAKS

backdrop

{["dusk", "night", "dawn"].map(v => ( ))}

hue{tweaks.hue}°

updateTweak("hue", parseInt(e.target.value, 10))} style={{ width: "100%", accentColor: "#fff" }} />

)} {/* Global styles */}

); } window.App = App;