/* global React, ReactDOM */
const { useState, useEffect, useRef } = React;
/* ──────────────────────────────────────────
Cursor (dot + ring, hover zoom + labels)
────────────────────────────────────────── */
function Cursor() {
const dot = useRef(null);
const ring = useRef(null);
const lbl = useRef(null);
const [visible, setVisible] = useState(false);
useEffect(() => {
let rx = 0, ry = 0, x = 0, y = 0;
const onMove = (e) => {
x = e.clientX; y = e.clientY;
if (!visible) setVisible(true);
if (dot.current) dot.current.style.transform = `translate(${x}px, ${y}px) translate(-50%,-50%)`;
};
let raf;
const loop = () => {
rx += (x - rx) * 0.18; ry += (y - ry) * 0.18;
if (ring.current) ring.current.style.transform = `translate(${rx}px, ${ry}px) translate(-50%,-50%)`;
if (lbl.current) lbl.current.style.transform = `translate(${rx}px, ${ry - 48}px) translate(-50%,-50%)`;
raf = requestAnimationFrame(loop);
};
loop();
const handleOver = (e) => {
const t = e.target;
if (!t || !t.closest) return;
const interactive = t.closest("a, button, .lab-tile, .p-card, .discipline-card, .contact-method, input, textarea, [data-hover]");
if (interactive) {
dot.current?.classList.add("hover");
ring.current?.classList.add("hover");
const label = interactive.getAttribute("data-hover");
if (label && lbl.current) { lbl.current.textContent = label; lbl.current.classList.add("show"); }
}
// Zoom-on-hover for text/images
const zoomable = t.closest("p, h1, h2, h3, h4, h5, .p-title, .h1, .h2, .h3, .thesis-statement, .contact-statement, .footer .big, .journal-entry .title, img, video, .cover, .thumb, .lab-tile, .discipline-card");
if (zoomable && !zoomable.classList.contains("zoom-lock")) {
zoomable.classList.add("zoomable");
if (zoomable.matches("img, video, .cover, .thumb")) zoomable.classList.add("center-origin");
zoomable.classList.add("zoomable-hover");
}
};
const handleOut = (e) => {
const t = e.target;
if (!t || !t.closest) return;
const interactive = t.closest("a, button, .lab-tile, .p-card, .discipline-card, .contact-method, input, textarea, [data-hover]");
if (interactive) {
dot.current?.classList.remove("hover");
ring.current?.classList.remove("hover");
if (lbl.current) lbl.current.classList.remove("show");
}
const zoomable = t.closest(".zoomable-hover");
if (zoomable) zoomable.classList.remove("zoomable-hover");
};
window.addEventListener("mousemove", onMove);
document.addEventListener("mouseover", handleOver);
document.addEventListener("mouseout", handleOut);
return () => {
window.removeEventListener("mousemove", onMove);
document.removeEventListener("mouseover", handleOver);
document.removeEventListener("mouseout", handleOut);
cancelAnimationFrame(raf);
};
}, [visible]);
return (
);
}
/* ──────────────────────────────────────────
Nav
────────────────────────────────────────── */
function Nav({ availability = "Currently exploring" }) {
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 80);
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
return (
);
}
/* ──────────────────────────────────────────
Reveal-on-scroll wrapper
────────────────────────────────────────── */
function Reveal({ children, delay = 0, className = "", as = "div" }) {
const ref = useRef(null);
const [inView, setInView] = useState(false);
useEffect(() => {
if (!ref.current) return;
const obs = new IntersectionObserver(([e]) => {
if (e.isIntersecting) { setInView(true); obs.disconnect(); }
}, { threshold: 0.12 });
obs.observe(ref.current);
return () => obs.disconnect();
}, []);
const Tag = as;
const delayCls = delay ? `d${delay}` : "";
return (
{children}
);
}
/* ──────────────────────────────────────────
Project cover placeholder — procedural SVG per discipline
────────────────────────────────────────── */
function ProjectCover({ project }) {
const d = window.DISCIPLINES[project.discipline];
const accent = d.accent;
if (project.cover === "careconnect") {
return (
);
}
if (project.cover === "success-ladder") {
return (
);
}
if (project.cover === "yasumo") {
return (
);
}
if (project.cover === "vivid") {
return (
);
}
// chromatin / in-progress
return (
);
}
/* ──────────────────────────────────────────
Footer
────────────────────────────────────────── */
function Footer() {
const [secret, setSecret] = useState(false);
return (
);
}
Object.assign(window, { Cursor, Nav, Reveal, ProjectCover, Footer });