// ──────────────────────────────────────────────────────────────── // Redesign — Story, How, Map (static plate), Inside, Chapters // ──────────────────────────────────────────────────────────────── // ─── STORY — vintage book plates ───────────────────────────── function RdStory({ t, intensity }) { const chars = [ { name: t.story.pop_name, role: t.story.pop_role, text: t.story.pop_desc, img: 'assets/char-popcorn.png' }, { name: t.story.fred_name, role: t.story.fred_role, text: t.story.fred_desc, img: 'assets/char-freddy.png' }, { name: t.story.peter_name, role: t.story.peter_role, text: t.story.peter_desc, img: 'assets/char-child.png' }, ]; return (
{chars.map((c, i) => (
{c.name}

{c.name}

{c.role}

{c.text}

))}
); } // ─── HOW — journal steps ───────────────────────────────────── function RdHow({ t }) { return (
{t.how.eyebrow}

{t.how.title}

{t.how.tagline}

{t.how.sub}

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

{s.t}

{s.d}

))}
); } // ─── MAP — museum artifact ─────────────────────────────────── function RdMap({ t, lang }) { return (
Popcorn & Freddys Schatzkarte mit acht Kapiteln
{t.map.title} {lang === 'de' ? '8 Kapitel · 1 Schatz' : '8 chapters · 1 treasure'}
); } // ─── INSIDE — editorial inventory ──────────────────────────── function RdInside({ t, lang }) { const [active, setActive] = useState(0); const trackRef = useRef(null); const spots = [ { x: 22, y: 33 }, { x: 51.5, y: 26.5 }, { x: 79, y: 33.5 }, { x: 45, y: 70 }, { x: 42, y: 89.5 }, { x: 52.5, y: 52 }, { x: 88.5, y: 84.5 }, ]; const goTo = (i) => { setActive(i); const el = trackRef.current; if (!el || !el.children[0]) return; const w = el.children[0].getBoundingClientRect().width + 18; el.scrollTo({ left: i * w, behavior: 'smooth' }); }; const onScroll = () => { const el = trackRef.current; if (!el || !el.children[0]) return; const w = el.children[0].getBoundingClientRect().width + 18; const i = Math.max(0, Math.min(spots.length - 1, Math.round(el.scrollLeft / w))); setActive(i); }; return (
Inhalt der Box {spots.map((s, i) => ( ))}
{t.inside.items.map((it, i) => (
goTo(i)} role="button" tabIndex={0} onKeyDown={(e) => { if (e.key === 'Enter') goTo(i); }}>
{i + 1}

{it.t}

{it.d}

))}
); } // ─── CHAPTERS ──────────────────────────────────────────────── // ─── WHY — reasons carousel, photo cards with overlay text ─── function RdWhy({ t }) { const imgs = ['assets/why-1-time.png', 'assets/why-2-learning.png', 'assets/why-3-hero.png', 'assets/why-4-journey.png']; return (
{t.why.items.map((it, i) => (
{imgs[i] ? {it.t} : }
{'0' + (i + 1)}

{it.t}

{it.tag}

{it.d}

))}
); } // Every chapter comes from Shopify: the "kapitel" collection (manual order), // or the "kapitel" tag as fallback. Adding a product there is all it takes — // no code change, no hardcoded image, price, title or stock anywhere. function RdChapters({ t, lang, onAdd, all }) { const { list, loading } = usePFChapters(lang); const buyable = (p) => p.available !== false && p.quantityAvailable !== 0; return (
{all &&
← {t.chapters.back}
}
{loading ? (
{[0, 1, 2].map((i) => )}
) : list.length === 0 ? (
{lang === 'de' ? 'Die Kapitel werden gerade vorbereitet — schaut gleich noch einmal vorbei.' : 'The chapters are being prepared — please check back shortly.'}
) : all ? (
{list.map((p) => buyable(p) ? : )}
) : ( {list.map((p) => buyable(p) ? : )} )} {/* includes — only on the full chapters page */} {all &&
{t.chapters.includes}
{t.chapters.bullets.map((b, i) => (
{b}
))}
}
); } // Card-shaped placeholder while Shopify answers — same frame, no fake product. function RdChapterSkeleton() { return (