/* =========================================================================
pagebird — interactive demo
A read-only walk through one club, for waitlist visitors. Lives on the
marketing site; there is no backend, so nothing here can be written to.
Data below is a fictional flock at the richness of a real Tampa club
(current read, next meetup, a chapter-tagged discussion, the shelf).
Every write affordance (reply, RSVP, change the read) is inert and
opens the gentle "join the waitlist" sheet instead.
Reuses the brand globals from brand.jsx (window.PB_LIGHT, PageBirdMark,
GoldLinework, Wordmark) and tokens from tokens.css.
========================================================================= */
const { useState } = React;
const C = window.PB_LIGHT;
/* —— Demo data — fictional people, real shape ————————————————————————— */
const CLUB = { name: "The Hyde Park Reading Hour", place: "Hyde Park · Tampa" };
// Letter-avatar palette, cycled so two members in a row read as two people.
const MEMBERS = {
maya: { name: "Maya", color: C.gold, host: true },
jules: { name: "Jules", color: C.coral },
aria: { name: "Aria", color: C.greenLight },
priya: { name: "Priya", color: C.pinkDeep },
theo: { name: "Theo", color: C.gold },
nadia: { name: "Nadia", color: C.coral },
};
const CURRENT_READ = {
title: "Local Woman Missing",
author: "Mary Kubica",
cover:
"https://assets.hardcover.app/external_data/37317466/80396c6a6b2e6f46c9785e292ce0cb1410c5f4aa.jpeg",
progress: "Chapters 11 – 18 by Sunday",
};
const MEETUP = {
dateISO: "2026-06-10",
timeLabel: "7:00 pm",
venue: "Oxford Exchange",
address: "420 W Kennedy Blvd, Tampa",
chapterRange: "Chapters 11 – 18",
note:
"We'll order the cheese plate at the back booth. Read what you can — show up either way.",
going: ["maya", "jules", "aria", "priya", "nadia"],
maybe: ["theo"],
};
const DISCUSSION = {
chapter: "Ch. 7",
headline: "That chapter seven turn",
prompt: "Do you trust the narrator yet?", // the host's question for the group
promptBy: "maya",
messages: [
{
by: "maya",
time: "3h",
text:
"Did anyone else have to set the book down after the chapter seven reveal? I did not see it coming.",
},
{
by: "jules",
time: "2h",
text:
"I had a feeling about Meredith from the start — but the *how* still floored me.",
},
{
by: "aria",
time: "1h",
text:
"Jules, same. I went back and reread chapter two and it's all *right there*. Kubica plays fair.",
},
{
by: "theo",
time: "38m",
text:
"Only on chapter nine here — looking away before one of you spoils the rest.",
},
],
};
// Most-recent first. Covers present where the club had them; the rest fall
// back to the drawn cloth spine (same logic as the product's BookSpine).
const SHELF = [
{
title: "The Woman in Cabin 10",
author: "Ruth Ware",
cover:
"https://assets.hardcover.app/edition/30789270/7093e616a730f4773f86cd47429f8291aa47e37d.jpeg",
finished: "May",
},
{
title: "The Bee Sting",
author: "Paul Murray",
cover: "https://covers.openlibrary.org/b/id/14406691-L.jpg",
finished: "Apr",
},
{
title: "Demon Copperhead",
author: "Barbara Kingsolver",
cover: "https://covers.openlibrary.org/b/id/13141227-L.jpg",
finished: "Feb",
},
{
title: "Trust",
author: "Hernan Diaz",
cover: "https://covers.openlibrary.org/b/id/12742248-L.jpg",
finished: "Nov",
},
];
/* —— Date helpers (derive the weekday so the label is always true) ——————— */
function dateParts(iso) {
const d = new Date(iso + "T12:00:00"); // noon — never flips across a tz
return {
month: d.toLocaleString("en-US", { month: "short" }),
day: d.getDate(),
weekday: d.toLocaleString("en-US", { weekday: "long" }),
weekdayShort: d.toLocaleString("en-US", { weekday: "short" }),
};
}
function greeting() {
const h = new Date().getHours();
if (h < 12) return "Good morning";
if (h < 18) return "Good afternoon";
return "Good evening";
}
function todayLabel() {
return new Date()
.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric" })
.toUpperCase();
}
/* —— Primitives ported from components/ui ———————————————————————————— */
function Avatar({ who, size = 32 }) {
const m = MEMBERS[who];
const initial = (m?.name || "?")[0].toLowerCase();
return (
{initial}
);
}
function DateStack({ iso }) {
const p = dateParts(iso);
return (
{p.month}
{p.day}
{p.weekdayShort}
);
}
// FNV-1a, ported from BookSpine.tsx so a cover-less book gets a stable,
// per-title cloth tone + ornament instead of a flat placeholder.
function spineHash(input, seed) {
let h = seed;
for (let i = 0; i < input.length; i++) {
h = Math.imul(h ^ input.charCodeAt(i), 16777619);
}
h ^= h >>> 16;
h = Math.imul(h, 2246822507);
h ^= h >>> 13;
h = Math.imul(h, 3266489909);
h ^= h >>> 16;
return h >>> 0;
}
const CLOTH = [C.green, C.greenDeep, C.greenDark, C.greenLight];
function BookSpine({ title, author, cover, w = 60, h = 84 }) {
const key = `${title.toLowerCase()}|${author.toLowerCase()}`;
const tone = CLOTH[spineHash(key, 2166136261) % 4];
const orn = spineHash(key, 374761393) % 4;
return (
{orn === 1 && }
{orn === 2 && }
{orn === 3 && }
{title}
{author}
{cover && }
);
}
/* —— Small shared bits ————————————————————————————————————————————— */
function Eyebrow({ children, color = C.coral, style = {} }) {
return (
{children}
);
}
// Renders *word* as a coral italic accent — matches the product's one-italic-
// moment treatment used across discussion text.
function emphasize(text) {
const out = [];
const re = /\*([^*]+)\*/g;
let last = 0;
let m;
let i = 0;
while ((m = re.exec(text))) {
if (m.index > last) out.push(text.slice(last, m.index));
out.push({m[1]});
last = re.lastIndex;
}
if (last < text.length) out.push(text.slice(last));
return out;
}
function LockedButton({ children, onLocked, label }) {
return (
);
}
/* —— Screens ————————————————————————————————————————————————————————— */
function HomeScreen({ onLocked, go }) {
const p = dateParts(MEETUP.dateISO);
const latest = DISCUSSION.messages[DISCUSSION.messages.length - 1];
return (