/* Shared components for Viktor Zaharov site */
const { useState, useEffect, useRef } = React;
/* ---- Logo ---- */
// Geometric Z + V interlocking mark — same idea as the user's hand-drawn logo,
// rebuilt as clean SVG so it scales and stays sharp on dark backgrounds.
function LogoMark({ size = 32 }) {
return (
);
}
function Logo({ size = 32, stacked = true }) {
return (
);
}
/* ---- Section header ---- */
function SectionHead({ kicker, title, sub, num }) {
// On narrow viewports the 80px num gutter wastes too much horizontal room — render num
// inline next to the kicker instead so the title gets the full content width.
const isNarrow = typeof window !== 'undefined' && window.innerWidth < 760;
if (isNarrow) {
return (
{(num || kicker) &&
{num &&
{num}
}
{kicker &&
{kicker}
}
}
{title}
{sub &&
{sub}
}
);
}
return (
{num &&
{num}
}
{kicker &&
{kicker}
}
{title}
{sub &&
{sub}
}
);
}
/* ---- Stat block ---- */
function Stat({ value, label, suffix }) {
return (
{value}{suffix}
{label}
);
}
/* ---- Photo placeholder fallback ---- */
function Photo({ src, alt, ratio = '4/5', tag, style, imgStyle, eager }) {
// The wrapper carries `.photo-wrap` so global CSS guarantees min-width:0, max-width:100%, and overflow:hidden.
// When the caller passes height:'100%' (Programs page) the aspectRatio is naturally ignored — that's intentional.
// Falls back to a placeholder block if the image fails to load. Reset on src change.
const [stage, setStage] = useState(0);
useEffect(() => { setStage(0); }, [src]);
const candidate = stage === 0 ? src : null;
return (