/* App root — routing. */
const { useState, useEffect, useLayoutEffect, useCallback } = React;

function scrollPageTop() {
  window.scrollTo(0, 0);
  document.documentElement.scrollTop = 0;
  document.body.scrollTop = 0;
}

function App() {
  const [view, setView] = useState("home");

  useEffect(() => {
    if ("scrollRestoration" in history) history.scrollRestoration = "manual";
  }, []);

  const go = useCallback((v) => {
    if (v !== view) setView(v);
    else scrollPageTop();
  }, [view]);

  useLayoutEffect(() => {
    scrollPageTop();
  }, [view]);

  useEffect(() => {
    scrollPageTop();
    const t = setTimeout(scrollPageTop, 0);
    let raf = requestAnimationFrame(() => {
      raf = requestAnimationFrame(scrollPageTop);
    });
    return () => {
      clearTimeout(t);
      cancelAnimationFrame(raf);
    };
  }, [view]);

  useEffect(() => {
    if (view !== "home") return;
    let raf = 0;
    const sync = () => {
      const trust = document.querySelector("main .trust");
      const hero = document.querySelector("header.hero");
      if (!trust || !hero) return;
      const desktop = window.matchMedia("(min-width:981px)").matches;
      const vv = window.visualViewport;
      const viewportH = vv && vv.height ? vv.height : window.innerHeight;
      const fill = Math.max(0, Math.round(viewportH - trust.offsetHeight));
      const px = fill + "px";
      const vw = window.innerWidth;
      const portraitEls = document.querySelectorAll(".hero-portrait");

      if (!desktop) {
        document.documentElement.style.removeProperty("--hero-fill");
        document.documentElement.style.removeProperty("--hero-portrait-max");
        portraitEls.forEach((el) => { el.style.width = ""; });
        hero.style.height = "";
        hero.style.minHeight = "";
        hero.style.maxHeight = "";
        return;
      }

      document.documentElement.style.setProperty("--hero-fill", px);
      // Cap portrait to a desktop design width so 2K/4K/8K don't widen the hero
      const layoutVw = Math.min(vw, 1440);
      const portraitFill = Math.max(0, Math.round(window.innerHeight - trust.offsetHeight));
      const portraitMax = layoutVw <= 1180
        ? Math.min(400, layoutVw * 0.4, (portraitFill - 110) * 0.68)
        : Math.min(520, layoutVw * 0.38, (portraitFill - 110) * 0.72);
      if (portraitMax > 0) {
        const w = Math.round(portraitMax) + "px";
        document.documentElement.style.setProperty("--hero-portrait-max", w);
        portraitEls.forEach((el) => { el.style.width = w; });
      }
      hero.style.height = px;
      hero.style.minHeight = px;
      hero.style.maxHeight = px;
    };
    const schedule = () => {
      if (raf) cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        raf = 0;
        sync();
      });
    };
    sync();
    requestAnimationFrame(sync);
    window.setTimeout(sync, 50);
    window.setTimeout(sync, 300);
    window.addEventListener("resize", schedule, { passive: true });
    window.addEventListener("orientationchange", schedule);
    const vv = window.visualViewport;
    if (vv) vv.addEventListener("resize", schedule, { passive: true });
    if (document.fonts) document.fonts.ready.then(sync);
    return () => {
      if (raf) cancelAnimationFrame(raf);
      window.removeEventListener("resize", schedule);
      window.removeEventListener("orientationchange", schedule);
      if (vv) vv.removeEventListener("resize", schedule);
      const hero = document.querySelector("header.hero");
      if (hero) {
        hero.style.height = "";
        hero.style.minHeight = "";
        hero.style.maxHeight = "";
      }
      document.documentElement.style.removeProperty("--hero-fill");
      document.documentElement.style.removeProperty("--hero-portrait-max");
      document.querySelectorAll(".hero-portrait").forEach((el) => { el.style.width = ""; });
    };
  }, [view]);

  let Page;
  switch (view) {
    case "about": Page = <About go={go} />; break;
    case "speciality": Page = <Speciality go={go} />; break;
    case "why-us": Page = <WhyUs go={go} />; break;
    case "media": Page = <Media go={go} />; break;
    case "stories": Page = <PatientStories go={go} />; break;
    case "maps": Page = <Maps go={go} />; break;
    case "booking": Page = <Booking go={go} />; break;
    case "privacy": Page = <Privacy go={go} />; break;
    default: Page = <Home go={go} />;
  }

  return (
    <React.Fragment>
      <Header view={view} go={go} />
      {Page}
      <Footer go={go} />
      <ScrollAssist go={go} view={view} />
      <MobileBottomNav view={view} go={go} />
    </React.Fragment>
  );
}

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

/* Seamless reveal: keep the boot splash up until fonts + hero imagery are
   actually painted, then fade it out (with a hard fallback so it never hangs). */
(function dismissSplash() {
  const splash = document.getElementById("boot-splash");
  if (!splash) return;
  let done = false;
  const hide = () => {
    if (done) return;
    done = true;
    splash.classList.add("hide");
    setTimeout(() => { try { splash.remove(); } catch (_) {} }, 650);
  };
  const waitImg = (src) =>
    new Promise((res) => {
      const im = new Image();
      im.onload = im.onerror = () => res();
      im.src = src;
      setTimeout(res, 2500);
    });
  const fontsReady = document.fonts
    ? Promise.race([document.fonts.ready, new Promise((r) => setTimeout(r, 1500))])
    : Promise.resolve();
  const ready = Promise.all([
    fontsReady,
    waitImg("hero-decor.png"),
    waitImg("dr-reddy.jpg?v=286"),
    waitImg("dr-reddy-hero.webp?v=232"),
    waitImg("hero-carousel-team.webp?v=164"),
  ]);
  ready.then(() => requestAnimationFrame(() => requestAnimationFrame(hide)));
  // If React painted the app, don't wait on slow assets.
  const mo = new MutationObserver(() => {
    if (document.getElementById("root")?.querySelector(".hdr, .hero")) hide();
  });
  mo.observe(document.getElementById("root") || document.body, { childList: true, subtree: true });
  setTimeout(hide, 2500); // hard fallback — never leave splash up
})();