)}
);
}
function useLang() { return useContext(LangCtx); }
function useT() {
const { lang } = useContext(LangCtx);
return (en, es) => (lang === "es" ? (es != null ? es : en) : en);
}
/* Optional helper: translate the active link label by route */
function LangToggle({ compact = false }) {
const { lang, setLang } = useLang();
return (
·
);
}
/* ============================================================
TOPBAR
============================================================ */
function TopBar({ active = "home" }) {
const [scrolled, setScrolled] = useState(false);
const t = useT();
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 20);
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
const link = (id, label, href) => (
{label}
);
return (
The 1 %
);
}
/* ============================================================
FOOTER
============================================================ */
function Footer() {
const t = useT();
return (
);
}
/* ============================================================
REVEAL HOOK — IntersectionObserver
============================================================ */
function useReveal() {
useEffect(() => {
const els = document.querySelectorAll(".reveal, .curtain");
// Reveal anything already in the viewport on mount (avoids stuck curtain over videos)
requestAnimationFrame(() => {
els.forEach((el) => {
const r = el.getBoundingClientRect();
if (r.top < window.innerHeight * 0.95 && r.bottom > 0) {
el.classList.add("is-in");
}
});
});
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
e.target.classList.add("is-in");
io.unobserve(e.target);
}
});
}, { threshold: 0.05, rootMargin: "0px 0px -5% 0px" });
els.forEach((el) => { if (!el.classList.contains("is-in")) io.observe(el); });
return () => io.disconnect();
}, []);
}
/* ============================================================
MARQUEE
============================================================ */
function Marquee({ items }) {
const all = [...items, ...items];
return (
{all.map((t, i) => (
{t}
✦
))}
);
}
/* ============================================================
SECTION HEAD
============================================================ */
function SectionHead({ title }) {
return (
);
}
/* ============================================================
YT EMBED — with fallback to thumbnail + link if blocked (Error 153)
On click: try to open the native YouTube app (iOS/Android), fall back to web.
============================================================ */
function openYouTube(e, vid) {
const ua = navigator.userAgent || "";
const isIOS = /iPad|iPhone|iPod/.test(ua) && !window.MSStream;
const isAndroid = /Android/.test(ua);
const webUrl = `https://www.youtube.com/watch?v=${vid}`;
if (!isIOS && !isAndroid) return; // desktop: let the default target="_blank" web link run
e.preventDefault();
const appUrl = isIOS
? `youtube://watch?v=${vid}`
: `intent://www.youtube.com/watch?v=${vid}#Intent;package=com.google.android.youtube;scheme=https;end`;
// If the app opens, the page goes hidden — cancel fallback. Otherwise, web after 1.4s.
const fallback = setTimeout(() => { window.location.href = webUrl; }, 1400);
document.addEventListener("visibilitychange", function once() {
if (document.hidden) clearTimeout(fallback);
document.removeEventListener("visibilitychange", once);
});
window.location.href = appUrl;
}
function YTEmbed({ vid, title }) {
const t = useT();
return (