/* ───────────────────────────────────────────────────────────
SIZZLE — shared components & helpers
Exposes to window at the bottom for cross-file use.
─────────────────────────────────────────────────────────── */
const { useState, useEffect, useLayoutEffect, useRef, useCallback } = React;
/* ── entrance hook ──────────────────────────────────────────
Resting state is VISIBLE. We only attach a (non-filling) entrance
animation to elements that are within the viewport at mount, so
content is never left invisible even if the animation engine is
throttled. Below-the-fold elements simply render visible. */
function useEntrance() {
const ref = useRef(null);
const [play, setPlay] = useState(false);
useLayoutEffect(() => {
const el = ref.current;
if (!el) return;
const r = el.getBoundingClientRect();
const vh = window.innerHeight || document.documentElement.clientHeight;
if (r.top < vh && r.bottom > -40) setPlay(true); // in initial viewport → animate
}, []);
return [ref, play];
}
function Reveal({ children, delay = 0, as: Tag = "div", className = "", style = {} }) {
const [ref, play] = useEntrance();
return (
{children}
);
}
/* ── minimal stroke icons (no decorative SVG illustration) ── */
function Icon({ name, size = 22, stroke = 1.7, color = "currentColor" }) {
const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none",
stroke: color, strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" };
const paths = {
play: <>,
upload: <>,
layout: <>,
qr: <>,
sparkle: <>,
chart: <>,
bolt: <>,
globe: <>,
phone: <>,
check: <>,
arrow: <>,
star: <>,
quote: <>,
plus: <>,
clock: <>,
cart: <>,
leaf: <>,
flame: <>,
user: <>,
};
return ;
}
/* ── video placeholder slot ─────────────────────────────── */
function VideoSlot({ label, tag, ratio = "4 / 3", radius = 14, style = {}, playing = false, kicker }) {
return (
{kicker && (
{kicker}
)}
{label &&
{label}
}
{tag && (
{tag}
)}
{/* dynamic island */}
{children}
);
}
Object.assign(window, { useEntrance, Reveal, Icon, VideoSlot, Phone, React });