// MEGALIS — App shell: routing-by-scroll, active section tracking, Tweaks panel
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"theme": "dark",
"accent": "#E5423B",
"density": "default",
"showTicker": true,
"lang": "en",
"intro": "boot",
"bootHandoff": "settle",
"cascadeMotion": "slide",
"reelLoop": "slideshow",
"reelSpeed": 2
}/*EDITMODE-END*/;
const ACCENTS = [
"#E5423B", // signature red (default)
"#FF7A3D", // orange
"#E8E4DA", // mono ivory
"#00FF7F", // chroma green
"#1d5aff", // chroma blue
"#2d6bdd", // team blue
];
function App() {
const [active, setActive] = React.useState("about");
const [mobileOpen, setMobileOpen] = React.useState(false);
const [introPlaying, setIntroPlaying] = React.useState(true);
const [introId, setIntroId] = React.useState(0);
const armIntro = React.useCallback(() => {
setIntroId((n) => n + 1);
setIntroPlaying(true);
}, []);
const { TweaksPanel, TweakSection, TweakRadio, TweakToggle, TweakColor, TweakSelect, TweakSlider, TweakButton, useTweaks } = window;
const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
// Apply tweaks → body data-attrs + accent CSS var
React.useEffect(() => {
document.body.dataset.theme = tweaks.theme;
document.body.dataset.density = tweaks.density;
document.body.dataset.lang = tweaks.lang || 'en';
const hex = tweaks.accent;
document.documentElement.style.setProperty('--accent', hex);
const lum = perceivedLum(hex);
document.documentElement.style.setProperty('--accent-fg',
lum > 0.6 ? 'oklch(14% 0.005 60)' : 'oklch(98% 0.005 80)');
}, [tweaks.theme, tweaks.density, tweaks.accent, tweaks.lang]);
// Active section observer
React.useEffect(() => {
const sections = ["about","reel","contact","careers"]
.map(id => document.getElementById(id))
.filter(Boolean);
if (!sections.length) return;
const io = new IntersectionObserver((entries) => {
// Pick the section whose top crossed the threshold most recently
const visible = entries
.filter(e => e.isIntersecting)
.sort((a,b) => b.intersectionRatio - a.intersectionRatio);
if (visible[0]) setActive(visible[0].target.id);
}, {
rootMargin: "-40% 0px -55% 0px",
threshold: [0, 0.1, 0.3, 0.6],
});
sections.forEach(s => io.observe(s));
return () => io.disconnect();
}, []);
// Lock scroll when mobile menu open
React.useEffect(() => {
document.body.style.overflow = mobileOpen ? "hidden" : "";
return () => { document.body.style.overflow = ""; };
}, [mobileOpen]);
// Re-arm the intro whenever the variant changes so options can be compared.
React.useEffect(() => { armIntro(); }, [tweaks.intro, armIntro]);
// Lock scroll while the intro overlay is on screen
React.useEffect(() => {
if (introPlaying && tweaks.intro && tweaks.intro !== 'none') {
document.body.style.overflow = 'hidden';
} else if (!mobileOpen) {
document.body.style.overflow = '';
}
}, [introPlaying, tweaks.intro, mobileOpen]);
return (
setIntroPlaying(false)} />
);
}
// ─── helpers ──────────────────────────────────────────────────────────────
function perceivedLum(hex) {
const h = hex.replace('#','');
const r = parseInt(h.slice(0,2),16) / 255;
const g = parseInt(h.slice(2,4),16) / 255;
const b = parseInt(h.slice(4,6),16) / 255;
// Rec. 709 luma
return 0.2126*r + 0.7152*g + 0.0722*b;
}
ReactDOM.createRoot(document.getElementById("app")).render();