// atmosphere.jsx — navy base, slow bokeh, masked dot grid, faint drifting code layer
const CODE_TEX = `// a life full of glitches — and that's fine
async function whoami() {
  return { role: "QA & automation", builds: ["SortiiiQ", "MyMoney"] };
}

try { ship(); } catch (glitch) { learn(glitch); retry(); }

const me = await whoami();
assert(curious === true);
expect(order).toEmergeFrom(chaos);

describe("sustainable pace", () => {
  it("beats heroics", () => {
    while (awake) { build() => test() => rest(); }
    return effort <= capacity && burnout !== true;
  });
});

const focus = ["quality", "tools", "mind"].map(x => x.trim());
// 42. there is no spoon. may the tests be with you.
export default focus; // -> order from chaos`;

function Atmosphere() {
  return (
    <div className="atmos" aria-hidden="true">
      <div className="base"></div>
      <div className="grade"></div>
      <div className="codetex">{CODE_TEX + "\n\n" + CODE_TEX + "\n\n" + CODE_TEX}</div>
      <div className="grid"></div>
      <div className="blob b1"></div>
      <div className="blob b2"></div>
      <div className="blob b3"></div>
    </div>
  );
}

// thin scroll-progress hairline at the very top
function ScrollProgress() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      const pct = max > 0 ? (h.scrollTop / max) * 100 : 0;
      if (ref.current) ref.current.style.width = pct + "%";
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); };
  }, []);
  return <div className="progress" ref={ref}></div>;
}

Object.assign(window, { Atmosphere, ScrollProgress });