);
}
/* Layout D — Supply-side ecosystem (醒图 AI 特效) */
function LayoutSupply({ w }) {
const [activeVideo, setActiveVideo] = useState(null);
const [ioPop, setIoPop] = useState(null); // { io, rect } floating input→output preview
// Close on Esc
useEffect(() => {
if (!activeVideo) return;
const onKey = (e) => { if (e.key === "Escape") setActiveVideo(null); };
window.addEventListener("keydown", onKey);
document.body.style.overflow = "hidden";
return () => {
window.removeEventListener("keydown", onKey);
document.body.style.overflow = "";
};
}, [activeVideo]);
return (
<>
{/* Hero block — custom for 醒图 */}
{w.kicker}
{w.kickerSub && (
{w.kickerSub}
)}
{w.role}·{w.time}
{w.summary}
{w.metrics && w.metrics.length > 0 && (
{w.metrics.map((m, i) => (
{m.k}
{m.v}
))}
)}
{/* Work narratives — each is a glass card with its own title/summary + numbered items */}
{(() => {
const list = w.narratives || (w.breakdown ? [{ items: w.breakdown }] : []);
return list.map((n, ni) => (
{n.title && (
{n.title}
)}
{n.summary && (
{n.summary}
)}
{n.items.map((b, i) => (
{b.idx}
{b.title}
{b.body}
))}
{/* Optional video reel for this narrative */}
{n.videos && n.videos.length > 0 && (
{/* Video / image lightbox — portaled to so position:fixed escapes
the StickyWorkCard's CSS transform (a transformed ancestor would
otherwise become the containing block and clip/mis-position it). */}
{activeVideo && ReactDOM.createPortal((() => {
const isVideo = /\.(mp4|webm|mov|m4v)$/i.test(activeVideo.src);
return (
);
}
/* Main Work Section */
function Work() {
const [active, setActive] = useState(0);
const refs = useRef([]);
useEffect(() => {
// Sticky cards stack at top:~100-116px. The "active" card is the last one
// whose top edge has scrolled up into the sticky zone. A scroll probe is
// far more reliable here than an IntersectionObserver center heuristic,
// because the tall wrappers overlap in the viewport.
const PROBE = 240;
const onScroll = () => {
let best = 0;
refs.current.forEach((el, i) => {
if (!el) return;
if (el.getBoundingClientRect().top <= PROBE) best = i;
});
setActive(best);
};
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
window.addEventListener("resize", onScroll);
return () => {
window.removeEventListener("scroll", onScroll);
window.removeEventListener("resize", onScroll);
};
}, []);
const onJump = (i) => {
const el = refs.current[i];
if (!el) return;
const top = el.getBoundingClientRect().top + window.scrollY - 116;
window.scrollTo({ top, behavior: "smooth" });
};
return (
{/* section header */}