/* global React */
const { useState, useEffect, useCallback, useRef, createContext, useContext, useMemo } = React;
/* ===== App context: theme + lang ===== */
const AppCtx = createContext(null);
function AppProvider({ children }) {
const [theme, setTheme] = useState(() => {
return localStorage.getItem("stako-theme") || "dark";
});
const [lang, setLang] = useState(() => {
return localStorage.getItem("stako-lang") || "es";
});
useEffect(() => {
document.documentElement.dataset.theme = theme;
localStorage.setItem("stako-theme", theme);
}, [theme]);
useEffect(() => {
document.documentElement.lang = lang;
localStorage.setItem("stako-lang", lang);
}, [lang]);
// Activate reveal animations only after first paint, so the page is
// visible even if IntersectionObserver / transitions fail.
useEffect(() => {
const id = requestAnimationFrame(() => {
document.documentElement.dataset.revealMode = "active";
});
return () => cancelAnimationFrame(id);
}, []);
const t = useMemo(() => window.STAKO_I18N[lang], [lang]);
return (
{children}
);
}
const useApp = () => useContext(AppCtx);
/* ===== Reveal on scroll ===== */
function Reveal({ children, delay = 0, as: Tag = "div", className = "", ...rest }) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
let cancelled = false;
const fire = () => {
if (cancelled) return;
el.classList.add("in");
};
// First check: in viewport now? Reveal after delay.
const rect = el.getBoundingClientRect();
if (rect.top < window.innerHeight + 200 && rect.bottom > -200) {
const id = setTimeout(fire, delay);
return () => { cancelled = true; clearTimeout(id); };
}
// Otherwise, observe.
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
setTimeout(fire, delay);
io.unobserve(el);
}
});
}, { threshold: 0, rootMargin: "0px 0px -5% 0px" });
io.observe(el);
// Safety fallback: ensure it fires after 1.5s no matter what.
const safety = setTimeout(fire, 1500 + delay);
return () => { cancelled = true; clearTimeout(safety); io.disconnect(); };
}, [delay]);
return {children};
}
/* ===== Logo ===== */
function Logo({ size = 22 }) {
return (
Stako
);
}
/* ===== Theme + lang toggles ===== */
function ThemeToggle() {
const { theme, setTheme } = useApp();
return (
);
}
function LangToggle() {
const { lang, setLang } = useApp();
return (
·
);
}
/* ===== Nav ===== */
function Nav({ active = "home" }) {
const { t } = useApp();
const [scrolled, setScrolled] = useState(false);
const [open, setOpen] = useState(false);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 8);
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
const links = [
{ id: "home", href: "index.html", label: t.nav.home },
{ id: "books", href: "#", label: t.nav.books, soon: true },
{ id: "blog", href: "#", label: t.nav.blog, soon: true },
{ id: "bot", href: "bot.html", label: t.nav.bot },
];
return (
);
}
/* ===== Footer ===== */
function Footer() {
const { t } = useApp();
const f = t.footer;
return (
);
}
function FooterCol({ title, items }) {
return (
);
}
/* expose globals for other Babel scripts */
Object.assign(window, {
AppProvider, useApp, Reveal, Logo, Nav, Footer, ThemeToggle, LangToggle,
});