/* ============================================================================ RECAP — shareable end-of-trip memorabilia. Editorial + Wrapped-style stats. ============================================================================ */ function RecapScreen({ state }) { const T = window.TRIP; const store = usePhotos(); const visited = state.places.filter((p) => p.visited).length; const spent = state.expenses.reduce((s, e) => s + e.vnd, 0); const dishes = state.dishes.filter((d) => d.tried).length; const photos = store.list.length; const paid = {}; T.people.forEach((p) => { paid[p.id] = 0; }); state.expenses.forEach((e) => { paid[e.by] += e.vnd; }); const topSpender = T.people.reduce((a, b) => (paid[b.id] > paid[a.id] ? b : a)); // One playful award per traveller — safe for any party size. const TITLES = [ { title: "The planner", note: "Kept the trip on track" }, { title: "The foodie", note: "Found every bánh mì" }, { title: "The navigator", note: "Never once got lost" }, { title: "The shutterbug", note: "Camera always ready" }, ]; const crew = T.people.map((p, i) => { const t = TITLES[i % TITLES.length]; const isTop = spent > 0 && p.id === topSpender.id; return { id: p.id, title: isTop ? "Treasurer" : t.title, note: isTop ? `Fronted ${T.fmtVND(paid[p.id])}` : t.note }; }); const [shared, setShared] = React.useState(false); return (
{/* ---------- COVER ---------- */}
A trip to remember Vietnam '26
Hà Nội A Việt Nam diary
{T.meta.dates}
{/* ---------- BY THE NUMBERS ---------- */}
By the numbers
Spent together
{T.fmtVNDFull(spent)}
≈ {T.toINR(spent)} · {T.fmtVND(spent / T.people.length)} each
{/* ---------- JOURNEY MAP ---------- */}
Where we wandered
{T.cities.length > 1 ? `North to south · ${T.cities.length} cities · ` : ""}Photos pin to the map
{/* ---------- PHOTO STRIP ---------- */}
Moments {store.list.length === 0 ? (
Add photos in the Photos tab and they'll appear here.
) : (
{store.list.slice(0, 8).map((p, i) => (
{p.caption
{p.caption || p.place}
))}
)}
{/* ---------- THE CREW ---------- */}
The crew
{crew.map((m, i) => { const p = T.people.find((x) => x.id === m.id); return (
{p.name}
{m.note}
{m.title}
); })}
{/* ---------- SHARE ---------- */}
Hẹn gặp lại, Việt Nam
Until next time — share the memories with the crew
{ setShared(true); setTimeout(() => setShared(false), 2200); }} full style={{ maxWidth: 280, margin: "0 auto" }}> {shared ? "Link copied to clipboard" : "Share trip recap"}
); } function BigStat({ value, label, color }) { return (
{value}
{label}
); } Object.assign(window, { RecapScreen });