/* ============================================================
SPAZIO — Core components: Router, Nav, Footer, Logo, atoms
============================================================ */
const { useState, useEffect, useRef, useContext, createContext, useCallback } = React;
/* ---------- Router (lightweight client routing) ---------- */
const RouterCtx = createContext({ route: "home", navigate: () => {} });
const useRouter = () => useContext(RouterCtx);
const ROUTES = ["home", "work", "about", "start", "start-project", "subscribe", "foundation", "brief-ready"];
/* ---------- Scroll reveal ---------- */
function useReveal() {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
el.classList.add("in");
return;
}
let done = false;
let timer;
const reveal = () => {
if (done) return;
done = true;
el.classList.add("in");
cleanup();
};
const check = () => {
const r = el.getBoundingClientRect();
const vh = window.innerHeight || document.documentElement.clientHeight || 800;
if (r.top < vh * 0.94 && r.bottom > -40) reveal();
};
const cleanup = () => {
window.removeEventListener("scroll", check);
window.removeEventListener("resize", check);
clearTimeout(timer);
};
window.addEventListener("scroll", check, { passive: true });
window.addEventListener("resize", check);
// Safety: never leave content hidden even if scroll events are throttled
timer = setTimeout(reveal, 1500);
requestAnimationFrame(check);
requestAnimationFrame(() => requestAnimationFrame(check));
return cleanup;
}, []);
return ref;
}
function Reveal({ children, delay = 0, className = "", as = "div", ...rest }) {
const ref = useReveal();
const Tag = as;
return (
{children}
);
}
/* ---------- Arrow glyph ---------- */
const Arrow = ({ size = 14 }) => (
);
const ArrowDown = ({ size = 14 }) => (
);
/* ---------- Signature spatial primitives ---------- */
function CropMarks({ color = "var(--ink-3)" }) {
return (
<>
);
}
function ColTicks({ count = 12, style }) {
return (
{Array.from({ length: count }, (_, i) => (
{String(i + 1).padStart(2, "0")}
))}
);
}
function Measure({ label, vertical = false, style }) {
return (
{label}
);
}
/* ---------- Logo / wordmark ---------- */
/* ---------- Eye — concentric brand mark (Ink / Sand / Coral) ---------- */
function Eye({ size = 14, live = false, style = {}, label }) {
const s = typeof size === "number" ? `${size}px` : size;
return (
);
}
/* ---------- Pattern — square grid of geometric units (one motif leads, 2 colors/tile) ---------- */
const PATTERN_MOTIFS = ["quarter","dot","leaf","quarter","half","ring","quarter","tri","dot","quarter","leaf","half","quarter","ring","tri","quarter","dot","leaf","quarter","half","ring","quarter","tri","dot"];
const PATTERN_COLORS = [
["var(--sand)", "var(--ink)"],
["var(--paper)", "var(--coral)"],
["var(--mist)", "var(--teal)"],
["var(--sand)", "var(--gold)"],
["var(--paper)", "var(--clay)"],
["var(--ink)", "var(--sand)"],
];
function PatternTile({ motif, bg, fg, rot }) {
const shape =
motif === "quarter" ? :
motif === "half" ? :
motif === "tri" ? :
motif === "ring" ? :
motif === "leaf" ? :
;
return (
);
}
function Pattern({ size = 44, rows = 1, count = 72, style }) {
const tiles = [];
for (let i = 0; i < count; i++) {
const c = PATTERN_COLORS[(i * 5) % PATTERN_COLORS.length];
tiles.push();
}
return (
{tiles}
);
}
function Logo({ onClick, compact = false }) {
return (
Spazio{compact ? "" : ""}
);
}
/* ---------- Navigation ---------- */
const NAV_LINKS = [
{ id: "work", label: "Projects" },
];
function Nav() {
const { route, navigate } = useRouter();
const [scrolled, setScrolled] = useState(false);
const [open, setOpen] = useState(false);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 12);
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
useEffect(() => { setOpen(false); }, [route]);
const go = (e, id) => { e.preventDefault(); navigate(id); };
return (
);
}
/* ---------- Marquee ---------- */
function Marquee({ items, sep = "·" }) {
const row = [...items, ...items];
return (
{row.map((it, i) => (
{it}
{sep}
))}
);
}
/* ---------- Footer subscribe (compact) ---------- */
function FooterSubscribe() {
const [email, setEmail] = useState("");
const [done, setDone] = useState(false);
const [err, setErr] = useState(false);
const valid = (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
const submit = (e) => {
e.preventDefault();
if (!valid(email)) { setErr(true); return; }
setErr(false); setDone(true);
};
if (done) {
return (
You're on the list. Talk soon.
);
}
return (
);
}
/* ---------- Footer ---------- */
function Footer() {
const { navigate } = useRouter();
const go = (e, id) => { e.preventDefault(); navigate(id); };
const year = 2026;
return (
);
}
Object.assign(window, {
RouterCtx, useRouter, ROUTES, useReveal, Reveal, Arrow, ArrowDown,
CropMarks, ColTicks, Measure,
Logo, Nav, Marquee, Footer, Eye, Pattern, PatternTile,
});