// components/Chrome.jsx — Top nav, announcement bar, footer, tweaks, shared UI
// Hook: re-render when language changes
const useLang = () => {
const [lang, setLangState] = React.useState(() => (window.__getLang && window.__getLang()) || 'en');
React.useEffect(() => {
if (!window.__onLangChange) return;
return window.__onLangChange(setLangState);
}, []);
return lang;
};
const PAGE_KEYS = [
{ id: 'home', key: 'nav.home' },
{ id: 'about', key: 'nav.about' },
// { id: 'team', key: 'nav.team' },
{ id: 'resources', key: 'nav.resources' },
// { id: 'intercessors', key: 'nav.intercessors' },
// { id: 'calendar', key: 'nav.calendar' },
// { id: 'prayer', key: 'nav.prayer' },
{ id: 'give', key: 'nav.give' },
];
const getPages = () => PAGE_KEYS.map(p => ({ id: p.id, label: (window.t && window.t(p.key)) || p.id }));
// Kept for legacy: some imports may still read PAGES
const PAGES = PAGE_KEYS.map(p => ({ id: p.id, label: p.id }));
const AnnouncementBar = () => {
const [time, setTime] = React.useState(new Date());
React.useEffect(() => {
const id = setInterval(() => setTime(new Date()), 1000);
return () => clearInterval(id);
}, []);
const sac = time.toLocaleTimeString('en-US', { timeZone: 'America/Los_Angeles', hour: 'numeric', minute: '2-digit', hour12: true });
const [nextEvent, setNextEvent] = React.useState(null);
React.useEffect(() => {
fetch('/api/events')
.then(r => r.json())
.then(({ events }) => {
const now = Date.now();
const upcoming = (events || []).find(e => e.date && new Date(e.date).getTime() > now);
if (upcoming) setNextEvent(upcoming);
})
.catch(() => {});
}, []);
const nextEventMsg = nextEvent
? `✦ Next gathering: ${nextEvent.name} · ${new Date(nextEvent.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', timeZone: 'America/Los_Angeles' })} · ${nextEvent.location || ''}`
: '✦ Next citywide gathering: check the calendar for upcoming events';
const messages = [
nextEventMsg,
'✦ "Pray without ceasing" · 1 Thessalonians 5:17',
'✦ Launching January 4, 2027 · register your church today',
'✦ One church, one day, every other month · covering Greater Sacramento in prayer',
'✦ "If my people, who are called by my name, will humble themselves and pray" · 2 Chronicles 7:14',
];
const stream = [...messages, ...messages];
return (
LIVE · {sac} · SACRAMENTOLIVE
{stream.map((m, i) => {m})}
);
};
// Language switch — segmented EN / ES pill
const LangSwitch = ({ lang, onChange, block = false }) => {
const opts = [
{ id: 'en', label: 'EN' },
{ id: 'es', label: 'ES' },
];
return (
{opts.map(o => {
const active = lang === o.id;
return (
);
})}
);
};
const TopNav = ({ current, onNavigate }) => {
const [open, setOpen] = React.useState(false);
const lang = useLang();
const pages = getPages();
const go = (p) => { setOpen(false); onNavigate(p); };
const setLang = (l) => window.__setLang && window.__setLang(l);
return (
);
};
const PreFooterCTA = ({ onNavigate }) => {
const lang = useLang(); // eslint-disable-line no-unused-vars
const T = window.t || (k => k);
return (
{T('prefooter.eyebrow')}
{T('prefooter.title')}
);
};
const Footer = ({ onNavigate }) => {
const lang = useLang(); // eslint-disable-line no-unused-vars
const T = window.t || (k => k);
const neighborhoodsLine = T('footer.neighborhoodsLine');
return (
);
};
// Image with Unsplash URL and loading + placeholder fallback
const Img = ({ src, alt, label, style = {}, ratio = '4/3', objectPosition = 'center' }) => (
{label && (
{label}
)}
);
// Monospace image placeholder (used on interior pages)
const ImgSlot = ({ label, ratio = '4/3', style = {} }) => (
[ {label} ]
);
Object.assign(window, { TopNav, Footer, PreFooterCTA, AnnouncementBar, Img, ImgSlot, PAGES });