/* ============================================================
   OMNIO — app entry & page assembly (publish build)
   Tweaks panel removed; design defaults locked in below.
   ============================================================ */

function App() {
  // Locked-in design defaults, applied as CSS variables.
  React.useEffect(() => {
    const r = document.documentElement;
    // Accent: magenta
    r.style.setProperty("--magenta", "#e921b2");
    r.style.setProperty("--magenta-deep", "#b8158a");
    // Buttons: bio blue
    r.style.setProperty("--btn-bg", "#30354b");
    r.style.setProperty("--btn-fg", "#f5efe7");
    r.style.setProperty("--btn-border", "#30354b");
    r.style.setProperty("--btn-hover-bg", "var(--magenta)");
    r.style.setProperty("--btn-hover-border", "var(--magenta)");
    // Eyebrows: bio blue, magenta dot
    r.style.setProperty("--eyebrow-color", "#5a607a");
    r.style.setProperty("--eyebrow-dot", "#e921b2");
  }, []);

  // Scroll to a hash target after the app has mounted. Fixes cross-page anchor
  // links (e.g. clicking "Team" on the blog → index.html#team). Two problems to
  // beat: (1) the hash arrives before React renders the section, so the browser's
  // native jump finds nothing; (2) the hero video + image bands above the target
  // load *after* the first jump, shifting layout, while the browser's default
  // scroll-restoration resets position to 0 mid-animation — a race that made the
  // jump land intermittently. Fix: take over scroll restoration and re-pin to a
  // freshly-measured target through the settle window, stopping once layout is
  // stable or the moment the user scrolls.
  React.useEffect(() => {
    let hash = "";
    try { hash = decodeURIComponent(window.location.hash || ""); } catch (e) { hash = window.location.hash || ""; }
    if (!hash || hash === "#" || hash === "#top") return;
    if ("scrollRestoration" in history) history.scrollRestoration = "manual";

    let cancelled = false, timer = null, tries = 0, lastTop = null, stable = 0;

    const measure = () => {
      let el = null;
      try { el = document.querySelector(hash); } catch (e) { return null; }
      if (!el) return null;
      const nav = document.querySelector(".nav");
      const offset = (nav ? nav.getBoundingClientRect().height : 0) + 12;
      return Math.max(0, Math.round(el.getBoundingClientRect().top + window.pageYOffset - offset));
    };

    const cleanup = () => {
      if (timer) clearTimeout(timer);
      window.removeEventListener("wheel", onUser);
      window.removeEventListener("touchstart", onUser);
      window.removeEventListener("keydown", onKey);
    };
    const onUser = () => { cancelled = true; cleanup(); };
    const onKey = (e) => {
      if (["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " ", "Spacebar"].includes(e.key)) onUser();
    };

    const tick = () => {
      if (cancelled) return;
      const top = measure();
      if (top != null) {
        window.scrollTo(0, top);
        if (top === lastTop) { stable++; } else { stable = 0; lastTop = top; }
        if (stable >= 3) { cleanup(); return; } // layout has settled — done
      }
      if (tries++ < 80) timer = setTimeout(tick, 80);
      else cleanup();
    };

    window.addEventListener("wheel", onUser, { passive: true });
    window.addEventListener("touchstart", onUser, { passive: true });
    window.addEventListener("keydown", onKey);
    // Re-measure from scratch once heavy media finishes loading.
    window.addEventListener("load", () => { lastTop = null; stable = 0; }, { once: true });
    timer = setTimeout(tick, 0);

    return cleanup;
  }, []);

  return (
    <>
      <Nav />
      <main>
        <Hero variant="A" />
        <Mission />
        <Pillars />
        <ImageBand
          src="assets/reveal-cartridge.jpg"
          alt="Omnio cartridge"
          eyebrow="The Cartridge"
          caption="Sample-to-answer simplicity with minimal hands-on time."
        />
        <RotaryValve />
        <Workflow />
        <Highlights />
        <MarqueeStatement mode="scroll" />
        <ImageBand
          src="assets/reveal-detail.jpg"
          alt="Omnio platform — detail"
          eyebrow="In Development"
          caption="A multimodal foundation engineered to scale your diagnostic menu."
          height="70vh"
          maxHeight={820}
        />
        <Applications />
        <Team />
        <CTA />
      </main>
      <Footer />
    </>
  );
}

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