/* ============================================================
Shared utilities / hooks / placeholder component
============================================================ */
const { useState, useEffect, useRef, useMemo, useCallback } = React;
/** Reveal-on-scroll: adds .in once the element enters the viewport. */
function useReveal(threshold = 0.15) {
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.unobserve(el);
}
});
},
{ threshold }
);
io.observe(el);
return () => io.disconnect();
}, [threshold]);
return ref;
}
/** Reports scroll progress (0..1) of an element through the viewport. */
function useScrollProgress() {
const ref = useRef(null);
const [p, setP] = useState(0);
useEffect(() => {
const el = ref.current;
if (!el) return;
let raf = 0;
const calc = () => {
const r = el.getBoundingClientRect();
const vh = window.innerHeight;
// 0 when top of section hits bottom of viewport,
// 1 when bottom of section hits top of viewport.
const total = r.height + vh;
const elapsed = vh - r.top;
const v = Math.max(0, Math.min(1, elapsed / total));
setP(v);
};
const onScroll = () => {
cancelAnimationFrame(raf);
raf = requestAnimationFrame(calc);
};
calc();
window.addEventListener("scroll", onScroll, { passive: true });
window.addEventListener("resize", onScroll);
return () => {
window.removeEventListener("scroll", onScroll);
window.removeEventListener("resize", onScroll);
cancelAnimationFrame(raf);
};
}, []);
return [ref, p];
}
/** Animates a number from 0 to value once `trigger` is true. */
function useCountUp(value, trigger, ms = 1200) {
const [n, setN] = useState(0);
useEffect(() => {
if (!trigger) return;
const start = performance.now();
let raf;
const tick = (t) => {
const e = Math.min(1, (t - start) / ms);
const eased = 1 - Math.pow(1 - e, 3);
setN(value * eased);
if (e < 1) raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [value, trigger, ms]);
return n;
}
/** Section header — number, optional eyebrow and title. */
function SectionHead({ num, eyebrow, title, children }) {
const ref = useReveal();
return (
{num}
{eyebrow ?
{eyebrow}
: null}
{title}
{children ?
{children}
: null}
);
}
/** Image / asset placeholder. */
function Placeholder({ label, desc, h = 280, style }) {
return (
);
}
/** Tiny inline icons (Feather-style, single-stroke). */
const Icon = {
ArrowRight: (p) => (
),
ArrowLeft: (p) => (
),
Cloud: (p) => (
),
Moon: (p) => (
),
Sun: (p) => (
),
Fuel: (p) => (
),
Heart: (p) => (
),
Mic: (p) => (
),
Nav: (p) => (
),
Music: (p) => (
),
Phone: (p) => (
),
Settings: (p) => (
),
Alert: (p) => (
),
Check: (p) => (
),
Plus: (p) => (
),
Minus: (p) => (
),
Coffee: (p) => (
),
Thermo: (p) => (
),
};
Object.assign(window, { useReveal, useScrollProgress, useCountUp, SectionHead, Placeholder, Icon });