// ============================================
// Shared UI components
// ============================================
const { useState, useEffect, useMemo, useRef } = React;
function ThemeToggle() {
const [theme, setTheme] = useState(() => {
try { return localStorage.getItem("cine-theme") || "dark"; }
catch { return "dark"; }
});
useEffect(() => {
document.documentElement.setAttribute("data-theme", theme);
try { localStorage.setItem("cine-theme", theme); } catch {}
}, [theme]);
const isLight = theme === "light";
return (
setTheme(isLight ? "dark" : "light")}
aria-label={isLight ? "Switch to dark theme" : "Switch to light theme"}
title={isLight ? "Dunkles Theme" : "Helles Theme"}
>
{isLight ? (
/* Moon icon — click to go dark */
) : (
/* Sun icon — click to go light */
)}
);
}
function LanguageToggle() {
const { lang, setLang } = useLang();
const [open, setOpen] = useState(false);
const rootRef = useRef(null);
const current = LANGS.find((l) => l.code === lang) || LANGS[0];
const others = LANGS.filter((l) => l.code !== lang);
useEffect(() => {
if (!open) return;
const onDown = (e) => {
if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false);
};
const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
document.addEventListener("pointerdown", onDown);
document.addEventListener("keydown", onKey);
return () => {
document.removeEventListener("pointerdown", onDown);
document.removeEventListener("keydown", onKey);
};
}, [open]);
return (
setOpen((v) => !v)}
aria-haspopup="listbox"
aria-expanded={open}
aria-label={current.long}
title={current.long}
>
{current.label}
{others.map((l) => (
{ setLang(l.code); setOpen(false); }}
aria-label={l.long}
title={l.long}
role="option"
aria-selected={false}
tabIndex={open ? 0 : -1}
>
{l.label}
))}
);
}
function Nav({ route, onNavigate }) {
const { t, lang, setLang } = useLang();
const [filmsOpen, setFilmsOpen] = useState(false);
const [mobileOpen, setMobileOpen] = useState(false);
const [mobileFilmsOpen, setMobileFilmsOpen] = useState(false);
const closeTimer = useRef(null);
const openFilmsMenu = () => {
if (closeTimer.current) clearTimeout(closeTimer.current);
setFilmsOpen(true);
};
const scheduleClose = () => {
if (closeTimer.current) clearTimeout(closeTimer.current);
closeTimer.current = setTimeout(() => setFilmsOpen(false), 450);
};
const activeKey = route.name === "film" ? "films" : route.name;
// Close mobile menu on route change
useEffect(() => {
setMobileOpen(false);
setMobileFilmsOpen(false);
}, [route.name, route.id]);
// Lock body scroll while mobile menu is open
useEffect(() => {
if (mobileOpen) {
const prev = document.body.style.overflow;
document.body.style.overflow = "hidden";
return () => { document.body.style.overflow = prev; };
}
}, [mobileOpen]);
// Header-Hoehe live in CSS-Variable --header-h schreiben.
// Hero-Carousel und Film-Hero nutzen das fuer ihre margin-top/padding-top Tricks,
// damit Hero den ganzen Viewport fuellt ohne schwarzen Streifen unten — egal
// ob Header auf Desktop 72px oder auf Mobile 57px hoch ist.
useEffect(() => {
const header = document.querySelector("header.nav");
if (!header) return;
const sync = () => {
const h = header.offsetHeight || 72;
document.documentElement.style.setProperty("--header-h", h + "px");
};
sync();
let ro;
try {
ro = new ResizeObserver(sync);
ro.observe(header);
} catch (_) {
window.addEventListener("resize", sync);
}
window.addEventListener("orientationchange", sync);
return () => {
if (ro) ro.disconnect();
window.removeEventListener("resize", sync);
window.removeEventListener("orientationchange", sync);
};
}, []);
const go = (r) => {
setMobileOpen(false);
setMobileFilmsOpen(false);
onNavigate(r);
};
return (
);
}
function legalUrls(lang) {
if (lang === "de") return { imprint: "/impressum", privacy: "/datenschutz" };
return { imprint: "/imprint", privacy: "/privacy" };
}
function Footer() {
const { t, lang } = useLang();
const u = legalUrls(lang);
return (
);
}
// ============================================
// Asset slot primitives
//
// Each placeholder renders a visible, labeled box so Jonas can see
// exactly what file to drop in. When the matching `src` is filled,
// the real asset renders in place.
// ============================================
function Slot({ label, src, alt, aspect, className = "", style = {} }) {
const filled = typeof src === "string" && src.trim().length > 0;
return (
{filled ? (
) : (
{label}
)}
{slots.map((src, i) => {
const hasSrc = typeof src === "string" && src.trim().length > 0;
const isClickable = hasSrc && typeof onOpen === "function";
const filename = hasSrc ? `${film.slug}-still-${String(i + 1).padStart(2, "0")}.jpg` : "";
return (
);
})}
{Array.from({ length: 3 }, (_, i) => (
);
}
return (
{laurels.map((l, i) => {
const src = typeof l === "string" ? l : l.src;
const caption = typeof l === "object" ? l.caption : "";
const festival = typeof l === "object" ? l.festival : "";
return (
);
})}
{slots.map((src, i) => (
);
}
// ============================================
// Motion hooks
// ============================================
function useReveal(options = {}) {
const ref = useRef(null);
const { threshold = 0.15, once = true } = options;
useEffect(() => {
const el = ref.current;
if (!el) return;
if (typeof IntersectionObserver === "undefined") {
el.classList.add("is-visible");
return;
}
const io = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
el.classList.add("is-visible");
if (once) io.unobserve(el);
} else if (!once) {
el.classList.remove("is-visible");
}
});
},
{ threshold, rootMargin: "0px 0px -40px 0px" }
);
io.observe(el);
return () => io.disconnect();
}, [threshold, once]);
return ref;
}
function usePointerParallax(strength = 8) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
const parent = el.parentElement;
if (!parent) return;
let raf = 0;
let targetX = 0, targetY = 0, curX = 0, curY = 0;
const onMove = (e) => {
const rect = parent.getBoundingClientRect();
const nx = (e.clientX - rect.left) / rect.width - 0.5;
const ny = (e.clientY - rect.top) / rect.height - 0.5;
targetX = nx * strength;
targetY = ny * strength;
if (!raf) tick();
};
const onLeave = () => {
targetX = 0; targetY = 0;
if (!raf) tick();
};
const tick = () => {
curX += (targetX - curX) * 0.12;
curY += (targetY - curY) * 0.12;
el.style.setProperty("--px", curX.toFixed(2) + "px");
el.style.setProperty("--py", curY.toFixed(2) + "px");
if (Math.abs(targetX - curX) > 0.05 || Math.abs(targetY - curY) > 0.05) {
raf = requestAnimationFrame(tick);
} else {
raf = 0;
}
};
parent.addEventListener("pointermove", onMove);
parent.addEventListener("pointerleave", onLeave);
return () => {
parent.removeEventListener("pointermove", onMove);
parent.removeEventListener("pointerleave", onLeave);
if (raf) cancelAnimationFrame(raf);
};
}, [strength]);
return ref;
}
function Reveal({ as: Tag = "div", delay = 0, className = "", children, ...rest }) {
const ref = useReveal();
const delayClass = delay > 0 ? ` reveal-delay-${Math.min(3, delay)}` : "";
return (
{children}
);
}
function WordReveal({ text, className = "" }) {
const ref = useReveal();
const words = String(text || "").split(/\s+/).filter(Boolean);
return (
{words.map((w, i) => (
{w}
))}
);
}
function BackLink({ onClick }) {
const { t } = useLang();
return (
{t("btn.backToFilms")}
);
}
Object.assign(window, {
Nav,
Footer,
LanguageToggle,
ThemeToggle,
Slot,
PosterSlot,
HeroStillSlot,
StillsGrid,
LaurelsStrip,
LogoStrip,
BackLink,
Reveal,
WordReveal,
useReveal,
usePointerParallax,
legalUrls,
});