/* eslint-disable */
const { useState, useEffect } = React;

// Resolve a real URL path to a logical route.
//   /                              -> home (video banner)
//   /about                         -> about
//   /collaboration                 -> collaboration overview
//   /collaboration/<audience>      -> audience page (brands, talents, facilities, investors, right-holders)
//   /projects                      -> projects listing (hidden from nav, still routable)
//   /projects/<slug>               -> case-study detail
//   /contact                       -> contact + inquiry form
function resolveRoute(pathname) {
  const clean = (pathname || "/").replace(/\/+$/, "") || "/";
  if (clean === "/") return { page: "home" };
  const seg = clean.replace(/^\//, "").split("/");
  switch (seg[0]) {
    case "about":         return seg[1] === "v2" ? { page: "aboutV2" } : { page: "about" };
    case "collaboration":
      if (seg[1] === "v2") return { page: "collabV2" };
      return seg[1] ? { page: "collabAud", aud: seg[1] } : { page: "collab" };
    case "projects":
      if (seg[1] === "v2") return { page: "projectsV2" };
      return seg[1] ? { page: "case", slug: seg[1] } : { page: "projects" };
    case "our-work":      return seg[1] ? { page: "case", slug: seg[1] } : { page: "projects" }; // legacy
    case "insights":
      if (seg[1] === "v2") return { page: "insightsV2" };
      if (seg[1] === "tag" && seg[2]) return { page: "insights", tag: decodeURIComponent(seg[2]) };
      if (seg[1] && seg[2] === "v2") return { page: "articleV2", slug: seg[1] };
      return seg[1] ? { page: "article", slug: seg[1] } : { page: "insights" };
    case "career":        return seg[1] === "v2" ? { page: "careerV2" } : { page: "career" };
    case "contact":       return seg[1] === "v2" ? { page: "contactV2" } : { page: "contact" };
    case "start":         return { page: "contact" }; // consolidated into Contact
    case "v9":            return { page: "oldhome" };  // previous homepage design, archived here
    case "v1a":           return { page: "homeV1a" };  // current home archived (contained banner)
    case "v2":            return { page: "homeV2" };   // homepage copy with hidden sections shown
    case "v1b":           return { page: "homeV1b" };  // homepage with a video banner
    default:              return { page: "home" };
  }
}

// ---- Subtle ink-blue cursor (home route, desktop, motion-on only) ----
// Returns a teardown fn, or null when it declines to run (native cursor kept).
function initBlueCursor() {
  const fine = window.matchMedia("(hover: hover) and (pointer: fine)");
  const reduce = window.matchMedia("(prefers-reduced-motion: reduce)");
  if (!fine.matches || reduce.matches) return null;

  const ring = document.createElement("div"); ring.className = "cur-ring";
  const dot = document.createElement("div"); dot.className = "cur-dot";
  document.body.appendChild(ring); document.body.appendChild(dot);
  document.body.classList.add("cursor-custom");

  let mx = window.innerWidth / 2, my = window.innerHeight / 2, rx = mx, ry = my, shown = false, raf = 0;
  const HOVER = "a, button, [role=button], .a9, .v9-card, .v9-row, .txt-link";

  const onMove = (e) => {
    mx = e.clientX; my = e.clientY;
    dot.style.transform = "translate(" + mx + "px," + my + "px)";
    if (!shown) { shown = true; ring.style.opacity = "1"; dot.style.opacity = "1"; }
  };
  const onOver = (e) => { if (e.target && e.target.closest && e.target.closest(HOVER)) { ring.classList.add("is-hover"); dot.classList.add("is-hover"); } };
  const onOut = (e) => { if (e.target && e.target.closest && e.target.closest(HOVER)) { ring.classList.remove("is-hover"); dot.classList.remove("is-hover"); } };
  const onDown = () => ring.classList.add("is-down");
  const onUp = () => ring.classList.remove("is-down");
  const onLeave = () => { ring.style.opacity = "0"; dot.style.opacity = "0"; };
  const onEnter = () => { if (shown) { ring.style.opacity = "1"; dot.style.opacity = "1"; } };

  window.addEventListener("mousemove", onMove);
  document.addEventListener("mouseover", onOver);
  document.addEventListener("mouseout", onOut);
  window.addEventListener("mousedown", onDown);
  window.addEventListener("mouseup", onUp);
  document.addEventListener("mouseleave", onLeave);
  document.addEventListener("mouseenter", onEnter);

  const loop = () => {
    rx += (mx - rx) * 0.18; ry += (my - ry) * 0.18;
    ring.style.transform = "translate(" + rx + "px," + ry + "px)";
    raf = requestAnimationFrame(loop);
  };
  loop();

  return () => {
    cancelAnimationFrame(raf);
    window.removeEventListener("mousemove", onMove);
    document.removeEventListener("mouseover", onOver);
    document.removeEventListener("mouseout", onOut);
    window.removeEventListener("mousedown", onDown);
    window.removeEventListener("mouseup", onUp);
    document.removeEventListener("mouseleave", onLeave);
    document.removeEventListener("mouseenter", onEnter);
    ring.remove(); dot.remove();
    document.body.classList.remove("cursor-custom");
  };
}

function App() {
  const [route, setRoute] = useState(() => resolveRoute(window.location.pathname));

  useEffect(() => {
    const onPop = () => setRoute(resolveRoute(window.location.pathname));
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);

  const navigate = (path) => {
    if (window.location.pathname !== path) window.history.pushState({}, "", path);
    setRoute(resolveRoute(path));
    window.scrollTo({ top: 0, behavior: "instant" });
  };
  const go = (id) => navigate(PATH(id));
  const goPath = (path) => navigate(path);                  // direct path (audience pages, case slugs)
  const openCase = (slug) => navigate("/projects/" + slug);

  const { page, slug, aud, tag } = route;

  // The editorial home (v9 design) uses a paper/ink nav; scope those overrides
  // to the home route only so other pages keep the navy nav.
  const isHome = page === "home" || page === "homeV1a" || page === "homeV2" || page === "homeV1b";
  useEffect(() => {
    document.body.classList.toggle("v9home", isHome);
  }, [isHome]);

  // Custom cursor rides with the editorial home only.
  useEffect(() => {
    if (!isHome) return;
    const teardown = initBlueCursor();
    return teardown || undefined;
  }, [isHome]);

  let Page;
  if (page === "home") Page = <HomeV9Page onGo={go} onPath={goPath} fullBleedHero />;
  else if (page === "homeV1a") Page = <HomeV9Page onGo={go} onPath={goPath} />;
  else if (page === "homeV2") Page = <HomeV9Page onGo={go} onPath={goPath} fullBleedHero />;
  else if (page === "homeV1b") Page = <HomeV9Page onGo={go} onPath={goPath} fullBleedHero videoHero />;
  else if (page === "oldhome") Page = <Home onGo={go} onPath={goPath} onOpenCase={openCase} />;
  else if (page === "career") Page = <Career onGo={go} onPath={goPath} />;
  else if (page === "about") Page = <About onGo={go} onPath={goPath} />;
  else if (page === "aboutV2") Page = <AboutV2 onGo={go} onPath={goPath} />;
  else if (page === "collabV2") Page = <CollaborationV2 onGo={go} onPath={goPath} />;
  else if (page === "projectsV2") Page = <ProjectsV2 onGo={go} onPath={goPath} onOpenCase={openCase} />;
  else if (page === "insightsV2") Page = <InsightsV2 onGo={go} onPath={goPath} />;
  else if (page === "articleV2") Page = <ArticleV2 slug={slug} onGo={go} onPath={goPath} />;
  else if (page === "careerV2") Page = <CareerV2 onGo={go} onPath={goPath} />;
  else if (page === "contactV2") Page = <ContactV2 onGo={go} onPath={goPath} />;
  else if (page === "collab") Page = <Collaboration onGo={go} onPath={goPath} />;
  else if (page === "collabAud") Page = <CollaborationAudience aud={aud} onGo={go} onPath={goPath} />;
  else if (page === "projects") Page = <Projects onGo={go} onPath={goPath} onOpenCase={openCase} />;
  else if (page === "case") Page = <CaseStudyPage slug={slug} onGo={go} onPath={goPath} onOpenCase={openCase} />;
  else if (page === "insights") Page = <Insights onGo={go} onPath={goPath} tag={tag} />;
  else if (page === "article") Page = <ArticlePage slug={slug} onGo={go} onPath={goPath} />;
  else if (page === "contact") Page = <Contact onGo={go} onPath={goPath} />;
  else Page = <HomeV9Page onGo={go} onPath={goPath} />;

  const activeId = (page === "collabAud") ? "collab"
    : (page === "article") ? "insights"
    : (page === "oldhome" || page === "homeV1a" || page === "homeV2" || page === "homeV1b") ? "home"
    : (page === "aboutV2") ? "about"
    : (page === "collabV2") ? "collab"
    : (page === "insightsV2") ? "insights"
    : (page === "articleV2") ? "insights"
    : (page === "careerV2") ? "career"
    : (page === "contactV2") ? "contact"
    : page;

  return (
    <>
      <Nav page={activeId} onGo={go} variant="transparent" />
      <main key={page + (slug || aud || tag || "")}>{Page}</main>
      <WhatsAppFab />
    </>
  );
}

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