/* =========================================================================
Shared components & hooks
========================================================================= */
const { useState, useEffect, useRef, useCallback, useMemo } = React;
/* ---- tiny inline icons (geometric only) ---- */
const Icon = {
sun: (p) =>
,
moon: (p) =>
,
arrowDown: (p) => ,
arrowLeft: (p) => ,
arrowRight: (p) => ,
chevron: (p) =>
};
/* ---- Emblem image ---- */
function Emblem({ className = "", size, halo = false, style, src = "assets/emblem.png", alt = "左锡宁 纹章 / emblem" }) {
const img = 
;
if (!halo) return img;
return {img};
}
/* ---- Cosmos backdrop: nebula + tiered starfield + grain ---- */
function Cosmos({ motif = "calm" }) {
const stars = useMemo(() => {
const count = motif === "lush" ? 200 : 130;
const arr = [];
for (let i = 0; i < count; i++) {
const tier = Math.random();
const glint = tier > 0.965; // four-point bright stars
const big = tier > 0.84;
arr.push({
left: Math.random() * 100,
top: Math.random() * 100,
s: glint ? 2.6 + Math.random() * 1.4 : big ? 1.7 + Math.random() * 1.1 : 0.8 + Math.random() * 1,
dur: 3.5 + Math.random() * 7,
del: -(Math.random() * 10),
omin: glint ? 0.55 : big ? 0.3 : 0.1,
omax: glint ? 1 : big ? 0.95 : 0.55,
glint
});
}
return arr;
}, [motif]);
return (
{stars.map((s, i) =>
)}
);
}
/* ---- Controls: language + theme ---- */
function LangToggle({ lang, onToggle, t }) {
return (
);
}
function ThemeToggle({ theme, onToggle }) {
return (
);
}
/* ---- Reveal on scroll (scroll-driven, robust; content never stuck hidden) ---- */
function useReveal() {
const ref = useRef(null);
useEffect(() => {
let raf = 0;
const reveal = () => {
raf = 0;
const vh = window.innerHeight || 800;
document.querySelectorAll(".rise:not(.in)").forEach((e) => {
if (e.getBoundingClientRect().top < vh * 0.92) e.classList.add("in");
});
};
const onScroll = () => {if (!raf) raf = requestAnimationFrame(reveal);};
reveal();
requestAnimationFrame(reveal);
window.addEventListener("scroll", onScroll, { passive: true });
window.addEventListener("resize", onScroll);
const t = setTimeout(reveal, 350);
return () => {
window.removeEventListener("scroll", onScroll);
window.removeEventListener("resize", onScroll);
clearTimeout(t);cancelAnimationFrame(raf);
};
}, []);
return ref;
}
/* ---- Section header ---- */
function SectionHead({ idx, title, cjk, en }) {
return (
{idx && {idx}}
{cjk ? {title} : title}
{en && {en}}
);
}
Object.assign(window, { Icon, Emblem, Cosmos, LangToggle, ThemeToggle, useReveal, SectionHead });