/* global React, I18N, FMS_EVENTS, Logo, FB */ const { useState, useEffect, useRef } = React; function FbGlyph({ size = 14, color = "currentColor" }) { return ( ); } // ============================================================ // Header // ============================================================ function SiteHeader({ lang, setLang }) { const t = I18N[lang].nav; const [scrolled, setScrolled] = useState(false); const [menuOpen, setMenuOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 12); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); useEffect(() => { if (!menuOpen) return; const onKey = (e) => { if (e.key === "Escape") setMenuOpen(false); }; document.addEventListener("keydown", onKey); document.body.style.overflow = "hidden"; return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; }; }, [menuOpen]); const items = [ { id: "about", label: t.about }, { id: "news", label: t.news }, { id: "gallery", label: t.gallery }, { id: "monday", label: t.monday }, { id: "contact", label: t.contact }, ]; const goto = (id) => { setMenuOpen(false); requestAnimationFrame(() => { const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: "smooth", block: "start" }); }); }; return ( <>
{ e.preventDefault(); window.scrollTo({ top: 0, behavior: "smooth" }); }} style={{ display: "flex", alignItems: "center", gap: 12, textDecoration: "none" }}>
Fraen a Mammen
Schëtter · 1984
{["lb", "de", "fr", "en"].map((l) => ( ))}
{/* Burger button — visible on mobile only via responsive.css */}
{/* Mobile drawer — sibling of header so it isn't trapped by header's backdrop-filter containing block */}
{ {lb:"Sprooch", de:"Sprache", fr:"Langue", en:"Language"}[lang] }
{["lb", "de", "fr", "en"].map((l) => ( ))}
); } // ============================================================ // Hero // ============================================================ function Hero({ lang }) { const t = I18N[lang].hero; const goto = (id) => document.getElementById(id)?.scrollIntoView({ behavior: "smooth" }); return (
{t.eyebrow}

{t.title[0]}
{t.title[1]}

{t.lead}

{/* Three-photo strip below the lead */}
{[ { src: "assets/Pictures/fms-event.jpg", alt: "FMS event at market with stands and participants" }, { src: "assets/Pictures/fms-craft.jpg", alt: "Handmade fabric craft mouse figure" }, { src: "assets/Pictures/fms-xmas-decor.jpg", alt: "FMS Christmas decorations and ornaments" }, ].map((p, i) => (
{p.alt}
))}
); } // ============================================================ // About // ============================================================ function About({ lang }) { const t = I18N[lang].about; return (
{t.eyebrow}

{t.title}

{t.p1}

{t.p2}

{t.p3}

{/* Stats row */}
{t.stats.map((s, i) => (
{s.n}
{s.l}
))}
); } // ============================================================ // News — Facebook page posts // ============================================================ function News({ lang }) { const t = I18N[lang].news; const [state, setState] = useState({ status: "loading", posts: [], error: null }); useEffect(() => { let cancelled = false; setState({ status: "loading", posts: [], error: null }); FB.fetchFacebook("/" + FB.PAGE_ID + "/posts?fields=id,message,created_time,full_picture,permalink_url,attachments,reactions.summary(true),comments.summary(true),shares") .then((res) => { if (!cancelled) setState({ status: "ok", posts: res.data || [], error: null }); }) .catch((err) => { if (!cancelled) setState({ status: "error", posts: [], error: String(err) }); }); return () => { cancelled = true; }; }, [lang]); const [featured, ...rest] = state.posts; return (
{t.eyebrow}

{t.title}

{t.followUs} →
{state.status === "loading" && (
{[0, 1, 2].map((i) => (
))}
)} {state.status === "error" && (
Unable to load posts. {state.error}
)} {state.status === "ok" && state.posts.length === 0 && (

{t.empty}

)} {state.status === "ok" && state.posts.length > 0 && (
{rest.slice(0, 4).map((p) => ( ))}
)} {state.status === "ok" && state.posts.length > 5 && ( )}
); } function PostCard({ post, lang, t, featured }) { if (!post) return null; const img = FB.fbPostImage(post); const album = FB.fbPostAlbum(post); const when = FB.fbRelativeTime(post.created_time, lang); const likes = post.reactions?.summary?.total_count ?? 0; const comments = post.comments?.summary?.total_count ?? 0; const shares = post.shares?.count ?? 0; const excerptLen = featured ? 280 : 140; return ( { e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.boxShadow = "var(--shadow-2)"; }} onMouseLeave={(e) => { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "var(--shadow-1)"; }} > {img && (
{album && album.length > 1 && (
+{album.length} {t.photos}
)}
)}
{when}

{FB.fbExcerpt(post.message, excerptLen)}

♥ {likes} 💬 {comments} {shares > 0 && ↗ {shares}} {t.readMore} →
); } // ============================================================ // Gallery — Facebook /{page-id}/photos // ============================================================ function Gallery({ lang }) { const t = I18N[lang].gallery; const [photos, setPhotos] = useState(null); const [lightboxIndex, setLightboxIndex] = useState(null); const [imageLoading, setImageLoading] = useState(false); useEffect(() => { let cancelled = false; FB.fetchFacebook("/" + FB.PAGE_ID + "/photos?type=uploaded&fields=id,name,created_time,images,link,album") .then((res) => { if (!cancelled) setPhotos(res.data || []); }) .catch((err) => { if (!cancelled) setPhotos([]); }); return () => { cancelled = true; }; }, [lang]); useEffect(() => { if (lightboxIndex !== null) setImageLoading(true); }, [lightboxIndex]); useEffect(() => { if (lightboxIndex === null) return; const handleKey = (e) => { if (e.key === "Escape") setLightboxIndex(null); if (e.key === "ArrowLeft") setLightboxIndex((i) => (i - 1 + photos.length) % photos.length); if (e.key === "ArrowRight") setLightboxIndex((i) => (i + 1) % photos.length); }; window.addEventListener("keydown", handleKey); return () => window.removeEventListener("keydown", handleKey); }, [lightboxIndex, photos]); return ( ); } // ============================================================ // Monday — invitation panel // ============================================================ function Monday({ lang }) { const t = I18N[lang].monday; return (
{t.eyebrow}

{t.title}

{t.lead}

{ {lb:"Wéini",de:"Wann",fr:"Quand",en:"When"}[lang] }
{t.when}
{ {lb:"Wou",de:"Wo",fr:"Où",en:"Where"}[lang] }
{t.where}
{t.cta} →
Hands working with yarn at a wooden table
); } // ============================================================ // Footer // ============================================================ function SiteFooter({ lang }) { const t = I18N[lang].footer; return ( ); } // expose Object.assign(window, { SiteHeader, Hero, About, News, Gallery, Monday, SiteFooter });