/* ===== Sorgent shared chrome + primitives (exported to window) ===== */
const { useState, useEffect, useRef } = React;
/* ---------- icons ---------- */
const Arrow = ({ s = 18 }) => (
);
const CtaOrn = () => (
{[...Array(7)].map((_, r) => [...Array(13)].map((_, c) => { const x = c * 100, y = r * 100; return
);
const Mountains = () => (
);
const Logo = ({ s = 38 }) => (
);
const STAR_SEED = [
[6,8,1.6,4.2,0],[14,20,1,5.5,1.2],[22,11,1.3,4.8,0.6],[31,26,1,6,2.1],[39,14,1.7,5,0.3],
[47,23,1,4.5,1.7],[55,9,1.2,5.8,0.9],[63,28,1,5.2,2.4],[71,16,1.5,4.6,0.5],[79,24,1,6.1,1.4],
[87,12,1.3,5,2],[93,22,1,4.9,0.8],[10,30,1,5.6,1.1],[27,6,1.4,4.7,1.9],[44,32,1,5.9,0.4],
[60,19,1.1,5.1,2.2],[76,31,1.6,4.4,0.7],[90,30,1,5.7,1.6],[18,15,1,5.3,2.5],[52,30,1.2,4.8,1],
[68,7,1,6,0.2],[84,18,1.4,5.4,1.8],[36,21,1,4.6,2.3],[4,18,1.1,5.5,0.9],[96,15,1.3,5,1.5],
];
const Stars = () => (
{STAR_SEED.map(([x, y, s, tw, td], i) => (
);
/* full hero ambiance: dusk glow + stars + gliding eagles */
const HeroSky = () => (
);
/* ---------- navigation (hash router) ---------- */
const NAV = [
["/builders", "Программа Builders"], ["/showcase", "Showcase"],
["/community", "Sorgent Community"], ["/products", "Sorgent Products"],
["/faq", "FAQ"],
];
function go(path) { window.location.hash = "#" + path; }
function useRoute() {
const [path, setPath] = useState(() => window.location.hash.replace(/^#/, "") || "/");
useEffect(() => {
const on = () => { setPath(window.location.hash.replace(/^#/, "") || "/"); window.scrollTo(0, 0); };
window.addEventListener("hashchange", on);
return () => window.removeEventListener("hashchange", on);
}, []);
return path;
}
const A = ({ to, className, children, ...rest }) => (
{children}
);
/* ---------- scroll-reveal hook (fires once when element enters viewport) ---------- */
function useInView(opts) {
const ref = useRef(null);
const [seen, setSeen] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
if (typeof IntersectionObserver === "undefined") { setSeen(true); return; }
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } });
}, { threshold: 0.2, rootMargin: "0px 0px -8% 0px", ...(opts || {}) });
io.observe(el);
return () => io.disconnect();
}, []);
return [ref, seen];
}
/* ---------- illustration frame: scroll-reveal entrance + looping video (or still image) ----------
video: mp4 source — when set, renders an autoplaying muted loop with `src` as poster/fallback
anim: entrance direction — "up" | "left" | "right" | "scale"
motion: continuous idle (PNG only) — "float" | "walk" | undefined
glow: soft warm halo behind the figure for depth
hover: gentle scale on hover */
function Illo({ src, video, alt = "", max, anim = "up", motion, glow, hover, delay = 0, className = "" }) {
const [ref, inView] = useInView();
const vidRef = useRef(null);
useEffect(() => {
if (!video || !vidRef.current) return;
const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
const apply = () => { if (mq.matches) { try { vidRef.current.pause(); } catch (e) {} } };
apply();
mq.addEventListener ? mq.addEventListener("change", apply) : mq.addListener(apply);
return () => { mq.removeEventListener ? mq.removeEventListener("change", apply) : mq.removeListener(apply); };
}, [video]);
return (
{glow &&
)
: (
);
}
function Nav({ path }) {
const [open, setOpen] = useState(false);
useEffect(() => { setOpen(false); }, [path]);
return (
{open && (
)}
);
}
function Footer() {
return (
);
}
/* mini-hero used by interior pages. pass `art` to show an illustration beside the copy */
function MiniHero({ rubric, title, sub, art }) {
if (art) {
return (
{rubric}
{title}
{sub &&
{sub}
}
{art}
);
}
return (
{rubric}
{title}
{sub &&
{sub}
}
);
}
/* dusk scene #1 — a builder striding toward towering summits to conquer (HOME) */
const SceneSummits = () => (
{/* sun glow low on the horizon */}
{/* lone eagle high over the range */}
{/* ---- towering summits (the big peaks to conquer) ---- */}
{/* back-left peak */}
{/* foreground ground the builder walks on */}
{/* backpack */}
{/* trekking pole */}
);
/* dusk scene #2 — the builder atop conquered towers of big companies (BUILDERS) */
const SceneConquered = () => {
const towers = [
[120, 96, 250, "○"], [232, 112, 168, "△"], [360, 100, 300, "□"],
[832, 116, 214, "◇"], [978, 96, 168, "△"], [1108, 124, 262, "○"], [1268, 100, 300, "□"],
];
return (
{/* surrounding big-company towers (logo placeholders — swap via slots) */}
{towers.map(([x, w, top, mark], i) => (
{mark}
))}
{/* central tallest tower — the one we conquered */}
);
};
/* dusk scene #3 — builders around a workbench, building a product (SHOWCASE) */
const WBuilder = ({ x, flip }) => (
);
const SceneWorkshop = () => (
{/* glow around the product being built */}
{/* tool icons floating above */}
{/* builders around the bench */}
);
/* dusk scene #4 — community gathered around a fire, talking (COMMUNITY) */
const Seated = ({ x, face = 1 }) => (
);
const SceneCommunity = () => (
{/* distant ridge */}
{/* people seated around the fire, facing center */}
);
/* dusk scene #5 — a constellation of launched products, builder presenting (PRODUCTS) */
const AppWin = ({ x, y, w, h }) => (
);
const SceneProducts = () => (
{/* launched product windows, various sizes */}
{/* ground */}
);
const CtaScene = ({ variant }) =>
variant === "conquered" ?
{rubric}
{title}
{note &&
{note}
}
);
}
/* floating «contact us» widget — soft, non-pushy, all pages */
function ContactWidget() {
const [open, setOpen] = useState(false);
return (
{open && (
Есть вопросы про Sorgent? Напиши нам в Telegram — ответим живым человеком.
Telegram
)}
setOpen(!open)} aria-label="Связаться">
{open
?
i {text}
);
const MarkOpenAI = () => (
);
const MarkClaude = () => (
{[...Array(12)].map((_, i) => {
const a = i * Math.PI / 6, c = Math.cos(a), s = Math.sin(a);
return
);
const MarkMicrosoft = () => (
);
const MarkMeta = () => (
);
const MarkReact = () => (
);
const MarkVercel = () => (
);
const MarkSupabase = () => (
{mark}
{name}
);
const LogoOpenAI = () => 
);
/* ---------- soaring eagle silhouette (decorative) ---------- */
const Eagle = () => (
);
const STAR_SEED = [
[6,8,1.6,4.2,0],[14,20,1,5.5,1.2],[22,11,1.3,4.8,0.6],[31,26,1,6,2.1],[39,14,1.7,5,0.3],
[47,23,1,4.5,1.7],[55,9,1.2,5.8,0.9],[63,28,1,5.2,2.4],[71,16,1.5,4.6,0.5],[79,24,1,6.1,1.4],
[87,12,1.3,5,2],[93,22,1,4.9,0.8],[10,30,1,5.6,1.1],[27,6,1.4,4.7,1.9],[44,32,1,5.9,0.4],
[60,19,1.1,5.1,2.2],[76,31,1.6,4.4,0.7],[90,30,1,5.7,1.6],[18,15,1,5.3,2.5],[52,30,1.2,4.8,1],
[68,7,1,6,0.2],[84,18,1.4,5.4,1.8],[36,21,1,4.6,2.3],[4,18,1.1,5.5,0.9],[96,15,1.3,5,1.5],
];
const Stars = () => (
);
/* full hero ambiance: dusk glow + stars + gliding eagles */
const HeroSky = () => (