/* orvio balance — app: scroll-reveal, accent mint, mount */

function useBalReveal() {
  React.useEffect(() => {
    const all = [...document.querySelectorAll(".reveal")];
    all.forEach((e) => e.classList.add("armed"));
    const check = () => {
      const trigger = window.innerHeight * 0.9;
      all.forEach((e) => {
        if (!e.classList.contains("in") && e.getBoundingClientRect().top < trigger) e.classList.add("in");
      });
    };
    check();
    requestAnimationFrame(check);
    window.addEventListener("scroll", check, { passive: true });
    window.addEventListener("resize", check, { passive: true });
    const safety = setTimeout(() => all.forEach((e) => e.classList.add("in")), 2500);
    return () => {
      window.removeEventListener("scroll", check);
      window.removeEventListener("resize", check);
      clearTimeout(safety);
    };
  }, []);
}

function BalApp() {
  React.useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty("--accent", "#86E3C9");
    r.setProperty("--accent-soft", "#B6F0DD");
    r.setProperty("--accent-2", "#5FD9B8");
    r.setProperty("--glow", "0.26");
    document.body.dataset.motion = "1";
  }, []);

  useBalReveal();

  return (
    <React.Fragment>
      <BalNav />
      <main>
        <BalHero />
        <BalPurpose />
        <BalFeatures />
        <BalPlans />
        <BalTech />
        <BalPlatforms />
        <BalPrivacy />
        <BalClosing />
      </main>
      <BalFooter />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<BalApp />);