/* MarketingNav.jsx — sticky bilingual top nav with KO|EN toggle + Admin dropdown Change from DS reference: - 6 KR link labels (domain mapping) - KO|EN toggle pill (Year 2 multilingual prep) - "Admin ▾" dropdown that lets a visitor jump straight to either the Parent dashboard (sriki-parent/) or the Teacher dashboard (sriki-teacher/) — the bridge between marketing surface and authenticated surfaces. - Mobile menu (hamburger) added for sub-820px viewports. Rationale: spec §1.1. */ const MarketingNav = ({ onCta, onSignin, parentHref, teacherHref }) => { const t = window.useT(); const { lang, setLang } = React.useContext(window.LangContext); const [adminOpen, setAdminOpen] = React.useState(false); const [mobileOpen, setMobileOpen] = React.useState(false); const [scrolled, setScrolled] = React.useState(false); /* True while the nav strip is still painted over the dark cosmic hero. Flips to false the moment the hero scrolls off the top — at which point the nav swaps from "white text on glass" to "dark text on white" so it stays readable over the light content below. */ const [overHero, setOverHero] = React.useState(true); const [activeId, setActiveId] = React.useState(''); const adminRef = React.useRef(null); /* Track scroll for shadow + over-hero adaptive theming */ React.useEffect(() => { const NAV_H = 72; const onScroll = () => { setScrolled(window.scrollY > 8); const hero = document.getElementById('top'); if (!hero) { setOverHero(window.scrollY < 120); return; } const bottom = hero.getBoundingClientRect().bottom; /* Still dark while the hero covers more than the nav strip; flip a few pixels before the seam to avoid mid-transition flicker. */ setOverHero(bottom > NAV_H - 4); }; onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll, { passive: true }); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); }; }, []); /* Scroll-spy — highlight the nav item whose section is currently in view. Trigger-line approach: pick the last section whose top has scrolled above the trigger line (80px nav + 22% of viewport). Smoother and more predictable than IntersectionObserver here, because section heights vary (some are taller than viewport, some shorter) and a single trigger line gives one unambiguous answer per scroll position. rAF-throttled to keep scroll handler cheap. */ React.useEffect(() => { const ids = ['programs', 'curriculum', 'system', 'schedule', 'app', 'reviews']; let rafId = 0; const update = () => { rafId = 0; /* Hero zone — no active state until user scrolls into the first section. */ if (window.scrollY < 120) { setActiveId(prev => (prev === '' ? prev : '')); return; } /* If user has reached the bottom, force the last section. Catches the case where the last section is shorter than the trigger band and its top never crosses the trigger line. */ const atBottom = window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 4; if (atBottom) { setActiveId(prev => (prev === ids[ids.length - 1] ? prev : ids[ids.length - 1])); return; } const triggerY = 80 + window.innerHeight * 0.22; let current = ''; for (const id of ids) { const el = document.getElementById(id); if (!el) continue; if (el.getBoundingClientRect().top <= triggerY) current = id; } setActiveId(prev => (prev === current ? prev : current)); }; const onScroll = () => { if (rafId) return; rafId = requestAnimationFrame(update); }; update(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll, { passive: true }); return () => { if (rafId) cancelAnimationFrame(rafId); window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); }; }, []); /* Close the dropdown on outside click and on Escape */ React.useEffect(() => { if (!adminOpen) return; const onDoc = (e) => { if (!adminRef.current?.contains(e.target)) setAdminOpen(false); }; const onKey = (e) => { if (e.key === 'Escape') setAdminOpen(false); }; document.addEventListener('pointerdown', onDoc); document.addEventListener('keydown', onKey); return () => { document.removeEventListener('pointerdown', onDoc); document.removeEventListener('keydown', onKey); }; }, [adminOpen]); const links = [ ['nav.programs', '#programs'], ['nav.curriculum', '#curriculum'], ['nav.system', '#system'], ['nav.schedule', '#schedule'], ['nav.app', '#app'], ['nav.reviews', '#reviews'], ]; /* Mobile-only section indicator — slim band rendered under the main nav row, showing the current section name + a 6-dot progress strip. -1 / empty string while still over the hero (no active section yet). */ const activeIdx = activeId ? links.findIndex(([, href]) => href === `#${activeId}`) : -1; const activeLabel = activeIdx >= 0 ? t(links[activeIdx][0]) : ''; return ( ); }; const menuItem = { display: 'flex', alignItems: 'center', gap: 12, padding: '10px 10px', borderRadius: 8, textDecoration: 'none', color: 'inherit', transition: 'background 120ms cubic-bezier(0.25,0.1,0.25,1)', cursor: 'pointer', }; const iconBubble = { width: 36, height: 36, borderRadius: 9, background: 'rgba(109,40,217,0.10)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, }; const menuTitle = { display: 'block', fontFamily: 'var(--font-sans)', fontFeatureSettings: '"ss01"', fontSize: 14, fontWeight: 600, color: '#0B1727', lineHeight: 1.25, }; const menuSub = { display: 'block', fontSize: 11, color: '#475569', marginTop: 4, lineHeight: 1.45, fontWeight: 400, }; const mobileSubLink = { fontFamily: 'var(--font-sans)', fontFeatureSettings: '"ss01"', fontSize: 13, fontWeight: 500, color: '#475569', textDecoration: 'none', padding: '10px 16px', borderRadius: 8, display: 'block', }; window.MarketingNav = MarketingNav;