/* global React, ReactDOM,
   Nav, Hero, ReceiptStrip, ExhibitA, TheMethod, StudyTypes,
   DashboardVsDecision, ReportOpen, WordFromRoom, CloseCTA, Footer
*/

function App() {
  React.useEffect(() => {
    const els = Array.from(document.querySelectorAll(".reveal"));
    if (!els.length) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("is-in"); io.unobserve(e.target); } });
    }, { rootMargin: "0px 0px -10% 0px" });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  const scrollToId = (id) => {
    const el = document.getElementById(id);
    if (!el) return;
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    el.scrollIntoView({ behavior: reduce ? "auto" : "smooth", block: "start" });
  };

  // Honor an incoming hash (e.g. /#demo from blog "Get a demo" links). The page
  // renders via in-browser Babel after the browser's native hash-scroll fires,
  // so the target doesn't exist yet at load — scroll to it once mounted.
  React.useEffect(() => {
    const id = window.location.hash.slice(1);
    if (!id) return;
    const el = document.getElementById(id);
    if (!el) return;
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const t = setTimeout(() => el.scrollIntoView({ behavior: reduce ? "auto" : "smooth", block: "start" }), 250);
    return () => clearTimeout(t);
  }, []);

  const onCTA = (kind) => {
    if (kind === "demo") {
      scrollToId("demo");
    } else if (kind === "report") {
      scrollToId("report");
    } else if (kind === "signin") {
      window.open("https://platform.neroview.com/sign-in", "_blank", "noopener");
    }
  };

  return (
    <div className="app">
      <Nav onCTA={onCTA} />
      <Hero onCTA={onCTA} />
      <ReceiptStrip />
      <ExhibitA />
      <TheMethod />
      <StudyTypes />
      <DashboardVsDecision />
      <ReportOpen />
      <WordFromRoom />
      <CloseCTA onCTA={onCTA} />
      <Footer />
    </div>
  );
}

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