// screens-home.jsx — Home screen (the centerpiece) // ───────────────────────────────────────────────────────────── // Sunday-morning livestream configuration. // // To enable the auto-swap that turns the hero into a live YouTube embed // during Sunday worship hours, set LIVESTREAM_YT_CHANNEL to the YouTube // channel ID for the church (the long string starting with "UC", found in // YouTube Studio → Settings → Channel → Advanced settings, or visible in // the URL when you go to youtube.com/channel/UC...). // // Leave as the empty string to disable. While disabled, the hero stays on // whatever variant you've selected in Tweaks, even on Sunday morning. // ───────────────────────────────────────────────────────────── const LIVESTREAM_YT_CHANNEL = 'UC_v5i5K2orztVKT5sF67gbA'; // Hours window in America/Chicago (Central Time). 0 = Sunday. const LIVESTREAM_WINDOW = { weekday: 0, startHour: 10, startMinute: 0, endHour: 11, endMinute: 45, }; // ───────────────────────────────────────────────────────────── // Featured-image hero entries. // // Drop a poster JPG/PNG into assets/ (any name), then add an entry below // with startDate/endDate (inclusive, ISO yyyy-mm-dd, America/Chicago). // While today's date falls inside any entry's range, the home page hero // auto-swaps to that poster, overriding both the live-stream auto-swap // and the Tweaks-panel hero choice. Multiple overlapping entries: the // FIRST matching one wins (so put time-sensitive entries first). // // Examples (commented out — uncomment and edit when you want to feature one): // // { // src: 'assets/featured-easter-2026.jpg', // headline: 'Easter Sunday', // subhead: 'Sunrise service · 6:30 am · then Worship at 10:30', // link: '/events', // startDate:'2026-03-30', // endDate: '2026-04-05', // }, // ───────────────────────────────────────────────────────────── const FEATURED_IMAGES = [ // Add entries here. ]; function activeFeaturedImage() { const local = new Date(new Date().toLocaleString('en-US', { timeZone: 'America/Chicago' })); const today = local.toISOString().slice(0, 10); // yyyy-mm-dd for (const f of FEATURED_IMAGES) { if (!f || !f.src) continue; if (f.startDate && today < f.startDate) continue; if (f.endDate && today > f.endDate) continue; return f; } return null; } // ───────────────────────────────────────────────────────────── // Bulletin download. // // Each Sunday's bulletin lives at assets/bulletins/YYYY-MM-DD.pdf, // where the date is the upcoming Sunday in Central Time. The // BulletinDownload component below probes that file with a HEAD // request on mount; if it 200s, the download button renders. If // 404, the component renders nothing (no broken link, no clutter). // // To post a new week's bulletin: drop the PDF in assets/bulletins/ // named with the Sunday's date (e.g. 2026-05-10.pdf), commit and push. // The button auto-appears on the home page. // ───────────────────────────────────────────────────────────── function upcomingSundayIsoDates(count = 12) { // Returns the next `count` Sunday dates (today inclusive if today is Sunday) // in America/Chicago, ISO yyyy-mm-dd. // // Important: format the date using LOCAL methods, not toISOString(). The // toISOString() method converts to UTC first — which silently shifts the // date forward by one day after about 7 PM Central. That bug caused the // bulletin probe to look for the wrong date and silently miss the file. const local = new Date(new Date().toLocaleString('en-US', { timeZone: 'America/Chicago' })); const day = local.getDay(); const addThis = day === 0 ? 0 : 7 - day; const dates = []; const cur = new Date(local); cur.setDate(cur.getDate() + addThis); const fmt = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`; for (let i = 0; i < count; i++) { dates.push(fmt(cur)); cur.setDate(cur.getDate() + 7); } return dates; } function BulletinDownload({ theme, setModal }) { // Auto-discovers the bulletin: probes the next 12 Sundays and uses the // first PDF that exists. Drop any future Sunday's PDF into the // assets/bulletins/ folder and it surfaces here automatically — no // code changes needed week to week. const [available, setAvailable] = React.useState(null); // { url, date } | null React.useEffect(() => { let cancelled = false; const dates = upcomingSundayIsoDates(12); (async () => { for (const date of dates) { const url = `assets/bulletins/${date}.pdf`; try { // cache: 'no-store' forces a fresh network roundtrip every time, // bypassing both the browser's HTTP cache and any service-worker // cache that might be holding a stale "not found" response from // before the bulletin PDF was uploaded. const r = await fetch(url, { method: 'HEAD', cache: 'no-store' }); if (cancelled) return; // Verify the response is ACTUALLY a PDF, not HTML rewritten by // Azure's 404 → web.html fallback. A missing file would look "ok" // by HTTP status but ship Content-Type: text/html. const ctype = (r.headers.get('content-type') || '').toLowerCase(); if (r.ok && ctype.includes('application/pdf')) { setAvailable({ url, date }); return; } } catch (e) {} } if (!cancelled) setAvailable(null); })(); return () => { cancelled = true; }; }, []); if (!available) return null; const labelDate = (() => { try { return new Date(available.date + 'T12:00:00').toLocaleDateString('en-US', { timeZone: 'America/Chicago', weekday: 'short', month: 'short', day: 'numeric', }); } catch (e) { return available.date; } })(); // Header label: "This Sunday's" if it's the upcoming Sunday, else "Upcoming". const thisSun = upcomingSundayIsoDates(1)[0]; const isThisSunday = available.date === thisSun; const kicker = isThisSunday ? "†   This Sunday's Bulletin   †" : "† Upcoming Bulletin †"; // Tapping the card opens the in-page PDF viewer modal. If the modal // system isn't wired up for some reason, fall back to opening the PDF // in a new tab via window.open. const handleClick = () => { if (setModal) { setModal({ kind: 'pdf', url: available.url, title: 'Order of Worship · ' + labelDate, }); } else { window.open(available.url, '_blank', 'noopener,noreferrer'); } }; return (
); } function isLivestreamHour() { if (!LIVESTREAM_YT_CHANNEL) return false; const local = new Date(new Date().toLocaleString('en-US', { timeZone: 'America/Chicago' })); if (local.getDay() !== LIVESTREAM_WINDOW.weekday) return false; const mins = local.getHours() * 60 + local.getMinutes(); const start = LIVESTREAM_WINDOW.startHour * 60 + LIVESTREAM_WINDOW.startMinute; const end = LIVESTREAM_WINDOW.endHour * 60 + LIVESTREAM_WINDOW.endMinute; return mins >= start && mins <= end; } // Sunday-morning easter egg: a soft banner that appears only on Sunday between // 8am and noon Central, inviting visitors to that morning's worship and showing // the day's key verse. Dismissable, with dismissal tied to today's date so it // can come back next Sunday. function SundayMorningGreeting({ theme }) { const [dismissed, setDismissed] = React.useState(true); React.useEffect(() => { // Get the current time in America/Chicago, regardless of host TZ. const now = new Date(); const local = new Date(now.toLocaleString('en-US', { timeZone: 'America/Chicago' })); const isSunday = local.getDay() === 0; const hour = local.getHours(); const inWindow = isSunday && hour >= 8 && hour < 12; if (!inWindow) { setDismissed(true); return; } // Check localStorage for today-specific dismissal const key = 'mumc.sundayGreet.' + local.toISOString().slice(0, 10); try { if (localStorage.getItem(key) === '1') { setDismissed(true); return; } } catch (e) {} setDismissed(false); }, []); if (dismissed) return null; let kv = null; try { kv = (typeof getKeyVerse === 'function') ? getKeyVerse() : null; } catch (e) {} const dismiss = () => { try { const local = new Date(new Date().toLocaleString('en-US', { timeZone: 'America/Chicago' })); localStorage.setItem('mumc.sundayGreet.' + local.toISOString().slice(0, 10), '1'); } catch (e) {} setDismissed(true); }; return (
†
This morning · Worship at 10:30
{kv ? ( <>
"{kv.text}"
{kv.cite} · {kv.sundayName}
) : (
You are welcome to join us in the sanctuary.
)}
); } function HomeScreen({ theme, onNav, setModal }) { // countdown to next Sunday 10:30am (Sunday School at 9:30) const [now, setNow] = React.useState(new Date()); React.useEffect(() => { const id = setInterval(() => setNow(new Date()), 1000); return () => clearInterval(id); }, []); const next = nextSunday(); const total = 7 * 24 * 3600 * 1000; const remaining = Math.max(0, next.getTime() - now.getTime()); const fillPct = 1 - remaining / total; const days = Math.floor(remaining / (24 * 3600 * 1000)); const hours = Math.floor((remaining % (24 * 3600 * 1000)) / (3600 * 1000)); const mins = Math.floor((remaining % (3600 * 1000)) / 60000); const secs = Math.floor((remaining % 60000) / 1000); return (
{/* HERO — priority: featured image (date-windowed) → livestream (Sunday-morning auto-swap) → tweaks-panel selection. */} {(() => { const featured = activeFeaturedImage(); if (featured) return ; const effectiveHero = isLivestreamHour() ? 'livestream' : theme.hero; switch (effectiveHero) { case 'manuscript': return ; case 'verse': return ; case 'image': return ; case 'livestream': return ; case 'countdown': return ; default: return ; } })()} {/* Pray with us button */}
{/* Chalice + countdown only — between Pray-with-us and The Lord's Day. Skipped when the hero is already Manuscript (which contains the same chalice/countdown internally) so it doesn't duplicate. */} {theme.hero !== 'manuscript' && (
)} {/* This Sunday's bulletin (only renders if a PDF exists for the date) */} {/* QUICK ACTIONS — illuminated index */}
The Index · Tap to enter
{/* THIS WEEK — schedule list */}
{/* COLLECT — moved up directly under This Week */}
{/* HYMN OF THE WEEK — rotates by liturgical season */} setModal && setModal('hymn')} />
{/* LECTIONARY — today's readings */} {/* EXAMEN — appears after 6 PM (the traditional evening practice) */} setModal && setModal('examen')} /> {/* Push notification opt-in (renders nothing if unsupported / unconfigured). The component renders its own MissalRule so the whole section disappears gracefully on browsers that can't subscribe. */} {/* Year wheel */}
{/* FOOTER */}
Monticello United Methodist
130 East Broad Street
Monticello, Mississippi
— soli Deo gloria —
); } // ───────────────────────────────────────────────────────────── // ChaliceCountdown — just the chalice + d/h/m ticker box, used standalone // on the home page as well as inside the Manuscript hero variant. // ───────────────────────────────────────────────────────────── // AddToCalendar — generates a standards-compliant .ics (iCalendar) file as a // data URL. Tapping the button on iOS pops the Calendar's "Add Event" sheet, // on Android Chrome opens the Google Calendar add-event flow, on desktop // downloads the file (which double-click opens in Apple Calendar / Outlook / // Google Calendar). // // The event is set to recur weekly forever — one tap subscribes the visitor // to every Sunday Worship 10:30 am Central. They can edit or delete from // their own calendar app. function buildSundayWorshipIcs() { // Compute next Sunday at 10:30 AM Central, in Central wall-clock terms. const local = new Date(new Date().toLocaleString('en-US', { timeZone: 'America/Chicago' })); const day = local.getDay(); const addThis = day === 0 ? 0 : 7 - day; const sun = new Date(local); sun.setDate(sun.getDate() + addThis); const yyyy = sun.getFullYear(); const mm = String(sun.getMonth() + 1).padStart(2, '0'); const dd = String(sun.getDate()).padStart(2, '0'); const dateOnly = `${yyyy}${mm}${dd}`; const dtstart = `${dateOnly}T103000`; const dtend = `${dateOnly}T113000`; const dtstamp = new Date().toISOString().replace(/[-:]/g, '').replace(/\.\d{3}/, ''); const uid = `sunday-worship-${dateOnly}@monticelloumc.church`; // Minimal but valid VTIMEZONE for America/Chicago (CST/CDT). const lines = [ 'BEGIN:VCALENDAR', 'VERSION:2.0', 'PRODID:-//Monticello UMC//Website//EN', 'CALSCALE:GREGORIAN', 'METHOD:PUBLISH', 'BEGIN:VTIMEZONE', 'TZID:America/Chicago', 'BEGIN:STANDARD', 'DTSTART:19701101T020000', 'RRULE:FREQ=YEARLY;BYMONTH=11;BYDAY=1SU', 'TZOFFSETFROM:-0500', 'TZOFFSETTO:-0600', 'TZNAME:CST', 'END:STANDARD', 'BEGIN:DAYLIGHT', 'DTSTART:19700308T020000', 'RRULE:FREQ=YEARLY;BYMONTH=3;BYDAY=2SU', 'TZOFFSETFROM:-0600', 'TZOFFSETTO:-0500', 'TZNAME:CDT', 'END:DAYLIGHT', 'END:VTIMEZONE', 'BEGIN:VEVENT', `UID:${uid}`, `DTSTAMP:${dtstamp}`, `DTSTART;TZID=America/Chicago:${dtstart}`, `DTEND;TZID=America/Chicago:${dtend}`, 'RRULE:FREQ=WEEKLY;BYDAY=SU', 'SUMMARY:Sunday Worship at Monticello UMC', 'LOCATION:Monticello United Methodist Church\\, 130 East Broad Street\\, Monticello\\, Mississippi 39654', 'DESCRIPTION:Sunday Worship at 10:30 am. Sunday School at 9:30 am. All are welcome.\\nmonticelloumc.church', 'URL:https://monticelloumc.church/', 'STATUS:CONFIRMED', 'TRANSP:OPAQUE', 'END:VEVENT', 'END:VCALENDAR', ]; return lines.join('\r\n'); } function AddToCalendar({ theme }) { // Memoize so the data URL is stable across re-renders (avoids the .ics // being re-computed every tick of the countdown). const href = React.useMemo(() => { const ics = buildSundayWorshipIcs(); return 'data:text/calendar;charset=utf-8,' + encodeURIComponent(ics); }, []); return (
†   Add to my calendar   †
); } function ChaliceCountdown({ theme, fillPct, days, hours, mins, secs }) { return (
Until the gathering
{days}d · {String(hours).padStart(2,'0')}h · {String(mins).padStart(2,'0')}m
Sunday Worship · 10:30 in the morning
); } // ───────────────────────────────────────────────────────────── // HERO: Manuscript page — the headline hero // ───────────────────────────────────────────────────────────── function HeroManuscript({ theme, fillPct, days, hours, mins, secs }) { return (
{/* corner ornament — abstract Gothic arch with Celtic cross, line only */}
{/* Gothic pointed arch */} {/* base */} {/* Celtic cross — vertical bar */} {/* horizontal crossbar */} {/* nimbus halo at intersection */} {/* tiny center dot */}
Anno Domini 2026 · {theme.season.name}

Monticello
United Methodist

{`The ancient Way · the living Word · the abundant Life`}
{/* The Chalice + countdown — the "hero metric" */}
Until the gathering
{days}d · {String(hours).padStart(2,'0')}h · {String(mins).padStart(2,'0')}m
Sunday Worship · 10:30 in the morning
); } // HERO: Verse of the day function HeroVerse({ theme, setModal }) { // Pull the key verse for this Sunday from the lectionary helper. // Falls back to a generic seasonal verse if no curated one exists. let verse = 'Comfort, comfort my people, says your God. Speak tenderly to Jerusalem, and proclaim that her warfare is ended.'; let ref = 'Isaiah 40 : 1—2'; let kicker = '†   A reading from the prophet Isaiah'; try { if (typeof getKeyVerse === 'function') { const k = getKeyVerse(); if (k && k.text && k.cite) { verse = k.text; ref = k.cite; kicker = `†   The verse for ${k.sundayName}`; } } } catch (e) {} const first = (verse || 'A').charAt(0); const rest = verse.slice(1); return (
{kicker}
{rest}
{ref}
{setModal && ( )}
); } // HERO: Image (sanctuary) — hand-tinted photograph of the actual sanctuary function HeroImageSunlit({ theme }) { return (
†   The sanctuary   †

Monticello UMC

{`The ancient Way  ·  the living Word  ·  the abundant Life`}
 ); } // HERO: Livestream // HERO: Featured image — a configurable poster for a date-windowed event. function HeroFeatured({ theme, featured, onNav }) { const isInternal = (featured.link || '').startsWith('/'); const handleTap = (e) => { if (!featured.link) return; if (isInternal && onNav) { e.preventDefault(); onNav(featured.link.replace(/^\//, '')); } }; const Wrapper = featured.link ? 'a' : 'div'; return ( {featured.headline {(featured.headline || featured.subhead) && (
{featured.headline && (
{featured.headline}
)} {featured.subhead && (
{featured.subhead}
)}
)} ); } function HeroLivestream({ theme }) { // Ring the church bell once per session when the livestream hero appears. // Stored in sessionStorage so refreshing during service doesn't re-toll. React.useEffect(() => { try { if (sessionStorage.getItem('mumc.bellRung') === '1') return; sessionStorage.setItem('mumc.bellRung', '1'); window.playSound && window.playSound('church-bell'); } catch (e) {} }, []); const live = isLivestreamHour(); const haveStream = !!LIVESTREAM_YT_CHANNEL; // No channel configured yet — show the original placeholder with a quiet // setup hint visible only in the source comment, not on the page. if (!haveStream) { return (
◉ Sunday Worship

Sunday Worship
10:30 in the morning

); } // YouTube's persistent channel-live embed: shows the current live stream if // streaming, or the most recent broadcast/upload if not. We skip autoplay // outside the live window so the user has to tap to start playback. const embedSrc = `https://www.youtube.com/embed/live_stream?channel=${encodeURIComponent(LIVESTREAM_YT_CHANNEL)}` + (live ? '&autoplay=1' : ''); return (
{live ? '◉ Live now' : '◉ Sunday Worship'}

{live ? 'We are gathered.' : <>Sunday Worship
10:30 in the morning}