// shared.jsx — single source of truth for chrome reused across pages: // icons, scroll-reveal, decorative QR, Nav, Footer. Reads window.HOME for // brand + nav + footer data. Loaded after home-content.jsx, before any // page-specific section/app scripts. Functions are top-level declarations so // they're globally reachable from other Babel scripts (separate scopes). const { useState: shS, useEffect: shE, useRef: shR } = React; // The exam platform owns auth. We link into it for login / profile / exam / // logout, and it redirects back here with ?u= so the nav can light up. const APP = "https://app.atlas-ai.academy"; /* ---------- shared icons ---------- */ const AICONS = { arrow: (p) => , check: (p) => , x: (p) => , search: (p) => , scale: (p) => , doc: (p) => , shield: (p) => , download: (p) => , quote: (p) => , panel: (p) => , lock: (p) => , open: (p) => }; window.AICONS = AICONS; /* ---------- scroll reveal (transform-only; never strands invisible) ---------- */ function useReveal() { shE(() => { const els = Array.from(document.querySelectorAll(".reveal:not(.in)")); if (!("IntersectionObserver" in window)) {els.forEach((e) => e.classList.add("in"));return;} const io = new IntersectionObserver((ents) => { ents.forEach((e) => {if (e.isIntersecting) {e.target.classList.add("in");io.unobserve(e.target);}}); }, { threshold: 0.12, rootMargin: "0px 0px -6% 0px" }); els.forEach((e) => io.observe(e)); const fb = setTimeout(() => document.querySelectorAll(".reveal").forEach((e) => {e.classList.add("in");e.style.opacity = "1";e.style.transform = "none";}), 2600); return () => {io.disconnect();clearTimeout(fb);}; }, []); } /* ---------- decorative QR (deterministic, not a real code) ---------- */ function QR() { const cells = []; const grid = 11; const seed = "10110100101001101011010010110100101101001011010010110100101101001011010010110100101101001011010010110100101101001"; let k = 0; for (let y = 0; y < grid; y++) for (let x = 0; x < grid; x++, k++) { const corner = x < 3 && y < 3 || x > grid - 4 && y < 3 || x < 3 && y > grid - 4; if (corner) continue; if (seed[k % seed.length] === "1") cells.push(); } const finder = (fx, fy) => ; return ( ); } /* ---------- NAV (shared across all pages) ---------- Homepage: scroll-spy highlights the section in view. Subpages: set to force-highlight one item and skip the scroll-spy. */ function Nav() { const A = window.HOME; const forced = typeof document !== "undefined" ? document.documentElement.getAttribute("data-active-nav") : null; const [scrolled, setScrolled] = shS(false); const [open, setOpen] = shS(false); const [active, setActive] = shS(forced || null); const [region, setRegion] = shS(false); const [atlasUser, setAtlasUser] = shS(() => { try { return localStorage.getItem('atlas_name') || ''; } catch { return ''; } }); const close = () => setOpen(false); shE(() => { const onScroll = () => setScrolled(window.scrollY > 10); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); shE(() => { if (forced) return; // subpage: keep the forced item lit, no scroll-spy const secs = Array.from(document.querySelectorAll("[data-nav]")); if (!secs.length) return; const io = new IntersectionObserver((ents) => { ents.forEach((e) => {if (e.isIntersecting) setActive(e.target.getAttribute("data-nav"));}); }, { rootMargin: "-45% 0px -50% 0px", threshold: 0 }); secs.forEach((s) => io.observe(s)); return () => io.disconnect(); }, []); // Capture ?u= handed back by the exam platform after login, store it, // then strip it from the URL so it doesn't linger / get shared. shE(() => { try { const p = new URLSearchParams(window.location.search); const u = p.get("u"); if (u) { localStorage.setItem("atlas_name", u); setAtlasUser(u); p.delete("u"); const qs = p.toString(); window.history.replaceState({}, "", window.location.pathname + (qs ? "?" + qs : "") + window.location.hash); } } catch (e) {/* ignore */} }, []); // close region popover on outside click / Esc shE(() => { if (!region) return; const onDoc = (e) => {if (!e.target.closest(".region")) setRegion(false);}; const onKey = (e) => {if (e.key === "Escape") setRegion(false);}; document.addEventListener("click", onDoc); document.addEventListener("keydown", onKey); return () => {document.removeEventListener("click", onDoc);document.removeEventListener("keydown", onKey);}; }, [region]); const renderMenu = (n) => ( ); const R = A.regions; // Auth links route through the exam platform; ?return= brings the user back // to this exact page (login adds ?u=name, logout clears the session). const ret = typeof window !== "undefined" ? encodeURIComponent(window.location.origin + window.location.pathname) : ""; const loginHref = APP + "/login?return=" + ret; const logoutHref = APP + "/logout?return=" + ret; const doLogout = (e) => { e.preventDefault(); try { localStorage.removeItem("atlas_name"); } catch (err) {/* ignore */} setAtlasUser(""); window.location.href = logoutHref; }; return (

A {A.brand.name}{A.brand.sub}

Verify a credential {atlasUser ? <> Take exam Hi, {atlasUser.split(' ')[0]} → Log out : <> Log in Sign up }

{region && }

{A.nav.map((n) => { const links = [].concat(...n.columns.map((c) => c.links)); return (

{n.label}

{links.map(([label, href], i) => {label} )} {n.intro && n.intro.cta && {n.intro.cta.label} →}

); })} Verify a credential {atlasUser ? <> My Account ({atlasUser.split(' ')[0]}) Take exam Log out : <> Log in Sign up } Get certified

{A.regions.note} — {A.regions.current} only

); } /* ---------- FOOTER (shared across all pages) ---------- */ function Footer() { const HC = window.HOME; const f = HC.footer; return ( ); } /* ---------- Breadcrumb (TOEFL/ETS-style reference-page trail) ---------- */ function Breadcrumb({ trail }) { // trail: array of [label, href] — last item is the current page (no link). return ( ); } /* ---------- "On this page" sticky jump-nav with scroll-spy (ETS reference layout) ---------- */ function OnThisPage({ items, title }) { // items: array of { id, label } const [active, setActive] = shS(items[0] && items[0].id); shE(() => { const secs = items.map((it) => document.getElementById(it.id)).filter(Boolean); if (!secs.length) return; const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) setActive(e.target.id); }); }, { rootMargin: "-45% 0px -50% 0px", threshold: 0 }); secs.forEach((s) => io.observe(s)); return () => io.disconnect(); }, []); return ( ); } /* ---------- Role-switch banner (org pages → individual) ---------- */ function RoleBanner() { return (

This page is for teams and organizations. Looking to get certified yourself? Get certified as an individual

); } /* ---------- Team upsell banner (individual pages → org pricing) ---------- */ function TeamBanner() { return (

Buying for your team or organization? View team plans

); } Object.assign(window, { useReveal, QR, Nav, Footer, Breadcrumb, OnThisPage, RoleBanner, TeamBanner }); /* ---------- six competency-dimension icons (index-aligned, verbatim site-wide) ---------- Shared so standard.html renders the same duotone marks as the homepage. */ window.DIM_ICONS = [ , , , , , ];