/* app.jsx — The Group Chat: IRL · Open Air build (interactive prototype) */
const { useState, useEffect, useRef } = React;
const GC = window.GC;
/* ---------------- icons ---------------- */
const I = {
cal: ,
clock: ,
pin: ,
chk: ,
share: ,
back: ,
chev: ,
play: ,
close: ,
link: ,
apple: ,
google:,
spark: ,
};
const FACES = [['A','#2f7cc0'],['M','#5b8f5b'],['K','#c08a2f'],['R','#9a5bb0'],['+','#9aa4b2']];
function Faces({ n = 4 }) {
return {FACES.slice(0, n).map(([l, c], i) =>
{l}
)}
{cap}
;
return 
setOk(false)} />;
}
/* striped placeholder (events have no real photos yet) */
function Ph({ cap, style, className = '' }) {
return {cap}
;
}
/* ---- activity glyphs (line icons, one per event) ---- */
const GL = {
sparkle: ,
star: ,
music: ,
mtn: ,
ball: ,
sun: ,
waves: ,
flag: ,
plane: ,
cup: ,
};
const GLYPH = {
pride: 'sparkle', stars: 'star', race: 'flag', brunch: 'cup', bees: 'ball', craft: 'sparkle',
concert: 'music', rodeo: 'star', coast: 'waves', zion: 'mtn', vietnam: 'plane',
};
const MO = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
function ymd(s) { const p = s.split('-').map(Number); return { d: String(p[2]).padStart(2, '0'), mo: MO[p[1] - 1] }; }
/* date-tile event cover — single blue family, glyph differentiates */
function DateCover({ ev, big }) {
const { d, mo } = ymd(ev.start);
return (
{ev.kind}{GL[ev.glyph || GLYPH[ev.id]] || GL.star}
{d}{mo}
{big &&
{ev.place}
}
);
}
function GlyphTile({ ev }) { return {GL[ev.glyph || GLYPH[ev.id]] || GL.star}
; }
/* ---------------- header ---------------- */
function Head({ mode, title, onBack, onAction, scrolled }) {
return (
{mode === 'home' ? (
<>
THE GROUP CHAT: IRL
Gaby & Jess
) : (
<>
{title}
{onAction ?
:
}
)}
);
}
/* ====================================================================
SCREENS
==================================================================== */
/* ---- tweakable hero config (eyebrow / welcome line / accent) ---- */
const EYEBROWS = [
"From SLC, exploring everywhere",
"SLC-based · adventures near & far",
"From SLC to everywhere · {n} plans",
"Home base: SLC · plans all over",
"Your crew, your calendar · {n} plans",
"Salt Lake City · {n} plans on the calendar",
];
const LEDES = {
"Standing invite": "Consider this your standing invite. Gaby & Jess keep the plans coming — subscribe once and you’ll never miss one. It’s always better when you’re there.",
"We want you there": "We plan it, we book it, we round everyone up — all you do is show up. Subscribe once and you’re in on everything, and we’d genuinely love to have you along.",
"Short & sweet": "Gaby & Jess keep the plans coming. Subscribe once, never miss one — it’s always better with you there.",
};
const ACCENTS = [
["#2f7cc0", "#1d5e9a", "#eaf2fb"], // sky (brand)
["#1f6aa8", "#154d7d", "#e7f0f8"], // deep ocean
["#3b86d8", "#2563ad", "#ecf3fc"], // bright
["#2c8fa6", "#1e6b7e", "#e6f3f6"], // blue-teal
];
const TWEAK_DEFAULTS = {
eyebrow: "Your crew, your calendar · {n} plans",
eyebrowCustom: "",
lede: "Standing invite",
accent: ["#2c8fa6", "#1e6b7e", "#e6f3f6"],
};
/* horizontal snap carousel with Instagram-style dots + right-edge fade hint */
function Carousel({ children }) {
const ref = useRef(null);
const [active, setActive] = useState(0);
const [atEnd, setAtEnd] = useState(false);
const n = React.Children.count(children);
const onScroll = () => {
const el = ref.current; if (!el) return;
const cards = el.children;
const x = el.scrollLeft + 24;
let best = 0, bestD = Infinity;
for (let i = 0; i < cards.length; i++) {
const d = Math.abs(cards[i].offsetLeft - x);
if (d < bestD) { bestD = d; best = i; }
}
const end = el.scrollLeft + el.clientWidth >= el.scrollWidth - 4;
setAtEnd(end);
setActive(end ? cards.length - 1 : best);
};
useEffect(() => { onScroll(); }, []);
const go = (i) => {
const el = ref.current; if (!el || !el.children[i]) return;
el.scrollTo({ left: el.children[i].offsetLeft - 20, behavior: 'smooth' });
};
return (
{children}
{Array.from({ length: n }).map((_, i) => (
);
}
function Home({ nav, openSub, t, count, events, live }) {
const rawEyebrow = (t.eyebrowCustom && t.eyebrowCustom.trim()) ? t.eyebrowCustom : t.eyebrow;
const eyebrowText = rawEyebrow.replace('{n}', count);
const ledeText = LEDES[t.lede] || LEDES["Standing invite"];
return (
{eyebrowText}
The Group Chat:
IRL
{ledeText}
Adds to Google · Apple · Outlook — auto-updates forever
{live &&
● Live — these plans come straight from our Google Calendar
}
{events.slice(0, 3).map((ev) => (
))}
All year, one calendar
One calendar, zero group-chat chaos.
Subscribe and the agenda lives in the calendar you already check. New plans appear automatically — no “wait, when is that?” ever again.
Memories
{GC.MEMORIES.map((m) => (
))}
);
}
function Agenda({ nav, events }) {
return (
All year · 2026
The agenda
Everything we’ve committed to, in order. Tap any plan to see what to expect.
{events.map((ev) => (
))}
);
}
function EventDetail({ ev, nav, share, addCal, rsvp, rsvpOn }) {
return (
{ev.kind}
{ev.title}
{ev.blurb}
{I.cal}{ev.when.split(' · ').slice(0, 2).join(' · ')}
{ev.when.split(' · ')[2] && {I.clock}{ev.when.split(' · ')[2]}}
{ev.place && {I.pin}{ev.place}}
What to expect
{ev.expect}
{ev.facts && ev.facts.length > 0 && (
{ev.facts.map(([k, v], i) =>
)}
)}
{ev.bring && ev.bring.length > 0 && (
Bring
{ev.bring.map((b, i) => - {I.chk}
{b}
)}
)}
{/* RSVP HOOK */}
{/* RSVP HOOK */}
{ev.tickets && (
)}
);
}
function Memories({ nav }) {
return (
The ones we’ve done
Memories
Photo galleries from past hangs. Open one, then share it however you like.
{GC.MEMORIES.map((m) => (
))}
);
}
function MemoryDetail({ m, openLb, share }) {
return (
{m.dateLabel} · {m.media.length} photos
{m.title}
{m.subtitle} — “{m.catchphrase}.”
{m.media.map((md, i) => (
))}
Song of the dayadd the crew’s pick →
);
}
function Footer() {
return (
);
}
/* ---------------- subscribe sheet ---------------- */
function SubscribeSheet({ onClose, toast }) {
const [copied, setCopied] = useState(false);
const pick = (provider) => {
Track.hit('subscribe', 'calendar', provider, provider);
if (provider === 'google') window.open(GC.CAL.google, '_blank', 'noopener');
else if (provider === 'apple') { window.location.href = GC.CAL.webcal; }
else if (provider === 'copy') {
navigator.clipboard?.writeText(GC.CAL.ics).then(() => {}, () => {});
setCopied(true); toast('Calendar link copied'); setTimeout(() => { setCopied(false); onClose(); }, 1100); return;
}
toast('Opening ' + (provider === 'google' ? 'Google Calendar' : 'Calendar') + '…');
setTimeout(onClose, 600);
};
return (
e.stopPropagation()}>
Subscribe to the calendar
One tap. New plans sync automatically — you’ll never have to ask “when is that?” again.
);
}
/* ---------------- lightbox ---------------- */
function Lightbox({ m, idx, setIdx, onClose }) {
const n = m.media.length;
const md = m.media[idx];
const go = (d) => setIdx((idx + d + n) % n);
useEffect(() => {
const onKey = (e) => {
if (e.key === 'ArrowRight') go(1);
else if (e.key === 'ArrowLeft') go(-1);
else if (e.key === 'Escape') onClose();
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [idx]);
const touchX = useRef(null);
const onTouchStart = (e) => { touchX.current = e.touches[0].clientX; };
const onTouchEnd = (e) => {
if (touchX.current == null) return;
const dx = e.changedTouches[0].clientX - touchX.current;
if (Math.abs(dx) > 40) go(dx < 0 ? 1 : -1);
touchX.current = null;
};
return (
{n > 1 ? (idx + 1) + ' / ' + n : ''}
e.stopPropagation()} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>
{md.type === 'video'
?
:
}
{n > 1 && (
)}
);
}
/* ====================================================================
ROOT
==================================================================== */
function App() {
const [route, setRoute] = useState({ name: 'home', id: null });
const [stack, setStack] = useState([]);
const [sub, setSub] = useState(false);
const [lb, setLb] = useState(null); // {idx}
const [toastMsg, setToastMsg] = useState('');
const [rsvps, setRsvps] = useState({});
const [scrolled, setScrolled] = useState(false);
const toastT = useRef(0);
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
// apply accent palette (stays within the blues)
useEffect(() => {
const r = document.documentElement, p = t.accent;
if (Array.isArray(p)) { r.style.setProperty('--acc', p[0]); r.style.setProperty('--acc-ink', p[1]); r.style.setProperty('--acc-soft', p[2]); }
}, [t.accent]);
// Events: curated list now; swap to the LIVE Google Calendar when a key is set.
const [events, setEvents] = useState(() => GC.upcomingEvents());
const [live, setLive] = useState(false);
useEffect(() => {
let alive = true;
GC.fetchEvents().then((evs) => { if (alive && evs && evs.length) { setEvents(evs); setLive(true); } });
return () => { alive = false; };
}, []);
const count = events.length;
const toast = (msg) => { setToastMsg(msg); clearTimeout(toastT.current); toastT.current = setTimeout(() => setToastMsg(''), 1700); };
const nav = (name, id = null) => {
setStack((s) => [...s, route]);
setRoute({ name, id });
if (name === 'event') Track.hit('open', 'event', id, (GC.EVENTS.find((e) => e.id === id) || {}).title);
if (name === 'memory') Track.hit('open', 'memory', id, (GC.MEMORIES.find((e) => e.id === id) || {}).title);
};
const back = () => { setStack((s) => { if (!s.length) { setRoute({ name: 'home', id: null }); return s; } const prev = s[s.length - 1]; setRoute(prev); return s.slice(0, -1); }); };
// reset scroll + header state on route change
useEffect(() => { window.scrollTo(0, 0); setScrolled(false); }, [route]);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 6);
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
const ev = route.name === 'event' ? (events.find((e) => e.id === route.id) || GC.EVENTS.find((e) => e.id === route.id)) : null;
const mem = route.name === 'memory' ? GC.MEMORIES.find((e) => e.id === route.id) : null;
const shareEvent = () => {
Track.hit('share', 'event', ev.id, ev.title);
const url = location.href.split('#')[0] + '#event/' + ev.id;
if (navigator.share) navigator.share({ title: ev.title, text: 'Come to ' + ev.title + ' with the crew!', url }).catch(() => {});
else { navigator.clipboard?.writeText(url); toast('Link copied — paste in the chat'); }
};
const addCal = () => { Track.hit('addcal', 'event', ev.id, ev.title); window.open(GC.gcalLink(ev), '_blank', 'noopener'); toast('Opening calendar…'); };
const rsvp = () => { setRsvps((r) => ({ ...r, [ev.id]: !r[ev.id] })); if (!rsvps[ev.id]) Track.hit('rsvp', 'event', ev.id, ev.title); };
const shareMem = (kind) => { Track.hit('share', 'memory', mem.id, mem.title); if (kind === 'link') { navigator.clipboard?.writeText(location.href.split('#')[0] + '#memory/' + mem.id); toast('Link copied'); } else if (kind === 'story') toast('Story image ready to post'); };
// header config
let head = null;
if (route.name !== 'home') {
const titles = { agenda: 'The Agenda', memories: 'Memories', event: ev && ev.title, memory: mem && mem.title };
const action = route.name === 'event' ? shareEvent : route.name === 'memory' ? (() => shareMem('link')) : null;
head = ;
}
return (