// Chichi Fu — landing page sections, restyled in the Liquid Glass UI Kit. // Lucide-style inline icons const ArrowRight = ({ className = "", size = 18, style }) => ( ); const Check = ({ className = "", size = 14 }) => ( ); // ========== HERO ========== // Scroll-scrubbed video, pinned only within the hero's tall track. // The clip's playback position is driven by scroll progress (not looping), // and the video lives only on the first screen — the sheet below has its // own light background. window.Hero = function Hero() { const sectionRef = React.useRef(null); const videoRef = React.useRef(null); const canvasRef = React.useRef(null); const fgRef = React.useRef(null); const nameRef = React.useRef(null); const [nameW, setNameW] = React.useState(null); // Pin the subtitle + bio to the rendered width of the name, so the // justified subtitle's edges line up exactly with the characters above. React.useLayoutEffect(() => { const measure = () => { if (nameRef.current) setNameW(Math.round(nameRef.current.getBoundingClientRect().width)); }; measure(); window.addEventListener("resize", measure); if (document.fonts && document.fonts.ready) document.fonts.ready.then(measure); const t = setTimeout(measure, 400); return () => { window.removeEventListener("resize", measure); clearTimeout(t); }; }, []); React.useEffect(() => { const v = videoRef.current, sec = sectionRef.current, fg = fgRef.current, cv = canvasRef.current; if (!v || !sec || !cv) return; const ctx = cv.getContext("2d"); let dur = 0, cur = 0, raf = 0; const readDur = () => { dur = isFinite(v.duration) ? v.duration : 0; }; v.addEventListener("loadedmetadata", readDur); if (v.readyState >= 1) readDur(); // Keep the canvas backing store matched to its displayed size (capped DPR). const resize = () => { const dpr = Math.min(window.devicePixelRatio || 1, 2); const r = cv.getBoundingClientRect(); cv.width = Math.max(1, Math.round(r.width * dpr)); cv.height = Math.max(1, Math.round(r.height * dpr)); }; resize(); window.addEventListener("resize", resize); // Paint the current video frame onto the canvas with object-fit:cover math. // Drawing through a canvas sidesteps the browser quirk where a *paused* //