/* global React */
const { useState, useEffect, useRef } = React;
/* ============================================
CUSTOM CURSOR (hidden on touch)
============================================ */
function CustomCursor() {
const dotRef = useRef(null);
const ringRef = useRef(null);
const [hovering, setHovering] = useState(false);
const [touch, setTouch] = useState(false);
useEffect(() => {
if (window.matchMedia('(hover: none)').matches) { setTouch(true); return; }
let dotX = 0, dotY = 0, ringX = 0, ringY = 0, mouseX = 0, mouseY = 0;
let raf;
const onMove = (e) => {
mouseX = e.clientX; mouseY = e.clientY;
const t = e.target;
setHovering(!!(t && t.closest && t.closest('a, button, .interactive, [data-cursor=hover]')));
};
const tick = () => {
dotX += (mouseX - dotX) * 0.6;
dotY += (mouseY - dotY) * 0.6;
ringX += (mouseX - ringX) * 0.18;
ringY += (mouseY - ringY) * 0.18;
if (dotRef.current) dotRef.current.style.transform = `translate(${dotX}px, ${dotY}px) translate(-50%, -50%)`;
if (ringRef.current) ringRef.current.style.transform = `translate(${ringX}px, ${ringY}px) translate(-50%, -50%)`;
raf = requestAnimationFrame(tick);
};
window.addEventListener('mousemove', onMove);
raf = requestAnimationFrame(tick);
return () => { window.removeEventListener('mousemove', onMove); cancelAnimationFrame(raf); };
}, []);
if (touch) return null;
return (<>
);
}
/* ============================================
LOGO LOCKUP — transparent horizontal logo (hex C mark + CODAGE wordmark)
height drives size; width auto-scales from the image's natural 16:9 ratio
============================================ */
function CodageWordmark({ size = 22 }) {
const h = Math.round(size * 2.4);
return (
);
}
/* ============================================
NAV — desktop split-pill + mobile drawer
============================================ */
function Nav({ current = 'home' }) {
const [scrolled, setScrolled] = useState(false);
const [hoverIdx, setHoverIdx] = useState(null);
const [open, setOpen] = useState(false);
const navRef = useRef(null);
const [underline, setUnderline] = useState({ left: 0, width: 0, opacity: 0 });
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 80);
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
useEffect(() => {
document.body.style.overflow = open ? 'hidden' : '';
return () => { document.body.style.overflow = ''; };
}, [open]);
// Full nav — used by mobile drawer
const links = [
{ label: 'Agents', href: 'Agents.html', key: 'agents' },
{ label: 'Use Cases', href: 'UseCases.html', key: 'usecases' },
{ label: 'Work', href: 'Work.html', key: 'work' },
{ label: 'Security', href: 'Security.html', key: 'security' },
{ label: 'Lab', href: 'Lab.html', key: 'lab' },
{ label: 'About', href: 'About.html', key: 'about' },
{ label: 'Contact', href: 'Contact.html', key: 'contact' },
];
// Desktop pill subset — drop 'usecases' (still reachable from /agents + homepage bento)
const desktopLinks = links.filter(l => l.key !== 'usecases');
useEffect(() => {
if (hoverIdx === null || !navRef.current) { setUnderline(u => ({ ...u, opacity: 0 })); return; }
const el = navRef.current.querySelectorAll('.nav-link')[hoverIdx];
if (el) {
const r = el.getBoundingClientRect();
const p = navRef.current.getBoundingClientRect();
setUnderline({ left: r.left - p.left, width: r.width, opacity: 1 });
}
}, [hoverIdx]);
const scale = scrolled ? 0.96 : 1;
return (<>
{/* Desktop */}
{/* Mobile */}
{/* Mobile drawer */}
);
}
Object.assign(window, { CustomCursor, CodageWordmark, Nav });