// Shared components — Logo, Nav, Footer primitives, Reveal hook
const LOGO_SRC = 'assets/logo-mark.png';
function Logo({ size = 40, dark = false }) {
return (
Above & Beyond
Janitorial · Est. 2004
);
}
function Nav({ dark = false }) {
const [scrolled, setScrolled] = React.useState(false);
React.useEffect(() => {
const on = () => setScrolled(window.scrollY > 40);
on(); window.addEventListener('scroll', on);
return () => window.removeEventListener('scroll', on);
}, []);
const bg = scrolled
? (dark ? 'rgba(11,20,48,.92)' : 'rgba(245,243,236,.92)')
: 'transparent';
const color = dark ? '#fff' : 'var(--ink)';
const border = scrolled ? '1px solid ' + (dark ? 'rgba(255,255,255,.08)' : 'var(--mist)') : '1px solid transparent';
const items = ['Services', 'Industries', 'About', 'Area', 'Contact'];
const anchors = ['#services', '#industries', '#about', '#area', '#contact'];
const [wide, setWide] = React.useState(typeof window !== 'undefined' ? window.innerWidth >= 1080 : true);
React.useEffect(() => {
const on = () => setWide(window.innerWidth >= 1080);
on(); window.addEventListener('resize', on);
return () => window.removeEventListener('resize', on);
}, []);
return (
);
}
// Reveal on scroll
function useReveal() {
React.useEffect(() => {
const els = document.querySelectorAll('.fade-up');
const io = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.classList.add('in');
io.unobserve(e.target);
}
});
}, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });
els.forEach(el => io.observe(el));
return () => io.disconnect();
}, []);
}
// Section header bar
function SectionEyebrow({ n, label }) {
return (
{n}
{label}
);
}
function Chip({ children }) {
return (
{children}
);
}
// Duotone image — navy shadows, paper highlights
function DuotoneImage({ src, alt, style, label }) {
return (
{label &&
{label}
}
);
}
Object.assign(window, { Logo, Nav, useReveal, SectionEyebrow, Chip, DuotoneImage, LOGO_SRC });