// =========================================================== // Booking page — calendar → hike → group/extras → pay // =========================================================== function BookingPage({ onNav, initialDate = "2025-05-24", initialHikeIdx = 1 }) { const [step, setStep] = React.useState(1); const [date, setDate] = React.useState(initialDate); const [hikeIdx, setHikeIdx] = React.useState(initialHikeIdx); // index within HIKE_DB const [group, setGroup] = React.useState("solo"); const [extras, setExtras] = React.useState({ transport: false, lunch: true, donation: 5 }); const [useMembership, setUseMembership] = React.useState(false); const [confirmed, setConfirmed] = React.useState(false); const hikesToday = HIKE_DB.map((h, i) => ({ ...h, _i: i })).filter(h => h.date === date); const hike = HIKE_DB[hikeIdx] || hikesToday[0]; const groupOptions = [ { id: "solo", label: "Just me", sub: "1 hiker", people: 1, Ic: Icons.Heart }, { id: "plus1", label: "Bring +1", sub: "2 hikers", people: 2, Ic: Icons.Users }, { id: "family", label: "Small group", sub: "3–4 hikers", people: 3, Ic: Icons.Users }, ]; const groupSel = groupOptions.find(g => g.id === group); const donationOptions = [0, 5, 10, 20, 50]; const hikePrice = useMembership ? 0 : (hike?.price || 0) * (groupSel?.people || 1); const total = hikePrice + (extras.transport ? 8 : 0) + (extras.lunch ? 6 : 0) + extras.donation; return (
{/* Page header */}
Booking · step {step} of 3

Book your spot on the trail.

Pay per hike, or use your Companion membership. Cancel anytime up to the morning of the walk.

{/* Main two-column */}
{/* LEFT — Active step content (all rendered to feel like a real flow) */}
{/* Step 1: Date + Hike */} setStep(1)} done={step > 1}> { setDate(d); /* keep step on 1 */ }} /> {/* hikes on selected date */}
Hikes on {fmtDate(date)}
{hikesToday.length} options
{hikesToday.map((h) => { const sel = h._i === hikeIdx; return ( ); })}
{/* Step 2: Group + Extras */} setStep(2)} done={step > 2}>
How are you arriving?
{groupOptions.map(o => { const sel = o.id === group; return ( ); })}
Optional extras
setExtras({ ...extras, transport: !extras.transport })} Ic={Icons.Globe} title="Minibus from Birmingham city centre" sub="Pick-up 06:30 at Centenary Square · returns 17:00" price="£8" /> setExtras({ ...extras, lunch: !extras.lunch })} Ic={Icons.Leaf} title="Packed lunch from a local Birmingham bakery" sub="Sandwich, fruit, brownie, oat flapjack. Vegan option available." price="£6" />
Donation to keep us walking
100% goes to running our hikes and bursary fund
{donationOptions.map(v => { const sel = extras.donation === v; return ( ); })}
{/* Step 3: Pay */} setStep(3)}> {!confirmed ? (
Pay {total === 0 ? "with one click" : `£${total}.00`}
{[ { id: "card", label: "Card", sub: "Visa · Mastercard · Amex" }, { id: "apple", label: "Apple Pay" }, { id: "paypal", label: "PayPal" }, ].map((p, i) => ( ))}
Full refund or reschedule up to the morning of the hike — just let us know.
) : ( )}
{/* RIGHT — Order summary sticky */}
setUseMembership(!useMembership)} onNav={onNav} />
); } // ---------- Sub-components ---------- function BookingStepper({ step, onStep }) { const labels = ["Date", "Group", "Pay"]; return (
    {labels.map((l, i) => { const idx = i + 1; const active = idx === step; const done = idx < step; return (
  1. {i < labels.length - 1 && }
    2. ); })}
); } function StepCard({ num, title, expanded, done, onToggle, children }) { return (
{expanded &&
{children}
}
); } function ExtraRow({ checked, onToggle, Ic, title, sub, price }) { return ( ); } function Field({ label, value, mono }) { return ( ); } function OrderSummary({ hike, date, group, extras, total, useMembership, onToggleMembership, onNav }) { return ( ); } function SumRow({ label, sub, price, accent }) { return (
  • {label}
    {sub &&
    {sub}
    }
    {price}
    • ); } function Confirmation({ hike, group, date, total, onNav }) { return (

    You're on the trail.

    We've sent a confirmation to your email and we'll text you a kit checklist 48 hours before the hike. Can't wait to walk with you.

    {e.preventDefault(); onNav?.("event");}}>See hike details {e.preventDefault(); onNav?.("home");}}>Back to home
    ); } // ---------- utilities ---------- function fmtDate(iso) { if (!iso) return ""; const d = new Date(iso + "T00:00:00Z"); return d.toLocaleDateString("en-GB", { weekday: "short", day: "numeric", month: "long", timeZone: "UTC" }); } function levelBg(l) { return { Easy: "#E7F1E5", Gentle: "#E7F1E5", Moderate: "#FFF4C8", Hard: "#FFE0E6" }[l] || "var(--h2h-violet-tint)"; } function levelFg(l) { return { Easy: "#3F5E3F", Gentle: "#3F5E3F", Moderate: "#8A6E14", Hard: "#A04055" }[l] || "var(--h2h-violet)"; } window.BookingPage = BookingPage;