// ScrollProgress.jsx — thin bar at top
const ScrollProgress = () => {
  const [p, setP] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      setP(max > 0 ? window.scrollY / max : 0);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div style={{
      position: "fixed", top: 0, left: 0, right: 0, height: 2, zIndex: 200,
      background: "rgba(255,255,255,.08)",
    }}>
      <div style={{ width: `${p * 100}%`, height: "100%", background: "#fff", transition: "width 80ms linear" }} />
    </div>
  );
};
window.ScrollProgress = ScrollProgress;