/* global React, ReactDOM, window */ /* CartoonforChrist v2 β€” shared shell. * TopStrip, CascadeMenu, Footer (newsletter + contact + colophon), * useContestCountdown hook, and renderV2Page() wrapper that wires * FxLayer + TweaksPanel. * * Each page calls renderV2Page({ active: "watch"|"draw"|..., body: ({lang, motion}) => <>... }) */ const { useState: useStateV2, useEffect: useEffectV2 } = React; const { SECTIONS: V2_SECTIONS, LINKS: V2_LINKS } = window.CFC; /* ---------- Animated cascade menu ---------- */ function CascadeMenu({ open, onClose, current }) { useEffectV2(() => { if (!open) return; const onKey = (e) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", onKey); const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = prev; }; }, [open, onClose]); return (
00

Home

Back to the CartoonforChrist homepage
{current === "home" ? "β€’" : "β†’"}
🏠
 {V2_SECTIONS.map((s, i) => (
{s.num}

{s.title}

{s.sub}
{current === s.id ? "β€’" : "β†’"}
{s.glyph}
 ))}
press esc or click anywhere to close
); } /* ---------- TopStrip (sticky brand bar + MENU button) ---------- */ function TopStrip({ menuOpen, onOpen, tickerCopy }) { const ticker = tickerCopy || ( <> ✦ CARTOONFORCHRIST  β—  KIDS SINGING CONTEST 2026 Β· ENTRIES OPEN  β—  LAST DATE 31 JULY 2026  β—  ORIGINAL SONGS Β· HINDI + ENGLISH  β—  5 YEARS OF CDBS ARCHIVED  β—  FAMILY-BUILT WITH LOVE  β—  ); return (
CartoonforChrist
Helping children connect with God
); } /* ---------- Spotify logo glyph ---------- */ function SpotifyGlyph() { return ( ); } /* ---------- Floating social rail (left edge of every page) ---------- */ function SideRail({ motion = true }) { return ( ); } /* ---------- Countdown to Contest 2026 deadline ---------- */ function useContestCountdown() { const [t, setT] = useStateV2({ d: 0, h: 0, m: 0, s: 0, expired: false }); useEffectV2(() => { const tick = () => { const now = new Date(); // 31 July 2026, 23:59 IST = 18:29 UTC const target = new Date(Date.UTC(2026, 6, 31, 18, 29, 0)); let ms = target - now; const expired = ms <= 0; if (ms < 0) ms = 0; const d = Math.floor(ms / 86400000); const h = Math.floor((ms / 3600000) % 24); const m = Math.floor((ms / 60000) % 60); const s = Math.floor((ms / 1000) % 60); setT({ d, h, m, s, expired }); }; tick(); const id = setInterval(tick, 1000); return () => clearInterval(id); }, []); return t; } /* ---------- Form submission β†’ Google Apps Script (Sheet + Gmail) ---------- */ // Posts as text/plain so the browser sends a "simple" request (no CORS // preflight); the Apps Script reads e.postData.contents. We use no-cors mode // because Apps Script web apps don't return CORS headers β€” the request still // reaches the server; we just can't read the opaque response, so a resolved // fetch is treated as success. A rejected fetch (network down) shows the error. async function submitToForms(payload) { const url = V2_LINKS.formsEndpoint; if (!url) { console.warn("[forms] LINKS.formsEndpoint is not set in shared/v2-data.jsx β€” submission NOT saved:", payload); return; // resolve so the visitor still sees the thank-you } await fetch(url, { method: "POST", mode: "no-cors", headers: { "Content-Type": "text/plain;charset=utf-8" }, body: JSON.stringify(payload), }); } function NewsletterForm() { const [state, setState] = useStateV2("idle"); // idle | sending | done | error const onSubmit = async (e) => { e.preventDefault(); const email = (e.target.elements.email.value || "").trim(); if (!email) return; setState("sending"); try { await submitToForms({ type: "newsletter", email, page: location.pathname, ts: new Date().toISOString() }); setState("done"); } catch (err) { console.error("[forms] newsletter submit failed:", err); setState("error"); } }; if (state === "done") { return (
Welcome to the family ✨ Your first letter arrives the first week of next month.
); } return ( <>
{state === "error" ? Hmm, that didn't go through β€” please try again, or email us directly. : Reaches you first week of every month}
); } function MessageForm() { const [state, setState] = useStateV2("idle"); const onSubmit = async (e) => { e.preventDefault(); const message = (e.target.elements.message.value || "").trim(); const email = (e.target.elements.email.value || "").trim(); if (!message) return; setState("sending"); try { await submitToForms({ type: "message", message, email, page: location.pathname, ts: new Date().toISOString() }); setState("done"); } catch (err) { console.error("[forms] message submit failed:", err); setState("error"); } }; if (state === "done") { return (
Thank you β€” we'll write back soon ✨ We read every message personally.
); } return ( <>