);
}
function SiteHeader({ page, onNav }) {
// Genuinely transparent glass: the pill inverts instead of thickening, so it stays
// see-through over the white hero and over the black sections alike.
// Keyed to what is actually behind the pill: any element tagged data-light-ground
// whose box still reaches past the pill's bottom edge keeps the header inverted.
// Ink is decided per item, from what sits directly behind that item. A light block
// may declare data-light-until="<0–1>": only that left fraction of its width is light
// (the hero is white on the left and falls to black on the right).
const headRef = React.useRef(null);
const [lightMap, setLightMap] = React.useState({});
const [split, setSplit] = React.useState(null); // % across the pill where the light ground ends
React.useEffect(() => {
const el = document.getElementById('scroll');
const read = () => {
const root = headRef.current;
if (!root) return;
const blocks = [...document.querySelectorAll('[data-light-ground]')].map((b) => ({
r: b.getBoundingClientRect(), from: parseFloat(b.getAttribute('data-light-from') || '0'), until: parseFloat(b.getAttribute('data-light-until') || '1'),
}));
const next = {};
root.querySelectorAll('[data-ink]').forEach((item) => {
const r = item.getBoundingClientRect();
const cx = r.left + r.width / 2, cy = r.top + r.height / 2;
next[item.getAttribute('data-ink')] = blocks.some((b) =>
cy > b.r.top && cy < b.r.bottom && cx > b.r.left + b.r.width * b.from && cx < b.r.left + b.r.width * b.until);
});
setLightMap((prev) => (JSON.stringify(prev) === JSON.stringify(next) ? prev : next));
const pr = root.getBoundingClientRect();
const hit = blocks.find((b) => pr.top + pr.height / 2 > b.r.top && pr.top + pr.height / 2 < b.r.bottom);
const s = hit ? Math.round(((hit.r.left + hit.r.width * hit.until - pr.left) / pr.width) * 100) : null;
setSplit((prev) => (prev === s ? prev : s));
};
read();
const t = setTimeout(read, 300);
if (!el) return () => clearTimeout(t);
el.addEventListener('scroll', read, { passive: true });
window.addEventListener('resize', read);
return () => { clearTimeout(t); el.removeEventListener('scroll', read); window.removeEventListener('resize', read); };
}, [page]);
const DARK_INK = { ink: 'var(--mono-950)', halo: '0 0 10px rgba(255,255,255,.95),0 1px 2px rgba(255,255,255,.95)' };
const LIGHT_INK = { ink: 'var(--white)', halo: '0 0 12px rgba(5,5,6,.9),0 1px 2px rgba(5,5,6,.9)' };
const inkFor = (key) => (lightMap[key] ? DARK_INK : LIGHT_INK);
const onLight = !!lightMap.mark;
const { ink, halo } = inkFor('mark');
return (
{/* one full-width glass bar: logo left, navigation right */}
{/* black pill matched to the logo's black round, running to the end of the bar; glass rim shows around it */}
);
}
function SiteFooter({ onNav }) {
return (
);
}
function MediaSlot({ label = 'Film placeholder', ratio = '16 / 9', children, style }) {
return (
Goldshine Media
LLP