// Scroll progress indicator — thin line at top filling as user scrolls
function ScrollProgress() {
  const [pct, setPct] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => {
      const max = document.documentElement.scrollHeight - window.innerHeight;
      setPct(max > 0 ? (window.scrollY / max) * 100 : 0);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div style={{
      position: "fixed", top: 0, left: 0, right: 0, height: 2,
      zIndex: 100, pointerEvents: "none",
    }}>
      <div style={{
        width: `${pct}%`, height: "100%",
        background: "linear-gradient(90deg, #7FC6E3 0%, #4AA8D0 50%, #2d6d94 100%)",
        transition: "width 80ms linear",
      }} />
    </div>
  );
}

Object.assign(window, { ScrollProgress });