/* global React */
const { useState, useEffect, useRef, useMemo } = React;
// --- Eyebrow label (was bracket label โ now soft, no brackets)
function BracketLabel({ children, className = "", style = {} }) {
return {children};
}
// --- Mono meta
function MonoMeta({ children, style = {} }) {
return {children};
}
// --- Button
function Button({ children, variant = "primary", icon = false, onClick, type = "button", style = {} }) {
return (
);
}
// --- Section header
function SectionHead({ title, meta, style = {} }) {
return (
{typeof title === "string" ? {title} : title}
{meta && {meta}}
);
}
// --- Logo mark
function LogoMark({ size = 16, color = "currentColor" }) {
return (
);
}
// --- Live clock (Fort Worth โ America/Chicago)
function LiveClock() {
const [t, setT] = useState(() => new Date());
useEffect(() => {
const id = setInterval(() => setT(new Date()), 1000);
return () => clearInterval(id);
}, []);
const fmt = useMemo(() => new Intl.DateTimeFormat("en-US", {
hour: "2-digit", minute: "2-digit", hour12: false, timeZone: "America/Chicago"
}), []);
return (
Fort Worth ยท {fmt.format(t)} CT
);
}
// --- Animated counter (count up)
function Counter({ to, dur = 1200, suffix = "" }) {
const [v, setV] = useState(0);
const ref = useRef(null);
const ran = useRef(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver(([e]) => {
if (e.isIntersecting && !ran.current) {
ran.current = true;
const start = performance.now();
const tick = (now) => {
const p = Math.min(1, (now - start) / dur);
const eased = 1 - Math.pow(1 - p, 3);
setV(to * eased);
if (p < 1) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
}
}, { threshold: 0.5 });
io.observe(el);
return () => io.disconnect();
}, [to, dur]);
const display = to >= 100 ? Math.round(v) : v.toFixed(1).replace(/\.0$/, "");
return {display}{suffix && {suffix}};
}
// --- Generative art card background. Deterministic from seed.
function GenerativeArt({ seed = 1, variant = "lines" }) {
const layers = [];
// simple seeded PRNG
let s = seed * 9301 + 49297;
const rand = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; };
// Droplet: clean silhouette, just the shape
if (variant === "droplet") {
const g = "d" + seed;
const dp = "M 200 46 C 256 78, 284 154, 200 250 C 116 154, 144 78, 200 46 Z";
return (
);
}
if (variant === "lines") {
for (let i = 0; i < 60; i++) {
const x1 = rand() * 400;
const y1 = rand() * 300;
const len = 40 + rand() * 200;
const ang = rand() * Math.PI;
const x2 = x1 + Math.cos(ang) * len;
const y2 = y1 + Math.sin(ang) * len;
layers.push();
}
} else if (variant === "rings") {
for (let i = 0; i < 20; i++) {
layers.push();
}
} else if (variant === "blocks") {
for (let i = 0; i < 30; i++) {
const w = 10 + rand() * 90;
const h = 10 + rand() * 90;
layers.push();
}
} else if (variant === "grid") {
for (let i = 0; i < 14; i++) {
layers.push();
}
for (let i = 0; i < 11; i++) {
layers.push();
}
for (let i = 0; i < 8; i++) {
layers.push();
}
}
return (
);
}
// --- Portrait placeholder (cinematic abstract figure)
function PortraitPlaceholder() {
return (
);
}
// --- Reveal-on-scroll wrapper
function Reveal({ children, delay = 0, as: As = "div", className = "" }) {
const ref = useRef(null);
const [seen, setSeen] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver(([e]) => {
if (e.isIntersecting) { setSeen(true); io.disconnect(); }
}, { threshold: 0.15 });
io.observe(el);
return () => io.disconnect();
}, []);
const style = {
opacity: seen ? 1 : 0,
transform: seen ? "translateY(0)" : "translateY(16px)",
transition: `opacity 600ms ${delay}ms cubic-bezier(0.2,0.8,0.2,1), transform 600ms ${delay}ms cubic-bezier(0.2,0.8,0.2,1)`,
};
return {children};
}
// --- Scroll progress
function ScrollProgress() {
const [w, setW] = useState(0);
useEffect(() => {
const onScroll = () => {
const top = window.scrollY;
const h = document.documentElement.scrollHeight - window.innerHeight;
setW(h > 0 ? (top / h) * 100 : 0);
};
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
return ;
}
// --- Custom selection cursor (crosshair)
function CrosshairCursor({ enabled }) {
const [p, setP] = useState({ x: -100, y: -100 });
const [hovering, setHovering] = useState(false);
useEffect(() => {
if (!enabled) return;
const onMove = (e) => setP({ x: e.clientX, y: e.clientY });
const onOver = (e) => {
const t = e.target;
setHovering(!!(t && (t.closest("a, button, .project-card, .nav-links a, .cs-thumb, .nav-cta, .nav-brand, .ft-social a, .arsenal-cell, .skill-cell"))));
};
window.addEventListener("mousemove", onMove);
window.addEventListener("mouseover", onOver);
return () => {
window.removeEventListener("mousemove", onMove);
window.removeEventListener("mouseover", onOver);
};
}, [enabled]);
if (!enabled) return null;
const sz = hovering ? 56 : 28;
return (
);
}
Object.assign(window, {
Button, BracketLabel, MonoMeta, SectionHead, LogoMark,
LiveClock, Counter, GenerativeArt, PortraitPlaceholder,
Reveal, ScrollProgress, CrosshairCursor,
});