/* Shared chrome — nav, footer, marquee, reveal observer */
const { useState, useEffect, useRef, useMemo } = React;
/* === Tiny SVG monogram logo === */
function Monogram({ size = 32, color = "currentColor" }) {
return (
);
}
/* === Top utility bar === */
function UtilityBar() {
return (
AVAILABLE · REPLIES IN 1–3H
·
EST. 2020 · INDIA · USA · UAE · CANADA
);
}
/* === Main nav === */
function Nav({ active = "home", currentPath = "" }) {
const [open, setOpen] = useState(false);
const [menu, setMenu] = useState(null);
const navItems = [
{ id: "home", label: "Home", href: "index.html" },
{ id: "services", label: "Services", href: "services.html", drop: true },
{ id: "case-studies", label: "Case Studies", href: "case-studies.html" },
{ id: "salary-guide", label: "Salary Guide", href: "salary-guide.html" },
{ id: "media", label: "Media", href: "media.html" },
{ id: "about", label: "About", href: "about.html" },
];
const services = window.WR.services;
const grouped = useMemo(() => {
const g = {};
services.forEach(s => { (g[s.cat] = g[s.cat] || []).push(s); });
return g;
}, [services]);
return (
);
}
/* === Footer === */
function Footer() {
const { brand, offices, services } = window.WR;
const grouped = {};
services.forEach(s => { (grouped[s.cat] = grouped[s.cat] || []).push(s); });
return (
);
}
/* === Reveal observer (mounts on first call) === */
function useReveal() {
useEffect(() => {
const els = document.querySelectorAll('[data-reveal]');
if (!('IntersectionObserver' in window)) { els.forEach(el => el.classList.add('in')); return; }
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();
}, []);
}
/* Expose */
Object.assign(window, { Nav, Footer, UtilityBar, Monogram, useReveal });