/* Nexpersona - Nav + Hero */
const { useState, useEffect, useRef, useCallback, useMemo } = React;
const THEME_KEY = 'nx_theme';
const LANG_KEY = 'nx_lang';
function useTheme() {
const [theme, setThemeState] = useState(() => {
if (typeof window === 'undefined') return 'light';
return localStorage.getItem(THEME_KEY) || 'light';
});
useEffect(() => {
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem(THEME_KEY, theme);
}, [theme]);
const toggle = () => setThemeState(t => (t === 'light' ? 'dark' : 'light'));
return [theme, toggle];
}
function useLang() {
const [lang, setLangState] = useState(() => localStorage.getItem(LANG_KEY) || 'EN');
useEffect(() => {
localStorage.setItem(LANG_KEY, lang);
document.documentElement.lang = lang.toLowerCase();
window.NXLang = lang;
window.dispatchEvent(new Event('nxlangchange'));
}, [lang]);
return [lang, setLangState];
}
function useReveal() {
useEffect(() => {
if (typeof IntersectionObserver === 'undefined') return;
const els = document.querySelectorAll('.reveal');
const io = new IntersectionObserver(entries => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.classList.add('in');
io.unobserve(e.target);
}
});
}, { threshold: 0.12 });
els.forEach(el => io.observe(el));
return () => io.disconnect();
});
}
function ThemeIcon({ theme }) {
if (theme === 'dark') {
return (
);
}
return (
);
}
function Nav({ theme, onToggleTheme, lang, onLang, onCTA }) {
const { t } = window.useT();
const [scrolled, setScrolled] = useState(false);
const [langOpen, setLangOpen] = useState(false);
const [mobileOpen, setMobileOpen] = useState(false);
const popRef = useRef(null);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 8);
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
useEffect(() => {
const onDoc = (e) => {
if (popRef.current && !popRef.current.contains(e.target)) setLangOpen(false);
};
document.addEventListener('mousedown', onDoc);
return () => document.removeEventListener('mousedown', onDoc);
}, []);
useEffect(() => {
document.body.style.overflow = mobileOpen ? 'hidden' : '';
return () => { document.body.style.overflow = ''; };
}, [mobileOpen]);
// Imperatively unlock scroll the instant a link is tapped, so the
// anchor jump that fires synchronously after the click isn't blocked
// by a still-locked body.
const closeMobile = () => {
setMobileOpen(false);
document.body.style.overflow = '';
};
return (
<>
Nexpersona
setLangOpen(o => !o)}>
{lang}
{window.NX_LANGS.map(l => (
{ onLang(l.code); setLangOpen(false); }}
>
{l.name}
{l.code}
))}
{ closeMobile(); onCTA(); }}
style={{height: 36}}
>
{t('nav.cta')}
→
setMobileOpen(o => !o)}
>
{mobileOpen ? (
{/* Drawer is rendered OUTSIDE .nav-wrap on purpose: when nav-wrap
is scrolled it picks up `backdrop-filter`, which makes it the
containing block for any `position: fixed` descendant - that
would clamp the drawer's `bottom: 0` to the nav's own height,
leaving the drawer ~0px tall and only the first item visible. */}
{/* Scrim - tap outside drawer to close */}
{mobileOpen && (
)}
);
}
// ---------- Hero animation (loader that evolves through 4 stages)
const HA_SCATTER = [
[12,14],[28,8],[44,18],[62,10],[82,16],[94,22],
[6,36],[22,32],[40,38],[58,30],[76,38],[92,32],
[16,56],[34,52],[52,60],[70,54],[88,58],
[10,78],[28,84],[46,80],[64,76],[82,84],[94,78],
[20,104],[56,108],[76,102],[38,98],[90,106],
];
const HA_WAVE = Array.from({length: 12}, (_, i) => [8 + i * 8, 62]);
const HA_GRID = (() => {
const out = [];
for (let j = 0; j < 5; j++) for (let i = 0; i < 6; i++) {
out.push([10 + i * 16, 15 + j * 24]);
}
return out;
})();
const HA_N = [
[24,22],[24,38],[24,54],[24,70],[24,86],[24,102],
[34.4,38],[44.8,54],[55.2,70],[65.6,86],
[76,22],[76,38],[76,54],[76,70],[76,86],[76,102],
];
function HeroAnim() {
const { t } = window.useT();
return (
{HA_SCATTER.map(([x, y], i) => (
{HA_GRID.map(([x, y], i) => (
{[1,2,3,4].map(n => (
{String(n).padStart(2,'0')}
{t(`hero.stage.${n}`)}
))}
);
}
function HeroEditorial({ onCTA }) {
const { t, tR } = window.useT();
return (
{t('hero.eyebrow')}
{t('hero.title.line1.a')} {' '}
{t('hero.title.line1.b')}
{t('hero.title.line2.a')} {' '}
{t('hero.title.line2.b')}
{t('hero.sub')}
{t('hero.meta.inhouse.k')}
{tR('hero.meta.inhouse.v')}
{t('hero.meta.based.k')}
{t('hero.meta.based.v')}
{t('hero.meta.avg.k')}
{tR('hero.meta.avg.v')}
);
}
function HeroTypeOnly({ onCTA }) {
const { t, tR } = window.useT();
return (
FIG. 01 - HERO / TYPEFORWARD
{tR('hero.typeonly.title')}
{t('hero.sub.short')}
);
}
function HeroGlow({ onCTA }) {
const { t, tR } = window.useT();
return (
{t('hero.glow.eyebrow')}
{tR('hero.glow.title')}
{t('hero.sub.short')}
);
}
function Hero({ variant, onCTA }) {
if (variant === 'typeonly') return
{tR('banner.text', { lang: matched.name })}
onAccept(detected)}>{t('banner.switch')}
×
);
}
function CursorAccent() {
const ref = useRef(null);
useEffect(() => {
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
if (window.matchMedia('(pointer: coarse)').matches) return;
const el = ref.current;
let raf = null;
let x = -9999, y = -9999, tx = -9999, ty = -9999;
const onMove = (e) => {
tx = e.clientX; ty = e.clientY;
el.style.opacity = '1';
if (!raf) raf = requestAnimationFrame(loop);
};
const loop = () => {
x += (tx - x) * 0.12;
y += (ty - y) * 0.12;
el.style.transform = `translate3d(${x - 280}px, ${y - 280}px, 0)`;
if (Math.abs(tx - x) > 0.5 || Math.abs(ty - y) > 0.5) {
raf = requestAnimationFrame(loop);
} else { raf = null; }
};
window.addEventListener('mousemove', onMove);
return () => window.removeEventListener('mousemove', onMove);
}, []);
return
;
}
window.NXNav = Nav;
window.NXHero = Hero;
window.NXLangBanner = LangBanner;
window.NXCursorAccent = CursorAccent;
window.useTheme = useTheme;
window.useLang = useLang;
window.useReveal = useReveal;