/* global React, Header, Hero, Intro, About, Services, WhyMiami, Neighborhoods, Process, Instagram, Contact, Footer */

/* Client-side render: the browser's native "#hash" jump happens before the
   sections exist, so we re-align after mount while the layout settles. */
function useHashScroll() {
  React.useEffect(() => {
    const id = decodeURIComponent(location.hash.slice(1));
    if (!id) return;
    let cancelled = false;
    const align = () => {
      if (cancelled) return;
      const el = document.getElementById(id);
      if (el) el.scrollIntoView({ behavior: "instant", block: "start" });
    };
    const stop = () => {
      cancelled = true; ro.disconnect(); clearTimeout(timer);
      ["wheel", "touchstart", "keydown", "pointerdown"].forEach((ev) => window.removeEventListener(ev, stop));
    };
    align();
    const ro = new ResizeObserver(align);
    ro.observe(document.documentElement);
    if (document.fonts && document.fonts.ready) document.fonts.ready.then(align);
    window.addEventListener("load", align);
    ["wheel", "touchstart", "keydown", "pointerdown"].forEach((ev) => window.addEventListener(ev, stop, { passive: true }));
    const timer = setTimeout(stop, 3000);
    const onHash = () => {
      const target = document.getElementById(decodeURIComponent(location.hash.slice(1)));
      if (target) target.scrollIntoView({ behavior: "smooth", block: "start" });
    };
    window.addEventListener("hashchange", onHash);
    return () => { stop(); window.removeEventListener("load", align); window.removeEventListener("hashchange", onHash); };
  }, []);
}

/* Fade-up reveal for elements tagged [data-reveal] */
function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll("[data-reveal]");
    if (!("IntersectionObserver" in window)) { els.forEach((el) => el.classList.add("is-in")); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((en) => { if (en.isIntersecting) { en.target.classList.add("is-in"); io.unobserve(en.target); } });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

function App() {
  useHashScroll();
  useReveal();
  return (
    <div className="site">
      <Header />
      <Hero />
      <Intro />
      <About />
      <Services />
      <WhyMiami />
      <Neighborhoods />
      <Process />
      <Instagram />
      <Contact />
      <Footer />
    </div>
  );
}

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