// app.jsx - 4-section shell with i18n (EN/PL) + language toggle
const { useState, useEffect, useRef, useCallback, createContext, useContext } = React;
const LangCtx = createContext({ lang: "en", t: window.DICT.en, setLang: () => {} });
const useT = () => useContext(LangCtx);
window.useT = useT;
const NAV_IDS = ["ai", "app", "web", "it"];
const NAV_NUMS = { ai: "01", app: "02", web: "03", it: "04" };
function useIsMobile() {
const [m, setM] = useState(false);
useEffect(() => {
const mq = window.matchMedia("(max-width: 820px)");
const on = () => setM(mq.matches);
on();
mq.addEventListener("change", on);
return () => mq.removeEventListener("change", on);
}, []);
return m;
}
function App() {
const [lang, setLangRaw] = useState(() => window.detectLang());
const setLang = (l) => { setLangRaw(l); window.saveLang(l); document.documentElement.lang = l; };
useEffect(() => { document.documentElement.lang = lang; }, [lang]);
const t = window.DICT[lang];
const [world, setWorldRaw] = useState("neutral");
const [active, setActive] = useState(null);
const isMobile = useIsMobile();
const lockRef = useRef(false);
const setWorld = useCallback((id) => {
if (lockRef.current) return;
setWorldRaw(id);
}, []);
useEffect(() => {
if (world === "neutral") window.applyVars(window.NEUTRAL.vars);
else {
const w = window.WORLDS.find(w => w.id === world);
if (w) window.applyVars(w.vars);
}
}, [world]);
useEffect(() => {
let rafId = null;
const update = () => {
if (lockRef.current) return;
const vh = window.innerHeight;
let best = null, bestScore = 0;
NAV_IDS.forEach(id => {
const el = document.getElementById(id);
if (!el) return;
const rect = el.getBoundingClientRect();
const visible = Math.max(0, Math.min(rect.bottom, vh) - Math.max(rect.top, 0));
const score = visible / vh;
if (score > bestScore) { bestScore = score; best = id; }
});
// Apply vars synchronously; iOS Safari defers React commits during momentum scroll.
if (best && bestScore > 0.3) {
const w = window.WORLDS.find(x => x.id === best);
if (w) window.applyVars(w.vars);
setWorld(best);
setActive(best);
} else {
window.applyVars(window.NEUTRAL.vars);
setWorld("neutral");
setActive(null);
}
};
const onScroll = () => {
if (rafId != null) return;
rafId = requestAnimationFrame(() => { rafId = null; update(); });
};
window.addEventListener("scroll", onScroll, { passive: true });
update();
return () => {
window.removeEventListener("scroll", onScroll);
if (rafId != null) cancelAnimationFrame(rafId);
};
}, [setWorld]);
const scrollTo = (id) => {
const el = document.getElementById(id);
if (!el) return;
setWorld(id); setActive(id);
lockRef.current = true;
el.scrollIntoView({ behavior: "smooth", block: "start" });
setTimeout(() => { lockRef.current = false; }, 700);
};
return (
!isMobile && setWorld("ai")} t={t} />
!isMobile && setWorld("app")} t={t} />
!isMobile && setWorld("web")} t={t} />
!isMobile && setWorld("it")} t={t} />
);
}
function LangToggle({ lang, setLang }) {
return (
/
);
}
function TopBar({ isMobile, active, onNav, lang, setLang, t }) {
const [open, setOpen] = useState(false);
const NAV = NAV_IDS.map(id => ({ id, num: NAV_NUMS[id], label: t.nav[id] }));
return (
<>
{isMobile && (
)}
);
}
function Hero({ world, setWorld, onJump, isMobile, t }) {
const NAV = NAV_IDS.map(id => ({ id, num: NAV_NUMS[id], label: t.nav[id] }));
return (
!isMobile && setWorld("neutral")}>
{t.kicker}
Adrian
Antosiak.
{isMobile ? t.hero.lead_tap : t.hero.lead_hover}
{t.hero.index}
{NAV.map(n => (
-
))}
{isMobile ? t.hero.hint_tap : t.hero.hint_hover}
{t.hero.ribbon.repeat(5)}
);
}
function Contact({ t }) {
return (
);
}
ReactDOM.createRoot(document.getElementById("root")).render();