/* ============================================================ Tectus — notification bar, mega-menu nav, mobile menu ============================================================ */ const { Button: TButton, Badge: TBadge, Eyebrow: TEyebrow } = window.TectusDesignSystem_c42b34; /* ---------- Theme toggle (light / dark) ---------- */ function setTheme(t) { document.documentElement.setAttribute('data-theme', t); try { localStorage.setItem('tectus-theme', t); } catch (e) {} window.dispatchEvent(new CustomEvent('tectus-theme', { detail: t })); } function ThemeToggle() { const [theme, setLocal] = useState(() => document.documentElement.getAttribute('data-theme') || 'dark'); const toggle = () => { const next = theme === 'light' ? 'dark' : 'light'; setLocal(next); setTheme(next); }; const dark = theme !== 'light'; return ( ); } window.ThemeToggle = ThemeToggle; /* ---------- Rotating notification bar ---------- */ function NotificationBar({ messages }) { const [i, setI] = useState(0); const intervalRef = useRef(null); const touchStartX = useRef(null); const startInterval = React.useCallback(() => { clearInterval(intervalRef.current); intervalRef.current = setInterval(() => setI((p) => (p + 1) % messages.length), 5200); }, [messages.length]); useEffect(() => { startInterval(); return () => clearInterval(intervalRef.current); }, [startInterval]); const goTo = (idx) => { setI(idx); startInterval(); }; const goNext = () => goTo((i + 1) % messages.length); const goPrev = () => goTo((i - 1 + messages.length) % messages.length); const onTouchStart = (e) => { touchStartX.current = e.touches[0].clientX; }; const onTouchEnd = (e) => { if (touchStartX.current === null) return; const dx = e.changedTouches[0].clientX - touchStartX.current; if (Math.abs(dx) > 40) { dx < 0 ? goNext() : goPrev(); } touchStartX.current = null; }; const m = messages[i]; return (
{m.tag} {m.text} {m.cta}
{messages.map((_, idx) => (
); } /* ---------- Brand lockup ---------- */ function Brand({ size = 24 }) { const [theme, setLocal] = useState(() => document.documentElement.getAttribute('data-theme') || 'dark'); useEffect(function() { function onTheme(e) { setLocal(e.detail); } window.addEventListener('tectus-theme', onTheme); return function() { window.removeEventListener('tectus-theme', onTheme); }; }, []); const logoSrc = theme === 'light' ? asset('logoBlack', 'assets/tectus-logo-black.webp') : asset('logoWhite', 'assets/tectus-logo-white.webp'); return ( Tectus ); } /* ---------- Mega-menu panel ---------- */ function MegaPanel({ data, onNavigate }) { return (
{data.columns.map((col) => (
{col.heading}
{col.links.map((lnk) => ( {lnk.label} {lnk.desc} ))}
))} {/* Feature card */}
{data.feature.eyebrow}
{data.feature.title}

{data.feature.desc}
{data.feature.cta} {data.feature.secondary && ( {data.feature.secondary.label} )}
); } /* ---------- Desktop nav ---------- */ function Nav({ onOpenMobile }) { const [open, setOpen] = useState(null); const [scrolled, setScrolled] = useState(false); const closeTimer = useRef(null); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 8); onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); useEffect(() => { const onKey = (e) => e.key === 'Escape' && setOpen(null); window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, []); const openMenu = (g) => { clearTimeout(closeTimer.current); setOpen(g); }; const scheduleClose = () => { clearTimeout(closeTimer.current); closeTimer.current = setTimeout(() => setOpen(null), 120); }; const groups = Object.keys(SITEMAP); return (
Get Started }>Book a Demo
{/* Mega panel */}
clearTimeout(closeTimer.current)} onMouseLeave={scheduleClose} style={{ width: 'min(960px, calc(100vw - 48px))', background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-xl)', overflow: 'hidden', opacity: open ? 1 : 0, transform: open ? 'translateY(10px)' : 'translateY(0px)', transition: 'opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard)' }}> {open && (

{SITEMAP[open].intro}

setOpen(null)} />
)}
); } /* ---------- Mobile menu ---------- */ function MobileMenu({ open, onClose }) { const [expanded, setExpanded] = useState(null); const groups = Object.keys(SITEMAP); return (
{groups.map((g) => { const on = expanded === g; return (
{g}
{SITEMAP[g].columns.flatMap((c) => c.links).map((lnk) => ( {lnk.label} ))}
); })}
}>Book a Demo Get Started
); } Object.assign(window, { NotificationBar, Nav, MobileMenu, Brand });