// ──────────────────────────────────────────────────────────────── // Redesign — shared UI: icons, ornaments, atmosphere // ──────────────────────────────────────────────────────────────── const { useEffect, useRef, useState } = React; // Shared cart store (localStorage) — used by Redesign.html and Checkout.html const RD_CART_KEY = 'pf-cart-v1'; // A cart line is a REFERENCE to a Shopify product: { n: handle, handle, qty, // variantId?, max?, attrs?, gift? }. Titles, images and prices are never stored // — they are resolved from the Shopify catalog at render time (usePFCartLines). // Older baskets that copied product data (or used numeric chapter ids) are // migrated on load: copied fields are dropped, unidentifiable lines removed. function rdCartLoad() { try { const c = JSON.parse(localStorage.getItem(RD_CART_KEY)); if (!Array.isArray(c)) return []; const clean = c.map((it) => { const handle = it.handle || (typeof it.n === 'string' ? it.n : null); if (!handle) return null; return { n: handle, handle, qty: it.qty || 1, ...(it.variantId ? { variantId: it.variantId } : {}), ...(it.max != null ? { max: it.max } : {}), ...(it.attrs ? { attrs: it.attrs } : {}), ...(it.gift ? { gift: it.gift } : {}), }; }).filter(Boolean); if (JSON.stringify(clean) !== JSON.stringify(c)) rdCartSave(clean); return clean; } catch (e) { return []; } } function rdCartSave(c) { try { localStorage.setItem(RD_CART_KEY, JSON.stringify(c)); } catch (e) {} } // ── Shopify catalog hooks ─────────────────────────────────────── // Shopify is the ONLY source of product data. Cards, the product page and // the cart all read the same PFShop store, so they can never disagree. // Every chapter product, in Shopify's order. [] until loaded. function usePFChapters(lang) { const [state, setState] = useState({ list: [], loading: true, failed: false }); useEffect(() => { if (!window.PFShop || !PFShop.getChapters) { setState({ list: [], loading: false, failed: true }); return; } let alive = true; PFShop.getChapters(lang) .then((l) => { if (alive) setState({ list: l || [], loading: false, failed: !l }); }) .catch(() => { if (alive) setState({ list: [], loading: false, failed: true }); }); return () => { alive = false; }; }, [lang]); return state; } // One product by handle, from the shared store (fetches it if unseen). function usePFProduct(handle, lang) { const [p, setP] = useState(() => (window.PFShop && PFShop.peek ? PFShop.peek(handle) : null)); useEffect(() => { if (!handle || !window.PFShop) return; let alive = true; const sync = () => { if (alive) setP(PFShop.peek(handle)); }; window.addEventListener('pf-catalog-changed', sync); const known = PFShop.peek(handle); if (known) setP(known); else PFShop.ensure([handle], lang).then(sync).catch(() => {}); return () => { alive = false; window.removeEventListener('pf-catalog-changed', sync); }; }, [handle, lang]); return p; } // Cart lines resolved against the live catalog: title, image, price, currency // and stock always come from Shopify, never from what was stored at add time. function usePFCartLines(cart, lang) { const handles = cart.map((c) => c.handle || (typeof c.n === 'string' ? c.n : null)).filter(Boolean).join(','); const [, bump] = useState(0); useEffect(() => { if (!window.PFShop || !handles) return; const sync = () => bump((x) => x + 1); window.addEventListener('pf-catalog-changed', sync); PFShop.ensure(handles.split(','), lang).then(sync).catch(() => {}); return () => window.removeEventListener('pf-catalog-changed', sync); }, [handles, lang]); return cart.map((c) => { const handle = c.handle || (typeof c.n === 'string' ? c.n : null); const p = (window.PFShop && PFShop.peek) ? PFShop.peek(handle) : null; return { ...c, title: p ? p.title : null, chapterNo: p ? p.chapterNo : null, img: p && p.images[0] ? p.images[0].src : null, price: p ? p.price : null, currency: p ? p.currencyCode : null, priceFormatted: p ? p.priceFormatted : null, max: p && p.quantityAvailable != null ? p.quantityAvailable : null, ready: !!p, }; }); } // Shared language preference (localStorage) — keeps the chosen language when // navigating between pages, instead of resetting to German on every load. const RD_LANG_KEY = 'pf-lang-v1'; // Detect the visitor's preferred language from their browser / phone settings. // German-speaking locales (de, de-AT, de-CH, …) → German; everything else → English. function rdLangDetect() { try { const nav = (navigator.languages && navigator.languages[0]) || navigator.language || ''; return /^de\b/i.test(nav) ? 'de' : 'en'; } catch (e) { return 'de'; } } function rdLangLoad(fallback) { // Language is decided by the URL locale prefix (PFLocale) so page copy always // matches the Shopify locale. Falls back to a saved/device choice off-route. try { if (window.PFLocale) return PFLocale.current().langLower; } catch (e) {} try { const l = localStorage.getItem(RD_LANG_KEY); if (l === 'de' || l === 'en') return l; } catch (e) {} // No saved choice yet — fall back to the device language. return rdLangDetect(); } function rdLangSave(lang) { try { localStorage.setItem(RD_LANG_KEY, lang); } catch (e) {} } // ─── Locale (country + language) ───────────────────────── const RD_LOCALE_KEY = 'pf-locale-v1'; // Locale is driven by the URL prefix (PFLocale). The selector routes between // the four locale prefixes; country/language names come from the Shopify // localization query, not a hardcoded list. const RD_PREFIXES = ['at', 'de', 'ch', 'us']; function rdPrefixMeta(pre) { return (window.PFLocale && PFLocale.PREFIX[pre]) || { country: (pre || 'at').toUpperCase(), language: 'DE' }; } function rdActivePrefix() { try { return window.PFLocale ? PFLocale.activePrefix() : 'at'; } catch (e) { return 'at'; } } function rdCurrentCountry() { try { return window.PFLocale ? PFLocale.current().country : 'AT'; } catch (e) { return 'AT'; } } // Subtle geo suggestion (never forces a redirect — the customer confirms) const RD_SUGGEST_T = { de: { line: (c, cur) => `Es sieht so aus, als wärst du in ${c}. Möchtest du in ${cur} einkaufen?`, yes: 'Ja, wechseln', other: 'Anderes Land', close: 'Schließen' }, en: { line: (c, cur) => `It looks like you're in ${c}. Would you like to shop in ${cur}?`, yes: 'Yes, switch', other: 'Choose another', close: 'Dismiss' }, }; const RD_SUGGEST_DISMISS_KEY = 'pf-geo-suggest-v1'; function rdCurrencyFor(country) { try { if (window.PFShop) return window.PFShop.marketFor(country).currency; } catch (e) {} return country === 'CH' ? 'CHF' : 'EUR'; } const RD_LOCALE_T = { de: { country: { AT: 'Österreich', DE: 'Deutschland', CH: 'Schweiz', US: 'USA', OTHER: 'Anderes Land' }, shop: { AT: 'Du befindest dich im österreichischen Shop.', DE: 'Du befindest dich im deutschen Shop.', CH: 'Du befindest dich im Schweizer Shop.', US: 'Du befindest dich im US-Shop.', OTHER: 'Du befindest dich im internationalen Shop.' }, hint: 'Wähle Land und Sprache für Versand und Preise.', land: 'Land', sprache: 'Sprache', go: 'Website aufrufen', langName: { de: 'Deutsch', en: 'English' }, aria: 'Land und Sprache ändern', }, en: { country: { AT: 'Austria', DE: 'Germany', CH: 'Switzerland', US: 'United States', OTHER: 'Other country' }, shop: { AT: 'You are browsing the Austrian shop.', DE: 'You are browsing the German shop.', CH: 'You are browsing the Swiss shop.', US: 'You are browsing the US shop.', OTHER: 'You are browsing the international shop.' }, hint: 'Choose country and language for shipping and prices.', land: 'Country', sprache: 'Language', go: 'Open website', langName: { de: 'Deutsch', en: 'English' }, aria: 'Change country and language', }, }; // Small SVG flags (no emoji, per design system) function RdFlag({ c, size = 18 }) { const r = size / 2; if (c === 'AT') return ; if (c === 'DE') return ; if (c === 'CH') return ; if (c === 'US') return ; return ; } // Locale button + popup — used in the burger panel and the footer. // One pick = one locale (country + language + currency). The list of locales // is our four routable prefixes; the names/currency shown are populated by the // Shopify localization query. Applying navigates to that prefix (PFLocale). function RdLocaleControl({ lang, dark, onNavigate }) { const [open, setOpen] = useState(false); const [loc, setLoc] = useState(null); // Shopify localization data const current = rdActivePrefix(); const [pick, setPick] = useState(current); const T = RD_LOCALE_T[lang] || RD_LOCALE_T.de; const country = rdCurrentCountry(); const show = () => { setPick(rdActivePrefix()); setOpen(true); }; // Fetch the available countries/languages from Shopify ON MOUNT — the closed // button label itself is API-driven (country name + currency), not just the // modal. Falls back to page copy only while loading / when Shopify is off. useEffect(() => { if (!(window.PFShop && typeof PFShop.getLocalization === 'function')) return; let alive = true; PFShop.getLocalization().then((d) => { if (alive && d) setLoc(d); }).catch(() => {}); return () => { alive = false; }; }, []); useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === 'Escape') setOpen(false); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [open]); // Allow the geo-suggestion banner and the footer bottom-bar link to open this // control from anywhere. Only the footer instance listens, so the event can // never open two stacked modals on one page. useEffect(() => { if (!dark) return; const onOpen = () => show(); window.addEventListener('pf-open-locale', onOpen); return () => window.removeEventListener('pf-open-locale', onOpen); }); // Names/currency from Shopify localization; page-copy labels are the fallback. const labelFor = (pre) => { const meta = rdPrefixMeta(pre), cc = meta.country, lc = meta.language; let cname, cur, lname; if (loc) { const c = (loc.countries || []).find((x) => x.code === cc); if (c) { cname = c.name; cur = c.currency; } const l = (loc.languages || []).find((x) => x.code === lc); if (l) lname = l.endonym || l.name; } cname = cname || T.country[cc] || cc; cur = cur || rdCurrencyFor(cc); lname = lname || (T.langName[lc.toLowerCase()] || lc); return { cname, cur, lname, cc }; }; // The selectable markets: OUR routable prefixes intersected with the countries // Shopify actually returns from the localization query. A market Shopify does // not sell to disappears from the list on its own. While localization is // loading (or the store is not configured) the routable prefixes are the // fallback, so the selector is never empty. const options = React.useMemo(() => { if (!loc || !(loc.countries || []).length) return RD_PREFIXES; const have = {}; loc.countries.forEach((c) => { if (c && c.code) have[c.code.toUpperCase()] = true; }); const avail = RD_PREFIXES.filter((pre) => have[rdPrefixMeta(pre).country]); return avail.length ? avail : RD_PREFIXES; }, [loc]); const apply = () => { setOpen(false); if (onNavigate) onNavigate(); const cc = rdPrefixMeta(pick).country; // Re-point the Shopify cart at the new market (re-price), then route. if (window.PFShop && window.PFShop.enabled) { try { window.PFShop.setBuyerCountry(cc); } catch (e) {} } setTimeout(() => { if (window.PFLocale) PFLocale.switchTo(pick); }, 60); }; const cur = labelFor(current); const pickCc = rdPrefixMeta(pick).country; return ( {open && (
{ if (e.target === e.currentTarget) setOpen(false); }}>

{T.shop[pickCc]}

{T.hint}

)} ); } // Craftsmanship / quiet exclusivity copy — used across pages const RD_CRAFT = { de: { batch: 'Handgefertigt in kleinen Monats-Auflagen.', count: 'Nur rund 250 personalisierte Abenteuer-Boxen entstehen jeden Monat — jede einzelne von Hand gefertigt.', each: 'Jede Box wird einzeln gefertigt und personalisiert, bevor sie auf die Reise geht.', }, en: { batch: 'Handcrafted in small monthly batches.', count: 'Only around 250 personalised adventure boxes are created each month — every single one crafted by hand.', each: 'Each box is individually crafted and personalised before it sets off.', }, }; // Quiet single-line note with a small gold star — never a sales banner function RdCraftNote({ lang = 'de', k = 'batch', center = false, dark = false, size = 15.5, style }) { const txt = (RD_CRAFT[lang] || RD_CRAFT.de)[k]; return (
{txt}
); } // Engraved-style line icons (thin, bookish) function RdIcon({ name, size = 20 }) { const common = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' }; const paths = { user: , build: , heart: , truck: , shield: , gift: , screen: , palette: , archive: , star: , arrow: , check: , pen: , compass: , book: , cart: , menu: , close: , }; return ; } // Mobile nav toggle — burger button + slide-down link panel, shared by home + subpage topbars function RdMobileNav({ links, ctaLabel, onCta, extra }) { const [open, setOpen] = useState(false); useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === 'Escape') setOpen(false); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [open]); return ( {open && (
{links.map(([href, label], i) => ( setOpen(false)}>{label} ))} {extra} {ctaLabel && ( )}
)} ); } // Dotted treasure trail ending in a small X — subtle scroll ornament function RdTrail({ width = 200, color = 'var(--rd-walnut)', flip = false, style }) { return ( ); } // Tiny paw prints wandering across a corner function RdPaws({ n = 4, color = 'var(--rd-walnut)', style }) { const paws = Array.from({ length: n }, (_, i) => ( )); return ; } // Small centered ornament: rule — diamond — rule function RdOrnament({ color = 'var(--rd-gold)', width = 150 }) { return ( ); } // Hand-drawn underline squiggle function RdSquiggle({ width = 130, color = 'var(--rd-terra)' }) { return ( ); } // Compass rose, faint decorative function RdCompass({ size = 130, color = 'currentColor' }) { return ( ); } // Falling leaves — count scales with animation intensity function RdLeaves({ intensity = 5, tint = 'var(--rd-moss)' }) { const count = Math.round(intensity * 0.7); if (count <= 0) return null; const leaves = Array.from({ length: count }, (_, i) => ({ left: (i * 137 + 60) % 100, delay: (i * 3.1) % 14, dur: 13 + (i % 5) * 2.4, s: 0.6 + ((i * 53) % 40) / 100, })); return ( ); } // Fireflies for the dark closing section function RdFireflies({ intensity = 5, count = 14 }) { const n = Math.round(count * intensity / 5); if (n <= 0) return null; return ( ); } // Simple layered pine silhouette band function RdPines({ color = '#141A10', height = '100%', opacity = 1, seed = 0 }) { const trees = Array.from({ length: 26 }, (_, i) => { const x = i * 56 + ((i * 37 + seed * 61) % 30); const h = 60 + ((i * 71 + seed * 13) % 70); const w = 16 + ((i * 29) % 14); return { x, h, w }; }); return ( ); } // Typographic brand wordmark — "Popcorn & Freddy" in the display serif with a gold italic ampersand function RdLogo({ size = 23, tone = 'ink' }) { const color = tone === 'cream' ? 'var(--rd-cream)' : 'var(--rd-ink)'; const amp = tone === 'cream' ? 'var(--rd-gold-soft)' : 'var(--rd-gold)'; return ( Popcorn Freddy ); } // Section heading block (eyebrow + title + optional lede), centered or left function RdHeading({ eyebrow, title, lede, center = true, dark = false, max = 820, ledeMax = 660 }) { return (
{eyebrow && {eyebrow}} {title &&

{title}

} {lede &&

{lede}

}
); } // Compact trust row — shipping, payment methods, returns link. Sits near any price/CTA. function RdTrustRow({ t, dark = false, center = true, style }) { const tr = (t && t.trust) || { ship: '', returns: '', pay: [] }; const muted = dark ? 'rgba(242,236,217,0.72)' : 'var(--rd-ink-mute)'; return (
{tr.ship} {(tr.pay || []).map((p, i) => {p})} {tr.returns}
); } // Storybook deck: one "book plate" at a time resting on a stack of paper sheets. // Turning pages animates like a page-turn; gold sparkles twinkle on the plate. function RdCarousel({ children, trackClass, ariaLabel }) { const items = React.Children.toArray(children); const [active, setActive] = useState(0); const [dir, setDir] = useState('next'); const [turn, setTurn] = useState(0); const drag = useRef(null); const go = (i) => { if (i === active || i < 0 || i > items.length - 1) return; setDir(i > active ? 'next' : 'prev'); setActive(i); setTurn((t) => t + 1); }; const onPointerDown = (e) => { drag.current = { x: e.clientX }; }; const onPointerUp = (e) => { if (!drag.current) return; const dx = e.clientX - drag.current.x; drag.current = null; if (dx < -40) go(active + 1); else if (dx > 40) go(active - 1); }; const mod = trackClass && trackClass.includes('test') ? ' rd-story-deck--test' : ''; return (
{ if (e.key === 'ArrowRight') go(active + 1); if (e.key === 'ArrowLeft') go(active - 1); }} onPointerDown={onPointerDown} onPointerUp={onPointerUp}>
{[['9%', '6%', '0s'], ['6%', '90%', '0.9s'], ['86%', '8%', '1.5s'], ['90%', '86%', '0.4s']].map((s, i) => ( ))} {items[active]}
{items.length > 1 && (
{items.map((_, i) => )}
)}
); } // Peek scroller: cards side by side, next card partially visible, scroll-snap + arrows. function RdPeekCarousel({ children, ariaLabel }) { const items = React.Children.toArray(children); const ref = useRef(null); const [at, setAt] = useState({ start: true, end: false }); const update = () => { const el = ref.current; if (!el) return; setAt({ start: el.scrollLeft < 20, end: el.scrollLeft > el.scrollWidth - el.clientWidth - 20 }); }; useEffect(() => { update(); const el = ref.current; if (!el) return; el.addEventListener('scroll', update, { passive: true }); window.addEventListener('resize', update); return () => { el.removeEventListener('scroll', update); window.removeEventListener('resize', update); }; }, []); const step = (d) => { const el = ref.current; if (!el) return; const card = el.querySelector('.rd-peek-item'); const w = card ? card.getBoundingClientRect().width + 26 : el.clientWidth * 0.7; el.scrollBy({ left: d * w, behavior: 'smooth' }); }; return (
{items.map((it, i) =>
{it}
)}
); } // ─── CART FLYOUT (shared across ALL pages) ────────────────── function rdMoney(n, lang) { return lang === 'de' ? `${n.toFixed(2).replace('.', ',')} €` : `€${n.toFixed(2)}`; } // Option B: cart / "checkout" buttons open the on-site checkout page // (basket → delivery). The delivery step then hands off to Shopify's hosted // checkout, pre-filled, at the payment step (see rd-checkout-app.jsx goToPayment). function rdCheckout() { if (window.PFLocale) { PFLocale.go('Checkout.html'); return; } window.location.href = 'Checkout.html'; } // Subtle, dismissible country/currency suggestion. Never forces anything. function RdCountrySuggest({ lang }) { const [sug, setSug] = useState(null); // suggested country code useEffect(() => { if (!window.PFShop || typeof window.PFShop.suggestCountry !== 'function') return; try { if (localStorage.getItem(RD_SUGGEST_DISMISS_KEY)) return; } catch (e) {} let alive = true; window.PFShop.suggestCountry().then(function (code) { if (!alive || !code) return; const active = window.PFShop.activeCountries(); const here = window.PFShop.savedCountry(); if (active.indexOf(code) >= 0 && code !== here) setSug(code); }).catch(function () {}); return () => { alive = false; }; }, []); if (!sug) return null; const T = RD_SUGGEST_T[lang] || RD_SUGGEST_T.de; const Tb = RD_LOCALE_T[lang] || RD_LOCALE_T.de; const dismiss = () => { try { localStorage.setItem(RD_SUGGEST_DISMISS_KEY, '1'); } catch (e) {} setSug(null); }; const confirm = () => { try { localStorage.setItem(RD_SUGGEST_DISMISS_KEY, '1'); } catch (e) {} if (window.PFShop && window.PFShop.enabled) { try { window.PFShop.setBuyerCountry(sug); } catch (e) {} } // sug is a country code (AT/DE/CH/US) → the same-named locale prefix. const pre = (window.PFLocale && PFLocale.PREFIX[String(sug).toLowerCase()]) ? String(sug).toLowerCase() : rdActivePrefix(); setTimeout(function () { if (window.PFLocale) PFLocale.switchTo(pre); }, 40); }; const other = () => { dismiss(); window.dispatchEvent(new Event('pf-open-locale')); }; return (
{T.line(Tb.country[sug], rdCurrencyFor(sug))}
); } function RdCart({ open, cart, onClose, lang, onQty, onRemove, justAdded }) { const lines = usePFCartLines(cart, lang); useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [open, onClose]); if (!open) return null; const count = cart.reduce((s, c) => s + (c.qty || 1), 0); const cur = (lines.find((c) => c.currency) || {}).currency; const fmt = (n, cc) => ((cc || cur) && window.PFShop) ? window.PFShop.money(n, cc || cur, lang) : rdMoney(n, lang); const total = lines.reduce((s, c) => s + (c.qty || 1) * (c.price || 0), 0); return (
{lang === 'de' ? 'Dein Korb' : 'Your basket'}{count > 0 ? ` · ${count}` : ''}
{cart.length > 0 && (
{lang === 'de' ? 'Versandkosten werden an der Kasse berechnet' : 'Shipping calculated at checkout'}
)}
{cart.length === 0 &&
{lang === 'de' ? 'Noch leer — Zeit für ein Abenteuer ✦' : 'Empty — time for an adventure ✦'}
} {lines.map((c) => (
{c.img ? : ))}
{cart.length > 0 && (
{lang === 'de' ? 'Zwischensumme' : 'Subtotal'} {fmt(total)}
{lang === 'de' ? 'inkl. MwSt. · Versand an der Kasse' : 'incl. VAT · shipping at checkout'}
{lang === 'de' ? 'Sichere Zahlung' : 'Secure payment'} {lang === 'de' ? 'Sorgfältig verpackt' : 'Carefully packaged'}
)}
); } // Shared topbar cart controls — identical markup on home + all subpages. // Renders the desktop pill + mobile green square (with badge) and owns nothing; // the parent passes cartCount + onOpenCart. function RdCartButtons({ label, cartCount, onOpenCart }) { return ( ); } Object.assign(window, { usePFChapters, usePFProduct, usePFCartLines, RdIcon, RdOrnament, RdSquiggle, RdCompass, RdLeaves, RdFireflies, RdPines, RdHeading, RdLogo, rdCartLoad, rdCartSave, RD_CART_KEY, RD_CRAFT, RdCraftNote, RdTrustRow, RdCarousel, RdPeekCarousel, RdFlag, RdLocaleControl, RdTrail, RdPaws, rdMoney, rdCheckout, RdCountrySuggest, RdCart, RdCartButtons });