/* global React */ /* Nav — sticky top bar with Products dropdown. Accepts a `current` prop (page slug) to highlight the active link. Pages are flat at root level so all hrefs are simple basenames. */ function NavDropdown({ current, onBookDemo }) { const [open, setOpen] = React.useState(false); const ref = React.useRef(null); const closeTimerRef = React.useRef(null); React.useEffect(() => { if (!open) return; const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; const onKey = (e) => { if (e.key === "Escape") setOpen(false); }; document.addEventListener("mousedown", onDoc); document.addEventListener("keydown", onKey); return () => { document.removeEventListener("mousedown", onDoc); document.removeEventListener("keydown", onKey); }; }, [open]); React.useEffect(() => () => { if (closeTimerRef.current) clearTimeout(closeTimerRef.current); }, []); const handleEnter = () => { if (closeTimerRef.current) { clearTimeout(closeTimerRef.current); closeTimerRef.current = null; } setOpen(true); }; const handleLeave = () => { if (closeTimerRef.current) clearTimeout(closeTimerRef.current); closeTimerRef.current = setTimeout(() => setOpen(false), 180); }; const active = current === "source" || current === "pace" || current === "products"; return (
{/* dropdown panel */}
{[ { href: "source.html", title: "VSG Source", sub: "Procurement that replies for you.", status: "Live", variant: "live", slug: "source", }, { href: "pace.html", title: "VSG Pace", sub: "Production scheduling that thinks ahead.", status: "Q3 2026", variant: "upcoming", slug: "pace", }, ].map((p) => { const isActive = current === p.slug; return ( { if (!isActive) e.currentTarget.style.background = "var(--paper-2)"; }} onMouseLeave={(e) => { if (!isActive) e.currentTarget.style.background = "transparent"; }} >
{p.title}
{p.sub}
{p.status} ); })}
(e.currentTarget.style.background = "var(--paper-2)")} onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")} > Core Both products run on VSG ACE — the per-customer AI core →
); } function NavServicesDropdown({ current }) { const [open, setOpen] = React.useState(false); const ref = React.useRef(null); const closeTimerRef = React.useRef(null); React.useEffect(() => { if (!open) return; const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; const onKey = (e) => { if (e.key === "Escape") setOpen(false); }; document.addEventListener("mousedown", onDoc); document.addEventListener("keydown", onKey); return () => { document.removeEventListener("mousedown", onDoc); document.removeEventListener("keydown", onKey); }; }, [open]); // Cleanup any pending close timer on unmount React.useEffect(() => () => { if (closeTimerRef.current) clearTimeout(closeTimerRef.current); }, []); const handleEnter = () => { if (closeTimerRef.current) { clearTimeout(closeTimerRef.current); closeTimerRef.current = null; } setOpen(true); }; const handleLeave = () => { if (closeTimerRef.current) clearTimeout(closeTimerRef.current); closeTimerRef.current = setTimeout(() => setOpen(false), 180); }; const active = current === "services" || current === "automation" || current === "bespoke"; const items = [ { href: "automation.html", title: "AI Workflow Automation", sub: "Two-to-four week sprints. Fixed scope. Live in production.", slug: "automation", }, { href: "bespoke.html", title: "Bespoke Software", sub: "Custom software for the problem only YOU have.", slug: "bespoke", }, ]; return (
{items.map((p) => { const isActive = current === p.slug; return ( { if (!isActive) e.currentTarget.style.background = "var(--paper-2)"; }} onMouseLeave={(e) => { if (!isActive) e.currentTarget.style.background = "transparent"; }} >
{p.title}
{p.sub}
); })}
(e.currentTarget.style.background = "var(--paper-2)")} onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")} > Or Workflow not listed? Tell us what to build →
); } function Nav({ onBookDemo, current = "" }) { const [scrolled, setScrolled] = React.useState(false); const [mobileOpen, setMobileOpen] = React.useState(false); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 8); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); // Lock body scroll while the mobile menu is open React.useEffect(() => { if (mobileOpen) { const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; const onKey = (e) => { if (e.key === "Escape") setMobileOpen(false); }; document.addEventListener("keydown", onKey); return () => { document.body.style.overflow = prev; document.removeEventListener("keydown", onKey); }; } }, [mobileOpen]); const links = [ { href: "ace.html", label: "VSG ACE", slug: "ace" }, { href: "how-it-works.html", label: "How it works", slug: "how" }, { href: "about.html", label: "About", slug: "about" }, ]; const mobileLinks = [ { href: "source.html", label: "VSG Source", group: "Products" }, { href: "pace.html", label: "VSG Pace", group: "Products" }, { href: "automation.html", label: "AI Workflow Automation", group: "Services" }, { href: "bespoke.html", label: "Bespoke Software", group: "Services" }, { href: "ace.html", label: "VSG ACE", group: "Company" }, { href: "how-it-works.html", label: "How it works", group: "Company" }, { href: "about.html", label: "About", group: "Company" }, { href: "contact.html", label: "Contact", group: "Company" }, ]; return (
VSG
Contact {/* Mobile hamburger — hidden on desktop via CSS */}
{/* Mobile menu overlay */} {mobileOpen && (
{/* Top bar: logo + close */}
VSG
{/* Grouped links */}
{["Products", "Services", "Company"].map((group) => ( ))}
{/* Sticky CTA at bottom */}
hello@vsgtech.co.za
)}
); } Object.assign(window, { Nav, NavDropdown });