function BackToTop() {
  const { useScrollY } = window.JMK;
  const y = useScrollY();
  const [hover, setHover] = React.useState(false);
  const visible = y > 480;
  const docH = typeof document !== "undefined"
    ? (document.documentElement.scrollHeight - window.innerHeight) : 1;
  const pct = docH > 0 ? Math.min(1, Math.max(0, y / docH)) : 0;
  return (
    <React.Fragment>
    <div className="jmk-progress" style={{ transform: `scaleX(${pct})` }} />
    <button
      data-cursor="link"
      onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      aria-label="Back to top"
      style={{
        position: "fixed", bottom: 28, right: 28, zIndex: 480,
        width: 56, height: 56, borderRadius: "50%",
        border: "none", cursor: "pointer",
        background: hover ? "var(--pink-600)" : "var(--ink-900)",
        color: "var(--white)",
        display: "flex", alignItems: "center", justifyContent: "center",
        opacity: visible ? 1 : 0,
        transform: visible ? "translateY(0) scale(1)" : "translateY(16px) scale(0.85)",
        pointerEvents: visible ? "auto" : "none",
        transition: "opacity 300ms var(--ease-confident), transform 300ms var(--ease-confident), background-color 150ms",
        boxShadow: "var(--shadow-md)",
      }}
    >
      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
        <path d="M10 15V4M10 4L4.5 9.5M10 4L15.5 9.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </button>
    </React.Fragment>
  );
}
window.JMK = window.JMK || {};
window.JMK.BackToTop = BackToTop;