// views.jsx — Top-level views: Home, Station, Certificate, Before, Map, After, FAQ.
// Depends on globals exported by ui-bits.jsx and stations.jsx.
const { useState: useS, useEffect: useE, useMemo, useRef: useR } = React;
// ─── HOME ───────────────────────────────────────────────────────────────────
function Home({ stations, completed, setRoute }) {
const doneCount = completed.size;
return (
{/* HERO */}
Sunday May 24
Bike Rodeo
parents'guide
Five quick stations, about an hour of riding. Open the station, pull a
question card to start the conversation with your kid, then walk through
the lesson with them. Volunteers run each station — you just guide.
{/* Event card */}
{/* STATION OVERVIEW */}
The five stations
{stations.map((s) => (
))}
);
}
function EventStat({ label, big, small }) {
return (
{/* Questions — surfaced FIRST, framed as the warmup step */}
Pull a card and let them think out loud. There are no wrong answers — you're
just getting curious together. If you want a nudge on where the question is
going, tap For the grown-up.
{/* Helmet diagram for helmet station */}
{isHelmet && (
How a helmet should sit
)}
{/* Sections */}
{station.sections.map((sec, i) => (
{i + 1}
{sec.heading}
{sec.body}
{sec.meta && (
{sec.meta}
)}
))}
{/* Watch for */}
{station.watchFor && (
{station.watchFor.map((w, i) => (
{w.heading}
{w.body}
{w.praise && (
say something like
{w.praise}
)}
))}
)}
{/* Mark complete */}
{/* Prev / Next */}
{prev ? (
) : }
{next ? (
) : (
)}
);
}
function SectionStripe({ label, color }) {
return (
for completing every station of the Tyendinaga Bike Rodeo —
checking a bike, fitting a helmet, starts and stops, scanning for cars,
and the rock dodge.
{completed.size} of {stations.length} stations marked done — you can still finish the rest.
)}
);
}
// ─── BEFORE YOU COME ────────────────────────────────────────────────────────
function BeforeView({ setRoute }) {
const items = [
{ icon: "🚲", title: "A bike", body: "The one your kid actually rides. Training wheels welcome." },
{ icon: "🪖", title: "A helmet", body: "Even if it doesn't fit right — we'll help you fit it at Station 2." },
{ icon: "👟", title: "Closed-toe shoes", body: "No flip-flops. Pedals are mean to bare toes." },
{ icon: "💧", title: "A water bottle", body: "Late May can be warm. Bring something to drink." },
{ icon: "☀️", title: "Sunscreen + a hat", body: "For the parents standing around. (You'll be standing around a lot.)" },
{ icon: "📝", title: "This guide", body: "Open it on your phone or print the certificate page when you're done." },
];
return (
Before the day
What to bring
{items.map((it) => (
{it.icon}
{it.title}
{it.body}
))}
Heads up
This isn't drop-off. We need one adult per kid — you'll walk the bike between
stations, hold the helmet while it gets adjusted, and ask the wait-in-line
questions. Plan on the full two hours.
);
}
// ─── MAP / STATION ORDER ────────────────────────────────────────────────────
function MapView({ stations, completed, setRoute }) {
return (
The course
Station order
The stations don't have to be done in order — but if you're new, this order
works. Bike check before helmet check before riding. Easier stuff before harder.
setRoute(`station/${id}`)} />
{stations.map((s) => (
{completed.has(s.id) ? "✓" : s.number}
{s.title}
{s.kicker}
))}
);
}
function CourseDiagram({ stations, completed, onJump }) {
// Five stations arranged in a curving path
const points = [
{ x: 60, y: 70 },
{ x: 160, y: 38 },
{ x: 260, y: 70 },
{ x: 320, y: 150 },
{ x: 220, y: 200 },
];
const W = 380, H = 240;
return (
);
}
function pathThrough(pts) {
let d = `M ${pts[0].x} ${pts[0].y}`;
for (let i = 1; i < pts.length; i++) {
const prev = pts[i - 1], curr = pts[i];
const cx = (prev.x + curr.x) / 2;
const cy = (prev.y + curr.y) / 2;
d += ` Q ${prev.x} ${curr.y} ${cx} ${cy}`;
d += ` T ${curr.x} ${curr.y}`;
}
return d;
}
// ─── AFTER ─────────────────────────────────────────────────────────────────
function AfterView({ setRoute }) {
return (
After the rodeo
Keep it going
Two hours doesn't make a careful cyclist. What we did today only sticks if
you reinforce it on the rides you take this summer. Here's what works.
);
}
function Cards({ items }) {
return (
{items.map((it, i) => (
{it.eyebrow}
{it.body}
))}
);
}
// ─── FAQ ────────────────────────────────────────────────────────────────────
function FaqView({ setRoute }) {
const [open, setOpen] = useS(0);
const items = [
{ q: "Does my kid need to know how to ride already?",
a: "No. Younger riders (with training wheels or balance bikes) are welcome at Stations 1 through 3. The riding stations need them able to coast and steer on their own." },
{ q: "Can I drop my kid off?",
a: "Please don't. One adult per child — you walk the bike between stations, hold the helmet while we adjust it, ask the wait-in-line questions. We don't have enough volunteers to chaperone." },
{ q: "What if my kid's bike is too small / too big / broken?",
a: "Bring it anyway. Station 1 (Bike Check) is where we figure that out, and we have a couple of loaner bikes for the worst cases. Station 2 handles fit." },
{ q: "What if it rains?",
a: "We move under the pavilion and run the standing stations only — Bike Check, Helmet, Fit, plus the conversation cards. Watch the township page for cancellation." },
{ q: "Do I need to register?",
a: "Just show up. If you want a head-count helper, let us know you're coming — but it's not required." },
{ q: "My kid is older / more skilled. Will they be bored?",
a: "Honestly, sometimes. The Scanning and Rock Dodge stations stay interesting at any skill level. Encourage them to be helpers for younger kids — they pick up more by teaching it." },
{ q: "What if my kid has a meltdown?",
a: "Walk them over to the warm-up pit, let them ride a loop with no instructions, come back when they're ready. We've all been there." },
{ q: "Are helmets provided?",
a: "We don't have loaner helmets — bring yours. If the fit is off we'll help adjust it. If the helmet is broken or cracked, please replace it before riding." },
];
return (
Sunday May 24