// Shared UI: Nav, Footer, primitives
const { useState, useEffect, useRef, useMemo, useCallback } = React;
// ─────────────────────────────────────────────────────────────
// Reveal-on-scroll
// ─────────────────────────────────────────────────────────────
function useReveal() {
const ref = useRef(null);
useEffect(() => {
const el = ref.current; if (!el) return;
const io = new IntersectionObserver((entries) => {
entries.forEach(e => { if (e.isIntersecting) { el.classList.add('in'); io.disconnect(); } });
}, { threshold: 0.08 });
io.observe(el);
return () => io.disconnect();
}, []);
return ref;
}
function Reveal({ children, delay = 0, as: As = "div", ...rest }) {
const ref = useReveal();
return (
{children}
);
}
// ─────────────────────────────────────────────────────────────
// Brand mark
// ─────────────────────────────────────────────────────────────
function Brand({ onClick }) {
return (
G
GenTech
Construction · Chattanooga
);
}
// ─────────────────────────────────────────────────────────────
// Top nav
// ─────────────────────────────────────────────────────────────
function Nav({ route, setRoute }) {
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const on = () => setScrolled(window.scrollY > 24);
on();
window.addEventListener("scroll", on, { passive: true });
return () => window.removeEventListener("scroll", on);
}, []);
const items = [
{ id: "home", label: "Index" },
{ id: "projects", label: "Projects" },
{ id: "services", label: "Capabilities" },
{ id: "about", label: "Practice" },
{ id: "map", label: "Regions" },
];
return (
setRoute("home")} />
Chattanooga · TN
setRoute("about")}>
Start a Project →
);
}
// ─────────────────────────────────────────────────────────────
// Footer
// ─────────────────────────────────────────────────────────────
function Footer({ setRoute }) {
return (
);
}
// ─────────────────────────────────────────────────────────────
// Project tile (used in grids)
// ─────────────────────────────────────────────────────────────
function ProjectTile({ project, index, onClick, aspect = "ar-3-4", showNum = true }) {
const [hover, setHover] = useState(false);
return (
setHover(true)} onMouseLeave={() => setHover(false)} onClick={onClick}>
{showNum &&
{String(index + 1).padStart(2, "0")} · {project.role} }
{project.category}
{project.place}
{project.title}
View →
{list.map((it, i) => (
{it}
✦
))}
);
}
// ─────────────────────────────────────────────────────────────
// Section title
// ─────────────────────────────────────────────────────────────
function SectionTitle({ eyebrow, title, sub, right }) {
return (
);
}
// ─────────────────────────────────────────────────────────────
// Vertical side mark
// ─────────────────────────────────────────────────────────────
function SideMark({ children }) {
return {children}
;
}
Object.assign(window, {
useReveal, Reveal, Brand, Nav, Footer, ProjectTile, Stat, Marquee, SectionTitle, SideMark
});